ui-lab-registry 0.3.1 → 0.3.3

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 (196) hide show
  1. package/dist/component-dependencies.d.ts +0 -11
  2. package/dist/component-dependencies.d.ts.map +1 -1
  3. package/dist/component-dependencies.js +4 -4
  4. package/dist/component-dependencies.js.map +1 -1
  5. package/dist/components/Color/examples/03-format-switching.d.ts +0 -4
  6. package/dist/components/Color/examples/03-format-switching.d.ts.map +1 -1
  7. package/dist/components/Color/examples/03-format-switching.js +2 -2
  8. package/dist/components/Color/examples/03-format-switching.js.map +1 -1
  9. package/dist/components/Color/examples.json +0 -5
  10. package/dist/components/Command/examples/01-basic-command.js +1 -1
  11. package/dist/components/Command/examples/01-basic-command.js.map +1 -1
  12. package/dist/components/Command/examples.json +1 -1
  13. package/dist/components/Command/index.js +3 -3
  14. package/dist/components/Command/index.js.map +1 -1
  15. package/dist/components/Divider/examples/02-pattern-variants.js +1 -1
  16. package/dist/components/Divider/examples.json +1 -1
  17. package/dist/components/Grid/examples/01-basic-grid.js +1 -1
  18. package/dist/components/Grid/examples/01-basic-grid.js.map +1 -1
  19. package/dist/components/Grid/examples.json +1 -1
  20. package/dist/components/Grid/index.js +2 -2
  21. package/dist/components/Grid/index.js.map +1 -1
  22. package/dist/components/Input/examples/02-validation.js +1 -1
  23. package/dist/components/Input/examples/02-validation.js.map +1 -1
  24. package/dist/components/Input/examples.json +1 -1
  25. package/dist/components/Path/examples.json +0 -5
  26. package/dist/components/Radio/index.js +1 -1
  27. package/dist/components/Select/examples/02-searchable-select.js +1 -1
  28. package/dist/components/Select/examples/02-searchable-select.js.map +1 -1
  29. package/dist/components/Select/examples.json +1 -1
  30. package/dist/components/Tabs/examples/01-basic-tabs.js +2 -2
  31. package/dist/components/Tabs/examples/01-basic-tabs.js.map +1 -1
  32. package/dist/components/Tabs/examples/02-vertical-tabs.js +2 -2
  33. package/dist/components/Tabs/examples/02-vertical-tabs.js.map +1 -1
  34. package/dist/components/Tabs/examples.json +2 -2
  35. package/dist/components/Tabs/index.js +11 -11
  36. package/dist/components/Tabs/index.js.map +1 -1
  37. package/dist/elements/AI/AIChatInput/index.js +1 -1
  38. package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/index.js +1 -1
  39. package/dist/elements/AI/AIChatInput/variations/02-with-suggestions/layout/PromptInputWithSuggestions.js +1 -1
  40. package/dist/elements/AI/AIChatInput/variations.json +2 -2
  41. package/dist/elements/AI/ChainOfThought/index.js +1 -1
  42. package/dist/elements/AI/Chat/index.js +1 -1
  43. package/dist/elements/AI/Chat/variations/02-with-actions/index.js +1 -1
  44. package/dist/elements/AI/Chat/variations.json +1 -1
  45. package/dist/elements/Documentation/CopyPage/index.js +1 -1
  46. package/dist/elements/Documentation/NextArticle/index.js +1 -1
  47. package/dist/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.js +1 -1
  48. package/dist/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.js +1 -1
  49. package/dist/elements/Documentation/NextArticle/variations.json +2 -2
  50. package/dist/elements/Documentation/TOC/index.js +1 -1
  51. package/dist/generated-data.d.ts.map +1 -1
  52. package/dist/generated-data.js +213 -947
  53. package/dist/generated-data.js.map +1 -1
  54. package/dist/generated-styles.d.ts.map +1 -1
  55. package/dist/generated-styles.js +171 -63
  56. package/dist/generated-styles.js.map +1 -1
  57. package/dist/generated-styles.json +171 -63
  58. package/dist/patterns/data/data-table-row/metadata.json +3 -3
  59. package/dist/patterns/data/data-table-row/variations/expandable/index.js +1 -1
  60. package/dist/patterns/data/data-table-row/variations/main/index.js +1 -1
  61. package/dist/patterns/data/data-table-row/variations/selectable/index.js +1 -1
  62. package/dist/patterns/data/progress-metric/metadata.json +3 -3
  63. package/dist/patterns/data/progress-metric/variations/colored/index.js +1 -1
  64. package/dist/patterns/data/progress-metric/variations/main/index.js +1 -1
  65. package/dist/patterns/data/progress-metric/variations/stacked/index.js +1 -1
  66. package/dist/patterns/form/labeled-field/metadata.json +4 -4
  67. package/dist/patterns/form/labeled-field/variations/main/index.js +1 -1
  68. package/dist/patterns/form/labeled-field/variations/with-error/index.js +1 -1
  69. package/dist/patterns/form/labeled-field/variations/with-hint/index.js +1 -1
  70. package/dist/patterns/form/select-row/metadata.json +2 -2
  71. package/dist/patterns/form/select-row/variations/main/index.js +1 -1
  72. package/dist/patterns/form/select-row/variations/with-icon/index.js +1 -1
  73. package/dist/patterns/form/toggle-setting-row/metadata.json +2 -2
  74. package/dist/patterns/form/toggle-setting-row/variations/destructive/index.js +1 -1
  75. package/dist/patterns/form/toggle-setting-row/variations/main/index.js +1 -1
  76. package/dist/patterns/interaction/icon-action-bar/variations/compact/index.js +1 -1
  77. package/dist/patterns/layout/media-object/metadata.json +1 -1
  78. package/dist/patterns/layout/media-object/variations/sm/index.js +1 -1
  79. package/dist/patterns/layout/split-row/metadata.json +3 -3
  80. package/dist/patterns/layout/split-row/variations/actions/index.js +1 -1
  81. package/dist/patterns/layout/split-row/variations/main/index.js +1 -1
  82. package/dist/patterns/layout/split-row/variations/meta/index.js +1 -1
  83. package/dist/patterns/layout/stat-block/metadata.json +3 -3
  84. package/dist/patterns/layout/stat-block/variations/compact/index.js +1 -1
  85. package/dist/patterns/layout/stat-block/variations/main/index.js +1 -1
  86. package/dist/patterns/layout/stat-block/variations/with-icon/index.js +1 -1
  87. package/dist/registry.d.ts.map +1 -1
  88. package/dist/registry.js +17 -27
  89. package/dist/registry.js.map +1 -1
  90. package/dist/sections/CTA/variations/02-split/index.js +1 -1
  91. package/dist/sections/CTA/variations.json +1 -1
  92. package/dist/sections/Pricing/variations/01-cards/index.js +1 -1
  93. package/dist/sections/Pricing/variations/02-comparison/index.js +1 -1
  94. package/dist/sections/Pricing/variations.json +2 -2
  95. package/dist/sections/categories.d.ts +0 -11
  96. package/dist/sections/categories.d.ts.map +1 -1
  97. package/dist/sections/categories.js +2 -2
  98. package/dist/sections/categories.js.map +1 -1
  99. package/dist/starters/NextJS/index.js +1 -1
  100. package/dist/types.d.ts +0 -5
  101. package/dist/types.d.ts.map +1 -1
  102. package/dist/utils/load-component-examples.d.ts +3 -2
  103. package/dist/utils/load-component-examples.d.ts.map +1 -1
  104. package/package.json +2 -6
  105. package/src/component-dependencies.ts +4 -4
  106. package/src/components/Anchor/metadata.json +1 -1
  107. package/src/components/Banner/metadata.json +1 -1
  108. package/src/components/Code/metadata.json +1 -1
  109. package/src/components/Color/examples/03-format-switching.tsx +3 -3
  110. package/src/components/Color/examples.json +0 -5
  111. package/src/components/Command/examples/01-basic-command.tsx +1 -1
  112. package/src/components/Command/examples.json +1 -1
  113. package/src/components/Command/index.tsx +3 -3
  114. package/src/components/Date/metadata.json +1 -1
  115. package/src/components/Divider/examples/02-pattern-variants.tsx +3 -3
  116. package/src/components/Divider/examples.json +1 -1
  117. package/src/components/Flex/metadata.json +1 -1
  118. package/src/components/Gallery/metadata.json +1 -1
  119. package/src/components/Grid/examples/01-basic-grid.tsx +1 -1
  120. package/src/components/Grid/examples.json +1 -1
  121. package/src/components/Grid/index.tsx +2 -2
  122. package/src/components/Group/metadata.json +1 -1
  123. package/src/components/Input/examples/02-validation.tsx +2 -2
  124. package/src/components/Input/examples.json +1 -1
  125. package/src/components/List/metadata.json +1 -1
  126. package/src/components/Page/metadata.json +1 -1
  127. package/src/components/Panel/metadata.json +1 -1
  128. package/src/components/Path/examples.json +0 -5
  129. package/src/components/Radio/index.tsx +1 -1
  130. package/src/components/Select/examples/02-searchable-select.tsx +1 -1
  131. package/src/components/Select/examples.json +1 -1
  132. package/src/components/Tabs/examples/01-basic-tabs.tsx +12 -12
  133. package/src/components/Tabs/examples/02-vertical-tabs.tsx +19 -19
  134. package/src/components/Tabs/examples.json +2 -2
  135. package/src/components/Tabs/index.tsx +45 -45
  136. package/src/elements/AI/AIChatInput/index.tsx +2 -2
  137. package/src/elements/AI/AIChatInput/variations/02-with-suggestions/index.tsx +1 -1
  138. package/src/elements/AI/AIChatInput/variations/02-with-suggestions/layout/PromptInputWithSuggestions.tsx +1 -1
  139. package/src/elements/AI/AIChatInput/variations.json +2 -2
  140. package/src/elements/AI/ChainOfThought/index.tsx +1 -1
  141. package/src/elements/AI/Chat/index.tsx +4 -4
  142. package/src/elements/AI/Chat/variations/02-with-actions/index.tsx +3 -3
  143. package/src/elements/AI/Chat/variations.json +1 -1
  144. package/src/elements/Documentation/CopyPage/index.tsx +1 -1
  145. package/src/elements/Documentation/NextArticle/index.tsx +1 -1
  146. package/src/elements/Documentation/NextArticle/variations/01-basic/layout/NextArticleCard.tsx +1 -1
  147. package/src/elements/Documentation/NextArticle/variations/02-with-icon/layout/NextArticleWithIconCard.tsx +1 -1
  148. package/src/elements/Documentation/NextArticle/variations.json +2 -2
  149. package/src/elements/Documentation/TOC/index.tsx +4 -4
  150. package/src/generated-data.ts +213 -947
  151. package/src/generated-styles.ts +171 -63
  152. package/src/patterns/data/data-table-row/metadata.json +4 -4
  153. package/src/patterns/data/data-table-row/variations/expandable/index.tsx +3 -3
  154. package/src/patterns/data/data-table-row/variations/main/index.tsx +2 -2
  155. package/src/patterns/data/data-table-row/variations/selectable/index.tsx +2 -2
  156. package/src/patterns/data/progress-metric/metadata.json +4 -4
  157. package/src/patterns/data/progress-metric/variations/colored/index.tsx +2 -2
  158. package/src/patterns/data/progress-metric/variations/main/index.tsx +2 -2
  159. package/src/patterns/data/progress-metric/variations/stacked/index.tsx +2 -2
  160. package/src/patterns/form/labeled-field/metadata.json +5 -5
  161. package/src/patterns/form/labeled-field/variations/main/index.tsx +1 -1
  162. package/src/patterns/form/labeled-field/variations/with-error/index.tsx +1 -1
  163. package/src/patterns/form/labeled-field/variations/with-hint/index.tsx +1 -1
  164. package/src/patterns/form/select-row/metadata.json +3 -3
  165. package/src/patterns/form/select-row/variations/main/index.tsx +1 -1
  166. package/src/patterns/form/select-row/variations/with-icon/index.tsx +1 -1
  167. package/src/patterns/form/toggle-setting-row/metadata.json +3 -3
  168. package/src/patterns/form/toggle-setting-row/variations/destructive/index.tsx +1 -1
  169. package/src/patterns/form/toggle-setting-row/variations/main/index.tsx +1 -1
  170. package/src/patterns/interaction/icon-action-bar/variations/compact/index.tsx +1 -1
  171. package/src/patterns/layout/media-object/metadata.json +2 -2
  172. package/src/patterns/layout/media-object/variations/sm/index.tsx +2 -2
  173. package/src/patterns/layout/split-row/metadata.json +4 -4
  174. package/src/patterns/layout/split-row/variations/actions/index.tsx +1 -1
  175. package/src/patterns/layout/split-row/variations/main/index.tsx +2 -2
  176. package/src/patterns/layout/split-row/variations/meta/index.tsx +3 -3
  177. package/src/patterns/layout/stat-block/metadata.json +4 -4
  178. package/src/patterns/layout/stat-block/variations/compact/index.tsx +1 -1
  179. package/src/patterns/layout/stat-block/variations/main/index.tsx +1 -1
  180. package/src/patterns/layout/stat-block/variations/with-icon/index.tsx +1 -1
  181. package/src/registry.ts +17 -27
  182. package/src/sections/CTA/variations/02-split/index.tsx +1 -1
  183. package/src/sections/CTA/variations.json +1 -1
  184. package/src/sections/Pricing/variations/01-cards/index.tsx +1 -1
  185. package/src/sections/Pricing/variations/02-comparison/index.tsx +1 -1
  186. package/src/sections/Pricing/variations.json +2 -2
  187. package/src/sections/categories.ts +2 -2
  188. package/src/starters/NextJS/index.tsx +2 -2
  189. package/src/types.ts +1 -1
  190. package/src/utils/load-component-examples.ts +2 -2
  191. package/src/components/Path/examples/01-basic-breadcrumbs.tsx +0 -17
  192. package/src/providers/Theme/examples/01-provider-setup.tsx +0 -37
  193. package/src/providers/Theme/examples/02-toggle-component.tsx +0 -52
  194. package/src/providers/Theme/examples/03-advanced-patterns.tsx +0 -138
  195. package/src/providers/Theme/examples/index.ts +0 -3
  196. package/src/src/generated-styles.ts +0 -1359
