ui-lab-registry 0.3.41 → 0.3.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/components/Button/examples/05-split-action-button.d.ts.map +1 -1
  2. package/dist/components/Button/examples/05-split-action-button.js +39 -24
  3. package/dist/components/Button/examples/05-split-action-button.js.map +1 -1
  4. package/dist/components/Button/examples.json +2 -2
  5. package/dist/components/Frame/examples/02-tooltip-example.d.ts.map +1 -1
  6. package/dist/components/Frame/examples/02-tooltip-example.js +1 -3
  7. package/dist/components/Frame/examples/02-tooltip-example.js.map +1 -1
  8. package/dist/components/Frame/examples/03-sidebar-tab.d.ts.map +1 -1
  9. package/dist/components/Frame/examples/03-sidebar-tab.js +5 -1
  10. package/dist/components/Frame/examples/03-sidebar-tab.js.map +1 -1
  11. package/dist/components/Frame/examples.json +2 -2
  12. package/dist/components/Frame/index.d.ts.map +1 -1
  13. package/dist/components/Frame/index.js +4 -27
  14. package/dist/components/Frame/index.js.map +1 -1
  15. package/dist/components/Tabs/examples/01-basic-tabs.js +1 -1
  16. package/dist/components/Tabs/examples/01-basic-tabs.js.map +1 -1
  17. package/dist/components/Tabs/examples/02-vertical-tabs.js +1 -1
  18. package/dist/components/Tabs/examples/02-vertical-tabs.js.map +1 -1
  19. package/dist/components/Tabs/examples.json +2 -2
  20. package/dist/components/Tabs/index.js +5 -5
  21. package/dist/components/Tabs/index.js.map +1 -1
  22. package/dist/generated-data.d.ts.map +1 -1
  23. package/dist/generated-data.js +339 -162
  24. package/dist/generated-data.js.map +1 -1
  25. package/dist/generated-styles.d.ts.map +1 -1
  26. package/dist/generated-styles.js +1204 -347
  27. package/dist/generated-styles.js.map +1 -1
  28. package/dist/generated-styles.json +1204 -347
  29. package/dist/guides/index.d.ts +9 -0
  30. package/dist/guides/index.d.ts.map +1 -0
  31. package/dist/guides/index.js +70 -0
  32. package/dist/guides/index.js.map +1 -0
  33. package/dist/guides/setup-ui-lab-in-project.d.ts +4 -0
  34. package/dist/guides/setup-ui-lab-in-project.d.ts.map +1 -0
  35. package/dist/guides/setup-ui-lab-in-project.js +130 -0
  36. package/dist/guides/setup-ui-lab-in-project.js.map +1 -0
  37. package/dist/guides/theme-switching-nextjs.d.ts +4 -0
  38. package/dist/guides/theme-switching-nextjs.d.ts.map +1 -0
  39. package/dist/guides/theme-switching-nextjs.js +289 -0
  40. package/dist/guides/theme-switching-nextjs.js.map +1 -0
  41. package/dist/guides/translate-existing-ui-to-ui-lab.d.ts +4 -0
  42. package/dist/guides/translate-existing-ui-to-ui-lab.d.ts.map +1 -0
  43. package/dist/guides/translate-existing-ui-to-ui-lab.js +124 -0
  44. package/dist/guides/translate-existing-ui-to-ui-lab.js.map +1 -0
  45. package/dist/index.d.ts +2 -2
  46. package/dist/index.d.ts.map +1 -1
  47. package/dist/index.js +2 -1
  48. package/dist/index.js.map +1 -1
  49. package/dist/registry.js +6 -6
  50. package/dist/registry.js.map +1 -1
  51. package/dist/types.d.ts +35 -0
  52. package/dist/types.d.ts.map +1 -1
  53. package/package.json +2 -2
  54. package/src/components/Button/examples/05-split-action-button.tsx +56 -68
  55. package/src/components/Button/examples.json +2 -2
  56. package/src/components/Frame/examples/02-tooltip-example.tsx +3 -4
  57. package/src/components/Frame/examples/03-sidebar-tab.tsx +7 -5
  58. package/src/components/Frame/examples.json +2 -2
  59. package/src/components/Frame/index.tsx +5 -28
  60. package/src/components/Tabs/examples/01-basic-tabs.tsx +1 -1
  61. package/src/components/Tabs/examples/02-vertical-tabs.tsx +1 -1
  62. package/src/components/Tabs/examples.json +2 -2
  63. package/src/components/Tabs/index.tsx +5 -5
  64. package/src/generated-data.ts +339 -162
  65. package/src/generated-styles.ts +1204 -347
  66. package/src/guides/index.ts +78 -0
  67. package/src/guides/setup-ui-lab-in-project.ts +139 -0
  68. package/src/guides/theme-switching-nextjs.ts +296 -0
  69. package/src/guides/translate-existing-ui-to-ui-lab.ts +135 -0
  70. package/src/index.ts +15 -2
  71. package/src/registry.ts +6 -6
  72. package/src/types.ts +45 -0
  73. package/src/generated-controls.ts +0 -194
@@ -1 +1 @@
1
- {"version":3,"file":"05-split-action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/examples/05-split-action-button.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA2E9B"}
1
+ {"version":3,"file":"05-split-action-button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/examples/05-split-action-button.tsx"],"names":[],"mappings":"AA+CA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA2C9B"}
@@ -1,33 +1,48 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { useState } from 'react';
4
- import { Button, Divider, Select, Searchable, Flex, Menu } from 'ui-lab-components';
5
- import { FaSpinner, FaCheck, FaEllipsisVertical, FaHashtag, FaLock } from "react-icons/fa6";
6
- const channels = [
7
- { value: "general", label: "general", description: "General team discussion" },
8
- { value: "announcements", label: "announcements", description: "Important team updates", private: true },
9
- { value: "design", label: "design", description: "Design work and feedback" },
10
- { value: "engineering", label: "engineering", description: "Engineering discussions" },
11
- { value: "marketing", label: "marketing", description: "Marketing campaigns" },
12
- { value: "product", label: "product", description: "Product roadmap and planning" },
13
- { value: "random", label: "random", description: "Off-topic conversations" },
14
- { value: "releases", label: "releases", description: "Release announcements", private: true },
15
- ];
16
- const publishActions = {
17
- publish: { label: "Publish Now", variant: "ghost" },
18
- draft: { label: "Save as Draft", variant: "ghost" },
19
- schedule: { label: "Schedule for Later", variant: "outline" },
4
+ import { Button, Divider, Select, Badge, Flex } from 'ui-lab-components';
5
+ import { FaBox, FaSpinner, FaCheck, FaEllipsisVertical, FaCopy, FaTags, FaTrash } from "react-icons/fa6";
6
+ const selectedCount = 12;
7
+ const bulkActions = {
8
+ archive: {
9
+ label: "Archive",
10
+ loadingLabel: "Archiving...",
11
+ successLabel: "Archived",
12
+ variant: "primary",
13
+ icon: _jsx(FaBox, {}),
14
+ },
15
+ duplicate: {
16
+ label: "Duplicate",
17
+ loadingLabel: "Duplicating...",
18
+ successLabel: "Duplicated",
19
+ variant: "outline",
20
+ icon: _jsx(FaCopy, {}),
21
+ },
22
+ tag: {
23
+ label: "Add Tags",
24
+ loadingLabel: "Applying tags...",
25
+ successLabel: "Tagged",
26
+ variant: "outline",
27
+ icon: _jsx(FaTags, {}),
28
+ },
29
+ delete: {
30
+ label: "Delete",
31
+ loadingLabel: "Deleting...",
32
+ successLabel: "Deleted",
33
+ variant: "danger",
34
+ icon: _jsx(FaTrash, {}),
35
+ },
20
36
  };
21
37
  export const metadata = {
22
38
  title: 'Split Action Button',
23
- description: 'A primary action button joined with a Select dropdown that changes what the button does useful for publish workflows with multiple delivery options.'
39
+ description: 'A split button for bulk actions with dynamic icons, variants, and async feedback while keeping the primary action easy to repeat.'
24
40
  };
25
41
  export default function Example() {
26
- const [action, setAction] = useState("publish");
42
+ const [action, setAction] = useState("archive");
27
43
  const [status, setStatus] = useState("idle");
28
- const [channel, setChannel] = useState("general");
29
- const selectedChannel = channels.find((c) => c.value === channel);
30
- const cfg = publishActions[action];
44
+ const cfg = bulkActions[action];
45
+ const itemsLabel = `${selectedCount} ${selectedCount === 1 ? "item" : "items"}`;
31
46
  const handleExecute = () => {
32
47
  setStatus("loading");
33
48
  setTimeout(() => {
@@ -35,8 +50,8 @@ export default function Example() {
35
50
  setTimeout(() => setStatus("idle"), 2000);
36
51
  }, 1500);
37
52
  };
38
- const leftIcon = status === "loading" ? _jsx(FaSpinner, { className: "animate-spin" }) : status === "done" ? _jsx(FaCheck, {}) : undefined;
39
- const label = status === "loading" ? "Saving..." : status === "done" ? "Done!" : cfg.label;
40
- return (_jsxs(Flex, { gap: "xs", className: "w-110", align: "center", children: [_jsxs(Select, { selectedKey: channel, valueLabel: selectedChannel ? `#${selectedChannel.label}` : undefined, onSelectionChange: setChannel, className: "flex h-10", isDisabled: status !== "idle", children: [_jsx(Searchable.Input, { className: "w-50", icon: _jsx(FaHashtag, {}), placeholder: "Select channel..." }), _jsx(Select.Content, { children: _jsx(Select.List, { children: channels.map((c) => (_jsx(Select.Item, { value: c.value, textValue: c.label, icon: c.private ? _jsx(FaLock, { className: "h-3 w-3" }) : _jsx(FaHashtag, { className: "h-3 w-3" }), description: c.description, children: c.label }, c.value))) }) })] }), _jsxs(Select, { className: "flex h-10", selectedKey: action, onSelectionChange: (key) => setAction(key), isDisabled: status !== "idle", children: [_jsx(Button, { onPress: handleExecute, variant: "ghost", size: "sm", className: "w-full", isDisabled: status !== "idle", icon: leftIcon, children: label }), _jsx(Divider, { orientation: "vertical", spacing: "none" }), _jsx(Select.Trigger, {}), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: "publish", textValue: "Publish Now", children: "Publish Now" }), _jsx(Select.Item, { value: "draft", textValue: "Save as Draft", children: "Save as Draft" }), _jsx(Select.Item, { value: "schedule", textValue: "Schedule for Later", children: "Schedule for Later" })] })] }), _jsxs(Menu, { type: "pop-over", children: [_jsx(Menu.Trigger, { children: _jsx(Button, { size: "icon", variant: "outline", icon: _jsx(FaEllipsisVertical, {}) }) }), _jsxs(Menu.Content, { offset: 8, side: "bottom", align: "end", children: [_jsx(Menu.Item, { children: "Preview" }), _jsx(Menu.Item, { children: "View History" }), _jsx(Menu.Item, { children: "Discard Changes" })] })] })] }));
53
+ const leftIcon = status === "loading" ? _jsx(FaSpinner, { className: "animate-spin" }) : status === "done" ? _jsx(FaCheck, {}) : cfg.icon;
54
+ const label = status === "loading" ? cfg.loadingLabel : status === "done" ? cfg.successLabel : `${cfg.label} ${itemsLabel}`;
55
+ return (_jsxs(Flex, { gap: "xs", className: "w-110", align: "center", children: [_jsxs(Badge, { variant: "secondary", children: [selectedCount, " selected"] }), _jsxs(Select, { className: "flex h-10", selectedKey: action, onSelectionChange: (key) => setAction(key), isDisabled: status !== "idle", children: [_jsx(Button, { onPress: handleExecute, variant: cfg.variant, size: "sm", className: "w-full rounded-none justify-start", isDisabled: status !== "idle" || selectedCount === 0, icon: leftIcon, children: label }), _jsx(Divider, { orientation: "vertical", spacing: "none" }), _jsx(Select.Trigger, { "aria-label": "Choose a bulk action" }), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: "archive", textValue: "Archive", icon: _jsx(FaBox, { className: "h-3 w-3" }), children: "Archive" }), _jsx(Select.Item, { value: "duplicate", textValue: "Duplicate", icon: _jsx(FaCopy, { className: "h-3 w-3" }), children: "Duplicate" }), _jsx(Select.Item, { value: "tag", textValue: "Add Tags", icon: _jsx(FaTags, { className: "h-3 w-3" }), children: "Add Tags" }), _jsx(Select.Item, { value: "delete", textValue: "Delete", icon: _jsx(FaTrash, { className: "h-3 w-3" }), children: "Delete" })] })] }), _jsx(Button, { size: "icon", variant: "outline", icon: _jsx(FaEllipsisVertical, {}), "aria-label": "More bulk actions" })] }));
41
56
  }
