@ingamigo/ui 1.1.0 → 1.2.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 (23) hide show
  1. package/dist/components/button/button.d.ts +2 -2
  2. package/dist/components/button/button.d.ts.map +1 -1
  3. package/dist/components/button/button.styles.d.ts +4 -6
  4. package/dist/components/button/button.styles.d.ts.map +1 -1
  5. package/dist/components/button/button.styles.js +84 -71
  6. package/dist/components/button/button.styles.js.map +1 -1
  7. package/dist/components/segmented-control/segmented-control.d.ts +16 -0
  8. package/dist/components/segmented-control/segmented-control.d.ts.map +1 -0
  9. package/dist/components/segmented-control/segmented-control.js +50 -0
  10. package/dist/components/segmented-control/segmented-control.js.map +1 -0
  11. package/dist/components/segmented-control/segmented-control.stories .d.ts +25 -0
  12. package/dist/components/segmented-control/segmented-control.stories .d.ts.map +1 -0
  13. package/dist/components/segmented-control/segmented-control.stories .js +91 -0
  14. package/dist/components/segmented-control/segmented-control.stories .js.map +1 -0
  15. package/dist/components/segmented-control/segmented-control.styles.d.ts +11 -0
  16. package/dist/components/segmented-control/segmented-control.styles.d.ts.map +1 -0
  17. package/dist/components/segmented-control/segmented-control.styles.js +83 -0
  18. package/dist/components/segmented-control/segmented-control.styles.js.map +1 -0
  19. package/dist/index.d.ts +2 -0
  20. package/dist/index.d.ts.map +1 -1
  21. package/dist/index.js +1 -0
  22. package/dist/index.js.map +1 -1
  23. package/package.json +5 -6
package/dist/components/button/button.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { ButtonHTMLAttributes } from "react";
2
2
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
3
- variant?: "primary" | "secondary";
4
- size?: "small" | "medium" | "large";
3
+ variant?: "primary" | "secondary" | "ghost";
4
+ size?: "small" | "medium" | "large" | "icon";
5
5
  }
6
6
  declare const Button: ({ variant, size, children, ...props }: ButtonProps) => import("react").JSX.Element;
7
7
  export default Button;
package/dist/components/button/button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,QAAA,MAAM,MAAM,GAAI,uCAKb,WAAW,gCAUb,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAIlD,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC5C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;CAC9C;AAED,QAAA,MAAM,MAAM,GAAI,uCAKb,WAAW,gCAUb,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/dist/components/button/button.styles.d.ts CHANGED
@@ -1,10 +1,8 @@
1
- interface StyledButtonProps {
2
- variant: "primary" | "secondary";
3
- size: "small" | "medium" | "large";
4
- }
5
1
  export declare const StyledButton: import("@emotion/styled").StyledComponent<{
6
2
  theme?: import("@emotion/react").Theme;
7
3
  as?: React.ElementType;
8
- } & StyledButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
9
- export {};
4
+ } & {
5
+ variant: "primary" | "secondary" | "ghost";
6
+ size: "small" | "medium" | "large" | "icon";
7
+ }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
10
8
  //# sourceMappingURL=button.styles.d.ts.map
