@altimateai/ui-components 0.0.64 → 0.0.65

package/dist/stateDiagram-FKZM4ZOC.js

@@ -1,15 +1,15 @@
 import { s as R, S as N, a as W } from "./chunk-DI55MBZ5.js";
-import { $ as f, a5 as t, ab as S, ac as P, a7 as z, aH as C, aI as U, aC as _, ak as F } from "./CoachForm.js";
+import { a1 as f, a7 as t, ad as S, ae as P, a9 as z, aJ as U, aK as _, aE as C, am as F } from "./CoachForm.js";
 import { s as H } from "./redux-toolkit.modern.js";
-import { G as O } from "./graph.js";
-import { l as J } from "./layout.js";
-var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit).attr("cy", t().state.padding + t().state.sizeUnit), "drawStartState"), D = /* @__PURE__ */ f((e) => e.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", t().state.textHeight).attr("class", "divider").attr("x2", t().state.textHeight * 2).attr("y1", 0).attr("y2", 0), "drawDivider"), I = /* @__PURE__ */ f((e, i) => {
+import { G as J } from "./graph.js";
+import { l as O } from "./layout.js";
+var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit).attr("cy", t().state.padding + t().state.sizeUnit), "drawStartState"), D = /* @__PURE__ */ f((e) => e.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", t().state.textHeight).attr("class", "divider").attr("x2", t().state.textHeight * 2).attr("y1", 0).attr("y2", 0), "drawDivider"), Y = /* @__PURE__ */ f((e, i) => {
   const d = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 2 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.id), c = d.node().getBBox();
   return e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", c.width + 2 * t().state.padding).attr("height", c.height + 2 * t().state.padding).attr("rx", t().state.radius), d;
-}, "drawSimpleState"), Y = /* @__PURE__ */ f((e, i) => {
+}, "drawSimpleState"), I = /* @__PURE__ */ f((e, i) => {
   const d = /* @__PURE__ */ f(function(g, B, m) {
-    const E = g.append("tspan").attr("x", 2 * t().state.padding).text(B);
-    m || E.attr("dy", t().state.textHeight);
+    const v = g.append("tspan").attr("x", 2 * t().state.padding).text(B);
+    m || v.attr("dy", t().state.textHeight);
   }, "addTspan"), n = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 1.3 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.descriptions[0]).node().getBBox(), l = n.height, x = e.append("text").attr("x", t().state.padding).attr(
     "y",
     l + t().state.padding * 0.4 + t().state.dividerMargin + t().state.textHeight
@@ -44,14 +44,14 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
 ).attr(
   "cy",
   t().state.padding + t().state.sizeUnit + t().state.miniPadding
-), e.append("circle").attr("class", "end-state-inner").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit + 2).attr("cy", t().state.padding + t().state.sizeUnit + 2)), "drawEndState"), Z = /* @__PURE__ */ f((e, i) => {
+), e.append("circle").attr("class", "end-state-inner").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit + 2).attr("cy", t().state.padding + t().state.sizeUnit + 2)), "drawEndState"), K = /* @__PURE__ */ f((e, i) => {
   let d = t().state.forkWidth, c = t().state.forkHeight;
   if (i.parentId) {
     let n = d;
     d = c, c = n;
   }
   return e.append("rect").style("stroke", "black").style("fill", "black").attr("width", d).attr("height", c).attr("x", t().state.padding).attr("y", t().state.padding);
-}, "drawForkJoinState"), j = /* @__PURE__ */ f((e, i, d, c) => {
+}, "drawForkJoinState"), Z = /* @__PURE__ */ f((e, i, d, c) => {
   let n = 0;
   const l = c.append("text");
   l.style("text-anchor", "start"), l.attr("class", "noteText");
@@ -71,9 +71,9 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     }
   }
   return { textWidth: l.node().getBBox().width, textHeight: n };
