@oscarrf2/goo-ds 0.1.0 → 0.1.1

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 (172) hide show
  1. package/CHANGELOG.md +74 -0
  2. package/dist/assets/index.css +1 -0
  3. package/dist/components/Button/Button.d.ts +20 -0
  4. package/dist/components/Button/Button.d.ts.map +1 -0
  5. package/dist/components/Button/Button.js +60 -0
  6. package/dist/components/Button/Button.js.map +1 -0
  7. package/dist/components/Button/Button.types.d.ts +46 -0
  8. package/dist/components/Button/Button.types.d.ts.map +1 -0
  9. package/{src/components/Button/index.ts → dist/components/Button/index.d.ts} +4 -3
  10. package/dist/components/Button/index.d.ts.map +1 -0
  11. package/dist/components/Cell/Cell.d.ts +19 -0
  12. package/dist/components/Cell/Cell.d.ts.map +1 -0
  13. package/dist/components/Cell/Cell.js +28 -0
  14. package/dist/components/Cell/Cell.js.map +1 -0
  15. package/dist/components/Cell/Cell.types.d.ts +34 -0
  16. package/dist/components/Cell/Cell.types.d.ts.map +1 -0
  17. package/{src/components/Cell/index.ts → dist/components/Cell/index.d.ts} +4 -3
  18. package/dist/components/Cell/index.d.ts.map +1 -0
  19. package/dist/components/Codeblock/Codeblock.d.ts +25 -0
  20. package/dist/components/Codeblock/Codeblock.d.ts.map +1 -0
  21. package/dist/components/Codeblock/Codeblock.js +51 -0
  22. package/dist/components/Codeblock/Codeblock.js.map +1 -0
  23. package/dist/components/Codeblock/Codeblock.types.d.ts +36 -0
  24. package/dist/components/Codeblock/Codeblock.types.d.ts.map +1 -0
  25. package/{src/components/Codeblock/index.ts → dist/components/Codeblock/index.d.ts} +4 -3
  26. package/dist/components/Codeblock/index.d.ts.map +1 -0
  27. package/dist/components/CoreText/CoreText.d.ts +17 -0
  28. package/dist/components/CoreText/CoreText.d.ts.map +1 -0
  29. package/dist/components/CoreText/CoreText.js +26 -0
  30. package/dist/components/CoreText/CoreText.js.map +1 -0
  31. package/dist/components/CoreText/CoreText.types.d.ts +26 -0
  32. package/dist/components/CoreText/CoreText.types.d.ts.map +1 -0
  33. package/{src/components/CoreText/index.ts → dist/components/CoreText/index.d.ts} +3 -2
  34. package/dist/components/CoreText/index.d.ts.map +1 -0
  35. package/dist/components/Divider/Divider.d.ts +17 -0
  36. package/dist/components/Divider/Divider.d.ts.map +1 -0
  37. package/dist/components/Divider/Divider.js +25 -0
  38. package/dist/components/Divider/Divider.js.map +1 -0
  39. package/dist/components/Divider/Divider.types.d.ts +17 -0
  40. package/dist/components/Divider/Divider.types.d.ts.map +1 -0
  41. package/{src/components/Divider/index.ts → dist/components/Divider/index.d.ts} +4 -3
  42. package/dist/components/Divider/index.d.ts.map +1 -0
  43. package/dist/components/InputImage/InputImage.d.ts +26 -0
  44. package/dist/components/InputImage/InputImage.d.ts.map +1 -0
  45. package/dist/components/InputImage/InputImage.js +284 -0
  46. package/dist/components/InputImage/InputImage.js.map +1 -0
  47. package/dist/components/InputImage/InputImage.types.d.ts +65 -0
  48. package/dist/components/InputImage/InputImage.types.d.ts.map +1 -0
  49. package/{src/components/InputImage/index.ts → dist/components/InputImage/index.d.ts} +3 -2
  50. package/dist/components/InputImage/index.d.ts.map +1 -0
  51. package/{src/components/Sidebar/Sidebar.tsx → dist/components/Sidebar/Sidebar.d.ts} +22 -42
  52. package/dist/components/Sidebar/Sidebar.d.ts.map +1 -0
  53. package/dist/components/Sidebar/Sidebar.js +27 -0
  54. package/dist/components/Sidebar/Sidebar.js.map +1 -0
  55. package/dist/components/Sidebar/Sidebar.types.d.ts +21 -0
  56. package/dist/components/Sidebar/Sidebar.types.d.ts.map +1 -0
  57. package/{src/components/Sidebar/index.ts → dist/components/Sidebar/index.d.ts} +4 -3
  58. package/dist/components/Sidebar/index.d.ts.map +1 -0
  59. package/dist/components/SidebarItem/SidebarItem.d.ts +19 -0
  60. package/dist/components/SidebarItem/SidebarItem.d.ts.map +1 -0
  61. package/dist/components/SidebarItem/SidebarItem.js +37 -0
  62. package/dist/components/SidebarItem/SidebarItem.js.map +1 -0
  63. package/dist/components/SidebarItem/SidebarItem.types.d.ts +33 -0
  64. package/dist/components/SidebarItem/SidebarItem.types.d.ts.map +1 -0
  65. package/{src/components/SidebarItem/index.ts → dist/components/SidebarItem/index.d.ts} +4 -3
  66. package/dist/components/SidebarItem/index.d.ts.map +1 -0
  67. package/dist/components/Skeleton/Skeleton.d.ts +18 -0
  68. package/dist/components/Skeleton/Skeleton.d.ts.map +1 -0
  69. package/dist/components/Skeleton/Skeleton.js +30 -0
  70. package/dist/components/Skeleton/Skeleton.js.map +1 -0
  71. package/dist/components/Skeleton/Skeleton.types.d.ts +31 -0
  72. package/dist/components/Skeleton/Skeleton.types.d.ts.map +1 -0
  73. package/{src/components/Skeleton/index.ts → dist/components/Skeleton/index.d.ts} +5 -5
  74. package/dist/components/Skeleton/index.d.ts.map +1 -0
  75. package/{src/components/Spacer/Spacer.tsx → dist/components/Spacer/Spacer.d.ts} +17 -31
  76. package/dist/components/Spacer/Spacer.d.ts.map +1 -0
  77. package/dist/components/Spacer/Spacer.js +21 -0
  78. package/dist/components/Spacer/Spacer.js.map +1 -0
  79. package/dist/components/Spacer/Spacer.types.d.ts +21 -0
  80. package/dist/components/Spacer/Spacer.types.d.ts.map +1 -0
  81. package/{src/components/Spacer/index.ts → dist/components/Spacer/index.d.ts} +4 -3
  82. package/dist/components/Spacer/index.d.ts.map +1 -0
  83. package/dist/components/TabItem/TabItem.d.ts +19 -0
  84. package/dist/components/TabItem/TabItem.d.ts.map +1 -0
  85. package/dist/components/TabItem/TabItem.js +33 -0
  86. package/dist/components/TabItem/TabItem.js.map +1 -0
  87. package/dist/components/TabItem/TabItem.types.d.ts +30 -0
  88. package/dist/components/TabItem/TabItem.types.d.ts.map +1 -0
  89. package/{src/components/TabItem/index.ts → dist/components/TabItem/index.d.ts} +4 -3
  90. package/dist/components/TabItem/index.d.ts.map +1 -0
  91. package/{src/components/Table/Table.tsx → dist/components/Table/Table.d.ts} +26 -39
  92. package/dist/components/Table/Table.d.ts.map +1 -0
  93. package/dist/components/Table/Table.js +18 -0
  94. package/dist/components/Table/Table.js.map +1 -0
  95. package/dist/components/Table/Table.types.d.ts +16 -0
  96. package/dist/components/Table/Table.types.d.ts.map +1 -0
  97. package/{src/components/Table/index.ts → dist/components/Table/index.d.ts} +4 -3
  98. package/dist/components/Table/index.d.ts.map +1 -0
  99. package/dist/components/TableRow/TableRow.d.ts +24 -0
  100. package/dist/components/TableRow/TableRow.d.ts.map +1 -0
  101. package/dist/components/TableRow/TableRow.js +35 -0
  102. package/dist/components/TableRow/TableRow.js.map +1 -0
  103. package/dist/components/TableRow/TableRow.types.d.ts +35 -0
  104. package/dist/components/TableRow/TableRow.types.d.ts.map +1 -0
  105. package/{src/components/TableRow/index.ts → dist/components/TableRow/index.d.ts} +4 -3
  106. package/dist/components/TableRow/index.d.ts.map +1 -0
  107. package/{src/components/Tabs/Tabs.tsx → dist/components/Tabs/Tabs.d.ts} +21 -37
  108. package/dist/components/Tabs/Tabs.d.ts.map +1 -0
  109. package/dist/components/Tabs/Tabs.js +23 -0
  110. package/dist/components/Tabs/Tabs.js.map +1 -0
  111. package/{src/components/Tabs/Tabs.types.ts → dist/components/Tabs/Tabs.types.d.ts} +16 -18
  112. package/dist/components/Tabs/Tabs.types.d.ts.map +1 -0
  113. package/{src/components/Tabs/index.ts → dist/components/Tabs/index.d.ts} +4 -3
  114. package/dist/components/Tabs/index.d.ts.map +1 -0
  115. package/{src/components/index.ts → dist/components/index.d.ts} +15 -15
  116. package/dist/components/index.d.ts.map +1 -0
  117. package/dist/compositions/index.d.ts +2 -0
  118. package/dist/compositions/index.d.ts.map +1 -0
  119. package/dist/index.d.ts +3 -0
  120. package/dist/index.d.ts.map +1 -0
  121. package/dist/index.js +32 -0
  122. package/dist/index.js.map +1 -0
  123. package/dist/vite.svg +1 -0
  124. package/package.json +16 -16
  125. package/src/components/Button/Button.tsx +0 -82
  126. package/src/components/Button/Button.types.ts +0 -62
  127. package/src/components/Cell/Cell.tsx +0 -42
  128. package/src/components/Cell/Cell.types.ts +0 -42
  129. package/src/components/Codeblock/Codeblock.tsx +0 -88
  130. package/src/components/Codeblock/Codeblock.types.ts +0 -42
  131. package/src/components/CoreText/CoreText.tsx +0 -43
  132. package/src/components/CoreText/CoreText.types.ts +0 -56
  133. package/src/components/Divider/Divider.tsx +0 -35
  134. package/src/components/Divider/Divider.types.ts +0 -19
  135. package/src/components/InputImage/InputImage.tsx +0 -314
  136. package/src/components/InputImage/InputImage.types.ts +0 -86
  137. package/src/components/Sidebar/Sidebar.types.ts +0 -24
  138. package/src/components/SidebarItem/SidebarItem.tsx +0 -55
  139. package/src/components/SidebarItem/SidebarItem.types.ts +0 -39
  140. package/src/components/Skeleton/Skeleton.tsx +0 -41
  141. package/src/components/Skeleton/Skeleton.types.ts +0 -65
  142. package/src/components/Spacer/Spacer.types.ts +0 -58
  143. package/src/components/TabItem/TabItem.tsx +0 -45
  144. package/src/components/TabItem/TabItem.types.ts +0 -35
  145. package/src/components/Table/Table.types.ts +0 -18
  146. package/src/components/TableRow/TableRow.tsx +0 -53
  147. package/src/components/TableRow/TableRow.types.ts +0 -41
  148. package/src/compositions/index.ts +0 -3
  149. package/src/index.ts +0 -4
  150. /package/{src → dist}/components/Button/Button.css +0 -0
  151. /package/{src → dist}/components/Cell/Cell.css +0 -0
  152. /package/{src → dist}/components/Codeblock/Codeblock.css +0 -0
  153. /package/{src → dist}/components/Divider/Divider.css +0 -0
  154. /package/{src → dist}/components/InputImage/InputImage.css +0 -0
  155. /package/{src → dist}/components/Sidebar/Sidebar.css +0 -0
  156. /package/{src → dist}/components/SidebarItem/SidebarItem.css +0 -0
  157. /package/{src → dist}/components/Skeleton/Skeleton.css +0 -0
  158. /package/{src → dist}/components/TabItem/TabItem.css +0 -0
  159. /package/{src → dist}/components/Table/Table.css +0 -0
  160. /package/{src → dist}/components/TableRow/TableRow.css +0 -0
  161. /package/{src → dist}/components/Tabs/Tabs.css +0 -0
  162. /package/{src → dist}/index.css +0 -0
  163. /package/{src → dist}/styles/component-tokens.css +0 -0
  164. /package/{src → dist}/styles/component-tokens.current.css +0 -0
  165. /package/{src → dist}/styles/fonts.css +0 -0
  166. /package/{src → dist}/styles/global-tokens.css +0 -0
  167. /package/{src → dist}/styles/index.css +0 -0
  168. /package/{src → dist}/styles/number-tokens.css +0 -0
  169. /package/{src → dist}/styles/semantic-tokens.css +0 -0
  170. /package/{src → dist}/styles/style-tokens.css +0 -0
  171. /package/{src → dist}/styles/typography-tokens.css +0 -0
  172. /package/{src → dist}/styles.css +0 -0