@@ -13,15 +13,4 @@ export declare const coreNpmDependencies: readonly ["react-aria", "clsx", "class
13
13
  * Peer dependencies required by the project
14
14
  */
15
15
  export declare const corePeerDependencies: readonly ["react", "react-dom"];
16
- export declare function getComponentDeps(componentId: string): ComponentDeps | undefined;
17
- export declare function getAllComponentIds(): string[];
18
- /**
19
- * Build a reverse mapping from npm packages to the components that use them
20
- * Used for annotating npm packages in installation plans
21
- */
22
- export declare function buildNpmPackageComponentMap(): Record<string, string[]>;
23
- /**
24
- * Get the components that depend on a specific npm package
25
- */
26
- export declare function getComponentsForNpmPackage(npmPackage: string): string[];
27
16
  //# sourceMappingURL=component-dependencies.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"component-dependencies.d.ts","sourceRoot":"","sources":["../src/component-dependencies.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAkC/D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6DAItB,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,oBAAoB,iCAGvB,CAAA;AAEV,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAE/E;AAED,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAatE;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAEvE"}
1
+ {"version":3,"file":"component-dependencies.d.ts","sourceRoot":"","sources":["../src/component-dependencies.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAkC/D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6DAItB,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,oBAAoB,iCAGvB,CAAA"}
@@ -53,17 +53,17 @@ export const corePeerDependencies = [
53
53
  'react',
54
54
  'react-dom',
55
55
  ];
56
- export function getComponentDeps(componentId) {
56
+ function getComponentDeps(componentId) {
57
57
  return componentDependencies[componentId];
58
58
  }
59
- export function getAllComponentIds() {
59
+ function getAllComponentIds() {
60
60
  return Object.keys(componentDependencies);
61
61
  }
62
62
  /**
63
63
  * Build a reverse mapping from npm packages to the components that use them
64
64
  * Used for annotating npm packages in installation plans
65
65
  */
66
- export function buildNpmPackageComponentMap() {
66
+ function buildNpmPackageComponentMap() {
67
67
  const map = {};
68
68
  Object.entries(componentDependencies).forEach(([componentId, deps]) => {
69
69
  deps.npm.forEach(npmPackage => {
@@ -78,7 +78,7 @@ export function buildNpmPackageComponentMap() {
78
78
  /**
79
79
  * Get the components that depend on a specific npm package
80
80
  */
81
- export function getComponentsForNpmPackage(npmPackage) {
81
+ function getComponentsForNpmPackage(npmPackage) {
82
82
  return buildNpmPackageComponentMap()[npmPackage] ?? [];
83
83
  }
84
84
  //# sourceMappingURL=component-dependencies.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"component-dependencies.js","sourceRoot":"","sources":["../src/component-dependencies.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"component-dependencies.js","sourceRoot":"","sources":["../src/component-dependencies.ts"],"names":[],"mappings":"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"}
@@ -1,6 +1,2 @@
1
- export declare const metadata: {
2
- title: string;
3
- description: string;
4
- };
5
1
  export default function Example(): import("react/jsx-runtime").JSX.Element;
6
2
  //# sourceMappingURL=03-format-switching.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"03-format-switching.d.ts","sourceRoot":"","sources":["../../../../src/components/Color/examples/03-format-switching.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAqC9B"}
1
+ {"version":3,"file":"03-format-switching.d.ts","sourceRoot":"","sources":["../../../../src/components/Color/examples/03-format-switching.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,OAAO,4CAqC9B"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from 'react';
3
3
  import { Color } from 'ui-lab-components';
4
- export const metadata = {
4
+ const metadata = {
5
5
  title: 'Format Switching',
6
6
  description: 'Color picker with format toggle between hex and RGB to copy colors in different formats.'
7
7
  };
@@ -11,6 +11,6 @@ export default function Example() {
11
11
  const handleFormatChange = () => {
12
12
  setFormat(format === 'hex' ? 'rgb' : 'hex');
13
13
  };
14
- return (_jsxs("div", { className: "p-4 space-y-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("p", { className: "text-sm text-foreground-300", children: ["Selected color: ", _jsx("code", { className: "text-accent-500 font-mono", children: color })] }), _jsxs("button", { onClick: handleFormatChange, className: "px-3 py-1 text-xs bg-foreground-400 hover:bg-foreground-400 text-foreground-100 rounded transition-colors", children: ["Format: ", format.toUpperCase()] })] }), _jsx(Color, { value: color, onChange: setColor, format: format, defaultValue: "#3B82F6" })] }), _jsx("div", { className: "mt-4 p-3 bg-foreground-400 rounded border border-foreground-400", children: _jsxs("p", { className: "text-xs text-foreground-300", children: [_jsx("strong", { children: "Tip:" }), " Click the format button to switch between hex and RGB output formats. This is useful when you need to copy colors in different formats for different contexts."] }) })] }));
14
+ return (_jsxs("div", { className: "p-4 space-y-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("p", { className: "text-sm text-foreground-300", children: ["Selected color: ", _jsx("code", { className: "text-accent-500 font-mono", children: color })] }), _jsxs("button", { onClick: handleFormatChange, className: "px-3 py-1 text-sm bg-foreground-400 hover:bg-foreground-400 text-foreground-100 rounded transition-colors", children: ["Format: ", format.toUpperCase()] })] }), _jsx(Color, { value: color, onChange: setColor, format: format, defaultValue: "#3B82F6" })] }), _jsx("div", { className: "mt-4 p-3 bg-foreground-400 rounded border border-foreground-400", children: _jsxs("p", { className: "text-sm text-foreground-300", children: [_jsx("strong", { children: "Tip:" }), " Click the format button to switch between hex and RGB output formats. This is useful when you need to copy colors in different formats for different contexts."] }) })] }));
15
15
  }
16
16
  //# sourceMappingURL=03-format-switching.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"03-format-switching.js","sourceRoot":"","sources":["../../../../src/components/Color/examples/03-format-switching.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,0FAA0F;CACxG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,KAAK,CAAC,CAAC;IAE3D,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,SAAS,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,0BACE,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAG,SAAS,EAAC,6BAA6B,iCACxB,eAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,IACxE,EACJ,kBACE,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAC,2GAA2G,yBAE5G,MAAM,CAAC,WAAW,EAAE,IACtB,IACL,EACN,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAC,SAAS,GACtB,IACE,EACN,cAAK,SAAS,EAAC,iEAAiE,YAC9E,aAAG,SAAS,EAAC,6BAA6B,aACxC,oCAAqB,uKAEnB,GACA,IACF,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"03-format-switching.js","sourceRoot":"","sources":["../../../../src/components/Color/examples/03-format-switching.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,0FAA0F;CACxG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,KAAK,CAAC,CAAC;IAE3D,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,SAAS,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC5B,0BACE,eAAK,SAAS,EAAC,wCAAwC,aACrD,aAAG,SAAS,EAAC,6BAA6B,iCACxB,eAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,IACxE,EACJ,kBACE,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAC,2GAA2G,yBAE5G,MAAM,CAAC,WAAW,EAAE,IACtB,IACL,EACN,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAC,SAAS,GACtB,IACE,EACN,cAAK,SAAS,EAAC,iEAAiE,YAC9E,aAAG,SAAS,EAAC,6BAA6B,aACxC,oCAAqB,uKAEnB,GACA,IACF,CACP,CAAC;AACJ,CAAC"}
@@ -8,10 +8,5 @@
8
8
  "title": "Opacity Slider",
9
9
  "description": "Color picker with opacity/alpha slider enabled for transparent color selection.",
10
10
  "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n const [color, setColor] = useState('rgba(106, 90, 205, 0.75)');\n\n return (\n <div className=\"p-4 space-y-4\">\n <div>\n <p className=\"text-sm text-foreground-300 mb-3\">Selected color: <code className=\"text-accent-500 font-mono\">{color}</code></p>\n <Color\n value={color}\n onChange={setColor}\n showOpacity\n format=\"rgb\"\n defaultValue=\"rgba(106, 90, 205, 0.75)\"\n />\n </div>\n </div>\n );\n}"
11
- },
12
- "03-format-switching": {
13
- "title": "Format Switching",
14
- "description": "Color picker with format toggle between hex and RGB to copy colors in different formats.",
15
- "code": "import React, { useState } from 'react';\nimport { Color } from 'ui-lab-components';\n\nexport default function Example() {\n const [color, setColor] = useState('#3B82F6');\n const [format, setFormat] = useState<'hex' | 'rgb'>('hex');\n\n const handleFormatChange = () => {\n setFormat(format === 'hex' ? 'rgb' : 'hex');\n };\n\n return (\n <div className=\"p-4 space-y-4\">\n <div>\n <div className=\"flex items-center justify-between mb-3\">\n <p className=\"text-sm text-foreground-300\">\n Selected color: <code className=\"text-accent-500 font-mono\">{color}</code>\n </p>\n <button\n onClick={handleFormatChange}\n className=\"px-3 py-1 text-xs bg-foreground-400 hover:bg-foreground-400 text-foreground-100 rounded transition-colors\"\n >\n Format: {format.toUpperCase()}\n </button>\n </div>\n <Color\n value={color}\n onChange={setColor}\n format={format}\n defaultValue=\"#3B82F6\"\n />\n </div>\n <div className=\"mt-4 p-3 bg-foreground-400 rounded border border-foreground-400\">\n <p className=\"text-xs text-foreground-300\">\n <strong>Tip:</strong> Click the format button to switch between hex and RGB output formats.\n This is useful when you need to copy colors in different formats for different contexts.\n </p>\n </div>\n </div>\n );\n}"
16
11
  }
17
12
  }
@@ -31,6 +31,6 @@ export default function Example() {
31
31
  action: () => console.log('Settings'),
32
32
  },
33
33
  ];
34
- return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Palette (\u2318K)" }), _jsxs(Command, { open: open, onOpenChange: setOpen, items: commands, children: [_jsx(Command.SearchInput, { placeholder: "Search commands..." }), _jsx(Command.List, { children: _jsx(Command.Groups, { renderCategory: (category) => category ? _jsx(Command.Category, { children: category }) : null, renderItem: (cmd) => (_jsx(Command.Item, { value: cmd.id, textValue: cmd.label, action: cmd.action, hint: cmd.shortcut, children: _jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 500 }, children: cmd.label }), cmd.description && (_jsx("div", { style: { fontSize: '0.875em', opacity: 0.7 }, children: cmd.description }))] }) }) }, cmd.id)) }) })] })] }));
34
+ return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Palette (\u2318K)" }), _jsxs(Command, { open: open, onOpenChange: setOpen, items: commands, children: [_jsx(Command.Input, { placeholder: "Search commands..." }), _jsx(Command.List, { children: _jsx(Command.Groups, { renderCategory: (category) => category ? _jsx(Command.Category, { children: category }) : null, renderItem: (cmd) => (_jsx(Command.Item, { value: cmd.id, textValue: cmd.label, action: cmd.action, hint: cmd.shortcut, children: _jsx("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 500 }, children: cmd.label }), cmd.description && (_jsx("div", { style: { fontSize: '0.875em', opacity: 0.7 }, children: cmd.description }))] }) }) }, cmd.id)) }) })] })] }));
35
35
  }