42
57
  //# sourceMappingURL=05-split-action-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"05-split-action-button.js","sourceRoot":"","sources":["../../../../src/components/Button/examples/05-split-action-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AACnF,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAI5F,MAAM,QAAQ,GAAc;IAC1B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,yBAAyB,EAAE;IAC9E,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,wBAAwB,EAAE,OAAO,EAAE,IAAI,EAAE;IACxG,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,0BAA0B,EAAE;IAC7E,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,yBAAyB,EAAE;IACtF,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,qBAAqB,EAAE;IAC9E,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,8BAA8B,EAAE;IACnF,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,yBAAyB,EAAE;IAC5E,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,uBAAuB,EAAE,OAAO,EAAE,IAAI,EAAE;CAC9F,CAAC;AAIF,MAAM,cAAc,GAAuF;IACzG,OAAO,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE;IACnD,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE;IACnD,QAAQ,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,OAAO,EAAE,SAAS,EAAE;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,qBAAqB;IAC5B,WAAW,EAAE,wJAAwJ;CACtK,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,SAAS,CAAC,CAAC;IAC/D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA8B,MAAM,CAAC,CAAC;IAC1E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC;IAClE,MAAM,GAAG,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,UAAU,CAAC,GAAG,EAAE;YACd,SAAS,CAAC,MAAM,CAAC,CAAC;YAClB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;QAC5C,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,SAAS,EAAC,cAAc,GAAG,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7H,MAAM,KAAK,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC;IAE3F,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,aAC7C,MAAC,MAAM,IACL,WAAW,EAAE,OAAO,EACpB,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EACrE,iBAAiB,EAAE,UAAU,EAC7B,SAAS,EAAC,WAAW,EACrB,UAAU,EAAE,MAAM,KAAK,MAAM,aAE7B,KAAC,UAAU,CAAC,KAAK,IAAC,SAAS,EAAC,MAAM,EAAC,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE,WAAW,EAAC,mBAAmB,GAAG,EAC1F,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,MAAM,CAAC,IAAI,cACT,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACnB,KAAC,MAAM,CAAC,IAAI,IAEV,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,SAAS,EAAE,CAAC,CAAC,KAAK,EAClB,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,SAAS,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,EACpF,WAAW,EAAE,CAAC,CAAC,WAAW,YAEzB,CAAC,CAAC,KAAK,IANH,CAAC,CAAC,KAAK,CAOA,CACf,CAAC,GACU,GACC,IACV,EACT,MAAC,MAAM,IAAC,SAAS,EAAC,WAAW,EAAC,WAAW,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,GAAoB,CAAC,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,aAC3I,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,EACtB,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAE,MAAM,KAAK,MAAM,EAC7B,IAAI,EAAE,QAAQ,YAEb,KAAK,GACC,EACT,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,EAAC,OAAO,EAAC,MAAM,GAAG,EACjD,KAAC,MAAM,CAAC,OAAO,KAAG,EAClB,MAAC,MAAM,CAAC,OAAO,eACb,KAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAC,aAAa,4BAA0B,EAC9E,KAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,8BAA4B,EAChF,KAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAC,UAAU,EAAC,SAAS,EAAC,oBAAoB,mCAAiC,IAC9E,IACV,EACT,MAAC,IAAI,IAAC,IAAI,EAAC,UAAU,aACnB,KAAC,IAAI,CAAC,OAAO,cACX,KAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,KAAC,kBAAkB,KAAG,GAAI,GACzD,EACf,MAAC,IAAI,CAAC,OAAO,IAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,KAAK,aAChD,KAAC,IAAI,CAAC,IAAI,0BAAoB,EAC9B,KAAC,IAAI,CAAC,IAAI,+BAAyB,EACnC,KAAC,IAAI,CAAC,IAAI,kCAA4B,IACzB,IACV,IACF,CACR,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"05-split-action-button.js","sourceRoot":"","sources":["../../../../src/components/Button/examples/05-split-action-button.tsx"],"names":[],"mappings":"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"}
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "05-split-action-button": {
23
23
  "title": "Split Action Button",
24
- "description": "A primary action button joined with a Select dropdown that changes what the button does useful for publish workflows with multiple delivery options.",
25
- "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Divider, Select, Searchable, Flex, Menu } from 'ui-lab-components'\nimport { FaSpinner, FaCheck, FaEllipsisVertical, FaHashtag, FaLock } from \"react-icons/fa6\";\n\ntype Channel = { value: string; label: string; description: string; private?: boolean };\n\nconst channels: Channel[] = [\n { value: \"general\", label: \"general\", description: \"General team discussion\" },\n { value: \"announcements\", label: \"announcements\", description: \"Important team updates\", private: true },\n { value: \"design\", label: \"design\", description: \"Design work and feedback\" },\n { value: \"engineering\", label: \"engineering\", description: \"Engineering discussions\" },\n { value: \"marketing\", label: \"marketing\", description: \"Marketing campaigns\" },\n { value: \"product\", label: \"product\", description: \"Product roadmap and planning\" },\n { value: \"random\", label: \"random\", description: \"Off-topic conversations\" },\n { value: \"releases\", label: \"releases\", description: \"Release announcements\", private: true },\n];\n\ntype PublishAction = \"publish\" | \"draft\" | \"schedule\";\n\nconst publishActions: Record<PublishAction, { label: string; variant: \"ghost\" | \"default\" | \"outline\" }> = {\n publish: { label: \"Publish Now\", variant: \"ghost\" },\n draft: { label: \"Save as Draft\", variant: \"ghost\" },\n schedule: { label: \"Schedule for Later\", variant: \"outline\" },\n};\n\nexport default function Example() {\n const [action, setAction] = useState<PublishAction>(\"publish\");\n const [status, setStatus] = useState<\"idle\" | \"loading\" | \"done\">(\"idle\");\n const [channel, setChannel] = useState<string | number | null>(\"general\");\n const selectedChannel = channels.find((c) => c.value === channel);\n const cfg = publishActions[action];\n\n const handleExecute = () => {\n setStatus(\"loading\");\n setTimeout(() => {\n setStatus(\"done\");\n setTimeout(() => setStatus(\"idle\"), 2000);\n }, 1500);\n };\n\n const leftIcon = status === \"loading\" ? <FaSpinner className=\"animate-spin\" /> : status === \"done\" ? <FaCheck /> : undefined;\n const label = status === \"loading\" ? \"Saving...\" : status === \"done\" ? \"Done!\" : cfg.label;\n\n return (\n <Flex gap=\"xs\" className=\"w-110\" align=\"center\">\n <Select\n selectedKey={channel}\n valueLabel={selectedChannel ? `#${selectedChannel.label}` : undefined}\n onSelectionChange={setChannel}\n className=\"flex h-10\"\n isDisabled={status !== \"idle\"}\n >\n <Searchable.Input className=\"w-50\" icon={<FaHashtag />} placeholder=\"Select channel...\" />\n <Select.Content>\n <Select.List>\n {channels.map((c) => (\n <Select.Item\n key={c.value}\n value={c.value}\n textValue={c.label}\n icon={c.private ? <FaLock className=\"h-3 w-3\" /> : <FaHashtag className=\"h-3 w-3\" />}\n description={c.description}\n >\n {c.label}\n </Select.Item>\n ))}\n </Select.List>\n </Select.Content>\n </Select>\n <Select className=\"flex h-10\" selectedKey={action} onSelectionChange={(key) => setAction(key as PublishAction)} isDisabled={status !== \"idle\"}>\n <Button\n onPress={handleExecute}\n variant=\"ghost\"\n size=\"sm\"\n className=\"w-full\"\n isDisabled={status !== \"idle\"}\n icon={leftIcon}\n >\n {label}\n </Button>\n <Divider orientation=\"vertical\" spacing=\"none\" />\n <Select.Trigger />\n <Select.Content>\n <Select.Item value=\"publish\" textValue=\"Publish Now\">Publish Now</Select.Item>\n <Select.Item value=\"draft\" textValue=\"Save as Draft\">Save as Draft</Select.Item>\n <Select.Item value=\"schedule\" textValue=\"Schedule for Later\">Schedule for Later</Select.Item>\n </Select.Content>\n </Select>\n <Menu type=\"pop-over\">\n <Menu.Trigger>\n <Button size=\"icon\" variant=\"outline\" icon={<FaEllipsisVertical />} />\n </Menu.Trigger>\n <Menu.Content offset={8} side=\"bottom\" align=\"end\">\n <Menu.Item>Preview</Menu.Item>\n <Menu.Item>View History</Menu.Item>\n <Menu.Item>Discard Changes</Menu.Item>\n </Menu.Content>\n </Menu>\n </Flex>\n );\n}"
24
+ "description": "A split button for bulk actions with dynamic icons, variants, and async feedback while keeping the primary action easy to repeat.",
25
+ "code": "\"use client\";\n\nimport React, { useState } from 'react'\nimport { Button, Divider, Select, Badge, Flex } from 'ui-lab-components'\nimport { FaBox, FaSpinner, FaCheck, FaEllipsisVertical, FaCopy, FaTags, FaTrash } from \"react-icons/fa6\";\n\ntype BulkAction = \"archive\" | \"duplicate\" | \"tag\" | \"delete\";\n\nconst selectedCount: number = 12;\n\nconst bulkActions: Record<BulkAction, {\n label: string;\n loadingLabel: string;\n successLabel: string;\n variant: \"primary\" | \"outline\" | \"danger\";\n icon: React.ReactNode;\n}> = {\n archive: {\n label: \"Archive\",\n loadingLabel: \"Archiving...\",\n successLabel: \"Archived\",\n variant: \"primary\",\n icon: <FaBox />,\n },\n duplicate: {\n label: \"Duplicate\",\n loadingLabel: \"Duplicating...\",\n successLabel: \"Duplicated\",\n variant: \"outline\",\n icon: <FaCopy />,\n },\n tag: {\n label: \"Add Tags\",\n loadingLabel: \"Applying tags...\",\n successLabel: \"Tagged\",\n variant: \"outline\",\n icon: <FaTags />,\n },\n delete: {\n label: \"Delete\",\n loadingLabel: \"Deleting...\",\n successLabel: \"Deleted\",\n variant: \"danger\",\n icon: <FaTrash />,\n },\n};\n\nexport default function Example() {\n const [action, setAction] = useState<BulkAction>(\"archive\");\n const [status, setStatus] = useState<\"idle\" | \"loading\" | \"done\">(\"idle\");\n const cfg = bulkActions[action];\n const itemsLabel = `${selectedCount} ${selectedCount === 1 ? \"item\" : \"items\"}`;\n\n const handleExecute = () => {\n setStatus(\"loading\");\n setTimeout(() => {\n setStatus(\"done\");\n setTimeout(() => setStatus(\"idle\"), 2000);\n }, 1500);\n };\n\n const leftIcon = status === \"loading\" ? <FaSpinner className=\"animate-spin\" /> : status === \"done\" ? <FaCheck /> : cfg.icon;\n const label = status === \"loading\" ? cfg.loadingLabel : status === \"done\" ? cfg.successLabel : `${cfg.label} ${itemsLabel}`;\n\n return (\n <Flex gap=\"xs\" className=\"w-110\" align=\"center\">\n <Badge variant=\"secondary\">{selectedCount} selected</Badge>\n <Select className=\"flex h-10\" selectedKey={action} onSelectionChange={(key) => setAction(key as BulkAction)} isDisabled={status !== \"idle\"}>\n <Button\n onPress={handleExecute}\n variant={cfg.variant}\n size=\"sm\"\n className=\"w-full rounded-none justify-start\"\n isDisabled={status !== \"idle\" || selectedCount === 0}\n icon={leftIcon}\n >\n {label}\n </Button>\n <Divider orientation=\"vertical\" spacing=\"none\" />\n <Select.Trigger aria-label=\"Choose a bulk action\" />\n <Select.Content>\n <Select.Item value=\"archive\" textValue=\"Archive\" icon={<FaBox className=\"h-3 w-3\" />}>Archive</Select.Item>\n <Select.Item value=\"duplicate\" textValue=\"Duplicate\" icon={<FaCopy className=\"h-3 w-3\" />}>Duplicate</Select.Item>\n <Select.Item value=\"tag\" textValue=\"Add Tags\" icon={<FaTags className=\"h-3 w-3\" />}>Add Tags</Select.Item>\n <Select.Item value=\"delete\" textValue=\"Delete\" icon={<FaTrash className=\"h-3 w-3\" />}>Delete</Select.Item>\n </Select.Content>\n </Select>\n <Button size=\"icon\" variant=\"outline\" icon={<FaEllipsisVertical />} aria-label=\"More bulk actions\" />\n </Flex>\n );\n}"
26
26
  }