@@ -0,0 +1,17 @@
1
+ import type { DividerProps } from "./Divider.types";
2
+ import "./Divider.css";
3
+ /**
4
+ * Divider - Divider component for the goo-ds design system
5
+ *
6
+ * Provides consistent visual separator in horizontal or vertical orientation.
7
+ * Token-first per Constitution (no hardcoded values).
8
+ *
9
+ * @example
10
+ * ```tsx
11
+ * <Divider />
12
+ * <Divider orientation="vertical" />
13
+ * ```
14
+ */
15
+ export declare function Divider({ orientation, className, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
16
+ export default Divider;
17
+ //# sourceMappingURL=Divider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,eAAe,CAAC;AAEvB;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,WAA0B,EAC1B,SAAc,EACd,GAAG,KAAK,EACT,EAAE,YAAY,2CAad;AAED,eAAe,OAAO,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ /* empty css */
3
+ function o({
4
+ orientation: i = "horizontal",
5
+ className: d = "",
6
+ ...a
7
+ }) {
8
+ return /* @__PURE__ */ r(
9
+ "div",
10
+ {
11
+ className: `gds-divider gds-divider-${i} ${d}`.trim(),
12
+ role: "separator",
13
+ "aria-orientation": i,
14
+ "data-component": "Divider",
15
+ "data-orientation": i,
16
+ ...a,
17
+ children: /* @__PURE__ */ r("div", { className: "gds-divider-line" })
18
+ }
19
+ );
20
+ }
21
+ export {
22
+ o as Divider,
23
+ o as default
24
+ };
25
+ //# sourceMappingURL=Divider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import type { DividerProps } from \"./Divider.types\";\r\nimport \"./Divider.css\";\r\n\r\n/**\r\n * Divider - Divider component for the goo-ds design system\r\n *\r\n * Provides consistent visual separator in horizontal or vertical orientation.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Divider />\r\n * <Divider orientation=\"vertical\" />\r\n * ```\r\n */\r\nexport function Divider({\r\n orientation = \"horizontal\",\r\n className = \"\",\r\n ...props\r\n}: DividerProps) {\r\n return (\r\n <div\r\n className={`gds-divider gds-divider-${orientation} ${className}`.trim()}\r\n role=\"separator\"\r\n aria-orientation={orientation}\r\n data-component=\"Divider\"\r\n data-orientation={orientation}\r\n {...props}\r\n >\r\n <div className=\"gds-divider-line\" />\r\n </div>\r\n );\r\n}\r\n\r\nexport default Divider;\r\n"],"names":["Divider","orientation","className","props","jsx"],"mappings":";;AAeO,SAASA,EAAQ;AAAA,EACtB,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,2BAA2BH,CAAW,IAAIC,CAAS,GAAG,KAAA;AAAA,MACjE,MAAK;AAAA,MACL,oBAAkBD;AAAA,MAClB,kBAAe;AAAA,MACf,oBAAkBA;AAAA,MACjB,GAAGE;AAAA,MAEJ,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,mBAAA,CAAmB;AAAA,IAAA;AAAA,EAAA;AAGxC;"}
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Divider component props
3
+ * Provides visual separator using design system tokens
4
+ */
5
+ export type DividerOrientation = "horizontal" | "vertical";
6
+ export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
7
+ /**
8
+ * Orientation of the divider
9
+ * @default "horizontal"
10
+ */
11
+ orientation?: DividerOrientation;
12
+ /**
13
+ * Additional CSS class names
14
+ */
15
+ className?: string;
16
+ }
17
+ //# sourceMappingURL=Divider.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Divider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
@@ -1,3 +1,4 @@
1
- export { Divider } from "./Divider";
2
- export type { DividerProps, DividerOrientation } from "./Divider.types";
3
- export { default } from "./Divider";
1
+ export { Divider } from "./Divider";
2
+ export type { DividerProps, DividerOrientation } from "./Divider.types";
3
+ export { default } from "./Divider";
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
@@ -0,0 +1,26 @@
1
+ import type { InputImageProps } from "./InputImage.types";
2
+ import "./InputImage.css";
3
+ /**
4
+ * InputImage - Image upload input component with drag-and-drop support
5
+ *
6
+ * Provides a file upload interface with multiple visual states including:
7
+ * - Default: Empty state with drag-and-drop zone
8
+ * - Hover: Visual feedback during drag-over
9
+ * - Filled: Shows uploaded image with remove button
10
+ * - Loading: Loading skeleton state
11
+ * - Generating: Blurred preview during processing
12
+ * - Generated: Final result with optional comparison slider
13
+ * - Disabled: Non-interactive state
14
+ *
15
+ * Token-first per Constitution (no hardcoded values).
16
+ *
17
+ * @example
18
+ * ```tsx
19
+ * <InputImage state="Default" onUploadClick={handleUpload} />
20
+ * <InputImage state="Filled" imageSrc="/path/to/image.jpg" onRemoveClick={handleRemove} />
21
+ * <InputImage state="Generated" imageSrc="/path/to/image.jpg" comparisonSlider={true} />
22
+ * ```
23
+ */
24
+ export declare function InputImage({ state, comparisonSlider, imageSrc, imageAlt, onUploadClick, onRemoveClick, onDragEnter, onDragLeave, onDrop, className, children, sliderPosition, }: InputImageProps): import("react/jsx-runtime").JSX.Element;
25
+ export default InputImage;
26
+ //# sourceMappingURL=InputImage.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputImage.d.ts","sourceRoot":"","sources":["../../../src/components/InputImage/InputImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAiB,EACjB,gBAAuB,EACvB,QAAQ,EACR,QAAa,EACb,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,MAAM,EACN,SAAc,EACd,QAAQ,EACR,cAAmB,GAEpB,EAAE,eAAe,2CAmQjB;AAED,eAAe,UAAU,CAAC"}
@@ -0,0 +1,284 @@
1
+ import { jsx as e, jsxs as t, Fragment as m } from "react/jsx-runtime";
2
+ import { Button as d } from "../Button/Button.js";
3
+ import { CoreText as r } from "../CoreText/CoreText.js";
4
+ /* empty css */
5
+ function k({
6
+ state: i = "Default",
7
+ comparisonSlider: c = !0,
8
+ imageSrc: n,
9
+ imageAlt: l = "",
10
+ onUploadClick: g,
11
+ onRemoveClick: h,
12
+ onDragEnter: o,
13
+ onDragLeave: u,
14
+ onDrop: p,
15
+ className: a = "",
16
+ children: s,
17
+ sliderPosition: v = 50
18
+ // onSliderDrag not yet implemented
19
+ }) {
20
+ return i === "Default" ? /* @__PURE__ */ e(
21
+ "div",
22
+ {
23
+ className: `gds-input-image gds-input-image-default ${a}`.trim(),
24
+ onDragEnter: o,
25
+ onDragLeave: u,
26
+ onDrop: p,
27
+ "data-component": "InputImage",
28
+ "data-state": i,
29
+ children: s || /* @__PURE__ */ t(m, { children: [
30
+ /* @__PURE__ */ e(
31
+ r,
32
+ {
33
+ style: "label-lg-medium",
34
+ className: "gds-input-image-label",
35
+ children: "Drag and drop"
36
+ }
37
+ ),
38
+ /* @__PURE__ */ e(
39
+ r,
40
+ {
41
+ style: "body-sm-regular",
42
+ className: "gds-input-image-separator",
43
+ children: "or"
44
+ }
45
+ ),
46
+ /* @__PURE__ */ e(
47
+ d,
48
+ {
49
+ variant: "primary",
50
+ size: "small",
51
+ onClick: g,
52
+ className: "gds-input-image-button",
53
+ children: "Click to upload"
54
+ }
55
+ )
56
+ ] })
57
+ }
58
+ ) : i === "Hover" ? /* @__PURE__ */ e(
59
+ "div",
60
+ {
61
+ className: `gds-input-image gds-input-image-hover ${a}`.trim(),
62
+ onDragEnter: o,
63
+ onDragLeave: u,
64
+ onDrop: p,
65
+ "data-component": "InputImage",
66
+ "data-state": i,
67
+ children: s || /* @__PURE__ */ t(m, { children: [
68
+ /* @__PURE__ */ e(
69
+ r,
70
+ {
71
+ style: "label-lg-medium",
72
+ className: "gds-input-image-label",
73
+ children: "Drag and drop"
74
+ }
75
+ ),
76
+ /* @__PURE__ */ e(
77
+ r,
78
+ {
79
+ style: "body-sm-regular",
80
+ className: "gds-input-image-separator",
81
+ children: "or"
82
+ }
83
+ ),
84
+ /* @__PURE__ */ e(
85
+ d,
86
+ {
87
+ variant: "primary",
88
+ size: "small",
89
+ onClick: g,
90
+ className: "gds-input-image-button",
91
+ children: "Click to upload"
92
+ }
93
+ )
94
+ ] })
95
+ }
96
+ ) : i === "Filled" ? /* @__PURE__ */ t(
97
+ "div",
98
+ {
99
+ className: `gds-input-image gds-input-image-filled ${a}`.trim(),
100
+ "data-component": "InputImage",
101
+ "data-state": i,
102
+ children: [
103
+ n && /* @__PURE__ */ e(
104
+ "img",
105
+ {
106
+ src: n,
107
+ alt: l,
108
+ className: "gds-input-image-preview"
109
+ }
110
+ ),
111
+ /* @__PURE__ */ e(
112
+ d,
113
+ {
114
+ variant: "primary",
115
+ size: "small",
116
+ onClick: h,
117
+ className: "gds-input-image-remove-button",
118
+ iconLeft: /* @__PURE__ */ e(
119
+ "svg",
120
+ {
121
+ width: "16",
122
+ height: "16",
123
+ viewBox: "0 0 16 16",
124
+ fill: "none",
125
+ xmlns: "http://www.w3.org/2000/svg",
126
+ "aria-hidden": "true",
127
+ children: /* @__PURE__ */ e(
128
+ "path",
129
+ {
130
+ d: "M12 4L4 12M4 4L12 12",
131
+ stroke: "currentColor",
132
+ strokeWidth: "2",
133
+ strokeLinecap: "round",
134
+ strokeLinejoin: "round"
135
+ }
136
+ )
137
+ }
138
+ )
139
+ }
140
+ )
141
+ ]
142
+ }
143
+ ) : i === "Loading" ? /* @__PURE__ */ e(
144
+ "div",
145
+ {
146
+ className: `gds-input-image gds-input-image-loading ${a}`.trim(),
147
+ "data-component": "InputImage",
148
+ "data-state": i
149
+ }
150
+ ) : i === "Generating" ? /* @__PURE__ */ e(
151
+ "div",
152
+ {
153
+ className: `gds-input-image gds-input-image-generating ${a}`.trim(),
154
+ "data-component": "InputImage",
155
+ "data-state": i,
156
+ children: /* @__PURE__ */ e("div", { className: "gds-input-image-blur-container", children: n && /* @__PURE__ */ e(
157
+ "img",
158
+ {
159
+ src: n,
160
+ alt: l,
161
+ className: "gds-input-image-blur-preview"
162
+ }
163
+ ) })
164
+ }
165
+ ) : i === "Generated" ? /* @__PURE__ */ t(
166
+ "div",
167
+ {
168
+ className: `gds-input-image gds-input-image-generated ${a}`.trim(),
169
+ "data-component": "InputImage",
170
+ "data-state": i,
171
+ children: [
172
+ n && /* @__PURE__ */ e(
173
+ "img",
174
+ {
175
+ src: n,
176
+ alt: l,
177
+ className: "gds-input-image-result"
178
+ }
179
+ ),
180
+ c && /* @__PURE__ */ t(
181
+ "div",
182
+ {
183
+ className: "gds-input-image-comparison-slider",
184
+ style: {
185
+ left: `${v}%`
186
+ },
187
+ children: [
188
+ /* @__PURE__ */ e("div", { className: "gds-input-image-slider-line" }),
189
+ /* @__PURE__ */ e(
190
+ d,
191
+ {
192
+ variant: "secondary",
193
+ size: "small",
194
+ className: "gds-input-image-slider-button",
195
+ iconLeft: /* @__PURE__ */ t(
196
+ "svg",
197
+ {
198
+ width: "16",
199
+ height: "16",
200
+ viewBox: "0 0 16 16",
201
+ fill: "none",
202
+ xmlns: "http://www.w3.org/2000/svg",
203
+ "aria-hidden": "true",
204
+ children: [
205
+ /* @__PURE__ */ e(
206
+ "path",
207
+ {
208
+ d: "M6 12L2 8L6 4",
209
+ stroke: "currentColor",
210
+ strokeWidth: "2",
211
+ strokeLinecap: "round",
212
+ strokeLinejoin: "round"
213
+ }
214
+ ),
215
+ /* @__PURE__ */ e(
216
+ "path",
217
+ {
218
+ d: "M10 4L14 8L10 12",
219
+ stroke: "currentColor",
220
+ strokeWidth: "2",
221
+ strokeLinecap: "round",
222
+ strokeLinejoin: "round"
223
+ }
224
+ )
225
+ ]
226
+ }
227
+ )
228
+ }
229
+ )
230
+ ]
231
+ }
232
+ )
233
+ ]
234
+ }
235
+ ) : i === "Disabled" ? /* @__PURE__ */ e(
236
+ "div",
237
+ {
238
+ className: `gds-input-image gds-input-image-disabled ${a}`.trim(),
239
+ "data-component": "InputImage",
240
+ "data-state": i,
241
+ children: s || /* @__PURE__ */ t(m, { children: [
242
+ /* @__PURE__ */ e(
243
+ r,
244
+ {
245
+ style: "label-lg-medium",
246
+ className: "gds-input-image-label",
247
+ children: "Drag and drop"
248
+ }
249
+ ),
250
+ /* @__PURE__ */ e(
251
+ r,
252
+ {
253
+ style: "body-sm-regular",
254
+ className: "gds-input-image-separator",
255
+ children: "or"
256
+ }
257
+ ),
258
+ /* @__PURE__ */ e(
259
+ d,
260
+ {
261
+ variant: "primary",
262
+ size: "small",
263
+ disabled: !0,
264
+ className: "gds-input-image-button",
265
+ children: "Click to upload"
266
+ }
267
+ )
268
+ ] })
269
+ }
270
+ ) : /* @__PURE__ */ e(
271
+ "div",
272
+ {
273
+ className: `gds-input-image gds-input-image-default ${a}`.trim(),
274
+ "data-component": "InputImage",
275
+ "data-state": "Default",
276
+ children: s
277
+ }
278
+ );
279
+ }
280
+ export {
281
+ k as InputImage,
282
+ k as default
283
+ };
284
+ //# sourceMappingURL=InputImage.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputImage.js","sources":["../../../src/components/InputImage/InputImage.tsx"],"sourcesContent":["import type { InputImageProps } from \"./InputImage.types\";\r\nimport { Button } from \"../Button/Button\";\r\nimport { CoreText } from \"../CoreText/CoreText\";\r\nimport \"./InputImage.css\";\r\n\r\n/**\r\n * InputImage - Image upload input component with drag-and-drop support\r\n *\r\n * Provides a file upload interface with multiple visual states including:\r\n * - Default: Empty state with drag-and-drop zone\r\n * - Hover: Visual feedback during drag-over\r\n * - Filled: Shows uploaded image with remove button\r\n * - Loading: Loading skeleton state\r\n * - Generating: Blurred preview during processing\r\n * - Generated: Final result with optional comparison slider\r\n * - Disabled: Non-interactive state\r\n *\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <InputImage state=\"Default\" onUploadClick={handleUpload} />\r\n * <InputImage state=\"Filled\" imageSrc=\"/path/to/image.jpg\" onRemoveClick={handleRemove} />\r\n * <InputImage state=\"Generated\" imageSrc=\"/path/to/image.jpg\" comparisonSlider={true} />\r\n * ```\r\n */\r\nexport function InputImage({\r\n state = \"Default\",\r\n comparisonSlider = true,\r\n imageSrc,\r\n imageAlt = \"\",\r\n onUploadClick,\r\n onRemoveClick,\r\n onDragEnter,\r\n onDragLeave,\r\n onDrop,\r\n className = \"\",\r\n children,\r\n sliderPosition = 50,\r\n // onSliderDrag not yet implemented\r\n}: InputImageProps) {\r\n // Default state\r\n if (state === \"Default\") {\r\n return (\r\n <div\r\n className={`gds-input-image gds-input-image-default ${className}`.trim()}\r\n onDragEnter={onDragEnter}\r\n onDragLeave={onDragLeave}\r\n onDrop={onDrop}\r\n data-component=\"InputImage\"\r\n data-state={state}\r\n >\r\n {children || (\r\n <>\r\n <CoreText\r\n style=\"label-lg-medium\"\r\n className=\"gds-input-image-label\"\r\n >\r\n Drag and drop\r\n </CoreText>\r\n <CoreText\r\n style=\"body-sm-regular\"\r\n className=\"gds-input-image-separator\"\r\n >\r\n or\r\n </CoreText>\r\n <Button\r\n variant=\"primary\"\r\n size=\"small\"\r\n onClick={onUploadClick}\r\n className=\"gds-input-image-button\"\r\n >\r\n Click to upload\r\n </Button>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n // Hover state\r\n if (state === \"Hover\") {\r\n return (\r\n <div\r\n className={`gds-input-image gds-input-image-hover ${className}`.trim()}\r\n onDragEnter={onDragEnter}\r\n onDragLeave={onDragLeave}\r\n onDrop={onDrop}\r\n data-component=\"InputImage\"\r\n data-state={state}\r\n >\r\n {children || (\r\n <>\r\n <CoreText\r\n style=\"label-lg-medium\"\r\n className=\"gds-input-image-label\"\r\n >\r\n Drag and drop\r\n </CoreText>\r\n <CoreText\r\n style=\"body-sm-regular\"\r\n className=\"gds-input-image-separator\"\r\n >\r\n or\r\n </CoreText>\r\n <Button\r\n variant=\"primary\"\r\n size=\"small\"\r\n onClick={onUploadClick}\r\n className=\"gds-input-image-button\"\r\n >\r\n Click to upload\r\n </Button>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n // Filled state\r\n if (state === \"Filled\") {\r\n return (\r\n <div\r\n className={`gds-input-image gds-input-image-filled ${className}`.trim()}\r\n data-component=\"InputImage\"\r\n data-state={state}\r\n >\r\n {imageSrc && (\r\n <img\r\n src={imageSrc}\r\n alt={imageAlt}\r\n className=\"gds-input-image-preview\"\r\n />\r\n )}\r\n <Button\r\n variant=\"primary\"\r\n size=\"small\"\r\n onClick={onRemoveClick}\r\n className=\"gds-input-image-remove-button\"\r\n iconLeft={\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M12 4L4 12M4 4L12 12\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </svg>\r\n }\r\n />\r\n </div>\r\n );\r\n }\r\n\r\n // Loading state\r\n if (state === \"Loading\") {\r\n return (\r\n <div\r\n className={`gds-input-image gds-input-image-loading ${className}`.trim()}\r\n data-component=\"InputImage\"\r\n data-state={state}\r\n />\r\n );\r\n }\r\n\r\n // Generating state\r\n if (state === \"Generating\") {\r\n return (\r\n <div\r\n className={`gds-input-image gds-input-image-generating ${className}`.trim()}\r\n data-component=\"InputImage\"\r\n data-state={state}\r\n >\r\n <div className=\"gds-input-image-blur-container\">\r\n {imageSrc && (\r\n <img\r\n src={imageSrc}\r\n alt={imageAlt}\r\n className=\"gds-input-image-blur-preview\"\r\n />\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n // Generated state\r\n if (state === \"Generated\") {\r\n return (\r\n <div\r\n className={`gds-input-image gds-input-image-generated ${className}`.trim()}\r\n data-component=\"InputImage\"\r\n data-state={state}\r\n >\r\n {imageSrc && (\r\n <img\r\n src={imageSrc}\r\n alt={imageAlt}\r\n className=\"gds-input-image-result\"\r\n />\r\n )}\r\n {comparisonSlider && (\r\n <div \r\n className=\"gds-input-image-comparison-slider\"\r\n style={{\r\n left: `${sliderPosition}%`,\r\n }}\r\n >\r\n <div className=\"gds-input-image-slider-line\" />\r\n <Button\r\n variant=\"secondary\"\r\n size=\"small\"\r\n className=\"gds-input-image-slider-button\"\r\n iconLeft={\r\n <svg\r\n width=\"16\"\r\n height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-hidden=\"true\"\r\n >\r\n <path\r\n d=\"M6 12L2 8L6 4\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n <path\r\n d=\"M10 4L14 8L10 12\"\r\n stroke=\"currentColor\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n />\r\n </svg>\r\n }\r\n />\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n // Disabled state\r\n if (state === \"Disabled\") {\r\n return (\r\n <div\r\n className={`gds-input-image gds-input-image-disabled ${className}`.trim()}\r\n data-component=\"InputImage\"\r\n data-state={state}\r\n >\r\n {children || (\r\n <>\r\n <CoreText\r\n style=\"label-lg-medium\"\r\n className=\"gds-input-image-label\"\r\n >\r\n Drag and drop\r\n </CoreText>\r\n <CoreText\r\n style=\"body-sm-regular\"\r\n className=\"gds-input-image-separator\"\r\n >\r\n or\r\n </CoreText>\r\n <Button\r\n variant=\"primary\"\r\n size=\"small\"\r\n disabled\r\n className=\"gds-input-image-button\"\r\n >\r\n Click to upload\r\n </Button>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n\r\n // Fallback to default\r\n return (\r\n <div\r\n className={`gds-input-image gds-input-image-default ${className}`.trim()}\r\n data-component=\"InputImage\"\r\n data-state=\"Default\"\r\n >\r\n {children}\r\n </div>\r\n );\r\n}\r\n\r\nexport default InputImage;\r\n"],"names":["InputImage","state","comparisonSlider","imageSrc","imageAlt","onUploadClick","onRemoveClick","onDragEnter","onDragLeave","onDrop","className","children","sliderPosition","jsx","jsxs","Fragment","CoreText","Button"],"mappings":"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"}
@@ -0,0 +1,65 @@
1
+ import type { ReactNode } from "react";
2
+ /**
3
+ * InputImage component props
4
+ * Provides image upload input with drag-and-drop, multiple states, and comparison slider
5
+ */
6
+ export type InputImageState = "Default" | "Hover" | "Filled" | "Generating" | "Generated" | "Loading" | "Disabled";
7
+ export interface InputImageProps {
8
+ /**
9
+ * The current state of the input
10
+ * @default "Default"
11
+ */
12
+ state?: InputImageState;
13
+ /**
14
+ * Whether to show the comparison slider in Generated state
15
+ * @default true
16
+ */
17
+ comparisonSlider?: boolean;
18
+ /**
19
+ * Position of the comparison slider (0-100 percentage)
20
+ * @default 50
21
+ */
22
+ sliderPosition?: number;
23
+ /**
24
+ * Callback when slider is being dragged
25
+ */
26
+ onSliderDrag?: (position: number) => void;
27
+ /**
28
+ * The image source URL for Filled, Generating, and Generated states
29
+ */
30
+ imageSrc?: string;
31
+ /**
32
+ * Alt text for the image
33
+ * @default ""
34
+ */
35
+ imageAlt?: string;
36
+ /**
37
+ * Callback when the upload button is clicked
38
+ */
39
+ onUploadClick?: () => void;
40
+ /**
41
+ * Callback when the remove/close button is clicked (in Filled state)
42
+ */
43
+ onRemoveClick?: () => void;
44
+ /**
45
+ * Callback when drag enter occurs
46
+ */
47
+ onDragEnter?: (e: React.DragEvent<HTMLDivElement>) => void;
48
+ /**
49
+ * Callback when drag leave occurs
50
+ */
51
+ onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
52
+ /**
53
+ * Callback when drop occurs
54
+ */
55
+ onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
56
+ /**
57
+ * Additional CSS class names
58
+ */
59
+ className?: string;
60
+ /**
61
+ * Custom children to replace default content (advanced use case)
62
+ */
63
+ children?: ReactNode;
64
+ }
65
+ //# sourceMappingURL=InputImage.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputImage.types.d.ts","sourceRoot":"","sources":["../../../src/components/InputImage/InputImage.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AAEH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,WAAW,GACX,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}
@@ -1,2 +1,3 @@
1
- export { InputImage } from "./InputImage";
2
- export type { InputImageProps, InputImageState } from "./InputImage.types";
1
+ export { InputImage } from "./InputImage";
2
+ export type { InputImageProps, InputImageState } from "./InputImage.types";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputImage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
@@ -1,42 +1,22 @@
1
- import type { SidebarProps } from "./Sidebar.types";
2
- import "./Sidebar.css";
3
-
4
- /**
5
- * Sidebar - Sidebar container component for the goo-ds design system
6
- *
7
- * Provides consistent sidebar layout with proper spacing and background.
8
- * Designed to contain SidebarItem components, titles, and other navigation elements.
9
- * Token-first per Constitution (no hardcoded values).
10
- *
11
- * @example
12
- * ```tsx
13
- * <Sidebar>
14
- * <CoreText style="headline-xs-bold">Navigation</CoreText>
15
- * <Spacer size="16" />
16
- * <SidebarItem icon={<HomeIcon />}>Home</SidebarItem>
17
- * <SidebarItem icon={<SettingsIcon />}>Settings</SidebarItem>
18
- * </Sidebar>
19
- * ```
20
- */
21
- export function Sidebar({
22
- children,
23
- showDivider = true,
24
- className = "",
25
- ...props
26
- }: SidebarProps) {
27
- return (
28
- <div
29
- className={`gds-sidebar ${className}`.trim()}
30
- data-component="Sidebar"
31
- data-show-divider={showDivider}
32
- {...props}
33
- >
34
- <div className="gds-sidebar-content">
35
- {children}
36
- </div>
37
- {showDivider && <div className="gds-sidebar-divider" aria-hidden="true" />}
38
- </div>
39
- );
40
- }
41
-
42
- export default Sidebar;
1
+ import type { SidebarProps } from "./Sidebar.types";
2
+ import "./Sidebar.css";
3
+ /**
4
+ * Sidebar - Sidebar container component for the goo-ds design system
5
+ *
6
+ * Provides consistent sidebar layout with proper spacing and background.
7
+ * Designed to contain SidebarItem components, titles, and other navigation elements.
8
+ * Token-first per Constitution (no hardcoded values).
9
+ *
10
+ * @example
11
+ * ```tsx
12
+ * <Sidebar>
13
+ * <CoreText style="headline-xs-bold">Navigation</CoreText>
14
+ * <Spacer size="16" />
15
+ * <SidebarItem icon={<HomeIcon />}>Home</SidebarItem>
16
+ * <SidebarItem icon={<SettingsIcon />}>Settings</SidebarItem>
17
+ * </Sidebar>
18
+ * ```
19
+ */
20
+ export declare function Sidebar({ children, showDivider, className, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
21
+ export default Sidebar;
22
+ //# sourceMappingURL=Sidebar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,eAAe,CAAC;AAEvB;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,WAAkB,EAClB,SAAc,EACd,GAAG,KAAK,EACT,EAAE,YAAY,2CAcd;AAED,eAAe,OAAO,CAAC"}
@@ -0,0 +1,27 @@
1
+ import { jsxs as s, jsx as a } from "react/jsx-runtime";
2
+ /* empty css */
3
+ function m({
4
+ children: e,
5
+ showDivider: d = !0,
6
+ className: i = "",
7
+ ...r
8
+ }) {
9
+ return /* @__PURE__ */ s(
10
+ "div",
11
+ {
12
+ className: `gds-sidebar ${i}`.trim(),
13
+ "data-component": "Sidebar",
14
+ "data-show-divider": d,
15
+ ...r,
16
+ children: [
17
+ /* @__PURE__ */ a("div", { className: "gds-sidebar-content", children: e }),
18
+ d && /* @__PURE__ */ a("div", { className: "gds-sidebar-divider", "aria-hidden": "true" })
19
+ ]
20
+ }
21
+ );
22
+ }
23
+ export {
24
+ m as Sidebar,
25
+ m as default
26
+ };
27
+ //# sourceMappingURL=Sidebar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import type { SidebarProps } from \"./Sidebar.types\";\r\nimport \"./Sidebar.css\";\r\n\r\n/**\r\n * Sidebar - Sidebar container component for the goo-ds design system\r\n *\r\n * Provides consistent sidebar layout with proper spacing and background.\r\n * Designed to contain SidebarItem components, titles, and other navigation elements.\r\n * Token-first per Constitution (no hardcoded values).\r\n *\r\n * @example\r\n * ```tsx\r\n * <Sidebar>\r\n * <CoreText style=\"headline-xs-bold\">Navigation</CoreText>\r\n * <Spacer size=\"16\" />\r\n * <SidebarItem icon={<HomeIcon />}>Home</SidebarItem>\r\n * <SidebarItem icon={<SettingsIcon />}>Settings</SidebarItem>\r\n * </Sidebar>\r\n * ```\r\n */\r\nexport function Sidebar({\r\n children,\r\n showDivider = true,\r\n className = \"\",\r\n ...props\r\n}: SidebarProps) {\r\n return (\r\n <div\r\n className={`gds-sidebar ${className}`.trim()}\r\n data-component=\"Sidebar\"\r\n data-show-divider={showDivider}\r\n {...props}\r\n >\r\n <div className=\"gds-sidebar-content\">\r\n {children}\r\n </div>\r\n {showDivider && <div className=\"gds-sidebar-divider\" aria-hidden=\"true\" />}\r\n </div>\r\n );\r\n}\r\n\r\nexport default Sidebar;\r\n"],"names":["Sidebar","children","showDivider","className","props","jsxs","jsx"],"mappings":";;AAoBO,SAASA,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAeF,CAAS,GAAG,KAAA;AAAA,MACtC,kBAAe;AAAA,MACf,qBAAmBD;AAAA,MAClB,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAL,EAAA,CACH;AAAA,QACCC,KAAe,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBAAsB,eAAY,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9E;"}
@@ -0,0 +1,21 @@
1
+ import type { ReactNode } from "react";
2
+ /**
3
+ * Sidebar component props
4
+ * Provides sidebar container using design system tokens
5
+ */
6
+ export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
7
+ /**
8
+ * Sidebar content (typically title, SidebarItem components, etc.)
9
+ */
10
+ children?: ReactNode;
11
+ /**
12
+ * Whether to show the divider on the right edge
13
+ * @default true
14
+ */
15
+ showDivider?: boolean;
16
+ /**
17
+ * Additional CSS class names
18
+ */
19
+ className?: string;
20
+ }
21
+ //# sourceMappingURL=Sidebar.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AAEH,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
@@ -1,3 +1,4 @@
1
- export { Sidebar } from "./Sidebar";
2
- export type { SidebarProps } from "./Sidebar.types";
3
- export { default } from "./Sidebar";
1
+ export { Sidebar } from "./Sidebar";
2
+ export type { SidebarProps } from "./Sidebar.types";
3
+ export { default } from "./Sidebar";
4
+ //# sourceMappingURL=index.d.ts.map