36
36
  //# sourceMappingURL=01-basic-command.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"01-basic-command.js","sourceRoot":"","sources":["../../../../src/components/Command/examples/01-basic-command.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAS,MAAM,mBAAmB,CAAC;AAE3D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EAAE,sFAAsF;CACpG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,QAAQ,GAAG;QACf;YACE,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,QAAQ;YACf,WAAW,EAAE,kBAAkB;YAC/B,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;SACpC;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,YAAY;YACnB,WAAW,EAAE,uBAAuB;YACpC,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;SACpC;QACD;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,UAAU;YACjB,WAAW,EAAE,2BAA2B;YACxC,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;SACtC;KACF,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,uCAE3B,EACT,MAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,OAAO,EACrB,KAAK,EAAE,QAAQ,aAEf,KAAC,OAAO,CAAC,WAAW,IAAC,WAAW,EAAC,oBAAoB,GAAG,EACxD,KAAC,OAAO,CAAC,IAAI,cACX,KAAC,OAAO,CAAC,MAAM,IACb,cAAc,EAAE,CAAC,QAAQ,EAAE,EAAE,CAC3B,QAAQ,CAAC,CAAC,CAAC,KAAC,OAAO,CAAC,QAAQ,cAAE,QAAQ,GAAoB,CAAC,CAAC,CAAC,IAAI,EAEnE,UAAU,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACnB,KAAC,OAAO,CAAC,IAAI,IAEX,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,SAAS,EAAE,GAAG,CAAC,KAAK,EACpB,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,IAAI,EAAE,GAAG,CAAC,QAAQ,YAElB,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE,YACpF,0BACE,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YAAG,GAAG,CAAC,KAAK,GAAO,EACjD,GAAG,CAAC,WAAW,IAAI,CAClB,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,YAC9C,GAAG,CAAC,WAAW,GACZ,CACP,IACG,GACF,IAfD,GAAG,CAAC,EAAE,CAgBE,CAChB,GACD,GACW,IACP,IACT,CACJ,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"01-basic-command.js","sourceRoot":"","sources":["../../../../src/components/Command/examples/01-basic-command.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,EAAS,MAAM,mBAAmB,CAAC;AAE3D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EAAE,sFAAsF;CACpG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,QAAQ,GAAG;QACf;YACE,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,QAAQ;YACf,WAAW,EAAE,kBAAkB;YAC/B,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;SACpC;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,YAAY;YACnB,WAAW,EAAE,uBAAuB;YACpC,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;SACpC;QACD;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,UAAU;YACjB,WAAW,EAAE,2BAA2B;YACxC,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;SACtC;KACF,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,uCAE3B,EACT,MAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,OAAO,EACrB,KAAK,EAAE,QAAQ,aAEf,KAAC,OAAO,CAAC,KAAK,IAAC,WAAW,EAAC,oBAAoB,GAAG,EAClD,KAAC,OAAO,CAAC,IAAI,cACX,KAAC,OAAO,CAAC,MAAM,IACb,cAAc,EAAE,CAAC,QAAQ,EAAE,EAAE,CAC3B,QAAQ,CAAC,CAAC,CAAC,KAAC,OAAO,CAAC,QAAQ,cAAE,QAAQ,GAAoB,CAAC,CAAC,CAAC,IAAI,EAEnE,UAAU,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CACnB,KAAC,OAAO,CAAC,IAAI,IAEX,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,SAAS,EAAE,GAAG,CAAC,KAAK,EACpB,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,IAAI,EAAE,GAAG,CAAC,QAAQ,YAElB,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE,YACpF,0BACE,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YAAG,GAAG,CAAC,KAAK,GAAO,EACjD,GAAG,CAAC,WAAW,IAAI,CAClB,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,YAC9C,GAAG,CAAC,WAAW,GACZ,CACP,IACG,GACF,IAfD,GAAG,CAAC,EAAE,CAgBE,CAChB,GACD,GACW,IACP,IACT,CACJ,CAAC;AACJ,CAAC"}