package/dist/components/button/button.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAC;IACjC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,YAAY;;;yIA0GxB,CAAC"}
1
+ {"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;aACd,SAAS,GAAG,WAAW,GAAG,OAAO;UACpC,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM;qHAwH5C,CAAC"}
package/dist/components/button/button.styles.js CHANGED
@@ -3,71 +3,102 @@ export const StyledButton = styled.button `
3
3
  display: inline-flex;
4
4
  align-items: center;
5
5
  justify-content: center;
6
+ gap: ${({ theme }) => theme.spacing[2]};
6
7
 
7
8
  border: 1px solid transparent;
8
- border-radius: ${({ theme }) => theme.radius.md};
9
+ border-radius: ${({ theme }) => theme.radiusSemantic.control};
10
+
11
+ font-family: ${({ theme }) => theme.typography.fontFamily};
12
+ font-weight: ${({ theme }) => theme.semanticTypography.fontWeight.label};
9
13
 
10
- font-family:
11
- Inter,
12
- system-ui,
13
- -apple-system,
14
- BlinkMacSystemFont,
15
- "Segoe UI",
16
- Roboto,
17
- Helvetica,
18
- Arial,
19
- sans-serif;
20
- font-size: ${({ theme }) => theme.typography.fontSize.md};
21
- font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
22
14
  line-height: 1;
15
+ white-space: nowrap;
23
16
 
24
17
  cursor: pointer;
25
18
  user-select: none;
26
19
 
27
20
  transition:
28
- background-color ${({ theme }) => theme.motion.duration.normal}
29
- ${({ theme }) => theme.motion.ease.standard},
30
- color ${({ theme }) => theme.motion.duration.normal}
31
- ${({ theme }) => theme.motion.ease.standard},
32
- border-color ${({ theme }) => theme.motion.duration.normal}
33
- ${({ theme }) => theme.motion.ease.standard},
34
- box-shadow ${({ theme }) => theme.motion.duration.normal}
35
- ${({ theme }) => theme.motion.ease.standard},
36
- transform ${({ theme }) => theme.motion.duration.normal}
37
- ${({ theme }) => theme.motion.ease.standard};
21
+ background-color ${({ theme }) => theme.motionSemantic.interaction}
22
+ ${({ theme }) => theme.motionSemantic.transition},
23
+ color ${({ theme }) => theme.motionSemantic.interaction}
24
+ ${({ theme }) => theme.motionSemantic.transition},
25
+ border-color ${({ theme }) => theme.motionSemantic.interaction}
26
+ ${({ theme }) => theme.motionSemantic.transition},
27
+ box-shadow ${({ theme }) => theme.motionSemantic.interaction}
28
+ ${({ theme }) => theme.motionSemantic.transition};
38
29
 
39
- ${({ theme, variant }) => variant === "primary" &&
40
- `
41
- background: ${theme.action.primary};
42
- color: ${theme.text.inverse};
43
- box-shadow: ${theme.shadows.sm};
30
+ ${({ theme, size }) => {
31
+ switch (size) {
32
+ case "small":
33
+ return `
34
+ min-height: 32px;
35
+ padding: 0 ${theme.spacing[3]};
36
+ font-size: ${theme.semanticTypography.fontSize.bodySm};
37
+ `;
38
+ case "large":
39
+ return `
40
+ min-height: 44px;
41
+ padding: 0 ${theme.spacing[5]};
42
+ font-size: ${theme.semanticTypography.fontSize.bodyLg};
43
+ `;
44
+ case "icon":
45
+ return `
46
+ min-width: 36px;
47
+ min-height: 36px;
48
+ padding: ${theme.spacing[2]};
49
+ aspect-ratio: 1 / 1;
50
+ `;
51
+ case "medium":
52
+ default:
53
+ return `
54
+ min-height: 36px;
55
+ padding: 0 ${theme.spacing[4]};
56
+ font-size: ${theme.semanticTypography.fontSize.body};
57
+ `;
58
+ }
59
+ }}
44
60
 
