@clubmed/trident-ui 2.0.0-beta.9 → 2.0.0

package/examples/phone-field-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-field-demo.js","names":[],"sources":["../../lib/examples/phone-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { PhoneField } from '@/ui/forms/PhoneField';\n\nexport default function PhoneFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16\">\n      <PhoneField\n        label=\"Phone Number\"\n        description=\"Enter your phone number\"\n        placeholder=\"+33 1 23 45 67 89\"\n        mode=\"full\"\n        className=\"max-w-sm\"\n        pattern=\"+33 # ## ## ## ##\"\n      />\n      <PhoneField\n        label=\"Phone Number\"\n        description=\"Select your code and number\"\n        placeholder=\"1 23 45 67 89\"\n        mode=\"split\"\n        className=\"max-w-sm\"\n        pattern=\"# ## ## ## ##\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAiB;AACvC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,OAAM;GACN,aAAY;GACZ,aAAY;GACZ,MAAK;GACL,WAAU;GACV,SAAQ;GACR,CAAA,EACF,kBAAC,GAAD;GACE,OAAM;GACN,aAAY;GACZ,aAAY;GACZ,MAAK;GACL,WAAU;GACV,SAAQ;GACR,CAAA,CAAA"}
+{"version":3,"file":"phone-field-demo.js","names":[],"sources":["../../lib/examples/phone-field-demo.tsx"],"sourcesContent":["'use client';\n\nimport { PhoneField } from '@/ui/forms/PhoneField';\n\nexport default function PhoneFieldDemo() {\n  return (\n    <div className=\"flex flex-col gap-16\">\n      <PhoneField\n        label=\"Phone Number\"\n        description=\"Enter your phone number\"\n        placeholder=\"+33 1 23 45 67 89\"\n        mode=\"full\"\n        className=\"max-w-sm\"\n        pattern=\"+33 # ## ## ## ##\"\n        id=\"phonefield-full\"\n        name=\"Demo for the full version of the PhoneField component\"\n      />\n      <PhoneField\n        label=\"Phone Number\"\n        description=\"Select your code and number\"\n        placeholder=\"1 23 45 67 89\"\n        mode=\"split\"\n        className=\"max-w-sm\"\n        pattern=\"# ## ## ## ##\"\n        id=\"phonefield-split\"\n        name=\"Demo for the split version of the PhoneField component\"\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAiB;AACvC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,OAAM;GACN,aAAY;GACZ,aAAY;GACZ,MAAK;GACL,WAAU;GACV,SAAQ;GACR,IAAG;GACH,MAAK;GACL,CAAA,EACF,kBAAC,GAAD;GACE,OAAM;GACN,aAAY;GACZ,aAAY;GACZ,MAAK;GACL,WAAU;GACV,SAAQ;GACR,IAAG;GACH,MAAK;GACL,CAAA,CAAA"}

package/examples/promises-demo.d.ts

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

package/examples/promises-demo.js

@@ -0,0 +1,50 @@
+"use client";
+import { Promises as e } from "../ui/Promises/Promises.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region lib/examples/promises-demo.tsx
+function n() {
+	return /* @__PURE__ */ t(e, {
+		className: "min-h-500 w-full",
+		items: [
+			{
+				title: "The most beautiful destinations",
+				href: "#",
+				image: {
+					src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400",
+					alt: "Beautiful beach destination"
+				}
+			},
+			{
+				title: "Kids club starting from 4 months",
+				href: "#",
+				image: {
+					src: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=400",
+					alt: "Kids playing at the club"
+				}
+			},
+			{
+				title: "The best restaurants on the coast",
+				href: "#",
+				image: {
+					src: "https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400",
+					alt: "Fine dining restaurant"
+				}
+			}
+		],
+		labels: {
+			anchor: { continue: "Discover" },
+			layer: {
+				close: "Close menu",
+				open: "Open menu"
+			},
+			scroller: {
+				previous: "Previous",
+				next: "Next"
+			}
+		}
+	});
+}
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=promises-demo.js.map

package/examples/promises-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"promises-demo.js","names":[],"sources":["../../lib/examples/promises-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Promises } from '@/ui/Promises/Promises';\n\nexport default function PromisesDemo() {\n  return (\n    <Promises\n      className=\"min-h-500 w-full\"\n      items={[\n        {\n          title: 'The most beautiful destinations',\n          href: '#',\n          image: {\n            src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400',\n            alt: 'Beautiful beach destination',\n          },\n        },\n        {\n          title: 'Kids club starting from 4 months',\n          href: '#',\n          image: {\n            src: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=400',\n            alt: 'Kids playing at the club',\n          },\n        },\n        {\n          title: 'The best restaurants on the coast',\n          href: '#',\n          image: {\n            src: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',\n            alt: 'Fine dining restaurant',\n          },\n        },\n      ]}\n      labels={{\n        anchor: { continue: 'Discover' },\n        layer: { close: 'Close menu', open: 'Open menu' },\n        scroller: { previous: 'Previous', next: 'Next' },\n      }}\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAe;AACrC,QACE,kBAAC,GAAD;EACE,WAAU;EACV,OAAO;GACL;IACE,OAAO;IACP,MAAM;IACN,OAAO;KACL,KAAK;KACL,KAAK;;IAER;GACD;IACE,OAAO;IACP,MAAM;IACN,OAAO;KACL,KAAK;KACL,KAAK;;IAER;GACD;IACE,OAAO;IACP,MAAM;IACN,OAAO;KACL,KAAK;KACL,KAAK;;;GAGV;EACD,QAAQ;GACN,QAAQ,EAAE,UAAU,YAAY;GAChC,OAAO;IAAE,OAAO;IAAc,MAAM;IAAa;GACjD,UAAU;IAAE,UAAU;IAAY,MAAM;;;EAE1C,CAAA"}

package/examples/radio-demo.js

@@ -12,21 +12,21 @@ function i() {
 				name: "option",
 				value: "option1",
 				checked: i === "option1",
-				onChange: (e) => a(e.target.value),
+				onChange: (e, t) => a(t),
 				children: "Option 1"
 			}),
 			/* @__PURE__ */ n(e, {
 				name: "option",
 				value: "option2",
 				checked: i === "option2",
-				onChange: (e) => a(e.target.value),
+				onChange: (e, t) => a(t),
 				children: "Option 2"
 			}),
 			/* @__PURE__ */ n(e, {
 				name: "option",
 				value: "option3",
 				checked: i === "option3",
-				onChange: (e) => a(e.target.value),
+				onChange: (e, t) => a(t),
 				children: "Option 3"
 			})
 		]