27
27
  }
@@ -1 +1 @@
1
- {"version":3,"file":"02-tooltip-example.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/02-tooltip-example.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAOF,QAAA,MAAM,QAAQ,+CAuBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"02-tooltip-example.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/02-tooltip-example.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,QAAA,MAAM,QAAQ,+CAqBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -7,9 +7,7 @@ import { Frame } from 'ui-lab-components';
7
7
  const TAIL_WIDTH = 48;
8
8
  const TAIL_PATH = "M 0 0 C 8 0 20 -16 24 -16 C 28 -16 36 0 48 0";
9
9
  const Example2 = () => {
10
- return (_jsx("div", { className: "flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950", children: _jsx(Frame, { side: "bottom", shapeMode: "extend", path: TAIL_PATH, pathWidth: TAIL_WIDTH, fill: "var(--color-background-900)",
11
- // style={{ color: "var(--background-700)" }}
12
- className: "max-w-sm border-background-700", padding: "large", children: _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "font-semibold text-lg mb-2 text-foreground-50", children: "Did you know?" }), _jsxs("p", { className: "text-foreground-400 text-sm leading-relaxed", children: ["You can customize the frame orientation using the ", _jsx("code", { className: "bg-background-800 px-1 rounded", children: "side" }), " prop. This frame uses ", _jsx("code", { className: "text-accent-500", children: "side=\"bottom\"" }), " to create a tooltip tail."] })] }) }) }));
10
+ return (_jsx("div", { className: "flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950", children: _jsx(Frame, { side: "bottom", shapeMode: "extend", path: TAIL_PATH, pathWidth: TAIL_WIDTH, className: "max-w-sm border-background-700 p-6", style: { "--frame-fill": "var(--color-background-900)" }, children: _jsxs("div", { className: "text-center", children: [_jsx("h3", { className: "font-semibold text-lg mb-2 text-foreground-50", children: "Did you know?" }), _jsxs("p", { className: "text-foreground-400 text-sm leading-relaxed", children: ["You can customize the frame orientation using the ", _jsx("code", { className: "bg-background-800 px-1 rounded", children: "side" }), " prop. This frame uses ", _jsx("code", { className: "text-accent-500", children: "side=\"bottom\"" }), " to create a tooltip tail."] })] }) }) }));
13
11
  };