45
- &:hover:not(:disabled) {
46
- background: ${theme.action.primaryHover};
47
- box-shadow: ${theme.shadows.md};
48
- }
61
+ ${({ theme, variant }) => {
62
+ switch (variant) {
63
+ case "primary":
64
+ return `
65
+ background: ${theme.action.primary};
66
+ color: ${theme.text.inverse};
67
+ border-color: ${theme.action.primary};
49
68
 
50
- &:active:not(:disabled) {
51
- transform: translateY(1px);
52
- box-shadow: ${theme.shadows.sm};
53
- }
54
- `}
69
+ &:hover:not(:disabled) {
70
+ background: ${theme.action.primaryHover};
71
+ border-color: ${theme.action.primaryHover};
72
+ }
73
+ `;
74
+ case "secondary":
75
+ return `
76
+ background: ${theme.surface.secondary};
77
+ color: ${theme.text.primary};
78
+ border-color: ${theme.border.default};
55
79
 
56
- ${({ theme, variant }) => variant === "secondary" &&
57
- `
58
- background: ${theme.surface.secondary};
59
- color: ${theme.text.primary};
60
- border-color: ${theme.border.default};
80
+ &:hover:not(:disabled) {
81
+ background: ${theme.surface.tertiary};
82
+ border-color: ${theme.border.strong};
83
+ }
84
+ `;
85
+ case "ghost":
86
+ return `
87
+ background: transparent;
88
+ color: ${theme.text.secondary};
89
+ border-color: transparent;
61
90
 
62
- &:hover:not(:disabled) {
63
- background: ${theme.surface.tertiary};
64
- border-color: ${theme.border.strong};
65
- }
91
+ &:hover:not(:disabled) {
92
+ background: ${theme.surface.tertiary};
93
+ color: ${theme.text.primary};
94
+ }
66
95
 
67
- &:active:not(:disabled) {
68
- transform: translateY(1px);
69
- }
70
- `}
96
+ &:active:not(:disabled) {
97
+ background: ${theme.surface.tertiary};
98
+ }
99
+ `;
100
+ }
101
+ }}
71
102
 
72
103
  &:focus-visible {
73
104
  outline: 2px solid ${({ theme }) => theme.border.focus};
@@ -77,28 +108,10 @@ export const StyledButton = styled.button `
77
108
  &:disabled {
78
109
  cursor: not-allowed;
79
110
  opacity: 0.5;
80
- box-shadow: none;
81
111
  }
82
112
 
83
- ${({ theme, size }) => size === "small" &&
84
- `
85
- min-height: 32px;
86
- padding: 0 ${theme.spacing[3]};
87
- font-size: ${theme.typography.fontSize.sm};
88
- `}
89
-
90
- ${({ theme, size }) => size === "medium" &&
91
- `
92
- min-height: 40px;
93
- padding: 0 ${theme.spacing[4]};
94
- font-size: ${theme.typography.fontSize.md};
95
- `}
96
-
97
- ${({ theme, size }) => size === "large" &&
98
- `
99
- min-height: 48px;
100
- padding: 0 ${theme.spacing[6]};
101
- font-size: ${theme.typography.fontSize.lg};
102
- `}
113
+ &[aria-busy="true"] {
114
+ cursor: wait;
115
+ }
103
116
  `;
104
117
  //# sourceMappingURL=button.styles.js.map
package/dist/components/button/button.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;;;;mBAMzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;;;;;;;;;;;;eAYlC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;iBACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;;;;;;;uBAO3C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;YACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QAC/C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;mBAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QACtD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;iBAChC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QACpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;gBACjC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM;QACnD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ;;IAE7C,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CACvB,OAAO,KAAK,SAAS;IACrB;oBACgB,KAAK,CAAC,MAAM,CAAC,OAAO;eACzB,KAAK,CAAC,IAAI,CAAC,OAAO;oBACb,KAAK,CAAC,OAAO,CAAC,EAAE;;;sBAGd,KAAK,CAAC,MAAM,CAAC,YAAY;sBACzB,KAAK,CAAC,OAAO,CAAC,EAAE;;;;;sBAKhB,KAAK,CAAC,OAAO,CAAC,EAAE;;KAEjC;;IAED,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,CACvB,OAAO,KAAK,WAAW;IACvB;oBACgB,KAAK,CAAC,OAAO,CAAC,SAAS;eAC5B,KAAK,CAAC,IAAI,CAAC,OAAO;sBACX,KAAK,CAAC,MAAM,CAAC,OAAO;;;sBAGpB,KAAK,CAAC,OAAO,CAAC,QAAQ;wBACpB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;KAMtC;;;yBAGoB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;IAUtD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CACpB,IAAI,KAAK,OAAO;IAChB;;mBAEe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;mBAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;KAC1C;;IAED,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CACpB,IAAI,KAAK,QAAQ;IACjB;;mBAEe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;mBAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;KAC1C;;IAED,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CACpB,IAAI,KAAK,OAAO;IAChB;;mBAEe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;mBAChB,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;KAC1C;CACJ,CAAC"}
1
+ {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"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"}
package/dist/components/segmented-control/segmented-control.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type { ReactNode } from "react";
2
+ export interface SegmentedControlOption<T extends string> {
3
+ value: T;
4
+ label: ReactNode;
5
+ disabled?: boolean;
6
+ }
7
+ export interface SegmentedControlProps<T extends string> {
8
+ options: SegmentedControlOption<T>[];
9
+ value: T;
10
+ onChange: (value: T) => void;
11
+ size?: "small" | "medium" | "large";
12
+ disabled?: boolean;
13
+ }
14
+ declare const SegmentedControl: <T extends string>({ options, value, onChange, size, disabled, }: SegmentedControlProps<T>) => import("react").JSX.Element;
15
+ export default SegmentedControl;
16
+ //# sourceMappingURL=segmented-control.d.ts.map
package/dist/components/segmented-control/segmented-control.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtD,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM;IACtD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM;IACrD,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IACrC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,EAAE,+CAMzC,qBAAqB,CAAC,CAAC,CAAC,gCA2F1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
package/dist/components/segmented-control/segmented-control.js ADDED
@@ -0,0 +1,50 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useRef } from "react";
3
+ import { StyledSegment, StyledSegmentedControl, } from "./segmented-control.styles";
4
+ const SegmentedControl = ({ options, value, onChange, size = "medium", disabled = false, }) => {
5
+ const refs = useRef([]);
6
+ const enabledOptions = options.filter((option) => !option.disabled);
7
+ const handleKeyDown = (event, currentIndex) => {
8
+ if (disabled || currentIndex === -1) {
9
+ return;
10
+ }
11
+ let nextIndex;
12
+ switch (event.key) {
13
+ case "ArrowRight":
14
+ case "ArrowDown":
15
+ nextIndex = (currentIndex + 1) % enabledOptions.length;
16
+ break;
17
+ case "ArrowLeft":
18
+ case "ArrowUp":
19
+ nextIndex =
20
+ (currentIndex - 1 + enabledOptions.length) %
21
+ enabledOptions.length;
22
+ break;
23
+ case "Home":
24
+ nextIndex = 0;
25
+ break;
26
+ case "End":
27
+ nextIndex = enabledOptions.length - 1;
28
+ break;
29
+ default:
30
+ return;
31
+ }
32
+ event.preventDefault();
33
+ const nextOption = enabledOptions[nextIndex];
34
+ const originalIndex = options.findIndex((option) => option.value === nextOption.value);
35
+ refs.current[originalIndex]?.focus();
36
+ onChange(nextOption.value);
37
+ };
38
+ return (_jsx(StyledSegmentedControl, { role: "radiogroup", "aria-disabled": disabled, children: options.map((option, index) => {
39
+ const checked = option.value === value;
40
+ const optionDisabled = disabled || option.disabled;
41
+ const enabledIndex = enabledOptions.findIndex((item) => item.value === option.value);
42
+ return (_jsx(StyledSegment, { ref: (element) => {
43
+ refs.current[index] = element;
44
+ }, size: size, type: "button", role: "radio", "aria-checked": checked, tabIndex: checked && !optionDisabled ? 0 : -1, disabled: optionDisabled, onClick: () => onChange(option.value), onKeyDown: (event) => {
45
+ handleKeyDown(event, enabledIndex);
46
+ }, children: option.label }, option.value));
47
+ }) }));
48
+ };
49
+ export default SegmentedControl;
50
+ //# sourceMappingURL=segmented-control.js.map
package/dist/components/segmented-control/segmented-control.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"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"}
package/dist/components/segmented-control/segmented-control.stories .d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import type { StoryObj } from "@storybook/react";
2
+ declare const meta: {
3
+ title: string;
4
+ component: <T extends string>({ options, value, onChange, size, disabled, }: import("./segmented-control").SegmentedControlProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ argTypes: {
9
+ value: {
10
+ control: false;
11
+ };
12
+ onChange: {
13
+ action: string;
14
+ };
15
+ };
16
+ };
17
+ export default meta;
18
+ type Story = StoryObj;
19
+ export declare const Default: Story;
20
+ export declare const Small: Story;
21
+ export declare const Large: Story;
22
+ export declare const WithDisabledOption: Story;
23
+ export declare const Disabled: Story;
24
+ export declare const ThreeOptions: Story;
25
+ //# sourceMappingURL=segmented-control.stories%20.d.ts.map
package/dist/components/segmented-control/segmented-control.stories .d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"segmented-control.stories .d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories .tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAc+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AA4BtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAwBF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAkBtB,CAAC;AA2BF,eAAO,MAAM,YAAY,EAAE,KAE1B,CAAC"}
package/dist/components/segmented-control/segmented-control.stories .js ADDED
@@ -0,0 +1,91 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useState } from "react";
3
+ import SegmentedControl from "./segmented-control";
4
+ const meta = {
5
+ title: "Components/SegmentedControl",
6
+ component: SegmentedControl,
7
+ parameters: {
8
+ layout: "centered",
9
+ },
10
+ argTypes: {
11
+ value: {
12
+ control: false,
13
+ },
14
+ onChange: {
15
+ action: "changed",
16
+ },
17
+ },
18
+ };
19
+ export default meta;
20
+ function CustomerExecutorControl({ size, }) {
21
+ const [value, setValue] = useState("customer");
22
+ return (_jsx(SegmentedControl, { size: size, options: [
23
+ {
24
+ value: "customer",
25
+ label: "Заказчик",
26
+ },
27
+ {
28
+ value: "executor",
29
+ label: "Исполнитель",
30
+ },
31
+ ], value: value, onChange: setValue }));
32
+ }
33
+ export const Default = {
34
+ render: () => _jsx(CustomerExecutorControl, {}),
35
+ };
36
+ export const Small = {
37
+ render: () => _jsx(CustomerExecutorControl, { size: "small" }),
38
+ };
39
+ export const Large = {
40
+ render: () => _jsx(CustomerExecutorControl, { size: "large" }),
41
+ };
42
+ function DisabledOptionControl() {
43
+ const [value, setValue] = useState("customer");
44
+ return (_jsx(SegmentedControl, { options: [
45
+ {
46
+ value: "customer",
47
+ label: "Заказчик",
48
+ },
49
+ {
50
+ value: "executor",
51
+ label: "Исполнитель",
52
+ disabled: true,
53
+ },
54
+ ], value: value, onChange: setValue }));
55
+ }
56
+ export const WithDisabledOption = {
57
+ render: () => _jsx(DisabledOptionControl, {}),
58
+ };
59
+ export const Disabled = {
60
+ render: () => (_jsx(SegmentedControl, { options: [
61
+ {
62
+ value: "customer",
63
+ label: "Заказчик",
64
+ },
65
+ {
66
+ value: "executor",
67
+ label: "Исполнитель",
68
+ },
69
+ ], value: "customer", onChange: () => { }, disabled: true })),
70
+ };
71
+ function ThreeOptionsControl() {
72
+ const [value, setValue] = useState("all");
73
+ return (_jsx(SegmentedControl, { options: [
74
+ {
75
+ value: "all",
76
+ label: "Все",
77
+ },
78
+ {
79
+ value: "active",
80
+ label: "Активные",
81
+ },
82
+ {
83
+ value: "completed",
84
+ label: "Завершённые",
85
+ },
86
+ ], value: value, onChange: setValue }));
87
+ }
88
+ export const ThreeOptions = {
89
+ render: () => _jsx(ThreeOptionsControl, {}),
90
+ };
91
+ //# sourceMappingURL=segmented-control.stories%20.js.map
package/dist/components/segmented-control/segmented-control.stories .js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"segmented-control.stories .js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories .tsx"],"names":[],"mappings":"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"}
package/dist/components/segmented-control/segmented-control.styles.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ export declare const StyledSegmentedControl: import("@emotion/styled").StyledComponent<{
2
+ theme?: import("@emotion/react").Theme;
3
+ as?: React.ElementType;
4
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
+ export declare const StyledSegment: import("@emotion/styled").StyledComponent<{
6
+ theme?: import("@emotion/react").Theme;
7
+ as?: React.ElementType;
8
+ } & {
9
+ size: "small" | "medium" | "large";
10
+ }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
11
+ //# sourceMappingURL=segmented-control.styles.d.ts.map
package/dist/components/segmented-control/segmented-control.styles.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB;;;yGAUlC,CAAC;AAEF,eAAO,MAAM,aAAa;;;;UAClB,OAAO,GAAG,QAAQ,GAAG,OAAO;qHA4EnC,CAAC"}
package/dist/components/segmented-control/segmented-control.styles.js ADDED
@@ -0,0 +1,83 @@
1
+ import styled from "@emotion/styled";
2
+ export const StyledSegmentedControl = styled.div `
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: 2px;
6
+
7
+ padding: ${({ theme }) => theme.spacing[1]};
8
+
9
+ background: ${({ theme }) => theme.surface.secondary};
10
+ border: 1px solid ${({ theme }) => theme.border.default};
11
+ border-radius: ${({ theme }) => theme.radius.full};
12
+ `;
13
+ export const StyledSegment = styled.button `
14
+ display: inline-flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+
18
+ border: 0;
19
+ border-radius: ${({ theme }) => theme.radius.full};
20
+
21
+ background: transparent;
22
+ color: ${({ theme }) => theme.text.secondary};
23
+
24
+ font-family: ${({ theme }) => theme.typography.fontFamily};
25
+ font-weight: ${({ theme }) => theme.semanticTypography.fontWeight.label};
26
+ line-height: 1;
27
+
28
+ cursor: pointer;
29
+ user-select: none;
30
+
31
+ transition:
32
+ background-color ${({ theme }) => theme.motionSemantic.interaction}
33
+ ${({ theme }) => theme.motionSemantic.transition},
34
+ color ${({ theme }) => theme.motionSemantic.interaction}
35
+ ${({ theme }) => theme.motionSemantic.transition},
36
+ box-shadow ${({ theme }) => theme.motionSemantic.interaction}
37
+ ${({ theme }) => theme.motionSemantic.transition};
38
+
39
+ ${({ theme, size }) => {
40
+ switch (size) {
41
+ case "small":
42
+ return `
43
+ min-height: 32px;
44
+ padding: 0 ${theme.spacing[3]};
45
+ font-size: ${theme.semanticTypography.fontSize.bodySm};
46
+ `;
47
+ case "large":
48
+ return `
49
+ min-height: 44px;
50
+ padding: 0 ${theme.spacing[5]};
51
+ font-size: ${theme.semanticTypography.fontSize.bodyLg};
52
+ `;
53
+ case "medium":
54
+ default:
55
+ return `
56
+ min-height: 36px;
57
+ padding: 0 ${theme.spacing[4]};
58
+ font-size: ${theme.semanticTypography.fontSize.body};
59
+ `;
60
+ }
61
+ }}
62
+
63
+ &:hover:not(:disabled) {
64
+ color: ${({ theme }) => theme.text.primary};
65
+ }
66
+
67
+ &:focus-visible {
68
+ outline: 2px solid ${({ theme }) => theme.border.focus};
69
+ outline-offset: 2px;
70
+ }
71
+
72
+ &:disabled {
73
+ cursor: not-allowed;
74
+ opacity: 0.5;
75
+ }
76
+
77
+ &[aria-checked="true"] {
78
+ background: ${({ theme }) => theme.surface.primary};
79
+ color: ${({ theme }) => theme.text.primary};
80
+ box-shadow: ${({ theme }) => theme.elevation.surface};
81
+ }
82
+ `;
83
+ //# sourceMappingURL=segmented-control.styles.js.map
package/dist/components/segmented-control/segmented-control.styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"segmented-control.styles.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;aAKnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;gBAE5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;sBAChC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;mBACtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAExC;;;;;;mBAMiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;;WAGxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;;iBAE7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU;iBAC1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC3B,KAAK,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK;;;;;;;uBAOtB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC/B,KAAK,CAAC,cAAc,CAAC,WAAW;QAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;YAC1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACpB,KAAK,CAAC,cAAc,CAAC,WAAW;QAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;iBACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACzB,KAAK,CAAC,cAAc,CAAC,WAAW;QAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU;;IAElD,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACpB,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,MAAM;SACtD,CAAC;QAEJ,KAAK,OAAO;YACV,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,MAAM;SACtD,CAAC;QAEJ,KAAK,QAAQ,CAAC;QACd;YACE,OAAO;;uBAEQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;uBAChB,KAAK,CAAC,kBAAkB,CAAC,QAAQ,CAAC,IAAI;SACpD,CAAC;IACN,CAAC;AACH,CAAC;;;aAGU,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;;;yBAIrB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;;;;;;kBAUxC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO;aACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;kBAC5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO;;CAEvD,CAAC"}
package/dist/index.d.ts CHANGED
@@ -4,7 +4,9 @@ export type { IngAmigoTheme } from "./theme";
4
4
  export { default as Button } from "./components/button/button";
5
5
  export { default as Input } from "./components/input/input";
6
6
  export { default as Typography } from "./components/typography/typography";
7
+ export { default as SegmentedControl } from "./components/segmented-control/segmented-control";
7
8
  export type { ButtonProps } from "./components/button/button";
8
9
  export type { InputProps } from "./components/input/input";
9
10
  export type { TypographyProps, TypographyVariant, } from "./components/typography/typography";
11
+ export type { SegmentedControlOption, SegmentedControlProps, } from "./components/segmented-control/segmented-control";
10
12
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAE3E,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,YAAY,EACV,eAAe,EACf,iBAAiB,GAClB,MAAM,oCAAoC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AAE/F,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,YAAY,EACV,eAAe,EACf,iBAAiB,GAClB,MAAM,oCAAoC,CAAC;AAE5C,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,kDAAkD,CAAC"}
package/dist/index.js CHANGED
@@ -4,4 +4,5 @@ export { theme } from "./theme";
4
4
  export { default as Button } from "./components/button/button";
5
5
  export { default as Input } from "./components/input/input";
6
6
  export { default as Typography } from "./components/typography/typography";
7
+ export { default as SegmentedControl } from "./components/segmented-control/segmented-control";
7
8
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,kDAAkD,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ingamigo/ui",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
4
4
  "description": "UI component library and design system for IngAmigo",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -47,10 +47,10 @@
47
47
  "@eslint/js": "^10.0.1",
48
48
  "@storybook/addon-a11y": "^10.6.0",
49
49
  "@storybook/addon-docs": "^10.6.0",
50
- "@storybook/addon-webpack5-compiler-swc": "latest",
51
- "@storybook/react-webpack5": "^10.6.0",
50
+ "@storybook/react-vite": "^10.6.0",
52
51
  "@testing-library/jest-dom": "^7.0.1",
53
52
  "@testing-library/react": "^16.3.3",
53
+ "@testing-library/user-event": "^14.6.7",
54
54
  "@types/react": "^19.3.0",
55
55
  "@types/react-dom": "^19.3.0",
56
56
  "css-loader": "^7.1.5",
@@ -66,9 +66,8 @@
66
66
  "ts-loader": "^9.6.2",
67
67
  "typescript": "^6.0.3",
68
68
  "typescript-eslint": "^8.70.0",
69
- "vitest": "^5.0.1",
70
- "webpack": "^5.111.1",
71
- "webpack-cli": "^7.2.3"
69
+ "vite": "^8.3.0",
70
+ "vitest": "^5.0.1"
72
71
  },
73
72
  "peerDependencies": {
74
73
  "react": "*",