@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.
- package/CHANGELOG.md +74 -0
- package/dist/assets/index.css +1 -0
- package/dist/components/Button/Button.d.ts +20 -0
- package/dist/components/Button/Button.d.ts.map +1 -0
- package/dist/components/Button/Button.js +60 -0
- package/dist/components/Button/Button.js.map +1 -0
- package/dist/components/Button/Button.types.d.ts +46 -0
- package/dist/components/Button/Button.types.d.ts.map +1 -0
- package/{src/components/Button/index.ts → dist/components/Button/index.d.ts} +4 -3
- package/dist/components/Button/index.d.ts.map +1 -0
- package/dist/components/Cell/Cell.d.ts +19 -0
- package/dist/components/Cell/Cell.d.ts.map +1 -0
- package/dist/components/Cell/Cell.js +28 -0
- package/dist/components/Cell/Cell.js.map +1 -0
- package/dist/components/Cell/Cell.types.d.ts +34 -0
- package/dist/components/Cell/Cell.types.d.ts.map +1 -0
- package/{src/components/Cell/index.ts → dist/components/Cell/index.d.ts} +4 -3
- package/dist/components/Cell/index.d.ts.map +1 -0
- package/dist/components/Codeblock/Codeblock.d.ts +25 -0
- package/dist/components/Codeblock/Codeblock.d.ts.map +1 -0
- package/dist/components/Codeblock/Codeblock.js +51 -0
- package/dist/components/Codeblock/Codeblock.js.map +1 -0
- package/dist/components/Codeblock/Codeblock.types.d.ts +36 -0
- package/dist/components/Codeblock/Codeblock.types.d.ts.map +1 -0
- package/{src/components/Codeblock/index.ts → dist/components/Codeblock/index.d.ts} +4 -3
- package/dist/components/Codeblock/index.d.ts.map +1 -0
- package/dist/components/CoreText/CoreText.d.ts +17 -0
- package/dist/components/CoreText/CoreText.d.ts.map +1 -0
- package/dist/components/CoreText/CoreText.js +26 -0
- package/dist/components/CoreText/CoreText.js.map +1 -0
- package/dist/components/CoreText/CoreText.types.d.ts +26 -0
- package/dist/components/CoreText/CoreText.types.d.ts.map +1 -0
- package/{src/components/CoreText/index.ts → dist/components/CoreText/index.d.ts} +3 -2
- package/dist/components/CoreText/index.d.ts.map +1 -0
- package/dist/components/Divider/Divider.d.ts +17 -0
- package/dist/components/Divider/Divider.d.ts.map +1 -0
- package/dist/components/Divider/Divider.js +25 -0
- package/dist/components/Divider/Divider.js.map +1 -0
- package/dist/components/Divider/Divider.types.d.ts +17 -0
- package/dist/components/Divider/Divider.types.d.ts.map +1 -0
- package/{src/components/Divider/index.ts → dist/components/Divider/index.d.ts} +4 -3
- package/dist/components/Divider/index.d.ts.map +1 -0
- package/dist/components/InputImage/InputImage.d.ts +26 -0
- package/dist/components/InputImage/InputImage.d.ts.map +1 -0
- package/dist/components/InputImage/InputImage.js +284 -0
- package/dist/components/InputImage/InputImage.js.map +1 -0
- package/dist/components/InputImage/InputImage.types.d.ts +65 -0
- package/dist/components/InputImage/InputImage.types.d.ts.map +1 -0
- package/{src/components/InputImage/index.ts → dist/components/InputImage/index.d.ts} +3 -2
- package/dist/components/InputImage/index.d.ts.map +1 -0
- package/{src/components/Sidebar/Sidebar.tsx → dist/components/Sidebar/Sidebar.d.ts} +22 -42
- package/dist/components/Sidebar/Sidebar.d.ts.map +1 -0
- package/dist/components/Sidebar/Sidebar.js +27 -0
- package/dist/components/Sidebar/Sidebar.js.map +1 -0
- package/dist/components/Sidebar/Sidebar.types.d.ts +21 -0
- package/dist/components/Sidebar/Sidebar.types.d.ts.map +1 -0
- package/{src/components/Sidebar/index.ts → dist/components/Sidebar/index.d.ts} +4 -3
- package/dist/components/Sidebar/index.d.ts.map +1 -0
- package/dist/components/SidebarItem/SidebarItem.d.ts +19 -0
- package/dist/components/SidebarItem/SidebarItem.d.ts.map +1 -0
- package/dist/components/SidebarItem/SidebarItem.js +37 -0
- package/dist/components/SidebarItem/SidebarItem.js.map +1 -0
- package/dist/components/SidebarItem/SidebarItem.types.d.ts +33 -0
- package/dist/components/SidebarItem/SidebarItem.types.d.ts.map +1 -0
- package/{src/components/SidebarItem/index.ts → dist/components/SidebarItem/index.d.ts} +4 -3
- package/dist/components/SidebarItem/index.d.ts.map +1 -0
- package/dist/components/Skeleton/Skeleton.d.ts +18 -0
- package/dist/components/Skeleton/Skeleton.d.ts.map +1 -0
- package/dist/components/Skeleton/Skeleton.js +30 -0
- package/dist/components/Skeleton/Skeleton.js.map +1 -0
- package/dist/components/Skeleton/Skeleton.types.d.ts +31 -0
- package/dist/components/Skeleton/Skeleton.types.d.ts.map +1 -0
- package/{src/components/Skeleton/index.ts → dist/components/Skeleton/index.d.ts} +5 -5
- package/dist/components/Skeleton/index.d.ts.map +1 -0
- package/{src/components/Spacer/Spacer.tsx → dist/components/Spacer/Spacer.d.ts} +17 -31
- package/dist/components/Spacer/Spacer.d.ts.map +1 -0
- package/dist/components/Spacer/Spacer.js +21 -0
- package/dist/components/Spacer/Spacer.js.map +1 -0
- package/dist/components/Spacer/Spacer.types.d.ts +21 -0
- package/dist/components/Spacer/Spacer.types.d.ts.map +1 -0
- package/{src/components/Spacer/index.ts → dist/components/Spacer/index.d.ts} +4 -3
- package/dist/components/Spacer/index.d.ts.map +1 -0
- package/dist/components/TabItem/TabItem.d.ts +19 -0
- package/dist/components/TabItem/TabItem.d.ts.map +1 -0
- package/dist/components/TabItem/TabItem.js +33 -0
- package/dist/components/TabItem/TabItem.js.map +1 -0
- package/dist/components/TabItem/TabItem.types.d.ts +30 -0
- package/dist/components/TabItem/TabItem.types.d.ts.map +1 -0
- package/{src/components/TabItem/index.ts → dist/components/TabItem/index.d.ts} +4 -3
- package/dist/components/TabItem/index.d.ts.map +1 -0
- package/{src/components/Table/Table.tsx → dist/components/Table/Table.d.ts} +26 -39
- package/dist/components/Table/Table.d.ts.map +1 -0
- package/dist/components/Table/Table.js +18 -0
- package/dist/components/Table/Table.js.map +1 -0
- package/dist/components/Table/Table.types.d.ts +16 -0
- package/dist/components/Table/Table.types.d.ts.map +1 -0
- package/{src/components/Table/index.ts → dist/components/Table/index.d.ts} +4 -3
- package/dist/components/Table/index.d.ts.map +1 -0
- package/dist/components/TableRow/TableRow.d.ts +24 -0
- package/dist/components/TableRow/TableRow.d.ts.map +1 -0
- package/dist/components/TableRow/TableRow.js +35 -0
- package/dist/components/TableRow/TableRow.js.map +1 -0
- package/dist/components/TableRow/TableRow.types.d.ts +35 -0
- package/dist/components/TableRow/TableRow.types.d.ts.map +1 -0
- package/{src/components/TableRow/index.ts → dist/components/TableRow/index.d.ts} +4 -3
- package/dist/components/TableRow/index.d.ts.map +1 -0
- package/{src/components/Tabs/Tabs.tsx → dist/components/Tabs/Tabs.d.ts} +21 -37
- package/dist/components/Tabs/Tabs.d.ts.map +1 -0
- package/dist/components/Tabs/Tabs.js +23 -0
- package/dist/components/Tabs/Tabs.js.map +1 -0
- package/{src/components/Tabs/Tabs.types.ts → dist/components/Tabs/Tabs.types.d.ts} +16 -18
- package/dist/components/Tabs/Tabs.types.d.ts.map +1 -0
- package/{src/components/Tabs/index.ts → dist/components/Tabs/index.d.ts} +4 -3
- package/dist/components/Tabs/index.d.ts.map +1 -0
- package/{src/components/index.ts → dist/components/index.d.ts} +15 -15
- package/dist/components/index.d.ts.map +1 -0
- package/dist/compositions/index.d.ts +2 -0
- package/dist/compositions/index.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +32 -0
- package/dist/index.js.map +1 -0
- package/dist/vite.svg +1 -0
- package/package.json +16 -16
- package/src/components/Button/Button.tsx +0 -82
- package/src/components/Button/Button.types.ts +0 -62
- package/src/components/Cell/Cell.tsx +0 -42
- package/src/components/Cell/Cell.types.ts +0 -42
- package/src/components/Codeblock/Codeblock.tsx +0 -88
- package/src/components/Codeblock/Codeblock.types.ts +0 -42
- package/src/components/CoreText/CoreText.tsx +0 -43
- package/src/components/CoreText/CoreText.types.ts +0 -56
- package/src/components/Divider/Divider.tsx +0 -35
- package/src/components/Divider/Divider.types.ts +0 -19
- package/src/components/InputImage/InputImage.tsx +0 -314
- package/src/components/InputImage/InputImage.types.ts +0 -86
- package/src/components/Sidebar/Sidebar.types.ts +0 -24
- package/src/components/SidebarItem/SidebarItem.tsx +0 -55
- package/src/components/SidebarItem/SidebarItem.types.ts +0 -39
- package/src/components/Skeleton/Skeleton.tsx +0 -41
- package/src/components/Skeleton/Skeleton.types.ts +0 -65
- package/src/components/Spacer/Spacer.types.ts +0 -58
- package/src/components/TabItem/TabItem.tsx +0 -45
- package/src/components/TabItem/TabItem.types.ts +0 -35
- package/src/components/Table/Table.types.ts +0 -18
- package/src/components/TableRow/TableRow.tsx +0 -53
- package/src/components/TableRow/TableRow.types.ts +0 -41
- package/src/compositions/index.ts +0 -3
- package/src/index.ts +0 -4
- /package/{src → dist}/components/Button/Button.css +0 -0
- /package/{src → dist}/components/Cell/Cell.css +0 -0
- /package/{src → dist}/components/Codeblock/Codeblock.css +0 -0
- /package/{src → dist}/components/Divider/Divider.css +0 -0
- /package/{src → dist}/components/InputImage/InputImage.css +0 -0
- /package/{src → dist}/components/Sidebar/Sidebar.css +0 -0
- /package/{src → dist}/components/SidebarItem/SidebarItem.css +0 -0
- /package/{src → dist}/components/Skeleton/Skeleton.css +0 -0
- /package/{src → dist}/components/TabItem/TabItem.css +0 -0
- /package/{src → dist}/components/Table/Table.css +0 -0
- /package/{src → dist}/components/TableRow/TableRow.css +0 -0
- /package/{src → dist}/components/Tabs/Tabs.css +0 -0
- /package/{src → dist}/index.css +0 -0
- /package/{src → dist}/styles/component-tokens.css +0 -0
- /package/{src → dist}/styles/component-tokens.current.css +0 -0
- /package/{src → dist}/styles/fonts.css +0 -0
- /package/{src → dist}/styles/global-tokens.css +0 -0
- /package/{src → dist}/styles/index.css +0 -0
- /package/{src → dist}/styles/number-tokens.css +0 -0
- /package/{src → dist}/styles/semantic-tokens.css +0 -0
- /package/{src → dist}/styles/style-tokens.css +0 -0
- /package/{src → dist}/styles/typography-tokens.css +0 -0
- /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
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* <
|
|
15
|
-
* <
|
|
16
|
-
* <SidebarItem icon={<
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
export
|
|
22
|
-
|
|
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
|