feat: add sample 12

src/components/samples-preview/sample-12.tsx

@@ -0,0 +1,35 @@
+import { css } from "@root/styled-system/css";
+import { stack } from "@root/styled-system/patterns";
+import { slider } from "@root/styled-system/recipes";
+
+import { applyStyle, cssFgVar } from "./utils";
+
+const classes = {
+  root: stack({ gap: "4", p: "6", rounded: "xl" }),
+  progress: slider(),
+  heading: css({ textStyle: "body-lg", fontWeight: "500" }),
+  percentage: css({ textStyle: "body-sm" }),
+  content: css({ display: "flex", alignItems: "center", justifyContent: "space-between" }),
+};
+
+export function Sample12() {
+  return (
+    <article className={classes.root} style={{ ...applyStyle("bg"), ...applyStyle("color") }}>
+      <div className={classes.content}>
+        <p className={classes.heading}>Project Progress</p>
+        <span className={classes.percentage}>80%</span>
+      </div>
+      <div className={classes.progress.root}>
+        <div
+          className={`${classes.progress.track} ${css({ height: "2!" })}`}
+          style={applyStyle("bg", { fromVar: cssFgVar, alpha: "0.16" })}
+        >
+          <div
+            className={classes.progress.range}
+            style={{ width: "80%", ...applyStyle("bg", { fromVar: cssFgVar, alpha: "1" }) }}
+          />
+        </div>
+      </div>
+    </article>
+  );
+}

src/components/samples-preview/sample-preview.stories.tsx

@@ -13,6 +13,7 @@ import { Sample8 } from "./sample-8";
 import { Sample9 } from "./sample-9";
 import { Sample10 } from "./sample-10";
 import { Sample11 } from "./sample-11";
+import { Sample12 } from "./sample-12";
 import { bgVar, fgVar } from "./utils";
 
 export default {
@@ -89,3 +90,8 @@ export const Sample_11: Story = {
   name: "Sample 11",
   render: () => <Sample11 />,
 };
+
+export const Sample_12: Story = {
+  name: "Sample 12",
+  render: () => <Sample12 />,
+};