package/examples/radio-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-demo.js","names":[],"sources":["../../lib/examples/radio-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Radio } from '@/ui/forms/radios/Radio';\nimport { useState } from 'react';\n\nexport default function RadioDemo() {\n  const [selectedValue, setSelectedValue] = useState<string>('');\n\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <Radio\n        name=\"option\"\n        value=\"option1\"\n        checked={selectedValue === 'option1'}\n        onChange={(e) => setSelectedValue(e.target.value)}\n      >\n        Option 1\n      </Radio>\n      <Radio\n        name=\"option\"\n        value=\"option2\"\n        checked={selectedValue === 'option2'}\n        onChange={(e) => setSelectedValue(e.target.value)}\n      >\n        Option 2\n      </Radio>\n      <Radio\n        name=\"option\"\n        value=\"option3\"\n        checked={selectedValue === 'option3'}\n        onChange={(e) => setSelectedValue(e.target.value)}\n      >\n        Option 3\n      </Radio>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAY;CAClC,IAAM,CAAC,GAAe,KAAoB,EAAiB,GAAG;AAE9D,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,SAAS,MAAkB;IAC3B,WAAW,MAAM,EAAiB,EAAE,OAAO,MAAM;cAClD;IAEO,CAAA;GACR,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,SAAS,MAAkB;IAC3B,WAAW,MAAM,EAAiB,EAAE,OAAO,MAAM;cAClD;IAEO,CAAA;GACR,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,SAAS,MAAkB;IAC3B,WAAW,MAAM,EAAiB,EAAE,OAAO,MAAM;cAClD;IAEO,CAAA"}
+{"version":3,"file":"radio-demo.js","names":[],"sources":["../../lib/examples/radio-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Radio } from '@/ui/forms/radios/Radio';\nimport { useState } from 'react';\n\nexport default function RadioDemo() {\n  const [selectedValue, setSelectedValue] = useState<string>('');\n\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <Radio\n        name=\"option\"\n        value=\"option1\"\n        checked={selectedValue === 'option1'}\n        onChange={(_, value) => setSelectedValue(value)}\n      >\n        Option 1\n      </Radio>\n      <Radio\n        name=\"option\"\n        value=\"option2\"\n        checked={selectedValue === 'option2'}\n        onChange={(_, value) => setSelectedValue(value)}\n      >\n        Option 2\n      </Radio>\n      <Radio\n        name=\"option\"\n        value=\"option3\"\n        checked={selectedValue === 'option3'}\n        onChange={(_, value) => setSelectedValue(value)}\n      >\n        Option 3\n      </Radio>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAY;CAClC,IAAM,CAAC,GAAe,KAAoB,EAAiB,GAAG;AAE9D,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,SAAS,MAAkB;IAC3B,WAAW,GAAG,MAAU,EAAiB,EAAM;cAChD;IAEO,CAAA;GACR,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,SAAS,MAAkB;IAC3B,WAAW,GAAG,MAAU,EAAiB,EAAM;cAChD;IAEO,CAAA;GACR,kBAAC,GAAD;IACE,MAAK;IACL,OAAM;IACN,SAAS,MAAkB;IAC3B,WAAW,GAAG,MAAU,EAAiB,EAAM;cAChD;IAEO,CAAA"}

package/examples/radio-select-demo.d.ts

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

package/examples/radio-select-demo.js

@@ -0,0 +1,100 @@
+"use client";
+import { RadioSelect as e } from "../ui/forms/RadioSelect.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/radio-select-demo.tsx
+var i = [
+	{
+		value: "open",
+		label: "Open"
+	},
+	{
+		value: "fixed",
+		label: "Fixed"
+	},
+	{
+		value: "in-progress",
+		label: "In Progress"
+	},
+	{
+		value: "closed",
+		label: "Closed"
+	}
+];
+function a() {
+	let [a, o] = t("open"), [s, c] = t("");
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-24",
+		style: { minWidth: 300 },
+		children: [
+			/* @__PURE__ */ n(e, {
+				label: "Status",
+				placeholder: "Select a status...",
+				options: i,
+				value: a,
+				onChange: (e, t) => o(t)
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Category",
+				placeholder: "Select a category...",
+				groups: [{
+					label: "Travel",
+					options: [{
+						value: "flight",
+						label: "Flight"
+					}, {
+						value: "hotel",
+						label: "Hotel"
+					}]
+				}, {
+					label: "Activities",
+					options: [
+						{
+							value: "ski",
+							label: "Ski"
+						},
+						{
+							value: "golf",
+							label: "Golf"
+						},
+						{
+							value: "spa",
+							label: "Spa"
+						}
+					]
+				}],
+				value: s,
+				onChange: (e, t) => c(t)
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Priority",
+				options: [
+					{
+						value: "high",
+						label: "High"
+					},
+					{
+						value: "medium",
+						label: "Medium"
+					},
+					{
+						value: "low",
+						label: "Low"
+					}
+				],
+				validationStatus: "error",
+				errorMessage: "Please select a priority"
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Tags",
+				options: i,
+				value: "open",
+				disabled: !0
+			})
+		]
+	});
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=radio-select-demo.js.map

