@clubmed/trident-ui 2.0.0-beta.4 → 2.0.0-beta.40

package/examples/dropdown-demo.js

@@ -30,7 +30,15 @@ function a() {
 					height: "40px"
 				}
 			}),
-			/* @__PURE__ */ r(e, { children: "Logout" })
+			/* @__PURE__ */ r("a", {
+				href: "/account",
+				className: "text-b3 font-semibold",
+				children: "Account"
+			}),
+			/* @__PURE__ */ r(e, {
+				"data-dropdown-item": "",
+				children: "Logout"
+			})
 		]
 	});
 }

package/examples/dropdown-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-demo.js","names":[],"sources":["../../lib/examples/dropdown-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar } from '@/ui/Avatar';\nimport { Dropdown } from '@/ui/Dropdown';\nimport { Button } from '@/ui/buttons/Button';\n\nexport default function DropdownDemo() {\n  const user = { firstName: 'John', lastName: 'Doe' };\n\n  return (\n    <Dropdown aria-label=\"Open user actions\">\n      <span data-slot=\"label\" className=\"hidden md:inline text-body\">\n        {user.firstName} {user.lastName}\n      </span>\n      <Avatar\n        data-slot=\"label\"\n        alt={`${user.firstName} ${user.lastName}`}\n        className=\"w-40 h-40 cursor-pointer hover:opacity-80 transition-opacity\"\n        style={{ width: '40px', height: '40px' }}\n      />\n\n      <Button>Logout</Button>\n    </Dropdown>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAe;CACrC,IAAM,IAAO;EAAE,WAAW;EAAQ,UAAU;EAAO;AAEnD,QACE,kBAAC,GAAD;EAAU,cAAW;YAArB;GACE,kBAAC,QAAD;IAAM,aAAU;IAAQ,WAAU;cAAlC;KACG,EAAK;KAAU;KAAE,EAAK;;;GAEzB,kBAAC,GAAD;IACE,aAAU;IACV,KAAK,GAAG,EAAK,UAAU,GAAG,EAAK;IAC/B,WAAU;IACV,OAAO;KAAE,OAAO;KAAQ,QAAQ;;IAChC,CAAA;GAEF,kBAAC,GAAD,EAAA,UAAQ,UAAe,CAAA"}
+{"version":3,"file":"dropdown-demo.js","names":[],"sources":["../../lib/examples/dropdown-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar } from '@/ui/Avatar';\nimport { Dropdown } from '@/ui/Dropdown';\nimport { Button } from '@/ui/buttons/Button';\n\nexport default function DropdownDemo() {\n  const user = { firstName: 'John', lastName: 'Doe' };\n\n  return (\n    <Dropdown aria-label=\"Open user actions\">\n      <span data-slot=\"label\" className=\"hidden md:inline text-body\">\n        {user.firstName} {user.lastName}\n      </span>\n      <Avatar\n        data-slot=\"label\"\n        alt={`${user.firstName} ${user.lastName}`}\n        className=\"w-40 h-40 cursor-pointer hover:opacity-80 transition-opacity\"\n        style={{ width: '40px', height: '40px' }}\n      />\n\n      <a href=\"/account\" className=\"text-b3 font-semibold\">\n        Account\n      </a>\n      <Button data-dropdown-item=\"\">Logout</Button>\n    </Dropdown>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAe;CACrC,IAAM,IAAO;EAAE,WAAW;EAAQ,UAAU;EAAO;AAEnD,QACE,kBAAC,GAAD;EAAU,cAAW;YAArB;GACE,kBAAC,QAAD;IAAM,aAAU;IAAQ,WAAU;cAAlC;KACG,EAAK;KAAU;KAAE,EAAK;;;GAEzB,kBAAC,GAAD;IACE,aAAU;IACV,KAAK,GAAG,EAAK,UAAU,GAAG,EAAK;IAC/B,WAAU;IACV,OAAO;KAAE,OAAO;KAAQ,QAAQ;;IAChC,CAAA;GAEF,kBAAC,KAAD;IAAG,MAAK;IAAW,WAAU;cAAwB;IAEjD,CAAA;GACJ,kBAAC,GAAD;IAAQ,sBAAmB;cAAG;IAAe,CAAA"}

package/examples/elastic-height-demo.js

@@ -9,11 +9,12 @@ function i() {
 		className: "w-full max-w-md space-y-4",
 		children: [/* @__PURE__ */ n("button", {
 			onClick: () => a(!i),
-			className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700",
+			className: "rounded-md bg-ultramarine px-4 py-2 text-white hover:bg-blue-700",
 			children: i ? "Collapse" : "Expand"
 		}), /* @__PURE__ */ n(e, {
 			isExpanded: i,
 			className: "border rounded-md",
+			min: 24,
 			children: /* @__PURE__ */ r("div", {
 				className: "p-4 space-y-2",
 				children: [

package/examples/elastic-height-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"elastic-height-demo.js","names":[],"sources":["../../lib/examples/elastic-height-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ElasticHeight } from '@/ui/ElasticHeight';\n\nexport default function ElasticHeightDemo() {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-4\">\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        className=\"rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700\"\n      >\n        {isExpanded ? 'Collapse' : 'Expand'}\n      </button>\n      <ElasticHeight isExpanded={isExpanded} className=\"border rounded-md\">\n        <div className=\"p-4 space-y-2\">\n          <p className=\"font-semibold\">Expandable Content</p>\n          <p>\n            This content smoothly animates when the container expands or collapses. The\n            ElasticHeight component automatically adjusts to the height of its children.\n          </p>\n          <p>\n            Perfect for accordions, collapsible sections, and any UI element that needs smooth\n            height transitions.\n          </p>\n        </div>\n      </ElasticHeight>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAoB;CAC1C,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAM;AAEnD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,eAAe,EAAc,CAAC,EAAW;GACzC,WAAU;aAET,IAAa,aAAa;GACpB,CAAA,EACT,kBAAC,GAAD;GAA2B;GAAY,WAAU;aAC/C,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBAAgB;MAAsB,CAAA;KACnD,kBAAC,KAAD,EAAA,UAAG,4JAGC,CAAA;KACJ,kBAAC,KAAD,EAAA,UAAG,0GAGC,CAAA;;;GAEQ,CAAA,CAAA"}
+{"version":3,"file":"elastic-height-demo.js","names":[],"sources":["../../lib/examples/elastic-height-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ElasticHeight } from '@/ui/ElasticHeight';\n\nexport default function ElasticHeightDemo() {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  return (\n    <div className=\"w-full max-w-md space-y-4\">\n      <button\n        onClick={() => setIsExpanded(!isExpanded)}\n        className=\"rounded-md bg-ultramarine px-4 py-2 text-white hover:bg-blue-700\"\n      >\n        {isExpanded ? 'Collapse' : 'Expand'}\n      </button>\n      <ElasticHeight isExpanded={isExpanded} className=\"border rounded-md\" min={24}>\n        <div className=\"p-4 space-y-2\">\n          <p className=\"font-semibold\">Expandable Content</p>\n          <p>\n            This content smoothly animates when the container expands or collapses. The\n            ElasticHeight component automatically adjusts to the height of its children.\n          </p>\n          <p>\n            Perfect for accordions, collapsible sections, and any UI element that needs smooth\n            height transitions.\n          </p>\n        </div>\n      </ElasticHeight>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAoB;CAC1C,IAAM,CAAC,GAAY,KAAiB,EAAS,GAAM;AAEnD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,eAAe,EAAc,CAAC,EAAW;GACzC,WAAU;aAET,IAAa,aAAa;GACpB,CAAA,EACT,kBAAC,GAAD;GAA2B;GAAY,WAAU;GAAoB,KAAK;aACxE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBAAgB;MAAsB,CAAA;KACnD,kBAAC,KAAD,EAAA,UAAG,4JAGC,CAAA;KACJ,kBAAC,KAAD,EAAA,UAAG,0GAGC,CAAA;;;GAEQ,CAAA,CAAA"}

package/examples/frame-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-demo.js

@@ -0,0 +1,36 @@
+"use client";
+import { Frame as e } from "../ui/frame/Frame.js";
+import { FrameLabelsWrapper as t } from "../ui/frame/FrameLabelsWrapper.js";
+import { FrameTitle as n } from "../ui/frame/FrameTitle.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/examples/frame-demo.tsx
+function a() {
+	return /* @__PURE__ */ r(e, {
+		format: "horizontal",
+		className: "max-w-380",
+		image: {
+			alt: "Mountain landscape",
+			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
+		},
+		children: /* @__PURE__ */ r(t, {
+			hasImage: !0,
+			children: /* @__PURE__ */ r(n, {
+				className: "w-full justify-center text-center",
+				coverLink: !0,
+				hasImage: !0,
+				href: "#",
+				children: /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("div", {
+					className: "text-b2 font-semibold",
+					children: "Mountain Resort"
+				}), /* @__PURE__ */ r("div", {
+					className: "text-b3",
+					children: "Winter"
+				})] })
+			})
+		})
+	});
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=frame-demo.js.map

package/examples/frame-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-demo.js","names":[],"sources":["../../lib/examples/frame-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Frame } from '@/ui/frame/Frame';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\n\nexport default function FrameDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      image={{\n        alt: 'Mountain landscape',\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-center text-center\" coverLink hasImage href=\"#\">\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter</div>\n          </div>\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </Frame>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAY;AAClC,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO;GACL,KAAK;GACL,KAAK;GACN;YAED,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAoC,WAAA;IAAU,UAAA;IAAS,MAAK;cAChF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA;IACK,CAAA;GACM,CAAA;EACf,CAAA"}

package/examples/frame-horizontal-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameHorizontalDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-horizontal-demo.js

@@ -0,0 +1,44 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { Frame as t } from "../ui/frame/Frame.js";
+import { FrameLabelsWrapper as n } from "../ui/frame/FrameLabelsWrapper.js";
+import { FrameTitle as r } from "../ui/frame/FrameTitle.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/examples/frame-horizontal-demo.tsx
+function o() {
+	return /* @__PURE__ */ i(t, {
+		format: "horizontal",
+		className: "max-w-380",
+		image: {
+			alt: "Mountain landscape",
+			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
+		},
+		children: /* @__PURE__ */ i(n, {
+			hasImage: !0,
+			children: /* @__PURE__ */ a(r, {
+				className: "w-full justify-between",
+				coverLink: !0,
+				hasImage: !0,
+				href: "#",
+				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+					className: "text-b2 font-semibold",
+					children: "Alpine Adventures"
+				}), /* @__PURE__ */ i("div", {
+					className: "text-b3",
+					children: "Explore"
+				})] }), /* @__PURE__ */ i(e, {
+					"aria-label": "Explore Alpine Adventures",
+					className: "pointer-events-auto shrink-0",
+					color: "white",
+					icon: "ArrowDefaultRight",
+					theme: "outline",
+					variant: "circle"
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=frame-horizontal-demo.js.map

package/examples/frame-horizontal-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-horizontal-demo.js","names":[],"sources":["../../lib/examples/frame-horizontal-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { Frame } from '@/ui/frame/Frame';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\n\nexport default function FrameHorizontalDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      image={{\n        alt: 'Mountain landscape',\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-between\" coverLink hasImage href=\"#\">\n          <div>\n            <div className=\"text-b2 font-semibold\">Alpine Adventures</div>\n            <div className=\"text-b3\">Explore</div>\n          </div>\n          <Button\n            aria-label=\"Explore Alpine Adventures\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </Frame>\n  );\n}\n"],"mappings":";;;;;;;AAOA,SAAwB,IAAsB;AAC5C,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO;GACL,KAAK;GACL,KAAK;GACN;YAED,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAyB,WAAA;IAAU,UAAA;IAAS,MAAK;cAAvE,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAuB,CAAA,EAC9D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAa,CAAA,CAClC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;GAEe,CAAA;EACf,CAAA"}

package/examples/frame-no-image-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameNoImageDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-no-image-demo.js

@@ -0,0 +1,47 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { Tag as t } from "../ui/Tag.js";
+import { Frame as n } from "../ui/frame/Frame.js";
+import { FrameLabelsWrapper as r } from "../ui/frame/FrameLabelsWrapper.js";
+import { FrameTitle as i } from "../ui/frame/FrameTitle.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/examples/frame-no-image-demo.tsx
+function s() {
+	return /* @__PURE__ */ a(n, {
+		format: "horizontal",
+		image: null,
+		className: "bg-saffron h-240 w-380",
+		children: /* @__PURE__ */ o(r, {
+			hasImage: !1,
+			children: [/* @__PURE__ */ a(t, {
+				label: "Partnership",
+				border: "ultramarine",
+				color: "white",
+				backgroundColor: "ultramarine",
+				className: "mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16"
+			}), /* @__PURE__ */ o(i, {
+				className: "w-full justify-between",
+				coverLink: !0,
+				href: "#",
+				children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", {
+					className: "text-b2 font-semibold",
+					children: "Special Offer"
+				}), /* @__PURE__ */ a("div", {
+					className: "text-b3",
+					children: "Explore"
+				})] }), /* @__PURE__ */ a(e, {
+					"aria-label": "Explore Special Offer",
+					className: "pointer-events-auto shrink-0",
+					color: "black",
+					icon: "ArrowDefaultRight",
+					theme: "outline",
+					variant: "circle"
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=frame-no-image-demo.js.map

package/examples/frame-no-image-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-no-image-demo.js","names":[],"sources":["../../lib/examples/frame-no-image-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { Tag } from '@/ui/Tag';\nimport { Frame } from '@/ui/frame/Frame';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\n\nexport default function FrameNoImageDemo() {\n  return (\n    <Frame format=\"horizontal\" image={null} className=\"bg-saffron h-240 w-380\">\n      <FrameLabelsWrapper hasImage={false}>\n        <Tag\n          label=\"Partnership\"\n          border=\"ultramarine\"\n          color=\"white\"\n          backgroundColor=\"ultramarine\"\n          className=\"mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16\"\n        />\n        <FrameTitle className=\"w-full justify-between\" coverLink href=\"#\">\n          <div>\n            <div className=\"text-b2 font-semibold\">Special Offer</div>\n            <div className=\"text-b3\">Explore</div>\n          </div>\n          <Button\n            aria-label=\"Explore Special Offer\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"black\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </Frame>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAwB,IAAmB;AACzC,QACE,kBAAC,GAAD;EAAO,QAAO;EAAa,OAAO;EAAM,WAAU;YAChD,kBAAC,GAAD;GAAoB,UAAU;aAA9B,CACE,kBAAC,GAAD;IACE,OAAM;IACN,QAAO;IACP,OAAM;IACN,iBAAgB;IAChB,WAAU;IACV,CAAA,EACF,kBAAC,GAAD;IAAY,WAAU;IAAyB,WAAA;IAAU,MAAK;cAA9D,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAmB,CAAA,EAC1D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAa,CAAA,CAClC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;;EAGA,CAAA"}

package/examples/frame-vertical-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameVerticalDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-vertical-demo.js

@@ -0,0 +1,44 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { Frame as t } from "../ui/frame/Frame.js";
+import { FrameLabelsWrapper as n } from "../ui/frame/FrameLabelsWrapper.js";
+import { FrameTitle as r } from "../ui/frame/FrameTitle.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/examples/frame-vertical-demo.tsx
+function o() {
+	return /* @__PURE__ */ i(t, {
+		format: "vertical",
+		className: "max-w-280",
+		image: {
+			alt: "Mountain landscape",
+			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
+		},
+		children: /* @__PURE__ */ i(n, {
+			hasImage: !0,
+			children: /* @__PURE__ */ a(r, {
+				className: "w-full justify-between",
+				coverLink: !0,
+				hasImage: !0,
+				href: "#",
+				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+					className: "text-b2 font-semibold",
+					children: "Ski Resort"
+				}), /* @__PURE__ */ i("div", {
+					className: "text-b3",
+					children: "Alpine"
+				})] }), /* @__PURE__ */ i(e, {
+					"aria-label": "Explore Ski Resort",
+					className: "pointer-events-auto shrink-0",
+					color: "white",
+					icon: "ArrowDefaultRight",
+					theme: "outline",
+					variant: "circle"
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=frame-vertical-demo.js.map

package/examples/frame-vertical-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-vertical-demo.js","names":[],"sources":["../../lib/examples/frame-vertical-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { Frame } from '@/ui/frame/Frame';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\n\nexport default function FrameVerticalDemo() {\n  return (\n    <Frame\n      format=\"vertical\"\n      className=\"max-w-280\"\n      image={{\n        alt: 'Mountain landscape',\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-between\" coverLink hasImage href=\"#\">\n          <div>\n            <div className=\"text-b2 font-semibold\">Ski Resort</div>\n            <div className=\"text-b3\">Alpine</div>\n          </div>\n          <Button\n            aria-label=\"Explore Ski Resort\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </Frame>\n  );\n}\n"],"mappings":";;;;;;;AAOA,SAAwB,IAAoB;AAC1C,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO;GACL,KAAK;GACL,KAAK;GACN;YAED,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAyB,WAAA;IAAU,UAAA;IAAS,MAAK;cAAvE,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAgB,CAAA,EACvD,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;GAEe,CAAA;EACf,CAAA"}

package/examples/frame-with-tag-demo.d.ts

@@ -0,0 +1 @@
+export default function FrameWithTagDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/frame-with-tag-demo.js

@@ -0,0 +1,48 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { Tag as t } from "../ui/Tag.js";
+import { Frame as n } from "../ui/frame/Frame.js";
+import { FrameLabelsWrapper as r } from "../ui/frame/FrameLabelsWrapper.js";
+import { FrameTitle as i } from "../ui/frame/FrameTitle.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/examples/frame-with-tag-demo.tsx
+function s() {
+	return /* @__PURE__ */ a(n, {
+		format: "horizontal",
+		className: "max-w-380",
+		image: {
+			alt: "Mountain landscape",
+			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
+		},
+		children: /* @__PURE__ */ o(r, {
+			hasImage: !0,
+			children: [/* @__PURE__ */ a(t, {
+				label: "Best seller",
+				className: "mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16"
+			}), /* @__PURE__ */ o(i, {
+				className: "w-full justify-between",
+				coverLink: !0,
+				hasImage: !0,
+				href: "#",
+				children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", {
+					className: "text-b2 font-semibold",
+					children: "Mountain Resort"
+				}), /* @__PURE__ */ a("div", {
+					className: "text-b3",
+					children: "Winter"
+				})] }), /* @__PURE__ */ a(e, {
+					"aria-label": "Explore Mountain Resort",
+					className: "pointer-events-auto shrink-0",
+					color: "white",
+					icon: "ArrowDefaultRight",
+					theme: "outline",
+					variant: "circle"
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=frame-with-tag-demo.js.map

package/examples/frame-with-tag-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-with-tag-demo.js","names":[],"sources":["../../lib/examples/frame-with-tag-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { Tag } from '@/ui/Tag';\nimport { Frame } from '@/ui/frame/Frame';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\n\nexport default function FrameWithTagDemo() {\n  return (\n    <Frame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      image={{\n        alt: 'Mountain landscape',\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <Tag\n          label=\"Best seller\"\n          className=\"mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16\"\n        />\n        <FrameTitle className=\"w-full justify-between\" coverLink hasImage href=\"#\">\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter</div>\n          </div>\n          <Button\n            aria-label=\"Explore Mountain Resort\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </Frame>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAwB,IAAmB;AACzC,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO;GACL,KAAK;GACL,KAAK;GACN;YAED,kBAAC,GAAD;GAAoB,UAAA;aAApB,CACE,kBAAC,GAAD;IACE,OAAM;IACN,WAAU;IACV,CAAA,EACF,kBAAC,GAAD;IAAY,WAAU;IAAyB,WAAA;IAAU,UAAA;IAAS,MAAK;cAAvE,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;;EAGA,CAAA"}

package/examples/scrollbar-demo.d.ts

@@ -0,0 +1 @@
+export default function ScrollbarDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/scrollbar-demo.js

@@ -0,0 +1,40 @@
+import { Scrollbar as e } from "../ui/Scrollbar.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region lib/examples/scrollbar-demo.tsx
+function r() {
+	return /* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t(e, {
+		timelineName: "--scroller-outer",
+		scrollbarWidth: "60%",
+		children: /* @__PURE__ */ t("div", {
+			className: "w-600 p-16",
+			children: /* @__PURE__ */ t("div", {
+				className: "flex gap-8",
+				children: Array.from({ length: 20 }).map((e, n) => /* @__PURE__ */ t("div", {
+					className: "flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-ultramarine text-white",
+					children: n + 1
+				}, n))
+			})
+		})
+	}), /* @__PURE__ */ t("div", {
+		className: "bg-ultramarine p-8 -m-8 mt-8",
+		children: /* @__PURE__ */ t(e, {
+			variant: "dark",
+			timelineName: "--scrollerDark-outer",
+			scrollbarWidth: "60%",
+			children: /* @__PURE__ */ t("div", {
+				className: "w-600 p-16",
+				children: /* @__PURE__ */ t("div", {
+					className: "flex gap-8",
+					children: Array.from({ length: 20 }).map((e, n) => /* @__PURE__ */ t("div", {
+						className: "flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-white text-black",
+						children: n + 1
+					}, n))
+				})
+			})
+		})
+	})] });
+}
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=scrollbar-demo.js.map

package/examples/scrollbar-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar-demo.js","names":[],"sources":["../../lib/examples/scrollbar-demo.tsx"],"sourcesContent":["import { Scrollbar } from '../ui/Scrollbar';\n\nexport default function ScrollbarDemo() {\n  return (\n    <div>\n      <Scrollbar timelineName=\"--scroller-outer\" scrollbarWidth=\"60%\">\n        <div className=\"w-600 p-16\">\n          <div className=\"flex gap-8\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div\n                key={i}\n                className=\"flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-ultramarine text-white\"\n              >\n                {i + 1}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Scrollbar>\n      <div className=\"bg-ultramarine p-8 -m-8 mt-8\">\n        <Scrollbar variant=\"dark\" timelineName=\"--scrollerDark-outer\" scrollbarWidth=\"60%\">\n          <div className=\"w-600 p-16\">\n            <div className=\"flex gap-8\">\n              {Array.from({ length: 20 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"flex h-100 w-100 flex-shrink-0 items-center justify-center rounded-8 bg-white text-black\"\n                >\n                  {i + 1}\n                </div>\n              ))}\n            </div>\n          </div>\n        </Scrollbar>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAgB;AACtC,QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EAAW,cAAa;EAAmB,gBAAe;YACxD,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MAClC,kBAAC,OAAD;KAEE,WAAU;eAET,IAAI;KACD,EAJC,EAID,CACN;IACE,CAAA;GACF,CAAA;EACI,CAAA,EACZ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,GAAD;GAAW,SAAQ;GAAO,cAAa;GAAuB,gBAAe;aAC3E,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eACZ,MAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,MAClC,kBAAC,OAAD;MAEE,WAAU;gBAET,IAAI;MACD,EAJC,EAID,CACN;KACE,CAAA;IACF,CAAA;GACI,CAAA;EACR,CAAA,CACF,EAAA,CAAA"}

package/examples/slider-frame-demo.d.ts

@@ -0,0 +1 @@
+export default function SliderFrameDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/slider-frame-demo.js

@@ -0,0 +1,38 @@
+"use client";
+import { FrameLabelsWrapper as e } from "../ui/frame/FrameLabelsWrapper.js";
+import { FrameTitle as t } from "../ui/frame/FrameTitle.js";
+import { SliderFrame as n } from "../ui/frame/SliderFrame.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region lib/examples/slider-frame-demo.tsx
+function a() {
+	return /* @__PURE__ */ r(n, {
+		format: "horizontal",
+		className: "max-w-380",
+		items: Array.from({ length: 5 }, (e, t) => ({
+			alt: `Mountain landscape ${t + 1}`,
+			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
+		})),
+		labels: {
+			next: "Next image",
+			previous: "Previous image"
+		},
+		children: /* @__PURE__ */ r(e, {
+			hasImage: !0,
+			children: /* @__PURE__ */ r(t, {
+				className: "w-full justify-center text-center",
+				hasImage: !0,
+				children: /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("div", {
+					className: "text-b2 font-semibold",
+					children: "Mountain Resort"
+				}), /* @__PURE__ */ r("div", {
+					className: "text-b3",
+					children: "Winter Collection"
+				})] })
+			})
+		})
+	});
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=slider-frame-demo.js.map

package/examples/slider-frame-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-frame-demo.js","names":[],"sources":["../../lib/examples/slider-frame-demo.tsx"],"sourcesContent":["'use client';\n\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameDemo() {\n  return (\n    <SliderFrame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-center text-center\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter Collection</div>\n          </div>\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAwB,IAAkB;AACxC,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAoC,UAAA;cACxD,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAuB,CAAA,CAC5C,EAAA,CAAA;IACK,CAAA;GACM,CAAA;EACT,CAAA"}

package/examples/slider-frame-with-button-demo.d.ts

@@ -0,0 +1 @@
+export default function SliderFrameWithButtonDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/slider-frame-with-button-demo.js

@@ -0,0 +1,46 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { FrameLabelsWrapper as t } from "../ui/frame/FrameLabelsWrapper.js";
+import { FrameTitle as n } from "../ui/frame/FrameTitle.js";
+import { SliderFrame as r } from "../ui/frame/SliderFrame.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region lib/examples/slider-frame-with-button-demo.tsx
+function o() {
+	return /* @__PURE__ */ i(r, {
+		format: "horizontal",
+		className: "max-w-380",
+		items: Array.from({ length: 5 }, (e, t) => ({
+			alt: `Mountain landscape ${t + 1}`,
+			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
+		})),
+		labels: {
+			next: "Next image",
+			previous: "Previous image"
+		},
+		children: /* @__PURE__ */ i(t, {
+			hasImage: !0,
+			children: /* @__PURE__ */ a(n, {
+				className: "w-full justify-between",
+				hasImage: !0,
+				children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("div", {
+					className: "text-b2 font-semibold",
+					children: "Mountain Resort"
+				}), /* @__PURE__ */ i("div", {
+					className: "text-b3",
+					children: "Winter"
+				})] }), /* @__PURE__ */ i(e, {
+					"aria-label": "Explore Mountain Resort",
+					className: "pointer-events-auto shrink-0",
+					color: "white",
+					icon: "ArrowDefaultRight",
+					theme: "outline",
+					variant: "circle"
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=slider-frame-with-button-demo.js.map

package/examples/slider-frame-with-button-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-frame-with-button-demo.js","names":[],"sources":["../../lib/examples/slider-frame-with-button-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameWithButtonDemo() {\n  return (\n    <SliderFrame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <FrameTitle className=\"w-full justify-between\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter</div>\n          </div>\n          <Button\n            aria-label=\"Explore Mountain Resort\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;;AAOA,SAAwB,IAA4B;AAClD,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAClB,kBAAC,GAAD;IAAY,WAAU;IAAyB,UAAA;cAA/C,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;GAEe,CAAA;EACT,CAAA"}

package/examples/slider-frame-with-tag-demo.d.ts

@@ -0,0 +1 @@
+export default function SliderFrameWithTagDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/slider-frame-with-tag-demo.js

@@ -0,0 +1,50 @@
+"use client";
+import { Button as e } from "../ui/buttons/Button.js";
+import { Tag as t } from "../ui/Tag.js";
+import { FrameLabelsWrapper as n } from "../ui/frame/FrameLabelsWrapper.js";
+import { FrameTitle as r } from "../ui/frame/FrameTitle.js";
+import { SliderFrame as i } from "../ui/frame/SliderFrame.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/examples/slider-frame-with-tag-demo.tsx
+function s() {
+	return /* @__PURE__ */ a(i, {
+		format: "horizontal",
+		className: "max-w-380",
+		items: Array.from({ length: 5 }, (e, t) => ({
+			alt: `Mountain landscape ${t + 1}`,
+			src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
+		})),
+		labels: {
+			next: "Next image",
+			previous: "Previous image"
+		},
+		children: /* @__PURE__ */ o(n, {
+			hasImage: !0,
+			children: [/* @__PURE__ */ a(t, {
+				label: "Best seller",
+				className: "mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16"
+			}), /* @__PURE__ */ o(r, {
+				className: "w-full justify-between",
+				hasImage: !0,
+				children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", {
+					className: "text-b2 font-semibold",
+					children: "Mountain Resort"
+				}), /* @__PURE__ */ a("div", {
+					className: "text-b3",
+					children: "Winter"
+				})] }), /* @__PURE__ */ a(e, {
+					"aria-label": "Explore Mountain Resort",
+					className: "pointer-events-auto shrink-0",
+					color: "white",
+					icon: "ArrowDefaultRight",
+					theme: "outline",
+					variant: "circle"
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=slider-frame-with-tag-demo.js.map

package/examples/slider-frame-with-tag-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-frame-with-tag-demo.js","names":[],"sources":["../../lib/examples/slider-frame-with-tag-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@/ui/buttons/Button';\nimport { Tag } from '@/ui/Tag';\nimport { FrameLabelsWrapper } from '@/ui/frame/FrameLabelsWrapper';\nimport { FrameTitle } from '@/ui/frame/FrameTitle';\nimport { SliderFrame } from '@/ui/frame/SliderFrame';\n\nexport default function SliderFrameWithTagDemo() {\n  return (\n    <SliderFrame\n      format=\"horizontal\"\n      className=\"max-w-380\"\n      items={Array.from({ length: 5 }, (_, i) => ({\n        alt: `Mountain landscape ${i + 1}`,\n        src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4',\n      }))}\n      labels={{ next: 'Next image', previous: 'Previous image' }}\n    >\n      <FrameLabelsWrapper hasImage>\n        <Tag\n          label=\"Best seller\"\n          className=\"mx-12 mt-12 self-start px-8 sm:mx-24 sm:mt-24 sm:px-16\"\n        />\n        <FrameTitle className=\"w-full justify-between\" hasImage>\n          <div>\n            <div className=\"text-b2 font-semibold\">Mountain Resort</div>\n            <div className=\"text-b3\">Winter</div>\n          </div>\n          <Button\n            aria-label=\"Explore Mountain Resort\"\n            className=\"pointer-events-auto shrink-0\"\n            color=\"white\"\n            icon=\"ArrowDefaultRight\"\n            theme=\"outline\"\n            variant=\"circle\"\n          />\n        </FrameTitle>\n      </FrameLabelsWrapper>\n    </SliderFrame>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,SAAwB,IAAyB;AAC/C,QACE,kBAAC,GAAD;EACE,QAAO;EACP,WAAU;EACV,OAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,OAAO;GAC1C,KAAK,sBAAsB,IAAI;GAC/B,KAAK;GACN,EAAE;EACH,QAAQ;GAAE,MAAM;GAAc,UAAU;GAAkB;YAE1D,kBAAC,GAAD;GAAoB,UAAA;aAApB,CACE,kBAAC,GAAD;IACE,OAAM;IACN,WAAU;IACV,CAAA,EACF,kBAAC,GAAD;IAAY,WAAU;IAAyB,UAAA;cAA/C,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAwB;KAAqB,CAAA,EAC5D,kBAAC,OAAD;KAAK,WAAU;eAAU;KAAY,CAAA,CACjC,EAAA,CAAA,EACN,kBAAC,GAAD;KACE,cAAW;KACX,WAAU;KACV,OAAM;KACN,MAAK;KACL,OAAM;KACN,SAAQ;KACR,CAAA,CAAA;;;EAGM,CAAA"}

package/examples/switch-demo.js

@@ -9,7 +9,7 @@ function i() {
 		className: "flex items-center gap-3",
 		children: [/* @__PURE__ */ n(e, {
 			checked: i,
-			onClick: () => a(!i)
+			onChange: (e) => a(e.target.checked)
 		}), /* @__PURE__ */ n("span", {
 			className: "text-b2 font-semibold",
 			children: "Enable notifications"

package/examples/switch-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-demo.js","names":[],"sources":["../../lib/examples/switch-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Switch } from '@/ui/forms/Switch';\n\nexport default function SwitchDemo() {\n  const [isEnabled, setIsEnabled] = useState(false);\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Switch checked={isEnabled} onClick={() => setIsEnabled(!isEnabled)} />\n      <span className=\"text-b2 font-semibold\">Enable notifications</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAa;CACnC,IAAM,CAAC,GAAW,KAAgB,EAAS,GAAM;AAEjD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAQ,SAAS;GAAW,eAAe,EAAa,CAAC,EAAA;GAAc,CAAA,EACvE,kBAAC,QAAD;GAAM,WAAU;aAAwB;GAA2B,CAAA,CAAA"}
+{"version":3,"file":"switch-demo.js","names":[],"sources":["../../lib/examples/switch-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Switch } from '@/ui/forms/Switch';\n\nexport default function SwitchDemo() {\n  const [isEnabled, setIsEnabled] = useState(false);\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Switch checked={isEnabled} onChange={(e) => setIsEnabled(e.target.checked)} />\n      <span className=\"text-b2 font-semibold\">Enable notifications</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAa;CACnC,IAAM,CAAC,GAAW,KAAgB,EAAS,GAAM;AAEjD,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAQ,SAAS;GAAW,WAAW,MAAM,EAAa,EAAE,OAAO,QAAA;GAAY,CAAA,EAC/E,kBAAC,QAAD;GAAM,WAAU;aAAwB;GAA2B,CAAA,CAAA"}

package/examples/tooltip-demo.d.ts

@@ -0,0 +1 @@
+export default function TooltipDemo(): import("react/jsx-runtime").JSX.Element;