-}, "_drawLongText"), K = /* @__PURE__ */ f((e, i) => {
+}, "_drawLongText"), j = /* @__PURE__ */ f((e, i) => {
   i.attr("class", "state-note");
-  const d = i.append("rect").attr("x", 0).attr("y", t().state.padding), c = i.append("g"), { textWidth: n, textHeight: l } = j(e, 0, 0, c);
+  const d = i.append("rect").attr("x", 0).attr("y", t().state.padding), c = i.append("g"), { textWidth: n, textHeight: l } = Z(e, 0, 0, c);
   return d.attr("height", l + 2 * t().state.noteMargin), d.attr("width", n + t().state.noteMargin * 2), d;
 }, "drawNote"), L = /* @__PURE__ */ f(function(e, i) {
   const d = i.id, c = {
@@ -82,7 +82,7 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     width: 0,
     height: 0
   }, n = e.append("g").attr("id", d).attr("class", "stateGroup");
-  i.type === "start" && X(n), i.type === "end" && q(n), (i.type === "fork" || i.type === "join") && Z(n, i), i.type === "note" && K(i.note.text, n), i.type === "divider" && D(n), i.type === "default" && i.descriptions.length === 0 && I(n, i), i.type === "default" && i.descriptions.length > 0 && Y(n, i);
+  i.type === "start" && X(n), i.type === "end" && q(n), (i.type === "fork" || i.type === "join") && K(n, i), i.type === "note" && j(i.note.text, n), i.type === "divider" && D(n), i.type === "default" && i.descriptions.length === 0 && Y(n, i), i.type === "default" && i.descriptions.length > 0 && I(n, i);
   const l = n.node().getBBox();
   return c.width = l.width + 2 * t().state.padding, c.height = l.height + 2 * t().state.padding, c;
 }, "drawState"), A = 0, Q = /* @__PURE__ */ f(function(e, i, d) {
@@ -99,23 +99,23 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     }
   }, "getRelationType");
   i.points = i.points.filter((s) => !Number.isNaN(s.y));
-  const n = i.points, l = C().x(function(s) {
+  const n = i.points, l = U().x(function(s) {
     return s.x;
   }).y(function(s) {
     return s.y;
-  }).curve(U), x = e.append("path").attr("d", l(n)).attr("id", "edge" + A).attr("class", "transition");
+  }).curve(_), x = e.append("path").attr("d", l(n)).attr("id", "edge" + A).attr("class", "transition");
   let a = "";