@@ -2,6 +2,6 @@
2
2
  "01-basic-command": {
3
3
  "title": "Basic Command Palette",
4
4
  "description": "A searchable command palette with keyboard shortcuts. Use Cmd+K (or Ctrl+K) to open.",
5
- "code": "'use client';\n\nimport React from 'react';\nimport { Command, Button, Badge } from 'ui-lab-components';\n\nexport default function Example() {\n const [open, setOpen] = React.useState(false);\n\n const commands = [\n {\n id: 'search',\n label: 'Search',\n description: 'Search documents',\n shortcut: '⌘F',\n action: () => console.log('Search'),\n },\n {\n id: 'create',\n label: 'Create new',\n description: 'Create a new document',\n shortcut: '⌘N',\n action: () => console.log('Create'),\n },\n {\n id: 'settings',\n label: 'Settings',\n description: 'Open application settings',\n shortcut: '⌘,',\n action: () => console.log('Settings'),\n },\n ];\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>\n Open Palette (⌘K)\n </Button>\n <Command\n open={open}\n onOpenChange={setOpen}\n items={commands}\n >\n <Command.SearchInput placeholder=\"Search commands...\" />\n <Command.List>\n <Command.Groups\n renderCategory={(category) =>\n category ? <Command.Category>{category}</Command.Category> : null\n }\n renderItem={(cmd) => (\n <Command.Item\n key={cmd.id}\n value={cmd.id}\n textValue={cmd.label}\n action={cmd.action}\n hint={cmd.shortcut}\n >\n <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <div>\n <div style={{ fontWeight: 500 }}>{cmd.label}</div>\n {cmd.description && (\n <div style={{ fontSize: '0.875em', opacity: 0.7 }}>\n {cmd.description}\n </div>\n )}\n </div>\n </div>\n </Command.Item>\n )}\n />\n </Command.List>\n </Command>\n </>\n );\n}"
5
+ "code": "'use client';\n\nimport React from 'react';\nimport { Command, Button, Badge } from 'ui-lab-components';\n\nexport default function Example() {\n const [open, setOpen] = React.useState(false);\n\n const commands = [\n {\n id: 'search',\n label: 'Search',\n description: 'Search documents',\n shortcut: '⌘F',\n action: () => console.log('Search'),\n },\n {\n id: 'create',\n label: 'Create new',\n description: 'Create a new document',\n shortcut: '⌘N',\n action: () => console.log('Create'),\n },\n {\n id: 'settings',\n label: 'Settings',\n description: 'Open application settings',\n shortcut: '⌘,',\n action: () => console.log('Settings'),\n },\n ];\n\n return (\n <>\n <Button onClick={() => setOpen(true)}>\n Open Palette (⌘K)\n </Button>\n <Command\n open={open}\n onOpenChange={setOpen}\n items={commands}\n >\n <Command.Input placeholder=\"Search commands...\" />\n <Command.List>\n <Command.Groups\n renderCategory={(category) =>\n category ? <Command.Category>{category}</Command.Category> : null\n }\n renderItem={(cmd) => (\n <Command.Item\n key={cmd.id}\n value={cmd.id}\n textValue={cmd.label}\n action={cmd.action}\n hint={cmd.shortcut}\n >\n <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n <div>\n <div style={{ fontWeight: 500 }}>{cmd.label}</div>\n {cmd.description && (\n <div style={{ fontSize: '0.875em', opacity: 0.7 }}>\n {cmd.description}\n </div>\n )}\n </div>\n </div>\n </Command.Item>\n )}\n />\n </Command.List>\n </Command>\n </>\n );\n}"
6
6
  }