package/examples/radio-select-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-select-demo.js","names":[],"sources":["../../lib/examples/radio-select-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { RadioSelect } from '@/ui/forms/RadioSelect';\n\nconst statusOptions = [\n  { value: 'open', label: 'Open' },\n  { value: 'fixed', label: 'Fixed' },\n  { value: 'in-progress', label: 'In Progress' },\n  { value: 'closed', label: 'Closed' },\n];\n\nexport default function RadioSelectDemo() {\n  const [status, setStatus] = useState<string>('open');\n  const [category, setCategory] = useState<string>('');\n\n  return (\n    <div className=\"space-y-24\" style={{ minWidth: 300 }}>\n      <RadioSelect\n        label=\"Status\"\n        placeholder=\"Select a status...\"\n        options={statusOptions}\n        value={status}\n        onChange={(_, v) => setStatus(v)}\n      />\n\n      <RadioSelect\n        label=\"Category\"\n        placeholder=\"Select a category...\"\n        groups={[\n          {\n            label: 'Travel',\n            options: [\n              { value: 'flight', label: 'Flight' },\n              { value: 'hotel', label: 'Hotel' },\n            ],\n          },\n          {\n            label: 'Activities',\n            options: [\n              { value: 'ski', label: 'Ski' },\n              { value: 'golf', label: 'Golf' },\n              { value: 'spa', label: 'Spa' },\n            ],\n          },\n        ]}\n        value={category}\n        onChange={(_, v) => setCategory(v)}\n      />\n\n      <RadioSelect\n        label=\"Priority\"\n        options={[\n          { value: 'high', label: 'High' },\n          { value: 'medium', label: 'Medium' },\n          { value: 'low', label: 'Low' },\n        ]}\n        validationStatus=\"error\"\n        errorMessage=\"Please select a priority\"\n      />\n\n      <RadioSelect label=\"Tags\" options={statusOptions} value=\"open\" disabled />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAgB;CACpB;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAe,OAAO;EAAe;CAC9C;EAAE,OAAO;EAAU,OAAO;;CAC3B;AAED,SAAwB,IAAkB;CACxC,IAAM,CAAC,GAAQ,KAAa,EAAiB,OAAO,EAC9C,CAAC,GAAU,KAAe,EAAiB,GAAG;AAEpD,QACE,kBAAC,OAAD;EAAK,WAAU;EAAa,OAAO,EAAE,UAAU,KAAK;YAApD;GACE,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,SAAS;IACT,OAAO;IACP,WAAW,GAAG,MAAM,EAAU,EAAA;IAC9B,CAAA;GAEF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,QAAQ,CACN;KACE,OAAO;KACP,SAAS,CACP;MAAE,OAAO;MAAU,OAAO;MAAU,EACpC;MAAE,OAAO;MAAS,OAAO;MAAS,CAAA;KAErC,EACD;KACE,OAAO;KACP,SAAS;MACP;OAAE,OAAO;OAAO,OAAO;OAAO;MAC9B;OAAE,OAAO;OAAQ,OAAO;OAAQ;MAChC;OAAE,OAAO;OAAO,OAAO;;;KAE1B,CACF;IACD,OAAO;IACP,WAAW,GAAG,MAAM,EAAY,EAAA;IAChC,CAAA;GAEF,kBAAC,GAAD;IACE,OAAM;IACN,SAAS;KACP;MAAE,OAAO;MAAQ,OAAO;MAAQ;KAChC;MAAE,OAAO;MAAU,OAAO;MAAU;KACpC;MAAE,OAAO;MAAO,OAAO;;KACxB;IACD,kBAAiB;IACjB,cAAa;IACb,CAAA;GAEF,kBAAC,GAAD;IAAa,OAAM;IAAO,SAAS;IAAe,OAAM;IAAO,UAAA;IAAW,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,42 @@
+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, {
+		"aria-label": "Demo horizontal scroller",
+		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, {
+			"aria-label": "Dark horizontal scroller",
+			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\n        aria-label=\"Demo horizontal scroller\"\n        timelineName=\"--scroller-outer\"\n        scrollbarWidth=\"60%\"\n      >\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\n          aria-label=\"Dark horizontal scroller\"\n          variant=\"dark\"\n          timelineName=\"--scrollerDark-outer\"\n          scrollbarWidth=\"60%\"\n        >\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;EACE,cAAW;EACX,cAAa;EACb,gBAAe;YAEf,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;GACE,cAAW;GACX,SAAQ;GACR,cAAa;GACb,gBAAe;aAEf,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/select-demo.js

@@ -4,6 +4,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region lib/examples/select-demo.tsx
 function r() {
 	return /* @__PURE__ */ n(e, {
+		name: "country",
 		label: "Country",
 		description: "Select your country",
 		children: [

package/examples/select-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-demo.js","names":[],"sources":["../../lib/examples/select-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Select } from '@/ui/forms/Select';\n\nexport default function SelectDemo() {\n  return (\n    <Select label=\"Country\" description=\"Select your country\">\n      <option value=\"\">Choose a country</option>\n      <option value=\"us\">United States</option>\n      <option value=\"uk\">United Kingdom</option>\n      <option value=\"ca\">Canada</option>\n      <option value=\"fr\">France</option>\n    </Select>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAa;AACnC,QACE,kBAAC,GAAD;EAAQ,OAAM;EAAU,aAAY;YAApC;GACE,kBAAC,UAAD;IAAQ,OAAM;cAAG;IAAyB,CAAA;GAC1C,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAsB,CAAA;GACzC,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAuB,CAAA;GAC1C,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAe,CAAA;GAClC,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAe,CAAA"}
+{"version":3,"file":"select-demo.js","names":[],"sources":["../../lib/examples/select-demo.tsx"],"sourcesContent":["'use client';\n\nimport { Select } from '@/ui/forms/Select';\n\nexport default function SelectDemo() {\n  return (\n    <Select name=\"country\" label=\"Country\" description=\"Select your country\">\n      <option value=\"\">Choose a country</option>\n      <option value=\"us\">United States</option>\n      <option value=\"uk\">United Kingdom</option>\n      <option value=\"ca\">Canada</option>\n      <option value=\"fr\">France</option>\n    </Select>\n  );\n}\n"],"mappings":";;;;AAIA,SAAwB,IAAa;AACnC,QACE,kBAAC,GAAD;EAAQ,MAAK;EAAU,OAAM;EAAU,aAAY;YAAnD;GACE,kBAAC,UAAD;IAAQ,OAAM;cAAG;IAAyB,CAAA;GAC1C,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAsB,CAAA;GACzC,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAuB,CAAA;GAC1C,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAe,CAAA;GAClC,kBAAC,UAAD;IAAQ,OAAM;cAAK;IAAe,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,39 @@
+"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, {
+		"aria-label": "Mountain Resort image carousel",
+		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      aria-label=\"Mountain Resort image carousel\"\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,cAAW;EACX,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,47 @@
+"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, {
+		"aria-label": "Mountain Resort image carousel",
+		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      aria-label=\"Mountain Resort image carousel\"\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,cAAW;EACX,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,51 @@
+"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, {
+		"aria-label": "Mountain Resort image carousel",
+		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      aria-label=\"Mountain Resort image carousel\"\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,cAAW;EACX,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/sparkle-wrapper-demo.d.ts

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

package/examples/sparkle-wrapper-demo.js

@@ -0,0 +1,34 @@
+"use client";
+import { SparkleWrapper as e } from "../ui/SparkleWrapper.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/sparkle-wrapper-demo.tsx
+function i() {
+	let [i, a] = t(0);
+	return /* @__PURE__ */ r("div", {
+		className: "flex flex-col items-center gap-48 p-48",
+		children: [
+			/* @__PURE__ */ n(e, {
+				count: 3,
+				children: /* @__PURE__ */ n("div", {
+					className: "bg-saffron text-black font-bold px-20 py-12 rounded-pill text-b3",
+					children: "✨ New feature"
+				})
+			}, i),
+			/* @__PURE__ */ n(e, { children: /* @__PURE__ */ n("span", {
+				className: "text-h4 font-bold",
+				children: "🎉 Congratulations!"
+			}) }, `b-${i}`),
+			/* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: () => a((e) => e + 1),
+				className: "px-20 py-10 rounded-pill border-2 border-black font-semibold text-b3 hover:bg-black hover:text-white transition-colors cursor-pointer",
+				children: "Replay animation"
+			})
+		]
+	});
+}
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=sparkle-wrapper-demo.js.map

package/examples/sparkle-wrapper-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkle-wrapper-demo.js","names":[],"sources":["../../lib/examples/sparkle-wrapper-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { SparkleWrapper } from '@/ui/SparkleWrapper';\n\nexport default function SparkleWrapperDemo() {\n  const [key, setKey] = useState(0);\n\n  return (\n    <div className=\"flex flex-col items-center gap-48 p-48\">\n      <SparkleWrapper count={3} key={key}>\n        <div className=\"bg-saffron text-black font-bold px-20 py-12 rounded-pill text-b3\">\n          ✨ New feature\n        </div>\n      </SparkleWrapper>\n\n      <SparkleWrapper key={`b-${key}`}>\n        <span className=\"text-h4 font-bold\">🎉 Congratulations!</span>\n      </SparkleWrapper>\n\n      <button\n        type=\"button\"\n        onClick={() => setKey((k) => k + 1)}\n        className=\"px-20 py-10 rounded-pill border-2 border-black font-semibold text-b3 hover:bg-black hover:text-white transition-colors cursor-pointer\"\n      >\n        Replay animation\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAwB,IAAqB;CAC3C,IAAM,CAAC,GAAK,KAAU,EAAS,EAAE;AAEjC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IAAgB,OAAO;cACrB,kBAAC,OAAD;KAAK,WAAU;eAAmE;KAE5E,CAAA;IACS,EAJc,EAId;GAEjB,kBAAC,GAAD,EAAA,UACE,kBAAC,QAAD;IAAM,WAAU;cAAoB;IAA0B,CAAA,EAC/C,EAFI,KAAK,IAET;GAEjB,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,GAAQ,MAAM,IAAI,EAAE;IACnC,WAAU;cACX;IAEQ,CAAA"}

package/examples/switch-demo.js

@@ -6,10 +6,11 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 function i() {
 	let [i, a] = t(!1);
 	return /* @__PURE__ */ r("div", {
-		className: "flex items-center gap-3",
+		className: "flex items-center gap-8",
 		children: [/* @__PURE__ */ n(e, {
+			"aria-label": "Enable notifications",
 			checked: i,
-			onClick: () => a(!i)
+			onChange: (e, t) => a(t)
 		}), /* @__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-8\">\n      <Switch\n        aria-label=\"Enable notifications\"\n        checked={isEnabled}\n        onChange={(_, checked) => setIsEnabled(checked)}\n      />\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;GACE,cAAW;GACX,SAAS;GACT,WAAW,GAAG,MAAY,EAAa,EAAA;GACvC,CAAA,EACF,kBAAC,QAAD;GAAM,WAAU;aAAwB;GAA2B,CAAA,CAAA"}

package/examples/tabs-demo.js

@@ -2,11 +2,7 @@ import { Tab as e, TabList as t, TabPanel as n, Tabs as r, TabsBody as i } from
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region lib/examples/tabs-demo.tsx
 function s() {
-	let s = [
-		,
-		,
-		,
-	].fill(void 0).map((e, t) => ({
+	let s = Array(24).fill(void 0).map((e, t) => ({
 		label: `${t + 1}`,
 		value: t + 1
 	})), c = (e) => {
@@ -19,6 +15,7 @@ function s() {
 	};
 	return /* @__PURE__ */ o(r, {
 		selected: 1,
+		className: "max-w-500",
 		children: [/* @__PURE__ */ a(t, { children: s.map((t) => /* @__PURE__ */ a(e, {
 			label: `Tab - ${t.label}`,
 			value: t.value

package/examples/tabs-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-demo.js","names":[],"sources":["../../lib/examples/tabs-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsDemo() {\n  const tabs = new Array(3).fill(undefined).map((_, n) => ({ label: `${n + 1}`, value: n + 1 }));\n\n  const bgs = (count: number) => {\n    switch (count % 3) {\n      case 0:\n        return 'bg-lightSand';\n      case 1:\n        return 'bg-saffron';\n      case 2:\n        return 'bg-lavender';\n      default:\n        return 'bg-sienna';\n    }\n  };\n  return (\n    <Tabs selected={1}>\n      <TabList>\n        {tabs.map((tab) => {\n          return <Tab key={tab.label} label={`Tab - ${tab.label}`} value={tab.value} />;\n        })}\n      </TabList>\n      <TabsBody>\n        {tabs.map((tab) => {\n          return (\n            <TabPanel key={tab.label} value={tab.value}>\n              <div className={`p-16 ${bgs(tab.value)}`}>Panel - {tab.label}</div>\n            </TabPanel>\n          );\n        })}\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAW;CACjC,IAAM,IAAO;;;;EAAY,CAAC,KAAK,KAAA,EAAU,CAAC,KAAK,GAAG,OAAO;EAAE,OAAO,GAAG,IAAI;EAAK,OAAO,IAAI;EAAG,EAAE,EAExF,KAAO,MAAkB;AAC7B,UAAQ,IAAQ,GAAhB;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO;;;AAGb,QACE,kBAAC,GAAD;EAAM,UAAU;YAAhB,CACE,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MACF,kBAAC,GAAD;GAAqB,OAAO,SAAS,EAAI;GAAS,OAAO,EAAI;GAAS,EAA5D,EAAI,MAAwD,CAC7E,EACM,CAAA,EACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;GAA0B,OAAO,EAAI;aACnC,kBAAC,OAAD;IAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;cAAtC,CAA0C,YAAS,EAAI,MAAY;;GAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA,CACN"}
+{"version":3,"file":"tabs-demo.js","names":[],"sources":["../../lib/examples/tabs-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsDemo() {\n  const tabs = new Array(24).fill(undefined).map((_, n) => ({ label: `${n + 1}`, value: n + 1 }));\n\n  const bgs = (count: number) => {\n    switch (count % 3) {\n      case 0:\n        return 'bg-lightSand';\n      case 1:\n        return 'bg-saffron';\n      case 2:\n        return 'bg-lavender';\n      default:\n        return 'bg-sienna';\n    }\n  };\n  return (\n    <Tabs selected={1} className=\"max-w-500\">\n      <TabList>\n        {tabs.map((tab) => {\n          return <Tab key={tab.label} label={`Tab - ${tab.label}`} value={tab.value} />;\n        })}\n      </TabList>\n      <TabsBody>\n        {tabs.map((tab) => {\n          return (\n            <TabPanel key={tab.label} value={tab.value}>\n              <div className={`p-16 ${bgs(tab.value)}`}>Panel - {tab.label}</div>\n            </TabPanel>\n          );\n        })}\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAW;CACjC,IAAM,IAAW,MAAM,GAAG,CAAC,KAAK,KAAA,EAAU,CAAC,KAAK,GAAG,OAAO;EAAE,OAAO,GAAG,IAAI;EAAK,OAAO,IAAI;EAAG,EAAE,EAEzF,KAAO,MAAkB;AAC7B,UAAQ,IAAQ,GAAhB;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO;;;AAGb,QACE,kBAAC,GAAD;EAAM,UAAU;EAAG,WAAU;YAA7B,CACE,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MACF,kBAAC,GAAD;GAAqB,OAAO,SAAS,EAAI;GAAS,OAAO,EAAI;GAAS,EAA5D,EAAI,MAAwD,CAC7E,EACM,CAAA,EACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;GAA0B,OAAO,EAAI;aACnC,kBAAC,OAAD;IAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;cAAtC,CAA0C,YAAS,EAAI,MAAY;;GAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA,CACN"}

package/examples/tabs-notification-demo.d.ts

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

package/examples/tabs-notification-demo.js

@@ -0,0 +1,64 @@
+import { Tab as e, TabList as t, TabPanel as n, Tabs as r, TabsBody as i } from "../ui/tabs/Tabs.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region lib/examples/tabs-notification-demo.tsx
+function s() {
+	return /* @__PURE__ */ o(r, {
+		selected: 1,
+		children: [/* @__PURE__ */ o(t, {
+			constrained: !0,
+			children: [
+				/* @__PURE__ */ a(e, {
+					label: "Overview",
+					value: 1
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Messages",
+					value: 2,
+					notification: 3
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Alerts",
+					value: 3,
+					notification: "!"
+				}),
+				/* @__PURE__ */ a(e, {
+					label: "Settings",
+					value: 4
+				})
+			]
+		}), /* @__PURE__ */ o(i, { children: [
+			/* @__PURE__ */ a(n, {
+				value: 1,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lightSand",
+					children: "Overview panel"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 2,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-saffron",
+					children: "3 unread messages"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 3,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lavender",
+					children: "Alerts panel"
+				})
+			}),
+			/* @__PURE__ */ a(n, {
+				value: 4,
+				children: /* @__PURE__ */ a("div", {
+					className: "p-16 bg-lightSand",
+					children: "Settings panel"
+				})
+			})
+		] })]
+	});
+}
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=tabs-notification-demo.js.map

package/examples/tabs-notification-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-notification-demo.js","names":[],"sources":["../../lib/examples/tabs-notification-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsNotificationDemo() {\n  return (\n    <Tabs selected={1}>\n      <TabList constrained>\n        <Tab label=\"Overview\" value={1} />\n        <Tab label=\"Messages\" value={2} notification={3} />\n        <Tab label=\"Alerts\" value={3} notification=\"!\" />\n        <Tab label=\"Settings\" value={4} />\n      </TabList>\n      <TabsBody>\n        <TabPanel value={1}>\n          <div className=\"p-16 bg-lightSand\">Overview panel</div>\n        </TabPanel>\n        <TabPanel value={2}>\n          <div className=\"p-16 bg-saffron\">3 unread messages</div>\n        </TabPanel>\n        <TabPanel value={3}>\n          <div className=\"p-16 bg-lavender\">Alerts panel</div>\n        </TabPanel>\n        <TabPanel value={4}>\n          <div className=\"p-16 bg-lightSand\">Settings panel</div>\n        </TabPanel>\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAuB;AAC7C,QACE,kBAAC,GAAD;EAAM,UAAU;YAAhB,CACE,kBAAC,GAAD;GAAS,aAAA;aAAT;IACE,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAK,CAAA;IAClC,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAG,cAAc;KAAK,CAAA;IACnD,kBAAC,GAAD;KAAK,OAAM;KAAS,OAAO;KAAG,cAAa;KAAM,CAAA;IACjD,kBAAC,GAAD;KAAK,OAAM;KAAW,OAAO;KAAK,CAAA;IAC1B;MACV,kBAAC,GAAD,EAAA,UAAA;GACE,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAoB;KAAoB,CAAA;IAC9C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAkB;KAAuB,CAAA;IAC/C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAmB;KAAkB,CAAA;IAC3C,CAAA;GACX,kBAAC,GAAD;IAAU,OAAO;cACf,kBAAC,OAAD;KAAK,WAAU;eAAoB;KAAoB,CAAA;IAC9C,CAAA;GACF,EAAA,CAAA,CACN"}