-  if (t().state.arrowMarkerAbsolute && (a = _(!0)), x.attr(
+  if (t().state.arrowMarkerAbsolute && (a = C(!0)), x.attr(
     "marker-end",
     "url(" + a + "#" + c(N.relationType.DEPENDENCY) + "End)"
   ), d.title !== void 0) {
     const s = e.append("g").attr("class", "stateLabel"), { x: w, y: p } = F.calcLabelPosition(i.points), o = z.getRows(d.title);
     let g = 0;
     const B = [];
-    let m = 0, E = 0;
+    let m = 0, v = 0;
     for (let u = 0; u <= o.length; u++) {
       const h = s.append("text").attr("text-anchor", "middle").text(o[u]).attr("x", w).attr("y", p + g), y = h.node().getBBox();
-      m = Math.max(m, y.width), E = Math.min(E, y.x), S.info(y.x, w, p + g), g === 0 && (g = h.node().getBBox().height, S.info("Title height", g, p)), B.push(h);
+      m = Math.max(m, y.width), v = Math.min(v, y.x), S.info(y.x, w, p + g), g === 0 && (g = h.node().getBBox().height, S.info("Title height", g, p)), B.push(h);
     }
     let k = g * o.length;
     if (o.length > 1) {
@@ -146,7 +146,7 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
     `${o.x - b.padding}  ${o.y - b.padding} ` + g + " " + B
   );
 }, "draw"), at = /* @__PURE__ */ f((e) => e ? e.length * b.fontSizeFactor : 1, "getLabelWidth"), G = /* @__PURE__ */ f((e, i, d, c, n, l, x) => {
-  const a = new O({
+  const a = new J({
     compound: !0,
     multigraph: !0
   });
@@ -192,8 +192,8 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
       h = G(u.doc, y, u.id, !c, n, l, x);
       {
         y = $(y, u, c);
-        let v = y.node().getBBox();
-        h.width = v.width, h.height = v.height + b.padding / 2, T[u.id] = { y: b.compositTitleSize };
+        let E = y.node().getBBox();
+        h.width = E.width, h.height = E.height + b.padding / 2, T[u.id] = { y: b.compositTitleSize };
       }
     } else
       h = L(i, u, a);
@@ -203,8 +203,8 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
         id: u.id + "-note",
         note: u.note,
         type: "note"
-      }, v = L(i, y, a);
-      u.note.position === "left of" ? (a.setNode(h.id + "-note", v), a.setNode(h.id, h)) : (a.setNode(h.id, h), a.setNode(h.id + "-note", v)), a.setParent(h.id, h.id + "-group"), a.setParent(h.id + "-note", h.id + "-group");
+      }, E = L(i, y, a);
+      u.note.position === "left of" ? (a.setNode(h.id + "-note", E), a.setNode(h.id, h)) : (a.setNode(h.id, h), a.setNode(h.id + "-note", E)), a.setParent(h.id, h.id + "-group"), a.setParent(h.id + "-note", h.id + "-group");
     } else
       a.setNode(h.id, h);
   }
@@ -222,7 +222,7 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
       },
       "id" + B
     );
-  }), J(a), S.debug("Graph after layout", a.nodes());
+  }), O(a), S.debug("Graph after layout", a.nodes());
   const m = i.node();
   a.nodes().forEach(function(r) {
     r !== void 0 && a.node(r) !== void 0 ? (S.warn("Node " + r + ": " + JSON.stringify(a.node(r))), n.select("#" + m.id + " #" + r).attr(
@@ -230,21 +230,21 @@ var X = /* @__PURE__ */ f((e) => e.append("circle").attr("class", "start-state")
       "translate(" + (a.node(r).x - a.node(r).width / 2) + "," + (a.node(r).y + (T[r] ? T[r].y : 0) - a.node(r).height / 2) + " )"
     ), n.select("#" + m.id + " #" + r).attr("data-x-shift", a.node(r).x - a.node(r).width / 2), l.querySelectorAll("#" + m.id + " #" + r + " .divider").forEach((h) => {
       const y = h.parentElement;
-      let v = 0, M = 0;
-      y && (y.parentElement && (v = y.parentElement.getBBox().width), M = parseInt(y.getAttribute("data-x-shift"), 10), Number.isNaN(M) && (M = 0)), h.setAttribute("x1", 0 - M + 8), h.setAttribute("x2", v - M - 8);
+      let E = 0, M = 0;
+      y && (y.parentElement && (E = y.parentElement.getBBox().width), M = parseInt(y.getAttribute("data-x-shift"), 10), Number.isNaN(M) && (M = 0)), h.setAttribute("x1", 0 - M + 8), h.setAttribute("x2", E - M - 8);
     })) : S.debug("No Node " + r + ": " + JSON.stringify(a.node(r)));
   });
-  let E = m.getBBox();
+  let v = m.getBBox();
   a.edges().forEach(function(r) {
     r !== void 0 && a.edge(r) !== void 0 && (S.debug("Edge " + r.v + " -> " + r.w + ": " + JSON.stringify(a.edge(r))), Q(i, a.edge(r), a.edge(r).relation));
-  }), E = m.getBBox();
+  }), v = m.getBBox();
   const k = {
     id: d || "root",
     label: d || "root",
     width: 0,
     height: 0
   };