7
7
  }
@@ -48,7 +48,7 @@ export function Example() {
48
48
  onOpenChange={setOpen}
49
49
  items={commands}
50
50
  >
51
- <Command.SearchInput placeholder="Search..." />
51
+ <Command.Input placeholder="Search..." />
52
52
  <Command.List>
53
53
  <Command.Groups
54
54
  renderItem={(cmd) => (
@@ -87,7 +87,7 @@ const CommandPreview = () => {
87
87
  action: () => console.log('Create'),
88
88
  },
89
89
  ];
90
- return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Palette" }), _jsxs(Command, { open: open, onOpenChange: setOpen, items: commands, children: [_jsx(Command.SearchInput, { placeholder: "Search..." }), _jsx(Command.List, { children: _jsx(Command.Groups, { renderItem: (cmd) => (_jsx(Command.Item, { value: cmd.id, textValue: cmd.label, action: cmd.action, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("div", { children: cmd.label }), cmd.shortcut && _jsx("span", { style: { fontSize: '0.875em', opacity: 0.7 }, children: cmd.shortcut })] }) })) }) })] })] }));
90
+ return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Palette" }), _jsxs(Command, { open: open, onOpenChange: setOpen, items: commands, children: [_jsx(Command.Input, { placeholder: "Search..." }), _jsx(Command.List, { children: _jsx(Command.Groups, { renderItem: (cmd) => (_jsx(Command.Item, { value: cmd.id, textValue: cmd.label, action: cmd.action, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("div", { children: cmd.label }), cmd.shortcut && _jsx("span", { style: { fontSize: '0.875em', opacity: 0.7 }, children: cmd.shortcut })] }) })) }) })] })] }));
91
91
  };
92
92
  const CommandRenderPreview = (props) => {
93
93
  const [open, setOpen] = useState(props.open ?? false);
@@ -110,7 +110,7 @@ const CommandRenderPreview = (props) => {
110
110
  return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Palette" }), _jsxs(Command, { open: open, onOpenChange: (value) => {
111
111
  setOpen(value);
112
112
  props.handleControlChange('open', value);
113
- }, items: commands, children: [_jsx(Command.SearchInput, { placeholder: "Search..." }), _jsx(Command.List, { children: _jsx(Command.Groups, { renderItem: (cmd) => (_jsx(Command.Item, { value: cmd.id, textValue: cmd.label, action: cmd.action, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("div", { children: cmd.label }), cmd.shortcut && _jsx("span", { style: { fontSize: '0.875em', opacity: 0.7 }, children: cmd.shortcut })] }) })) }) })] })] }));
113
+ }, items: commands, children: [_jsx(Command.Input, { placeholder: "Search..." }), _jsx(Command.List, { children: _jsx(Command.Groups, { renderItem: (cmd) => (_jsx(Command.Item, { value: cmd.id, textValue: cmd.label, action: cmd.action, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("div", { children: cmd.label }), cmd.shortcut && _jsx("span", { style: { fontSize: '0.875em', opacity: 0.7 }, children: cmd.shortcut })] }) })) }) })] })] }));
114
114
  };
115
115
  export const commandDetail = {
116
116
  id: 'command',
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Command/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Command/index.tsx"],"names":[],"mappings":"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"}
@@ -5,6 +5,6 @@ export const metadata = {
5
5
  description: 'Dividers support three distinct pattern styles: solid for continuous lines, dashed for rectangular segments, and dotted for circular dots.'
6
6
  };
7
7
  export default function Example() {
8
- return (_jsxs("div", { className: "space-y-6 w-full", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs text-foreground-400", children: "Solid" }), _jsx(Divider, { variant: "solid" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs text-foreground-400", children: "Dashed" }), _jsx(Divider, { variant: "dashed" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-xs text-foreground-400", children: "Dotted" }), _jsx(Divider, { variant: "dotted" })] })] }));
8
+ return (_jsxs("div", { className: "space-y-6 w-full", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-sm text-foreground-400", children: "Solid" }), _jsx(Divider, { variant: "solid" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-sm text-foreground-400", children: "Dashed" }), _jsx(Divider, { variant: "dashed" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("span", { className: "text-sm text-foreground-400", children: "Dotted" }), _jsx(Divider, { variant: "dotted" })] })] }));
9
9
  }
10
10
  //# sourceMappingURL=02-pattern-variants.js.map
@@ -7,7 +7,7 @@
7
7
  "02-pattern-variants": {
8
8
  "title": "Pattern Variants",
9
9
  "description": "Dividers support three distinct pattern styles: solid for continuous lines, dashed for rectangular segments, and dotted for circular dots.",
10
- "code": "import { Divider } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <div className=\"space-y-6 w-full\">\n <div className=\"space-y-2\">\n <span className=\"text-xs text-foreground-400\">Solid</span>\n <Divider variant=\"solid\" />\n </div>\n <div className=\"space-y-2\">\n <span className=\"text-xs text-foreground-400\">Dashed</span>\n <Divider variant=\"dashed\" />\n </div>\n <div className=\"space-y-2\">\n <span className=\"text-xs text-foreground-400\">Dotted</span>\n <Divider variant=\"dotted\" />\n </div>\n </div>\n );\n}"
10
+ "code": "import { Divider } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <div className=\"space-y-6 w-full\">\n <div className=\"space-y-2\">\n <span className=\"text-sm text-foreground-400\">Solid</span>\n <Divider variant=\"solid\" />\n </div>\n <div className=\"space-y-2\">\n <span className=\"text-sm text-foreground-400\">Dashed</span>\n <Divider variant=\"dashed\" />\n </div>\n <div className=\"space-y-2\">\n <span className=\"text-sm text-foreground-400\">Dotted</span>\n <Divider variant=\"dotted\" />\n </div>\n </div>\n );\n}"
11
11
  },