14
12
  export default Example2;
15
13
  //# sourceMappingURL=02-tooltip-example.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"02-tooltip-example.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/02-tooltip-example.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,8EAA8E;CAC5F,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,UAAU,GAAG,EAAE,CAAC;AACtB,MAAM,SAAS,GAAG,8CAA8C,CAAC;AAEjE,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,cAAK,SAAS,EAAC,uFAAuF,YACpG,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,UAAU,EACrB,IAAI,EAAC,6BAA6B;YAClC,6CAA6C;YAC7C,SAAS,EAAC,gCAAgC,EAC1C,OAAO,EAAC,OAAO,YAEf,eAAK,SAAS,EAAC,aAAa,aAC1B,aAAI,SAAS,EAAC,+CAA+C,8BAAmB,EAChF,aAAG,SAAS,EAAC,6CAA6C,mEACN,eAAM,SAAS,EAAC,gCAAgC,qBAAY,6BAC9F,eAAM,SAAS,EAAC,iBAAiB,gCAAqB,kCACpE,IACA,GACA,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"02-tooltip-example.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/02-tooltip-example.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,eAAe;IACtB,WAAW,EAAE,8EAA8E;CAC5F,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,UAAU,GAAG,EAAE,CAAC;AACtB,MAAM,SAAS,GAAG,8CAA8C,CAAC;AAEjE,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,cAAK,SAAS,EAAC,uFAAuF,YACpG,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,UAAU,EACrB,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE,EAAE,cAAc,EAAE,6BAA6B,EAAyB,YAE/E,eAAK,SAAS,EAAC,aAAa,aAC1B,aAAI,SAAS,EAAC,+CAA+C,8BAAmB,EAChF,aAAG,SAAS,EAAC,6CAA6C,mEACN,eAAM,SAAS,EAAC,gCAAgC,qBAAY,6BAC9F,eAAM,SAAS,EAAC,iBAAiB,gCAAqB,kCACpE,IACA,GACA,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"03-sidebar-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/03-sidebar-tab.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAOF,QAAA,MAAM,QAAQ,+CAmCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"03-sidebar-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Frame/examples/03-sidebar-tab.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,QAAA,MAAM,QAAQ,+CAoCb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -7,7 +7,11 @@ import { Frame } from 'ui-lab-components';
7
7
  const TAB_WIDTH = 120;
8
8
  const TAB_PATH = "M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0";