-  return k.width = E.width + 2 * b.padding, k.height = E.height + 2 * b.padding, S.debug("Doc rendered", k, a), k;
+  return k.width = v.width + 2 * b.padding, k.height = v.height + 2 * b.padding, S.debug("Doc rendered", k, a), k;
 }, "renderDoc"), it = {
   setConf: V,
   draw: et

package/dist/stateDiagram-v2-4FDKWEC3.js

@@ -1,10 +1,10 @@
-import { s as t, S as a, b as r, a as s } from "./chunk-DI55MBZ5.js";
-import { $ as i } from "./CoachForm.js";
+import { s as a, S as t, b as r, a as s } from "./chunk-DI55MBZ5.js";
+import { a1 as i } from "./CoachForm.js";
 import "./redux-toolkit.modern.js";
 var l = {
-  parser: t,
+  parser: a,
   get db() {
-    return new a(2);
+    return new t(2);
   },
   renderer: r,
   styles: s,

package/dist/storybook/Carousel.stories.tsx

@@ -0,0 +1,274 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../shadcn";
+import { Card, CardContent } from "../card/Card";
+
+const meta: Meta<typeof Carousel> = {
+  title: "Shadcn/Components/Carousel",
+  component: Carousel,
+};
+
+export default meta;
+type Story = StoryObj<typeof Carousel>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-xs">
+        <Carousel>
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const WithMultipleItems: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-sm">
+        <Carousel
+          opts={{
+            align: "start",
+          }}
+        >
+          <CarouselContent>
+            {Array.from({ length: 10 }).map((_, index) => (
+              <CarouselItem key={index} className="al-basis-1/3">
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-2xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const WithLoop: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-xs">
+        <Carousel
+          opts={{
+            loop: true,
+          }}
+        >
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <Carousel orientation="vertical" className="al-w-full al-max-w-xs">
+        <CarouselContent className="al-h-[200px]">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="al-p-1">
+                <Card>
+                  <CardContent className="al-flex al-items-center al-justify-center al-p-6">
+                    <span className="al-text-3xl al-font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+};
+
+export const WithVariableWidths: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-md">
+        <Carousel
+          opts={{
+            align: "start",
+          }}
+        >
+          <CarouselContent>
+            {Array.from({ length: 8 }).map((_, index) => (
+              <CarouselItem
+                key={index}
+                className={index % 2 === 0 ? "al-basis-1/2" : "al-basis-1/3"}
+              >
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-2xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const Images: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-lg">
+        <Carousel>
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-video al-items-center al-justify-center al-p-0">
+                      <div className="al-flex al-h-full al-w-full al-items-center al-justify-center al-bg-muted">
+                        <span className="al-text-2xl al-font-semibold al-text-muted-foreground">
+                          Image {index + 1}
+                        </span>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const WithContent: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-md">
+        <Carousel>
+          <CarouselContent>
+            {[
+              { title: "First Slide", description: "This is the first slide content" },
+              { title: "Second Slide", description: "This is the second slide content" },
+              { title: "Third Slide", description: "This is the third slide content" },
+              { title: "Fourth Slide", description: "This is the fourth slide content" },
+              { title: "Fifth Slide", description: "This is the fifth slide content" },
+            ].map((slide, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-flex-col al-items-center al-justify-center al-space-y-2 al-p-6">
+                      <h3 className="al-text-2xl al-font-bold">{slide.title}</h3>
+                      <p className="al-text-center al-text-muted-foreground">{slide.description}</p>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const CustomButtonVariant: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-xs">
+        <Carousel>
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious variant="default" />
+          <CarouselNext variant="default" />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};
+
+export const AutoplayExample: Story = {
+  render: () => (
+    <div className="al-flex al-items-center al-justify-center al-w-full al-h-screen">
+      <div className="al-w-full al-max-w-xs">
+        <Carousel
+          opts={{
+            align: "start",
+            loop: true,
+          }}
+        >
+          <CarouselContent>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <CarouselItem key={index}>
+                <div className="al-p-1">
+                  <Card>
+                    <CardContent className="al-flex al-aspect-square al-items-center al-justify-center al-p-6">
+                      <span className="al-text-4xl al-font-semibold">{index + 1}</span>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+      </div>
+    </div>
+  ),
+};

package/dist/storybook/TagsInput.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
+import React, { useState } from "react";
 import {
   TagsInput,
   TagsInputLabel,
@@ -226,3 +226,36 @@ export const Interactive: Story = {
     );
   },
 };
+
+export const WithSuggestions: Story = {
+  render: () => {
+    const [tags, setTags] = React.useState<string[]>([]);
+    return (
+      <div className="al-space-y-4 al-p-2">
+        <TagsInput
+          value={tags}
+          onValueChange={setTags}
+          suggestions={["React", "Vue", "Angular", "Svelte", "TypeScript", "JavaScript"]}
+          onSuggestionSelect={suggestion => {
+            setTags([...tags, suggestion]);
+          }}
+        >
+          <TagsInputLabel>With Suggestions Demo</TagsInputLabel>
+          <TagsInputList>
+            {tags.map(tag => (
+              <TagsInputItem key={tag} value={tag}>
+                {tag}
+              </TagsInputItem>
+            ))}
+            <TagsInputInput placeholder="Type and press Enter..." />
+            <TagsInputClear />
+          </TagsInputList>
+        </TagsInput>
+
+        <div className="al-text-sm al-text-muted-foreground">
+          <strong>Current tags:</strong> {tags.length > 0 ? tags.join(", ") : "None"}
+        </div>
+      </div>
+    );
+  },
+};

package/dist/storybook/Toggle.stories.tsx

@@ -0,0 +1,106 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Toggle } from "../shadcn";
+import { IconBold, IconItalic, IconUnderline, IconAlignLeft } from "@tabler/icons-react";
+
+const meta: Meta<typeof Toggle> = {
+  title: "Shadcn/Components/Toggle",
+  component: Toggle,
+  args: {
+    "aria-label": "Toggle demo",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  render: () => (
+    <Toggle>
+      <IconBold className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <Toggle>
+      <IconBold className="al-size-4" />
+      <span>Bold</span>
+    </Toggle>
+  ),
+};
+
+export const Outline: Story = {
+  render: () => (
+    <Toggle variant="outline">
+      <IconItalic className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Toggle disabled>
+      <IconUnderline className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const DisabledPressed: Story = {
+  render: () => (
+    <Toggle disabled defaultPressed>
+      <IconBold className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Toggle size="sm">
+      <IconBold className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <Toggle size="lg">
+      <IconBold className="al-size-4" />
+    </Toggle>
+  ),
+};
+
+export const FormattingToolbar: Story = {
+  render: () => (
+    <div className="al-flex al-gap-2">
+      <Toggle aria-label="Toggle bold">
+        <IconBold className="al-size-4" />
+      </Toggle>
+      <Toggle aria-label="Toggle italic">
+        <IconItalic className="al-size-4" />
+      </Toggle>
+      <Toggle aria-label="Toggle underline">
+        <IconUnderline className="al-size-4" />
+      </Toggle>
+      <Toggle aria-label="Toggle align left">
+        <IconAlignLeft className="al-size-4" />
+      </Toggle>
+    </div>
+  ),
+};
+
+export const OutlineVariants: Story = {
+  render: () => (
+    <div className="al-flex al-gap-2">
+      <Toggle variant="outline" size="sm" aria-label="Toggle bold small">
+        <IconBold className="al-size-4" />
+      </Toggle>
+      <Toggle variant="outline" aria-label="Toggle bold default">
+        <IconBold className="al-size-4" />
+      </Toggle>
+      <Toggle variant="outline" size="lg" aria-label="Toggle bold large">
+        <IconBold className="al-size-4" />
+      </Toggle>
+    </div>
+  ),
+};