12
12
  "03-vertical-divider": {
13
13
  "title": "Vertical Orientation",
@@ -5,6 +5,6 @@ export const metadata = {
5
5
  description: 'A simple grid layout with multiple cells. Use this for organizing content in a responsive grid structure.'
6
6
  };
7
7
  export default function Example() {
8
- return (_jsxs(Grid, { columns: "3", gap: "md", children: [_jsx("div", { style: { padding: '1rem', background: '#e0e0e0' }, children: "Cell 1" }), _jsx("div", { style: { padding: '1rem', background: '#d0d0d0' }, children: "Cell 2" }), _jsx("div", { style: { padding: '1rem', background: '#c0c0c0' }, children: "Cell 3" }), _jsx("div", { style: { padding: '1rem', background: '#b0b0b0' }, children: "Cell 4" }), _jsx("div", { style: { padding: '1rem', background: '#a0a0a0' }, children: "Cell 5" }), _jsx("div", { style: { padding: '1rem', background: '#909090' }, children: "Cell 6" })] }));
8
+ return (_jsxs(Grid, { columns: 3, gap: "md", children: [_jsx("div", { style: { padding: '1rem', background: '#e0e0e0' }, children: "Cell 1" }), _jsx("div", { style: { padding: '1rem', background: '#d0d0d0' }, children: "Cell 2" }), _jsx("div", { style: { padding: '1rem', background: '#c0c0c0' }, children: "Cell 3" }), _jsx("div", { style: { padding: '1rem', background: '#b0b0b0' }, children: "Cell 4" }), _jsx("div", { style: { padding: '1rem', background: '#a0a0a0' }, children: "Cell 5" }), _jsx("div", { style: { padding: '1rem', background: '#909090' }, children: "Cell 6" })] }));
9
9
  }
10
10
  //# sourceMappingURL=01-basic-grid.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"01-basic-grid.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/01-basic-grid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,2GAA2G;CACzH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,GAAG,EAAC,IAAI,aACxB,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,IAC/D,CACR,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"01-basic-grid.js","sourceRoot":"","sources":["../../../../src/components/Grid/examples/01-basic-grid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,2GAA2G;CACzH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAE,CAAC,EAAE,GAAG,EAAC,IAAI,aACxB,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,EACpE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAc,IAC/D,CACR,CAAC;AACJ,CAAC"}
@@ -2,6 +2,6 @@
2
2
  "01-basic-grid": {
3
3
  "title": "Basic Grid",
4
4
  "description": "A simple grid layout with multiple cells. Use this for organizing content in a responsive grid structure.",
5
- "code": "import React from 'react';\nimport { Grid } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <Grid columns=\"3\" gap=\"md\">\n <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>\n <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>\n <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>\n <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>\n <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>\n <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>\n </Grid>\n );\n}"
5
+ "code": "import React from 'react';\nimport { Grid } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <Grid columns={3} gap=\"md\">\n <div style={{ padding: '1rem', background: '#e0e0e0' }}>Cell 1</div>\n <div style={{ padding: '1rem', background: '#d0d0d0' }}>Cell 2</div>\n <div style={{ padding: '1rem', background: '#c0c0c0' }}>Cell 3</div>\n <div style={{ padding: '1rem', background: '#b0b0b0' }}>Cell 4</div>\n <div style={{ padding: '1rem', background: '#a0a0a0' }}>Cell 5</div>\n <div style={{ padding: '1rem', background: '#909090' }}>Cell 6</div>\n </Grid>\n );\n}"
6
6
  }
7
7
  }