9
9
  const Example3 = () => {
10
- return (_jsxs("div", { className: "flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]", children: [_jsxs("div", { className: "flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64", children: [_jsx("div", { className: "text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors", children: "Dashboard" }), _jsx("div", { className: "text-accent-500 font-bold cursor-default", children: "Settings" }), _jsx("div", { className: "text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors", children: "Profile" })] }), _jsxs("div", { className: "-ml-[1.5px]", children: [" ", _jsx(Frame, { side: "left", shapeMode: "extend", path: TAB_PATH, pathWidth: TAB_WIDTH, fill: "var(--color-background-900)", style: { color: "var(--background-700)" }, className: "w-80 h-64", padding: "large", cornerRadius: 16, children: _jsxs("div", { className: "h-full flex flex-col justify-center", children: [_jsx("h2", { className: "text-2xl font-bold text-foreground-50 mb-4", children: "Settings" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-2 w-2/3 bg-background-800 rounded" }), _jsx("div", { className: "h-2 w-1/2 bg-background-800 rounded" }), _jsx("div", { className: "h-2 w-3/4 bg-background-800 rounded" })] })] }) })] })] }));
10
+ return (_jsxs("div", { className: "flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]", children: [_jsxs("div", { className: "flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64", children: [_jsx("div", { className: "text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors", children: "Dashboard" }), _jsx("div", { className: "text-accent-500 font-bold cursor-default", children: "Settings" }), _jsx("div", { className: "text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors", children: "Profile" })] }), _jsxs("div", { className: "-ml-[1.5px]", children: [" ", _jsx(Frame, { side: "left", shapeMode: "extend", path: TAB_PATH, pathWidth: TAB_WIDTH, className: "w-80 h-64 p-6", style: {
11
+ "--frame-fill": "var(--color-background-900)",
12
+ "--frame-radius": "16px",
13
+ color: "var(--background-700)",
14
+ }, children: _jsxs("div", { className: "h-full flex flex-col justify-center", children: [_jsx("h2", { className: "text-2xl font-bold text-foreground-50 mb-4", children: "Settings" }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-2 w-2/3 bg-background-800 rounded" }), _jsx("div", { className: "h-2 w-1/2 bg-background-800 rounded" }), _jsx("div", { className: "h-2 w-3/4 bg-background-800 rounded" })] })] }) })] })] }));
11
15
  };
12
16
  export default Example3;
13
17
  //# sourceMappingURL=03-sidebar-tab.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"03-sidebar-tab.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/03-sidebar-tab.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,mFAAmF;CACjG,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,QAAQ,GAAG,2DAA2D,CAAC;AAE7E,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,eAAK,SAAS,EAAC,sFAAsF,aAEnG,eAAK,SAAS,EAAC,qFAAqF,aAClG,cAAK,SAAS,EAAC,4FAA4F,0BAAgB,EAC3H,cAAK,SAAS,EAAC,0CAA0C,yBAAe,EACxE,cAAK,SAAS,EAAC,4FAA4F,wBAAc,IACrH,EAGN,eAAK,SAAS,EAAC,aAAa,kBAC1B,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,6BAA6B,EAClC,KAAK,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EACzC,SAAS,EAAC,WAAW,EACrB,OAAO,EAAC,OAAO,EACf,YAAY,EAAE,EAAE,YAEhB,eAAK,SAAS,EAAC,qCAAqC,aAClD,aAAI,SAAS,EAAC,4CAA4C,yBAAc,EACxE,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,qCAAqC,GAAO,EAC3D,cAAK,SAAS,EAAC,qCAAqC,GAAO,EAC3D,cAAK,SAAS,EAAC,qCAAqC,GAAO,IACvD,IACF,GACA,IACJ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"03-sidebar-tab.js","sourceRoot":"","sources":["../../../../src/components/Frame/examples/03-sidebar-tab.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,mFAAmF;CACjG,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,CAAC;AACtB,MAAM,QAAQ,GAAG,2DAA2D,CAAC;AAE7E,MAAM,QAAQ,GAAG,GAAG,EAAE;IACpB,OAAO,CACL,eAAK,SAAS,EAAC,sFAAsF,aAEnG,eAAK,SAAS,EAAC,qFAAqF,aAClG,cAAK,SAAS,EAAC,4FAA4F,0BAAgB,EAC3H,cAAK,SAAS,EAAC,0CAA0C,yBAAe,EACxE,cAAK,SAAS,EAAC,4FAA4F,wBAAc,IACrH,EAGN,eAAK,SAAS,EAAC,aAAa,kBAC1B,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE;4BACL,cAAc,EAAE,6BAA6B;4BAC7C,gBAAgB,EAAE,MAAM;4BACxB,KAAK,EAAE,uBAAuB;yBACR,YAExB,eAAK,SAAS,EAAC,qCAAqC,aAClD,aAAI,SAAS,EAAC,4CAA4C,yBAAc,EACxE,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,qCAAqC,GAAO,EAC3D,cAAK,SAAS,EAAC,qCAAqC,GAAO,EAC3D,cAAK,SAAS,EAAC,qCAAqC,GAAO,IACvD,IACF,GACA,IACJ,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -7,11 +7,11 @@
7
7
  "02-tooltip-example": {
8
8
  "title": "Tooltip Frame",
9
9
  "description": "A frame with a pointer tail on the bottom, typical for tooltips or popovers.",
10
- "code": "import { Frame } from 'ui-lab-components';\n\nconst TAIL_WIDTH = 48;\nconst TAIL_PATH = \"M 0 0 C 8 0 20 -16 24 -16 C 28 -16 36 0 48 0\";\n\nconst Example2 = () => {\n return (\n <div className=\"flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950\">\n <Frame\n side=\"bottom\"\n shapeMode=\"extend\"\n path={TAIL_PATH}\n pathWidth={TAIL_WIDTH}\n fill=\"var(--color-background-900)\"\n // style={{ color: \"var(--background-700)\" }}\n className=\"max-w-sm border-background-700\"\n padding=\"large\"\n >\n <div className=\"text-center\">\n <h3 className=\"font-semibold text-lg mb-2 text-foreground-50\">Did you know?</h3>\n <p className=\"text-foreground-400 text-sm leading-relaxed\">\n You can customize the frame orientation using the <code className=\"bg-background-800 px-1 rounded\">side</code> prop.\n This frame uses <code className=\"text-accent-500\">side=\"bottom\"</code> to create a tooltip tail.\n </p>\n </div>\n </Frame>\n </div>\n );\n};\n\nexport default Example2;"
10
+ "code": "import React from 'react';\nimport { Frame } from 'ui-lab-components';\n\nconst TAIL_WIDTH = 48;\nconst TAIL_PATH = \"M 0 0 C 8 0 20 -16 24 -16 C 28 -16 36 0 48 0\";\n\nconst Example2 = () => {\n return (\n <div className=\"flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950\">\n <Frame\n side=\"bottom\"\n shapeMode=\"extend\"\n path={TAIL_PATH}\n pathWidth={TAIL_WIDTH}\n className=\"max-w-sm border-background-700 p-6\"\n style={{ \"--frame-fill\": \"var(--color-background-900)\" } as React.CSSProperties}\n >\n <div className=\"text-center\">\n <h3 className=\"font-semibold text-lg mb-2 text-foreground-50\">Did you know?</h3>\n <p className=\"text-foreground-400 text-sm leading-relaxed\">\n You can customize the frame orientation using the <code className=\"bg-background-800 px-1 rounded\">side</code> prop.\n This frame uses <code className=\"text-accent-500\">side=\"bottom\"</code> to create a tooltip tail.\n </p>\n </div>\n </Frame>\n </div>\n );\n};\n\nexport default Example2;"
11
11
  },
12
12
  "03-sidebar-tab": {
13
13
  "title": "Sidebar Tab Frame",
14
14
  "description": "A frame with a tab extending from the side, perfect for active navigation states.",
15
- "code": "import { Frame } from 'ui-lab-components';\n\nconst TAB_WIDTH = 120;\nconst TAB_PATH = \"M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0\";\n\nconst Example3 = () => {\n return (\n <div className=\"flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]\">\n {/* Mock Sidebar */}\n <div className=\"flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64\">\n <div className=\"text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors\">Dashboard</div>\n <div className=\"text-accent-500 font-bold cursor-default\">Settings</div>\n <div className=\"text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors\">Profile</div>\n </div>\n\n {/* Frame content - visually connecting to \"Settings\" */}\n <div className=\"-ml-[1.5px]\"> {/* Overlap border slightly to merge visual connection */}\n <Frame\n side=\"left\"\n shapeMode=\"extend\"\n path={TAB_PATH}\n pathWidth={TAB_WIDTH}\n fill=\"var(--color-background-900)\"\n style={{ color: \"var(--background-700)\" }}\n className=\"w-80 h-64\"\n padding=\"large\"\n cornerRadius={16}\n >\n <div className=\"h-full flex flex-col justify-center\">\n <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Settings</h2>\n <div className=\"space-y-3\">\n <div className=\"h-2 w-2/3 bg-background-800 rounded\"></div>\n <div className=\"h-2 w-1/2 bg-background-800 rounded\"></div>\n <div className=\"h-2 w-3/4 bg-background-800 rounded\"></div>\n </div>\n </div>\n </Frame>\n </div>\n </div>\n );\n};\n\nexport default Example3;"
15
+ "code": "import React from 'react';\nimport { Frame } from 'ui-lab-components';\n\nconst TAB_WIDTH = 120;\nconst TAB_PATH = \"M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0\";\n\nconst Example3 = () => {\n return (\n <div className=\"flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]\">\n {/* Mock Sidebar */}\n <div className=\"flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64\">\n <div className=\"text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors\">Dashboard</div>\n <div className=\"text-accent-500 font-bold cursor-default\">Settings</div>\n <div className=\"text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors\">Profile</div>\n </div>\n\n {/* Frame content - visually connecting to \"Settings\" */}\n <div className=\"-ml-[1.5px]\"> {/* Overlap border slightly to merge visual connection */}\n <Frame\n side=\"left\"\n shapeMode=\"extend\"\n path={TAB_PATH}\n pathWidth={TAB_WIDTH}\n className=\"w-80 h-64 p-6\"\n style={{\n \"--frame-fill\": \"var(--color-background-900)\",\n \"--frame-radius\": \"16px\",\n color: \"var(--background-700)\",\n } as React.CSSProperties}\n >\n <div className=\"h-full flex flex-col justify-center\">\n <h2 className=\"text-2xl font-bold text-foreground-50 mb-4\">Settings</h2>\n <div className=\"space-y-3\">\n <div className=\"h-2 w-2/3 bg-background-800 rounded\"></div>\n <div className=\"h-2 w-1/2 bg-background-800 rounded\"></div>\n <div className=\"h-2 w-3/4 bg-background-800 rounded\"></div>\n </div>\n </div>\n </Frame>\n </div>\n </div>\n );\n};\n\nexport default Example3;"
16
16
  }
17
17
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAatD,QAAA,MAAM,aAAa,EAAE,UAAU,EAuB9B,CAAC;AAYF,eAAO,MAAM,WAAW,EAAE,eAqCzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAatD,QAAA,MAAM,aAAa,EAAE,UAAU,EAAO,CAAC;AAYvC,eAAO,MAAM,WAAW,EAAE,eAqCzB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
@@ -10,35 +10,12 @@ const examplesData = [
10
10
  { id: '02-tooltip-example', Component: Example2, metadata: metadata2 },
11
11
  { id: '03-sidebar-tab', Component: Example3, metadata: metadata3 },
12
12
  ];
13
- const frameControls = [
14
- {
15
- name: 'variant',
16
- label: 'Variant',
17
- type: 'select',
18
- options: [
19
- { label: 'Default', value: 'default' },
20
- { label: 'Accent', value: 'accent' },
21
- ],
22
- defaultValue: 'default',
23
- },
24
- {
25
- name: 'padding',
26
- label: 'Padding',
27
- type: 'select',
28
- options: [
29
- { label: 'None', value: 'none' },
30
- { label: 'Small', value: 'small' },
31
- { label: 'Medium', value: 'medium' },
32
- { label: 'Large', value: 'large' },
33
- ],
34
- defaultValue: 'medium',
35
- },
36
- ];
13
+ const frameControls = [];
37
14
  const frameBasicCode = `import { Frame } from "ui-lab-components";
38
15
 
39
16
  export function Example() {
40
17
  return (
41
- <Frame variant="default" padding="medium">
18
+ <Frame>
42
19
  <p className="text-foreground-300">Framed content</p>
43
20
  </Frame>
44
21
  );
@@ -54,9 +31,9 @@ export const frameDetail = {
54
31
  title: 'Preview',
55
32
  description: 'Adjust props to customize the component',
56
33
  code: frameBasicCode,
57
- preview: (_jsx(Frame, { variant: "default", padding: "medium", children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
34
+ preview: (_jsx(Frame, { children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
58
35
  controls: frameControls,
59
- renderPreview: (props) => (_jsx(Frame, { variant: props.variant, padding: props.padding, children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
36
+ renderPreview: () => (_jsx(Frame, { children: _jsx("p", { className: "text-sm text-foreground-300", children: "Framed content" }) })),
60
37
  },
61
38
  ...loadComponentExamples(examplesData, examplesJson),
62
39
  ],
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACpE,EAAE,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACtE,EAAE,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACnE,CAAC;AAEF,MAAM,aAAa,GAAiB;IAClC;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;SACrC;QACD,YAAY,EAAE,SAAS;KACxB;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;YAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;SACnC;QACD,YAAY,EAAE,QAAQ;KACvB;CACF,CAAC;AAEF,MAAM,cAAc,GAAG;;;;;;;;EAQrB,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAoB;IAC1C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,uFAAuF;IACpG,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,uRAII,EACJ,iOAGI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,CACP,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,QAAQ,YACvC,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;YACD,QAAQ,EAAE,aAAa;YACvB,aAAa,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAC7B,KAAC,KAAK,IAAC,OAAO,EAAE,KAAK,CAAC,OAAc,EAAE,OAAO,EAAE,KAAK,CAAC,OAAc,YACjE,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;CACF,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Frame/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACpE,EAAE,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACtE,EAAE,EAAE,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACnE,CAAC;AAEF,MAAM,aAAa,GAAiB,EAAE,CAAC;AAEvC,MAAM,cAAc,GAAG;;;;;;;;EAQrB,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAoB;IAC1C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,uFAAuF;IACpG,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,uRAII,EACJ,iOAGI,IACA,CACP;IACD,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,CACP,KAAC,KAAK,cACJ,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;YACD,QAAQ,EAAE,aAAa;YACvB,aAAa,EAAE,GAAG,EAAE,CAAC,CACnB,KAAC,KAAK,cACJ,YAAG,SAAS,EAAC,6BAA6B,+BAAmB,GACvD,CACT;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;CACF,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,cAAc,qBAAqB,CAAC"}
@@ -5,6 +5,6 @@ export const metadata = {
5
5
  description: 'A simple tabbed interface with content switching. Use this to organize related content into separate views.'
6
6
  };
7
7
  export default function Example() {
8
- return (_jsxs(Tabs, { defaultValue: "overview", children: [_jsxs(Tabs.List, { "aria-label": "Content sections", children: [_jsx(Tabs.Trigger, { value: "overview", children: "Overview" }), _jsx(Tabs.Trigger, { value: "details", children: "Details" }), _jsx(Tabs.Trigger, { value: "settings", children: "Settings" })] }), _jsx(Tabs.Content, { value: "overview", children: _jsx("p", { children: "Overview content goes here." }) }), _jsx(Tabs.Content, { value: "details", children: _jsx("p", { children: "Details content goes here." }) }), _jsx(Tabs.Content, { value: "settings", children: _jsx("p", { children: "Settings content goes here." }) })] }));
8
+ return (_jsxs(Tabs, { default: "overview", children: [_jsxs(Tabs.List, { "aria-label": "Content sections", children: [_jsx(Tabs.Trigger, { value: "overview", children: "Overview" }), _jsx(Tabs.Trigger, { value: "details", children: "Details" }), _jsx(Tabs.Trigger, { value: "settings", children: "Settings" })] }), _jsx(Tabs.Content, { value: "overview", children: _jsx("p", { children: "Overview content goes here." }) }), _jsx(Tabs.Content, { value: "details", children: _jsx("p", { children: "Details content goes here." }) }), _jsx(Tabs.Content, { value: "settings", children: _jsx("p", { children: "Settings content goes here." }) })] }));
9
9
  }
10
10
  //# sourceMappingURL=01-basic-tabs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"01-basic-tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/examples/01-basic-tabs.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,6GAA6G;CAC3H,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,YAAY,EAAC,UAAU,aAC3B,MAAC,IAAI,CAAC,IAAI,kBAAY,kBAAkB,aACtC,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,UAAU,yBAAwB,EACtD,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,SAAS,wBAAuB,EACpD,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,UAAU,yBAAwB,IAC5C,EACZ,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,UAAU,YAC5B,sDAAkC,GACrB,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YAC3B,qDAAiC,GACpB,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,UAAU,YAC5B,sDAAkC,GACrB,IACV,CACR,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"01-basic-tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/examples/01-basic-tabs.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,6GAA6G;CAC3H,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAC,UAAU,aACtB,MAAC,IAAI,CAAC,IAAI,kBAAY,kBAAkB,aACtC,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,UAAU,yBAAwB,EACtD,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,SAAS,wBAAuB,EACpD,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,UAAU,yBAAwB,IAC5C,EACZ,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,UAAU,YAC5B,sDAAkC,GACrB,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,SAAS,YAC3B,qDAAiC,GACpB,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,UAAU,YAC5B,sDAAkC,GACrB,IACV,CACR,CAAC;AACJ,CAAC"}
@@ -6,6 +6,6 @@ export const metadata = {
6
6
  description: 'A vertical tab layout ideal for settings pages or sidebar navigation. Tabs are stacked vertically with content panels beside them.'
7
7
  };
8
8
  export default function Example() {
9
- return (_jsx("div", { className: "flex items-center justify-center bg-background-950 p-4 min-h-[400px]", children: _jsx(Card, { className: "w-full max-w-2xl", children: _jsxs(Tabs, { defaultValue: "profile", className: "flex flex-row", children: [_jsxs(Tabs.List, { "aria-label": "Settings sections", className: "flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2", children: [_jsx(Tabs.Trigger, { value: "profile", icon: _jsx(User, { className: "w-4 h-4" }), className: "justify-start", children: "Profile" }), _jsx(Tabs.Trigger, { value: "notifications", icon: _jsx(Bell, { className: "w-4 h-4" }), className: "justify-start", children: "Notifications" }), _jsx(Tabs.Trigger, { value: "security", icon: _jsx(Shield, { className: "w-4 h-4" }), className: "justify-start", children: "Security" }), _jsx(Tabs.Trigger, { value: "preferences", icon: _jsx(Settings, { className: "w-4 h-4" }), className: "justify-start", children: "Preferences" })] }), _jsxs("div", { className: "flex-1 p-6", children: [_jsxs(Tabs.Content, { value: "profile", className: "mt-0", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground-100 mb-2", children: "Profile Settings" }), _jsx("p", { className: "text-foreground-400 text-sm mb-4", children: "Manage your personal information and how others see you on the platform." }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-10 w-full bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-10 w-full bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-10 w-2/3 bg-background-800 rounded border border-background-700" })] })] }), _jsxs(Tabs.Content, { value: "notifications", className: "mt-0", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground-100 mb-2", children: "Notification Preferences" }), _jsx("p", { className: "text-foreground-400 text-sm mb-4", children: "Control how and when you receive alerts and updates." }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-5 w-5 bg-accent-500 rounded" }), _jsx("div", { className: "h-4 w-32 bg-background-800 rounded" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-5 w-5 bg-background-700 rounded" }), _jsx("div", { className: "h-4 w-40 bg-background-800 rounded" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-5 w-5 bg-accent-500 rounded" }), _jsx("div", { className: "h-4 w-28 bg-background-800 rounded" })] })] })] }), _jsxs(Tabs.Content, { value: "security", className: "mt-0", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground-100 mb-2", children: "Security Settings" }), _jsx("p", { className: "text-foreground-400 text-sm mb-4", children: "Protect your account with passwords, two-factor authentication, and more." }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "p-3 bg-background-800 rounded border border-background-700", children: [_jsx("div", { className: "h-4 w-24 bg-background-700 rounded mb-2" }), _jsx("div", { className: "h-3 w-48 bg-background-700/50 rounded" })] }), _jsxs("div", { className: "p-3 bg-background-800 rounded border border-background-700", children: [_jsx("div", { className: "h-4 w-32 bg-background-700 rounded mb-2" }), _jsx("div", { className: "h-3 w-40 bg-background-700/50 rounded" })] })] })] }), _jsxs(Tabs.Content, { value: "preferences", className: "mt-0", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground-100 mb-2", children: "General Preferences" }), _jsx("p", { className: "text-foreground-400 text-sm mb-4", children: "Customize your experience with theme, language, and display options." }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx("div", { className: "h-20 bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-20 bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-20 bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-20 bg-background-800 rounded border border-background-700" })] })] })] })] }) }) }));
9
+ return (_jsx("div", { className: "flex items-center justify-center bg-background-950 p-4 min-h-[400px]", children: _jsx(Card, { className: "w-full max-w-2xl", children: _jsxs(Tabs, { default: "profile", className: "flex flex-row", children: [_jsxs(Tabs.List, { "aria-label": "Settings sections", className: "flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2", children: [_jsx(Tabs.Trigger, { value: "profile", icon: _jsx(User, { className: "w-4 h-4" }), className: "justify-start", children: "Profile" }), _jsx(Tabs.Trigger, { value: "notifications", icon: _jsx(Bell, { className: "w-4 h-4" }), className: "justify-start", children: "Notifications" }), _jsx(Tabs.Trigger, { value: "security", icon: _jsx(Shield, { className: "w-4 h-4" }), className: "justify-start", children: "Security" }), _jsx(Tabs.Trigger, { value: "preferences", icon: _jsx(Settings, { className: "w-4 h-4" }), className: "justify-start", children: "Preferences" })] }), _jsxs("div", { className: "flex-1 p-6", children: [_jsxs(Tabs.Content, { value: "profile", className: "mt-0", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground-100 mb-2", children: "Profile Settings" }), _jsx("p", { className: "text-foreground-400 text-sm mb-4", children: "Manage your personal information and how others see you on the platform." }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "h-10 w-full bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-10 w-full bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-10 w-2/3 bg-background-800 rounded border border-background-700" })] })] }), _jsxs(Tabs.Content, { value: "notifications", className: "mt-0", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground-100 mb-2", children: "Notification Preferences" }), _jsx("p", { className: "text-foreground-400 text-sm mb-4", children: "Control how and when you receive alerts and updates." }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-5 w-5 bg-accent-500 rounded" }), _jsx("div", { className: "h-4 w-32 bg-background-800 rounded" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-5 w-5 bg-background-700 rounded" }), _jsx("div", { className: "h-4 w-40 bg-background-800 rounded" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-5 w-5 bg-accent-500 rounded" }), _jsx("div", { className: "h-4 w-28 bg-background-800 rounded" })] })] })] }), _jsxs(Tabs.Content, { value: "security", className: "mt-0", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground-100 mb-2", children: "Security Settings" }), _jsx("p", { className: "text-foreground-400 text-sm mb-4", children: "Protect your account with passwords, two-factor authentication, and more." }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "p-3 bg-background-800 rounded border border-background-700", children: [_jsx("div", { className: "h-4 w-24 bg-background-700 rounded mb-2" }), _jsx("div", { className: "h-3 w-48 bg-background-700/50 rounded" })] }), _jsxs("div", { className: "p-3 bg-background-800 rounded border border-background-700", children: [_jsx("div", { className: "h-4 w-32 bg-background-700 rounded mb-2" }), _jsx("div", { className: "h-3 w-40 bg-background-700/50 rounded" })] })] })] }), _jsxs(Tabs.Content, { value: "preferences", className: "mt-0", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground-100 mb-2", children: "General Preferences" }), _jsx("p", { className: "text-foreground-400 text-sm mb-4", children: "Customize your experience with theme, language, and display options." }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx("div", { className: "h-20 bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-20 bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-20 bg-background-800 rounded border border-background-700" }), _jsx("div", { className: "h-20 bg-background-800 rounded border border-background-700" })] })] })] })] }) }) }));
10
10
  }
11
11
  //# sourceMappingURL=02-vertical-tabs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"02-vertical-tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/examples/02-vertical-tabs.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"02-vertical-tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/examples/02-vertical-tabs.tsx"],"names":[],"mappings":"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"}
@@ -2,11 +2,11 @@
2
2
  "01-basic-tabs": {
3
3
  "title": "Basic Tabs",
4
4
  "description": "A simple tabbed interface with content switching. Use this to organize related content into separate views.",
5
- "code": "import React from 'react';\nimport { Tabs } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <Tabs defaultValue=\"overview\">\n <Tabs.List aria-label=\"Content sections\">\n <Tabs.Trigger value=\"overview\">Overview</Tabs.Trigger>\n <Tabs.Trigger value=\"details\">Details</Tabs.Trigger>\n <Tabs.Trigger value=\"settings\">Settings</Tabs.Trigger>\n </Tabs.List>\n <Tabs.Content value=\"overview\">\n <p>Overview content goes here.</p>\n </Tabs.Content>\n <Tabs.Content value=\"details\">\n <p>Details content goes here.</p>\n </Tabs.Content>\n <Tabs.Content value=\"settings\">\n <p>Settings content goes here.</p>\n </Tabs.Content>\n </Tabs>\n );\n}"
5
+ "code": "import React from 'react';\nimport { Tabs } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <Tabs default=\"overview\">\n <Tabs.List aria-label=\"Content sections\">\n <Tabs.Trigger value=\"overview\">Overview</Tabs.Trigger>\n <Tabs.Trigger value=\"details\">Details</Tabs.Trigger>\n <Tabs.Trigger value=\"settings\">Settings</Tabs.Trigger>\n </Tabs.List>\n <Tabs.Content value=\"overview\">\n <p>Overview content goes here.</p>\n </Tabs.Content>\n <Tabs.Content value=\"details\">\n <p>Details content goes here.</p>\n </Tabs.Content>\n <Tabs.Content value=\"settings\">\n <p>Settings content goes here.</p>\n </Tabs.Content>\n </Tabs>\n );\n}"
6
6
  },
7
7
  "02-vertical-tabs": {
8
8
  "title": "Vertical Tabs (Sidebar)",
9
9
  "description": "A vertical tab layout ideal for settings pages or sidebar navigation. Tabs are stacked vertically with content panels beside them.",
10
- "code": "import React from 'react';\nimport { Tabs, Card } from 'ui-lab-components';\nimport { User, Settings, Bell, Shield } from 'lucide-react';\n\nexport default function Example() {\n return (\n <div className=\"flex items-center justify-center bg-background-950 p-4 min-h-[400px]\">\n <Card className=\"w-full max-w-2xl\">\n <Tabs defaultValue=\"profile\" className=\"flex flex-row\">\n {/* Vertical tab list - styled as sidebar */}\n <Tabs.List\n aria-label=\"Settings sections\"\n className=\"flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2\"\n >\n <Tabs.Trigger value=\"profile\" icon={<User className=\"w-4 h-4\" />} className=\"justify-start\">\n Profile\n </Tabs.Trigger>\n <Tabs.Trigger value=\"notifications\" icon={<Bell className=\"w-4 h-4\" />} className=\"justify-start\">\n Notifications\n </Tabs.Trigger>\n <Tabs.Trigger value=\"security\" icon={<Shield className=\"w-4 h-4\" />} className=\"justify-start\">\n Security\n </Tabs.Trigger>\n <Tabs.Trigger value=\"preferences\" icon={<Settings className=\"w-4 h-4\" />} className=\"justify-start\">\n Preferences\n </Tabs.Trigger>\n </Tabs.List>\n\n {/* Content panels */}\n <div className=\"flex-1 p-6\">\n <Tabs.Content value=\"profile\" className=\"mt-0\">\n <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Profile Settings</h3>\n <p className=\"text-foreground-400 text-sm mb-4\">\n Manage your personal information and how others see you on the platform.\n </p>\n <div className=\"space-y-3\">\n <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n <div className=\"h-10 w-2/3 bg-background-800 rounded border border-background-700\" />\n </div>\n </Tabs.Content>\n\n <Tabs.Content value=\"notifications\" className=\"mt-0\">\n <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Notification Preferences</h3>\n <p className=\"text-foreground-400 text-sm mb-4\">\n Control how and when you receive alerts and updates.\n </p>\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-3\">\n <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n <div className=\"h-4 w-32 bg-background-800 rounded\" />\n </div>\n <div className=\"flex items-center gap-3\">\n <div className=\"h-5 w-5 bg-background-700 rounded\" />\n <div className=\"h-4 w-40 bg-background-800 rounded\" />\n </div>\n <div className=\"flex items-center gap-3\">\n <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n <div className=\"h-4 w-28 bg-background-800 rounded\" />\n </div>\n </div>\n </Tabs.Content>\n\n <Tabs.Content value=\"security\" className=\"mt-0\">\n <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Security Settings</h3>\n <p className=\"text-foreground-400 text-sm mb-4\">\n Protect your account with passwords, two-factor authentication, and more.\n </p>\n <div className=\"space-y-3\">\n <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n <div className=\"h-4 w-24 bg-background-700 rounded mb-2\" />\n <div className=\"h-3 w-48 bg-background-700/50 rounded\" />\n </div>\n <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n <div className=\"h-4 w-32 bg-background-700 rounded mb-2\" />\n <div className=\"h-3 w-40 bg-background-700/50 rounded\" />\n </div>\n </div>\n </Tabs.Content>\n\n <Tabs.Content value=\"preferences\" className=\"mt-0\">\n <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">General Preferences</h3>\n <p className=\"text-foreground-400 text-sm mb-4\">\n Customize your experience with theme, language, and display options.\n </p>\n <div className=\"grid grid-cols-2 gap-3\">\n <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n </div>\n </Tabs.Content>\n </div>\n </Tabs>\n </Card>\n </div>\n );\n}"
10
+ "code": "import React from 'react';\nimport { Tabs, Card } from 'ui-lab-components';\nimport { User, Settings, Bell, Shield } from 'lucide-react';\n\nexport default function Example() {\n return (\n <div className=\"flex items-center justify-center bg-background-950 p-4 min-h-[400px]\">\n <Card className=\"w-full max-w-2xl\">\n <Tabs default=\"profile\" className=\"flex flex-row\">\n {/* Vertical tab list - styled as sidebar */}\n <Tabs.List\n aria-label=\"Settings sections\"\n className=\"flex-col items-stretch justify-start h-auto w-48 border-r border-background-700 rounded-none bg-transparent p-2\"\n >\n <Tabs.Trigger value=\"profile\" icon={<User className=\"w-4 h-4\" />} className=\"justify-start\">\n Profile\n </Tabs.Trigger>\n <Tabs.Trigger value=\"notifications\" icon={<Bell className=\"w-4 h-4\" />} className=\"justify-start\">\n Notifications\n </Tabs.Trigger>\n <Tabs.Trigger value=\"security\" icon={<Shield className=\"w-4 h-4\" />} className=\"justify-start\">\n Security\n </Tabs.Trigger>\n <Tabs.Trigger value=\"preferences\" icon={<Settings className=\"w-4 h-4\" />} className=\"justify-start\">\n Preferences\n </Tabs.Trigger>\n </Tabs.List>\n\n {/* Content panels */}\n <div className=\"flex-1 p-6\">\n <Tabs.Content value=\"profile\" className=\"mt-0\">\n <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Profile Settings</h3>\n <p className=\"text-foreground-400 text-sm mb-4\">\n Manage your personal information and how others see you on the platform.\n </p>\n <div className=\"space-y-3\">\n <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n <div className=\"h-10 w-full bg-background-800 rounded border border-background-700\" />\n <div className=\"h-10 w-2/3 bg-background-800 rounded border border-background-700\" />\n </div>\n </Tabs.Content>\n\n <Tabs.Content value=\"notifications\" className=\"mt-0\">\n <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Notification Preferences</h3>\n <p className=\"text-foreground-400 text-sm mb-4\">\n Control how and when you receive alerts and updates.\n </p>\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-3\">\n <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n <div className=\"h-4 w-32 bg-background-800 rounded\" />\n </div>\n <div className=\"flex items-center gap-3\">\n <div className=\"h-5 w-5 bg-background-700 rounded\" />\n <div className=\"h-4 w-40 bg-background-800 rounded\" />\n </div>\n <div className=\"flex items-center gap-3\">\n <div className=\"h-5 w-5 bg-accent-500 rounded\" />\n <div className=\"h-4 w-28 bg-background-800 rounded\" />\n </div>\n </div>\n </Tabs.Content>\n\n <Tabs.Content value=\"security\" className=\"mt-0\">\n <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">Security Settings</h3>\n <p className=\"text-foreground-400 text-sm mb-4\">\n Protect your account with passwords, two-factor authentication, and more.\n </p>\n <div className=\"space-y-3\">\n <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n <div className=\"h-4 w-24 bg-background-700 rounded mb-2\" />\n <div className=\"h-3 w-48 bg-background-700/50 rounded\" />\n </div>\n <div className=\"p-3 bg-background-800 rounded border border-background-700\">\n <div className=\"h-4 w-32 bg-background-700 rounded mb-2\" />\n <div className=\"h-3 w-40 bg-background-700/50 rounded\" />\n </div>\n </div>\n </Tabs.Content>\n\n <Tabs.Content value=\"preferences\" className=\"mt-0\">\n <h3 className=\"text-lg font-semibold text-foreground-100 mb-2\">General Preferences</h3>\n <p className=\"text-foreground-400 text-sm mb-4\">\n Customize your experience with theme, language, and display options.\n </p>\n <div className=\"grid grid-cols-2 gap-3\">\n <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n <div className=\"h-20 bg-background-800 rounded border border-background-700\" />\n </div>\n </Tabs.Content>\n </div>\n </Tabs>\n </Card>\n </div>\n );\n}"
11
11
  }
12
12
  }
@@ -31,7 +31,7 @@ const tabsBasicCode = `import { Tabs } from "ui-lab-components";
31
31
 
32
32
  export function Example() {
33
33
  return (
34
- <Tabs defaultValue="tab1">
34
+ <Tabs default="tab1">
35
35
  <Tabs.List>
36
36
  <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
37
37
  <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
@@ -52,9 +52,9 @@ export const tabsDetail = {
52
52
  title: "Preview",
53
53
  description: "Adjust props to customize the component",
54
54
  code: tabsBasicCode,
55
- preview: (_jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" }), _jsx(Tabs.Trigger, { value: "tab3", children: "Tab 3" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 2" }) }), _jsx(Tabs.Content, { value: "tab3", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 3" }) })] })),
55
+ preview: (_jsxs(Tabs, { default: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" }), _jsx(Tabs.Trigger, { value: "tab3", children: "Tab 3" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 2" }) }), _jsx(Tabs.Content, { value: "tab3", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 3" }) })] })),
56
56
  controls: tabsControls,
57
- renderPreview: (props) => (_jsxs(Tabs, { defaultValue: "tab1", variant: props.variant, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", disabled: props.disabled, children: "Tab 2" }), _jsx(Tabs.Trigger, { value: "tab3", children: "Tab 3" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 2" }) }), _jsx(Tabs.Content, { value: "tab3", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 3" }) })] })),
57
+ renderPreview: (props) => (_jsxs(Tabs, { default: "tab1", variant: props.variant, children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", disabled: props.disabled, children: "Tab 2" }), _jsx(Tabs.Trigger, { value: "tab3", children: "Tab 3" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 2" }) }), _jsx(Tabs.Content, { value: "tab3", children: _jsx("p", { className: "text-foreground-300", children: "Content for Tab 3" }) })] })),
58
58
  },
59
59
  ...loadComponentExamples(examplesData, examplesJson),
60
60
  ],
@@ -64,14 +64,14 @@ export const tabsDetail = {
64
64
  name: "Default",
65
65
  description: "Standard boxed tabs with active state highlighting.",
66
66
  code: tabsBasicCode,
67
- preview: (_jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content 2" }) })] })),
67
+ preview: (_jsxs(Tabs, { default: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", children: _jsx("p", { className: "text-foreground-300", children: "Content 1" }) }), _jsx(Tabs.Content, { value: "tab2", children: _jsx("p", { className: "text-foreground-300", children: "Content 2" }) })] })),
68
68
  },
69
69
  {
70
70
  id: "underline",
71
71
  name: "Underline",
72
72
  description: "Minimal underline tabs for a cleaner appearance.",
73
73
  code: `<Tabs variant="underline">...</Tabs>`,
74
- preview: (_jsxs(Tabs, { defaultValue: "tab1", variant: "underline", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", className: "mt-6", children: _jsx("p", { className: "text-foreground-300", children: "Content 1" }) }), _jsx(Tabs.Content, { value: "tab2", className: "mt-6", children: _jsx("p", { className: "text-foreground-300", children: "Content 2" }) })] })),
74
+ preview: (_jsxs(Tabs, { default: "tab1", variant: "underline", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", className: "mt-6", children: _jsx("p", { className: "text-foreground-300", children: "Content 1" }) }), _jsx(Tabs.Content, { value: "tab2", className: "mt-6", children: _jsx("p", { className: "text-foreground-300", children: "Content 2" }) })] })),
75
75
  },
76
76
  ],
77
77
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAC;AACjF,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,8BAA8B;AAC9B,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;IACjE,EAAE,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;CACrE,CAAC;AAGF,MAAM,YAAY,GAAiB;IACjC;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;SAC3C;QACD,YAAY,EAAE,SAAS;KACxB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,KAAK;KACpB;CACF,CAAA;AAED,MAAM,aAAa,GAAG;;;;;;;;;;;;;EAapB,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAoB;IACzC,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,6HAA6H;IAC1I,QAAQ,EAAE,CACR,eAAK,SAAS,EAAC,+BAA+B,aAC5C,mQAEI,EACJ,gNAEI,IACA,CACP;IAED,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,CACP,MAAC,IAAI,IAAC,YAAY,EAAC,MAAM,aACvB,MAAC,IAAI,CAAC,IAAI,eACR,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,EAC/C,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,EAC/C,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,IACrC,EACZ,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACxB,YAAG,SAAS,EAAC,qBAAqB,kCAAsB,GAC3C,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACxB,YAAG,SAAS,EAAC,qBAAqB,kCAAsB,GAC3C,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACxB,YAAG,SAAS,EAAC,qBAAqB,kCAAsB,GAC3C,IACV,CACR;YACD,QAAQ,EAAE,YAAY;YACtB,aAAa,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAC7B,MAAC,IAAI,IAAC,YAAY,EAAC,MAAM,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,aAC9C,MAAC,IAAI,CAAC,IAAI,eACR,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,EAC/C,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,sBAAsB,EACzE,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,IACrC,EACZ,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACxB,YAAG,SAAS,EAAC,qBAAqB,kCAAsB,GAC3C,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACxB,YAAG,SAAS,EAAC,qBAAqB,kCAAsB,GAC3C,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACxB,YAAG,SAAS,EAAC,qBAAqB,kCAAsB,GAC3C,IACV,CACR;SACF;QACD,GAAG,qBAAqB,CAAC,YAAY,EAAE,YAAY,CAAC;KACrD;IAED,QAAQ,EAAE;QACR;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,qDAAqD;YAClE,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,CACP,MAAC,IAAI,IAAC,YAAY,EAAC,MAAM,aACvB,MAAC,IAAI,CAAC,IAAI,eACR,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,EAC/C,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,IACrC,EACZ,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACxB,YAAG,SAAS,EAAC,qBAAqB,0BAAc,GACnC,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,YACxB,YAAG,SAAS,EAAC,qBAAqB,0BAAc,GACnC,IACV,CACR;SACF;QACD;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,kDAAkD;YAC/D,IAAI,EAAE,sCAAsC;YAC5C,OAAO,EAAE,CACP,MAAC,IAAI,IAAC,YAAY,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,aAC3C,MAAC,IAAI,CAAC,IAAI,eACR,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,EAC/C,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,sBAAqB,IACrC,EACZ,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACzC,YAAG,SAAS,EAAC,qBAAqB,0BAAc,GACnC,EACf,KAAC,IAAI,CAAC,OAAO,IAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACzC,YAAG,SAAS,EAAC,qBAAqB,0BAAc,GACnC,IACV,CACR;SACF;KACF;CACF,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"generated-data.d.ts","sourceRoot":"","sources":["../src/generated-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CA69HrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAsC3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAoMnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwChD,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoLxE,CAAC;AAEF,eAAO,MAAM,4BAA4B,UAIxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAGzC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAE7B,CAAC"}
1
+ {"version":3,"file":"generated-data.d.ts","sourceRoot":"","sources":["../src/generated-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CA4oIrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAwC3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAoMnE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwChD,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoLxE,CAAC;AAEF,eAAO,MAAM,4BAA4B,UAIxC,CAAC;AAEF,eAAO,MAAM,6BAA6B,UAGzC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,eAE7B,CAAC"}