@@ -78,7 +78,7 @@ const gridBasicCode = `import { Grid } from "ui-lab-components";
78
78
 
79
79
  export function Example() {
80
80
  return (
81
- <Grid columns="3" gap="md">
81
+ <Grid columns={3} gap="md">
82
82
  <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">1</div>
83
83
  <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">2</div>
84
84
  <div className="h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center">3</div>
@@ -115,7 +115,7 @@ export const gridDetail = {
115
115
  name: 'Default',
116
116
  description: 'Standard grid with 3 columns and medium gap.',
117
117
  code: gridBasicCode,
118
- preview: (_jsxs(Grid, { columns: "3", gap: "md", children: [_jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "1" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "2" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "3" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "4" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "5" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "6" })] })),
118
+ preview: (_jsxs(Grid, { columns: 3, gap: "md", children: [_jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "1" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "2" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "3" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "4" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "5" }), _jsx("div", { className: "h-20 bg-accent-500/20 rounded border border-accent-500/50 flex items-center justify-center", children: "6" })] })),
119
119
  },
120
120
  ],
121
121
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"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"}
@@ -6,6 +6,6 @@ export const metadata = {
6
6
  description: 'Input fields with error and success validation states, including helper text for user feedback.'
7
7
  };
8
8
  export default function Example() {
9
- return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-sm", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { error: true, helperText: "Please enter a valid email address", helperTextError: true, children: "Email" }), _jsx(Input, { type: "email", placeholder: "Enter your email", error: true, defaultValue: "invalid-email", suffixIcon: _jsx(FaCircleExclamation, { className: "text-danger-600", size: 14 }) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { helperText: "Email address is available", children: "Email" }), _jsx(Input, { type: "email", placeholder: "Enter your email", defaultValue: "user@example.com", suffixIcon: _jsx(FaCircleCheck, { className: "text-success-600", size: 14 }), className: "border-success-600 focus:border-success-600" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { required: true, helperText: "We'll never share your email with anyone else.", children: "Email" }), _jsx(Input, { type: "email", placeholder: "Enter your email" })] })] }));
9
+ return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-sm", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { error: true, helperText: "Please enter a valid email address", helperTextError: true, children: "Email" }), _jsx(Input, { type: "email", placeholder: "Enter your email", error: true, defaultValue: "invalid-email", icon: { suffix: _jsx(FaCircleExclamation, { className: "text-danger-600", size: 14 }) } })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { helperText: "Email address is available", children: "Email" }), _jsx(Input, { type: "email", placeholder: "Enter your email", defaultValue: "user@example.com", icon: { suffix: _jsx(FaCircleCheck, { className: "text-success-600", size: 14 }) }, className: "border-success-600 focus:border-success-600" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { required: true, helperText: "We'll never share your email with anyone else.", children: "Email" }), _jsx(Input, { type: "email", placeholder: "Enter your email" })] })] }));
10
10
  }
11
11
  //# sourceMappingURL=02-validation.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"02-validation.js","sourceRoot":"","sources":["../../../../src/components/Input/examples/02-validation.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErE,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,iGAAiG;CAC/G,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,SAAS,EAAC,qCAAqC,aAElD,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,KAAK,IAAC,KAAK,QAAC,UAAU,EAAC,oCAAoC,EAAC,eAAe,4BAEpE,EACR,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,kBAAkB,EAC9B,KAAK,QACL,YAAY,EAAC,eAAe,EAC5B,UAAU,EAAE,KAAC,mBAAmB,IAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAE,EAAE,GAAI,GACzE,IACE,EAGN,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,KAAK,IAAC,UAAU,EAAC,4BAA4B,sBAEtC,EACR,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,kBAAkB,EAC9B,YAAY,EAAC,kBAAkB,EAC/B,UAAU,EAAE,KAAC,aAAa,IAAC,SAAS,EAAC,kBAAkB,EAAC,IAAI,EAAE,EAAE,GAAI,EACpE,SAAS,EAAC,6CAA6C,GACvD,IACE,EAGN,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,KAAK,IAAC,QAAQ,QAAC,UAAU,EAAC,gDAAgD,sBAEnE,EACR,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,kBAAkB,GAC9B,IACE,IACF,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"02-validation.js","sourceRoot":"","sources":["../../../../src/components/Input/examples/02-validation.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErE,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,iGAAiG;CAC/G,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,SAAS,EAAC,qCAAqC,aAElD,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,KAAK,IAAC,KAAK,QAAC,UAAU,EAAC,oCAAoC,EAAC,eAAe,4BAEpE,EACR,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,kBAAkB,EAC9B,KAAK,QACL,YAAY,EAAC,eAAe,EAC5B,IAAI,EAAE,EAAE,MAAM,EAAE,KAAC,mBAAmB,IAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAE,EAAE,GAAI,EAAE,GAC/E,IACE,EAGN,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,KAAK,IAAC,UAAU,EAAC,4BAA4B,sBAEtC,EACR,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,kBAAkB,EAC9B,YAAY,EAAC,kBAAkB,EAC/B,IAAI,EAAE,EAAE,MAAM,EAAE,KAAC,aAAa,IAAC,SAAS,EAAC,kBAAkB,EAAC,IAAI,EAAE,EAAE,GAAI,EAAE,EAC1E,SAAS,EAAC,6CAA6C,GACvD,IACE,EAGN,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,KAAK,IAAC,QAAQ,QAAC,UAAU,EAAC,gDAAgD,sBAEnE,EACR,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,kBAAkB,GAC9B,IACE,IACF,CACP,CAAC;AACJ,CAAC"}
@@ -7,6 +7,6 @@
7
7
  "02-validation": {
8
8
  "title": "Validation States",
9
9
  "description": "Input fields with error and success validation states, including helper text for user feedback.",
10
- "code": "import React from 'react';\nimport { Input, Label } from 'ui-lab-components';\nimport { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';\n\nexport default function Example() {\n return (\n <div className=\"flex flex-col gap-6 w-full max-w-sm\">\n {/* Error State */}\n <div className=\"flex flex-col gap-1.5\">\n <Label error helperText=\"Please enter a valid email address\" helperTextError>\n Email\n </Label>\n <Input\n type=\"email\"\n placeholder=\"Enter your email\"\n error\n defaultValue=\"invalid-email\"\n suffixIcon={<FaCircleExclamation className=\"text-danger-600\" size={14} />}\n />\n </div>\n\n {/* Success State */}\n <div className=\"flex flex-col gap-1.5\">\n <Label helperText=\"Email address is available\">\n Email\n </Label>\n <Input\n type=\"email\"\n placeholder=\"Enter your email\"\n defaultValue=\"user@example.com\"\n suffixIcon={<FaCircleCheck className=\"text-success-600\" size={14} />}\n className=\"border-success-600 focus:border-success-600\"\n />\n </div>\n\n {/* Default State with Helper Text */}\n <div className=\"flex flex-col gap-1.5\">\n <Label required helperText=\"We'll never share your email with anyone else.\">\n Email\n </Label>\n <Input\n type=\"email\"\n placeholder=\"Enter your email\"\n />\n </div>\n </div>\n );\n}"
10
+ "code": "import React from 'react';\nimport { Input, Label } from 'ui-lab-components';\nimport { FaCircleExclamation, FaCircleCheck } from 'react-icons/fa6';\n\nexport default function Example() {\n return (\n <div className=\"flex flex-col gap-6 w-full max-w-sm\">\n {/* Error State */}\n <div className=\"flex flex-col gap-1.5\">\n <Label error helperText=\"Please enter a valid email address\" helperTextError>\n Email\n </Label>\n <Input\n type=\"email\"\n placeholder=\"Enter your email\"\n error\n defaultValue=\"invalid-email\"\n icon={{ suffix: <FaCircleExclamation className=\"text-danger-600\" size={14} /> }}\n />\n </div>\n\n {/* Success State */}\n <div className=\"flex flex-col gap-1.5\">\n <Label helperText=\"Email address is available\">\n Email\n </Label>\n <Input\n type=\"email\"\n placeholder=\"Enter your email\"\n defaultValue=\"user@example.com\"\n icon={{ suffix: <FaCircleCheck className=\"text-success-600\" size={14} /> }}\n className=\"border-success-600 focus:border-success-600\"\n />\n </div>\n\n {/* Default State with Helper Text */}\n <div className=\"flex flex-col gap-1.5\">\n <Label required helperText=\"We'll never share your email with anyone else.\">\n Email\n </Label>\n <Input\n type=\"email\"\n placeholder=\"Enter your email\"\n />\n </div>\n </div>\n );\n}"
11
11
  }
12
12
  }
@@ -1,9 +1,4 @@
1
1
  {
2
- "01-basic-breadcrumbs": {
3
- "title": "Basic Path",
4
- "description": "A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.",
5
- "code": "import { PathItem, Path } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <Path>\n <PathItem href=\"/\">Home</PathItem>\n <PathItem href=\"/products\">Products</PathItem>\n <PathItem href=\"/products/electronics\">Electronics</PathItem>\n <PathItem>Laptop</PathItem>\n </Path>\n );\n}"
6
- },
7
2
  "01-basic-path": {
8
3
  "title": "Basic Path",
9
4
  "description": "A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.",
@@ -55,7 +55,7 @@ export const radioDetail = {
55
55
  id: "radio",
56
56
  name: "Radio",
57
57
  description: "A radio button group component for mutually exclusive selections with support for grouping, disabled state, and descriptions.",
58
- overview: (_jsxs("div", { className: "space-y-4 text-foreground-300", children: [_jsx("p", { children: "The Radio component is a form control for capturing a single choice from a set of mutually exclusive options. Radio buttons are ideal when users need to select one option from a group." }), _jsxs("p", { children: ["The component supports labels, descriptions, helper text, and various visual states including checked, unchecked, disabled, and error states. Use the compound component pattern with ", _jsx("code", { className: "text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-xs", children: "Radio.Group" }), " and ", _jsx("code", { className: "text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-xs", children: "Radio.Item" }), " for automatic group management, or use individual ", _jsx("code", { className: "text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-xs", children: "Radio" }), " components for standalone use."] })] })),
58
+ overview: (_jsxs("div", { className: "space-y-4 text-foreground-300", children: [_jsx("p", { children: "The Radio component is a form control for capturing a single choice from a set of mutually exclusive options. Radio buttons are ideal when users need to select one option from a group." }), _jsxs("p", { children: ["The component supports labels, descriptions, helper text, and various visual states including checked, unchecked, disabled, and error states. Use the compound component pattern with ", _jsx("code", { className: "text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-sm", children: "Radio.Group" }), " and ", _jsx("code", { className: "text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-sm", children: "Radio.Item" }), " for automatic group management, or use individual ", _jsx("code", { className: "text-accent-500 bg-background-900 px-1.5 py-0.5 rounded text-sm", children: "Radio" }), " components for standalone use."] })] })),
59
59
  examples: [
60
60
  {
61
61
  id: "preview",
@@ -33,6 +33,6 @@ const countries = [
33
33
  { value: 'nz', label: 'New Zealand' },
34
34
  ];
35
35
  export default function Example() {
36
- return (_jsxs(Select, { children: [_jsx(Searchable.Trigger, { placeholder: "Search countries..." }), _jsx(Searchable.Content, { searchPlaceholder: "Type to filter...", children: countries.map((country) => (_jsx(Select.Item, { value: country.value, textValue: country.label, children: country.label }, country.value))) })] }));
36
+ return (_jsxs(Select, { children: [_jsx(Searchable.Input, { placeholder: "Search countries..." }), _jsx(Searchable.Content, { searchPlaceholder: "Type to filter...", children: countries.map((country) => (_jsx(Select.Item, { value: country.value, textValue: country.label, children: country.label }, country.value))) })] }));
37
37
  }
38
38
  //# sourceMappingURL=02-searchable-select.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"02-searchable-select.js","sourceRoot":"","sources":["../../../../src/components/Select/examples/02-searchable-select.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,kGAAkG;CAChH,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE;IACvC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE;IACnC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE;IACxC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE;IAClC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;IACrC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;IACrC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;IACrC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE;IACnC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,MAAM,eACL,KAAC,UAAU,CAAC,OAAO,IAAC,WAAW,EAAC,qBAAqB,GAAG,EACxD,KAAC,UAAU,CAAC,OAAO,IAAC,iBAAiB,EAAC,mBAAmB,YACtD,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC1B,KAAC,MAAM,CAAC,IAAI,IAAqB,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,YAC5E,OAAO,CAAC,KAAK,IADE,OAAO,CAAC,KAAK,CAEjB,CACf,CAAC,GACiB,IACd,CACV,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"02-searchable-select.js","sourceRoot":"","sources":["../../../../src/components/Select/examples/02-searchable-select.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,kGAAkG;CAChH,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE;IACvC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE;IACnC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE;IACxC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE;IAClC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;IACrC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;IACrC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;IACjC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;IAChC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;IACrC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE;IAC/B,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE;IACnC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,aAAa,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,MAAC,MAAM,eACL,KAAC,UAAU,CAAC,KAAK,IAAC,WAAW,EAAC,qBAAqB,GAAG,EACtD,KAAC,UAAU,CAAC,OAAO,IAAC,iBAAiB,EAAC,mBAAmB,YACtD,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC1B,KAAC,MAAM,CAAC,IAAI,IAAqB,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,YAC5E,OAAO,CAAC,KAAK,IADE,OAAO,CAAC,KAAK,CAEjB,CACf,CAAC,GACiB,IACd,CACV,CAAC;AACJ,CAAC"}
@@ -7,6 +7,6 @@
7
7
  "02-searchable-select": {
8
8
  "title": "Searchable Select",
9
9
  "description": "A filterable select component with search input. Type to filter through a large list of options.",
10
- "code": "import React from 'react';\nimport { Select, Searchable } from 'ui-lab-components';\n\nconst countries = [\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n { value: 'mx', label: 'Mexico' },\n { value: 'br', label: 'Brazil' },\n { value: 'ar', label: 'Argentina' },\n { value: 'uk', label: 'United Kingdom' },\n { value: 'fr', label: 'France' },\n { value: 'de', label: 'Germany' },\n { value: 'it', label: 'Italy' },\n { value: 'es', label: 'Spain' },\n { value: 'pt', label: 'Portugal' },\n { value: 'nl', label: 'Netherlands' },\n { value: 'be', label: 'Belgium' },\n { value: 'ch', label: 'Switzerland' },\n { value: 'at', label: 'Austria' },\n { value: 'se', label: 'Sweden' },\n { value: 'no', label: 'Norway' },\n { value: 'dk', label: 'Denmark' },\n { value: 'fi', label: 'Finland' },\n { value: 'pl', label: 'Poland' },\n { value: 'jp', label: 'Japan' },\n { value: 'cn', label: 'China' },\n { value: 'kr', label: 'South Korea' },\n { value: 'in', label: 'India' },\n { value: 'au', label: 'Australia' },\n { value: 'nz', label: 'New Zealand' },\n];\n\nexport default function Example() {\n return (\n <Select>\n <Searchable.Trigger placeholder=\"Search countries...\" />\n <Searchable.Content searchPlaceholder=\"Type to filter...\">\n {countries.map((country) => (\n <Select.Item key={country.value} value={country.value} textValue={country.label}>\n {country.label}\n </Select.Item>\n ))}\n </Searchable.Content>\n </Select>\n );\n}"
10
+ "code": "import React from 'react';\nimport { Select, Searchable } from 'ui-lab-components';\n\nconst countries = [\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n { value: 'mx', label: 'Mexico' },\n { value: 'br', label: 'Brazil' },\n { value: 'ar', label: 'Argentina' },\n { value: 'uk', label: 'United Kingdom' },\n { value: 'fr', label: 'France' },\n { value: 'de', label: 'Germany' },\n { value: 'it', label: 'Italy' },\n { value: 'es', label: 'Spain' },\n { value: 'pt', label: 'Portugal' },\n { value: 'nl', label: 'Netherlands' },\n { value: 'be', label: 'Belgium' },\n { value: 'ch', label: 'Switzerland' },\n { value: 'at', label: 'Austria' },\n { value: 'se', label: 'Sweden' },\n { value: 'no', label: 'Norway' },\n { value: 'dk', label: 'Denmark' },\n { value: 'fi', label: 'Finland' },\n { value: 'pl', label: 'Poland' },\n { value: 'jp', label: 'Japan' },\n { value: 'cn', label: 'China' },\n { value: 'kr', label: 'South Korea' },\n { value: 'in', label: 'India' },\n { value: 'au', label: 'Australia' },\n { value: 'nz', label: 'New Zealand' },\n];\n\nexport default function Example() {\n return (\n <Select>\n <Searchable.Input placeholder=\"Search countries...\" />\n <Searchable.Content searchPlaceholder=\"Type to filter...\">\n {countries.map((country) => (\n <Select.Item key={country.value} value={country.value} textValue={country.label}>\n {country.label}\n </Select.Item>\n ))}\n </Searchable.Content>\n </Select>\n );\n}"
11
11
  }
12
12
  }
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Tabs, TabsList, TabsTrigger, TabsContent } from 'ui-lab-components';
2
+ import { Tabs } from 'ui-lab-components';
3
3
  export const metadata = {
4
4
  title: 'Basic Tabs',
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(TabsList, { "aria-label": "Content sections", children: [_jsx(TabsTrigger, { value: "overview", children: "Overview" }), _jsx(TabsTrigger, { value: "details", children: "Details" }), _jsx(TabsTrigger, { value: "settings", children: "Settings" })] }), _jsx(TabsContent, { value: "overview", children: _jsx("p", { children: "Overview content goes here." }) }), _jsx(TabsContent, { value: "details", children: _jsx("p", { children: "Details content goes here." }) }), _jsx(TabsContent, { value: "settings", children: _jsx("p", { children: "Settings content goes here." }) })] }));
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." }) })] }));
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,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE7E,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,QAAQ,kBAAY,kBAAkB,aACrC,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,yBAAuB,EACpD,KAAC,WAAW,IAAC,KAAK,EAAC,SAAS,wBAAsB,EAClD,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,yBAAuB,IAC3C,EACX,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,YAC3B,sDAAkC,GACtB,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,SAAS,YAC1B,qDAAiC,GACrB,EACd,KAAC,WAAW,IAAC,KAAK,EAAC,UAAU,YAC3B,sDAAkC,GACtB,IACT,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,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,11 +1,11 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Tabs, TabsList, TabsTrigger, TabsContent, Card } from 'ui-lab-components';
2
+ import { Tabs, Card } from 'ui-lab-components';
3
3
  import { User, Settings, Bell, Shield } from 'lucide-react';
4
4
  export const metadata = {
5
5
  title: 'Vertical Tabs (Sidebar)',
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(TabsList, { "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(TabsTrigger, { value: "profile", icon: _jsx(User, { className: "w-4 h-4" }), className: "justify-start", children: "Profile" }), _jsx(TabsTrigger, { value: "notifications", icon: _jsx(Bell, { className: "w-4 h-4" }), className: "justify-start", children: "Notifications" }), _jsx(TabsTrigger, { value: "security", icon: _jsx(Shield, { className: "w-4 h-4" }), className: "justify-start", children: "Security" }), _jsx(TabsTrigger, { value: "preferences", icon: _jsx(Settings, { className: "w-4 h-4" }), className: "justify-start", children: "Preferences" })] }), _jsxs("div", { className: "flex-1 p-6", children: [_jsxs(TabsContent, { 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(TabsContent, { 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(TabsContent, { 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(TabsContent, { 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, { 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" })] })] })] })] }) }) }));
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, TabsList, TabsTrigger, TabsContent } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <Tabs defaultValue=\"overview\">\n <TabsList aria-label=\"Content sections\">\n <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n <TabsTrigger value=\"details\">Details</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"overview\">\n <p>Overview content goes here.</p>\n </TabsContent>\n <TabsContent value=\"details\">\n <p>Details content goes here.</p>\n </TabsContent>\n <TabsContent value=\"settings\">\n <p>Settings content goes here.</p>\n </TabsContent>\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 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}"
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, TabsList, TabsTrigger, TabsContent, 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 <TabsList\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 <TabsTrigger value=\"profile\" icon={<User className=\"w-4 h-4\" />} className=\"justify-start\">\n Profile\n </TabsTrigger>\n <TabsTrigger value=\"notifications\" icon={<Bell className=\"w-4 h-4\" />} className=\"justify-start\">\n Notifications\n </TabsTrigger>\n <TabsTrigger value=\"security\" icon={<Shield className=\"w-4 h-4\" />} className=\"justify-start\">\n Security\n </TabsTrigger>\n <TabsTrigger value=\"preferences\" icon={<Settings className=\"w-4 h-4\" />} className=\"justify-start\">\n Preferences\n </TabsTrigger>\n </TabsList>\n\n {/* Content panels */}\n <div className=\"flex-1 p-6\">\n <TabsContent 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 </TabsContent>\n\n <TabsContent 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 </TabsContent>\n\n <TabsContent 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 </TabsContent>\n\n <TabsContent 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 </TabsContent>\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 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}"
11
11
  }
12
12
  }