@stfrigerio/sito-template 0.1.25 → 0.1.27

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 (15) hide show
  1. package/dist/components/atoms/NumberStepper/NumberStepper.d.ts +89 -1
  2. package/dist/components/atoms/NumberStepper/NumberStepper.d.ts.map +1 -1
  3. package/dist/components/atoms/NumberStepper/NumberStepper.stories.d.ts +8 -0
  4. package/dist/components/atoms/NumberStepper/NumberStepper.stories.d.ts.map +1 -1
  5. package/dist/components/atoms/TextArea/TextArea.d.ts +3 -1
  6. package/dist/components/atoms/TextArea/TextArea.d.ts.map +1 -1
  7. package/dist/components/molecules/TimeInput/TimeInput.d.ts +2 -1
  8. package/dist/components/molecules/TimeInput/TimeInput.d.ts.map +1 -1
  9. package/dist/index.esm.js +89 -6
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +89 -6
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +1 -1
  14. package/dist/styles.css.map +1 -1
  15. package/package.json +1 -1
package/dist/components/atoms/NumberStepper/NumberStepper.d.ts CHANGED
@@ -23,13 +23,36 @@ export interface NumberStepperProps {
23
23
  /** Size variant */
24
24
  size?: 'small' | 'medium' | 'large';
25
25
  /** Visual variant */
26
- variant?: 'default' | 'outlined' | 'filled';
26
+ variant?: 'default' | 'outlined' | 'filled' | 'minimal' | 'custom';
27
27
  /** Show plus/minus icons instead of arrows */
28
28
  showPlusMinus?: boolean;
29
29
  /** Allow keyboard navigation */
30
30
  allowKeyboard?: boolean;
31
31
  /** Custom className */
32
32
  className?: string;
33
+ /** Custom styles for different parts of the component */
34
+ customStyles?: {
35
+ container?: React.CSSProperties;
36
+ header?: React.CSSProperties;
37
+ icon?: React.CSSProperties;
38
+ label?: React.CSSProperties;
39
+ stepper?: React.CSSProperties;
40
+ button?: React.CSSProperties;
41
+ buttonHover?: React.CSSProperties;
42
+ buttonIcon?: React.CSSProperties;
43
+ value?: React.CSSProperties;
44
+ valueContainer?: React.CSSProperties;
45
+ limits?: React.CSSProperties;
46
+ };
47
+ /** Custom button content (overrides default icons) */
48
+ customButtons?: {
49
+ increment?: React.ReactNode;
50
+ decrement?: React.ReactNode;
51
+ };
52
+ /** Hide the limits display */
53
+ hideLimits?: boolean;
54
+ /** Layout direction */
55
+ layout?: 'horizontal' | 'vertical';
33
56
  }
34
57
  /**
35
58
  * NumberStepper Component
@@ -60,6 +83,71 @@ export interface NumberStepperProps {
60
83
  * icon="📦"
61
84
  * />
62
85
  *
86
+ * @example
87
+ * // With custom styles
88
+ * <NumberStepper
89
+ * value={volume}
90
+ * onChange={setVolume}
91
+ * min={0}
92
+ * max={100}
93
+ * label="Volume"
94
+ * icon="🔊"
95
+ * customStyles={{
96
+ * container: {
97
+ * background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
98
+ * padding: '20px',
99
+ * borderRadius: '16px',
100
+ * },
101
+ * label: { color: 'white', fontWeight: 'bold' },
102
+ * button: {
103
+ * background: 'rgba(255,255,255,0.2)',
104
+ * color: 'white',
105
+ * },
106
+ * buttonHover: {
107
+ * background: 'rgba(255,255,255,0.3)',
108
+ * },
109
+ * value: {
110
+ * color: 'white',
111
+ * fontSize: '24px',
112
+ * fontWeight: 'bold',
113
+ * },
114
+ * }}
115
+ * />
116
+ *
117
+ * @example
118
+ * // Custom variant with horizontal layout
119
+ * <NumberStepper
120
+ * value={discount}
121
+ * onChange={setDiscount}
122
+ * min={0}
123
+ * max={100}
124
+ * step={5}
125
+ * label="Discount %"
126
+ * icon="🏷️"
127
+ * variant="custom"
128
+ * customStyles={{
129
+ * container: {
130
+ * display: 'flex',
131
+ * alignItems: 'center',
132
+ * gap: '16px',
133
+ * },
134
+ * header: { flex: 1, marginBottom: 0 },
135
+ * }}
136
+ * />
137
+ *
138
+ * @example
139
+ * // With custom buttons
140
+ * <NumberStepper
141
+ * value={rating}
142
+ * onChange={setRating}
143
+ * min={1}
144
+ * max={5}
145
+ * customButtons={{
146
+ * decrement: <span>👎</span>,
147
+ * increment: <span>👍</span>,
148
+ * }}
149
+ * />
150
+ *
63
151
  * @param {NumberStepperProps} props - The props for the NumberStepper component
64
152
  * @returns {JSX.Element} The rendered NumberStepper component
65
153
  */
package/dist/components/atoms/NumberStepper/NumberStepper.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/NumberStepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IAC/B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2MtD,CAAC"}
1
+ {"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/NumberStepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IAC/B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnE,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,YAAY,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,sDAAsD;IACtD,aAAa,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC/B,CAAC;IACF,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB;IACvB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2PtD,CAAC"}
package/dist/components/atoms/NumberStepper/NumberStepper.stories.d.ts CHANGED
@@ -15,4 +15,12 @@ export declare const Disabled: Story;
15
15
  export declare const NoLimits: Story;
16
16
  export declare const DecimalStep: Story;
17
17
  export declare const HabitTracking: Story;
18
+ export declare const MinimalVariant: Story;
19
+ export declare const CustomStyled: Story;
20
+ export declare const GamingStyle: Story;
21
+ export declare const NeonStyle: Story;
22
+ export declare const VerticalLayout: Story;
23
+ export declare const CustomButtons: Story;
24
+ export declare const WithLimitsDisplay: Story;
25
+ export declare const CompactHorizontalCustom: Story;
18
26
  //# sourceMappingURL=NumberStepper.stories.d.ts.map
package/dist/components/atoms/NumberStepper/NumberStepper.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberStepper.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/NumberStepper/NumberStepper.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA2DpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkBnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwC3B,CAAC"}
1
+ {"version":3,"file":"NumberStepper.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/NumberStepper/NumberStepper.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CA2DpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkBnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwC3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAU5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8C1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsDzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAwDvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqC5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAoDrC,CAAC"}
package/dist/components/atoms/TextArea/TextArea.d.ts CHANGED
@@ -29,6 +29,8 @@ export interface TextAreaProps {
29
29
  focusMode?: boolean;
30
30
  /** Compact mode for use in arrays or dense layouts */
31
31
  compact?: boolean;
32
+ /** Custom CSS class name(s) to apply to the container */
33
+ className?: string;
32
34
  }
33
35
  /**
34
36
  * TextArea component - Multi-line text input with character counting
@@ -60,5 +62,5 @@ export interface TextAreaProps {
60
62
  * required
61
63
  * />
62
64
  */
63
- export declare function TextArea({ label, value, onChange, rows, placeholder, required, maxLength, disabled, error, success, loading, focusMode, compact }: Readonly<TextAreaProps>): import("react/jsx-runtime").JSX.Element;
65
+ export declare function TextArea({ label, value, onChange, rows, placeholder, required, maxLength, disabled, error, success, loading, focusMode, compact, className }: Readonly<TextAreaProps>): import("react/jsx-runtime").JSX.Element;
64
66
  //# sourceMappingURL=TextArea.d.ts.map
package/dist/components/atoms/TextArea/TextArea.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,QAAQ,CAAC,EACrB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAQ,EACR,WAAgB,EAChB,QAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,KAAa,EACb,OAAe,EACf,OAAe,EACf,SAAiB,EACjB,OAAe,EAClB,EAAE,QAAQ,CAAC,aAAa,CAAC,2CAyDzB"}
1
+ {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC1B,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,QAAQ,CAAC,EACrB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAQ,EACR,WAAgB,EAChB,QAAgB,EAChB,SAAS,EACT,QAAgB,EAChB,KAAa,EACb,OAAe,EACf,OAAe,EACf,SAAiB,EACjB,OAAe,EACf,SAAc,EACjB,EAAE,QAAQ,CAAC,aAAa,CAAC,2CA0DzB"}
package/dist/components/molecules/TimeInput/TimeInput.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface TimeInputProps {
10
10
  loading?: boolean;
11
11
  disabled?: boolean;
12
12
  required?: boolean;
13
+ className?: string;
13
14
  }
14
- export declare function TimeInput({ label, value, onChange, placeholder, onFocus, onBlur, error, success, loading, disabled, required }: Readonly<TimeInputProps>): import("react/jsx-runtime").JSX.Element;
15
+ export declare function TimeInput({ label, value, onChange, placeholder, onFocus, onBlur, error, success, loading, disabled, required, className }: Readonly<TimeInputProps>): import("react/jsx-runtime").JSX.Element;
15
16
  //# sourceMappingURL=TimeInput.d.ts.map
package/dist/components/molecules/TimeInput/TimeInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAqB,EACrB,OAAO,EACP,MAAM,EACN,KAAa,EACb,OAAe,EACf,OAAe,EACf,QAAgB,EAChB,QAAgB,EACnB,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAmH1B"}
1
+ {"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAqB,EACrB,OAAO,EACP,MAAM,EACN,KAAa,EACb,OAAe,EACf,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,SAAc,EACjB,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAoH1B"}
package/dist/index.esm.js CHANGED
@@ -655,7 +655,7 @@ var styles$l = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
655
655
  * required
656
656
  * />
657
657
  */
658
- function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false }) {
658
+ function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false, className = "" }) {
659
659
  const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
660
660
  const getContainerClassName = () => {
661
661
  const classes = [styles$l.textareaContainer];
@@ -669,6 +669,8 @@ function TextArea({ label, value, onChange, rows = 5, placeholder = "", required
669
669
  classes.push(styles$l.focusMode);
670
670
  if (compact)
671
671
  classes.push(styles$l.compact);
672
+ if (className)
673
+ classes.push(className);
672
674
  return classes.join(' ');
673
675
  };
674
676
  const getCharCountClassName = () => {
@@ -791,7 +793,7 @@ function Toggle(props) {
791
793
  return (jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxs("button", { className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$j.toggleButton} ${isOn ? styles$j.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
792
794
  }
793
795
 
794
- var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","pulse":"NumberStepper-module_pulse__51oUo"};
796
+ var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
795
797
 
796
798
  /**
797
799
  * NumberStepper Component
@@ -822,10 +824,75 @@ var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"Nu
822
824
  * icon="📦"
823
825
  * />
824
826
  *
827
+ * @example
828
+ * // With custom styles
829
+ * <NumberStepper
830
+ * value={volume}
831
+ * onChange={setVolume}
832
+ * min={0}
833
+ * max={100}
834
+ * label="Volume"
835
+ * icon="🔊"
836
+ * customStyles={{
837
+ * container: {
838
+ * background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
839
+ * padding: '20px',
840
+ * borderRadius: '16px',
841
+ * },
842
+ * label: { color: 'white', fontWeight: 'bold' },
843
+ * button: {
844
+ * background: 'rgba(255,255,255,0.2)',
845
+ * color: 'white',
846
+ * },
847
+ * buttonHover: {
848
+ * background: 'rgba(255,255,255,0.3)',
849
+ * },
850
+ * value: {
851
+ * color: 'white',
852
+ * fontSize: '24px',
853
+ * fontWeight: 'bold',
854
+ * },
855
+ * }}
856
+ * />
857
+ *
858
+ * @example
859
+ * // Custom variant with horizontal layout
860
+ * <NumberStepper
861
+ * value={discount}
862
+ * onChange={setDiscount}
863
+ * min={0}
864
+ * max={100}
865
+ * step={5}
866
+ * label="Discount %"
867
+ * icon="🏷️"
868
+ * variant="custom"
869
+ * customStyles={{
870
+ * container: {
871
+ * display: 'flex',
872
+ * alignItems: 'center',
873
+ * gap: '16px',
874
+ * },
875
+ * header: { flex: 1, marginBottom: 0 },
876
+ * }}
877
+ * />
878
+ *
879
+ * @example
880
+ * // With custom buttons
881
+ * <NumberStepper
882
+ * value={rating}
883
+ * onChange={setRating}
884
+ * min={1}
885
+ * max={5}
886
+ * customButtons={{
887
+ * decrement: <span>👎</span>,
888
+ * increment: <span>👍</span>,
889
+ * }}
890
+ * />
891
+ *
825
892
  * @param {NumberStepperProps} props - The props for the NumberStepper component
826
893
  * @returns {JSX.Element} The rendered NumberStepper component
827
894
  */
828
- const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', }) => {
895
+ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', customStyles = {}, customButtons = {}, hideLimits = false, layout = 'horizontal', }) => {
829
896
  const [isIncrementing, setIsIncrementing] = useState(false);
830
897
  const [isDecrementing, setIsDecrementing] = useState(false);
831
898
  const [displayValue, setDisplayValue] = useState(value);
@@ -911,12 +978,26 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
911
978
  styles$i.container,
912
979
  styles$i[size],
913
980
  styles$i[variant],
981
+ layout === 'vertical' && styles$i.vertical,
914
982
  disabled && styles$i.disabled,
915
983
  className
916
984
  ].filter(Boolean).join(' ');
985
+ // Merge custom styles with hover states
986
+ const [isButtonHovered, setIsButtonHovered] = useState(null);
917
987
  const isDecrementDisabled = disabled || value <= min;
918
988
  const isIncrementDisabled = disabled || value >= max;
919
- return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$i.header, children: [icon && jsx("span", { className: styles$i.icon, children: icon }), label && jsx("label", { className: styles$i.label, children: label })] })), jsxs("div", { className: styles$i.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(motion.button, { className: styles$i.button, onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: showPlusMinus ? (jsx("span", { className: styles$i.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$i.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("div", { className: styles$i.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$i.valueWrapper, children: jsx("input", { type: "text", className: styles$i.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsx(motion.button, { className: styles$i.button, onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: showPlusMinus ? (jsx("span", { className: styles$i.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$i.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$i.limits, children: [jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
989
+ const stepperContent = (jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(motion.button, { className: styles$i.button, style: {
990
+ ...customStyles.button,
991
+ ...(isButtonHovered === 'decrement' && customStyles.buttonHover)
992
+ }, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsx("div", { className: styles$i.valueContainer, style: customStyles.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$i.valueWrapper, children: jsx("input", { type: "text", className: styles$i.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsx(motion.button, { className: styles$i.button, style: {
993
+ ...customStyles.button,
994
+ ...(isButtonHovered === 'increment' && customStyles.buttonHover)
995
+ }, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
996
+ // For custom variant with horizontal layout, render differently
997
+ if (variant === 'custom' && (label || icon)) {
998
+ return (jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxs("div", { className: styles$i.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
999
+ }
1000
+ return (jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxs("div", { className: styles$i.header, style: customStyles.header, children: [icon && jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
920
1001
  };
921
1002
 
922
1003
  var styles$h = {"button":"ToggleButton-module_button__DTuyY","background":"ToggleButton-module_background__NwfTp","content":"ToggleButton-module_content__NHqIN","iconWrapper":"ToggleButton-module_iconWrapper__yN4sP","icon":"ToggleButton-module_icon__r8juX","label":"ToggleButton-module_label__4mPJP","hideMobile":"ToggleButton-module_hideMobile__GFAc3","checkmark":"ToggleButton-module_checkmark__ZJwf-","ripple":"ToggleButton-module_ripple__2-faB","small":"ToggleButton-module_small__MhfoN","large":"ToggleButton-module_large__A3naL","default":"ToggleButton-module_default__q8QaZ","active":"ToggleButton-module_active__4DjlR","outlined":"ToggleButton-module_outlined__OtqJB","filled":"ToggleButton-module_filled__LySNn","ghost":"ToggleButton-module_ghost__9KXcb","active-primary":"ToggleButton-module_active-primary__vXMP7","active-secondary":"ToggleButton-module_active-secondary__9Ttdx","active-success":"ToggleButton-module_active-success__oi0rr","active-danger":"ToggleButton-module_active-danger__VUdxr","active-warning":"ToggleButton-module_active-warning__77nSu","animation-scale":"ToggleButton-module_animation-scale__j-3mJ","scaleAnimation":"ToggleButton-module_scaleAnimation__Ms1j2","animation-rotate":"ToggleButton-module_animation-rotate__pBmfc","rotateAnimation":"ToggleButton-module_rotateAnimation__xWZJ5","animation-flip":"ToggleButton-module_animation-flip__ErAbm","flipAnimation":"ToggleButton-module_flipAnimation__qwDTb","disabled":"ToggleButton-module_disabled__Gv5ji"};
@@ -1630,7 +1711,7 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
1630
1711
 
1631
1712
  var styles$b = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","inputWrapper":"TimeInput-module_inputWrapper__4RPAn","textInput":"TimeInput-module_textInput__M3eBZ","clockButton":"TimeInput-module_clockButton__3qoub","error":"TimeInput-module_error__gJnpk","success":"TimeInput-module_success__np-lF","loading":"TimeInput-module_loading__Wb1DC","disabled":"TimeInput-module_disabled__wxiZ-"};
1632
1713
 
1633
- function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
1714
+ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false, className = "" }) {
1634
1715
  const [showPicker, setShowPicker] = useState(false);
1635
1716
  const formatTime24 = (time) => {
1636
1717
  if (!time)
@@ -1690,6 +1771,8 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
1690
1771
  classes.push(styles$b.loading);
1691
1772
  if (disabled)
1692
1773
  classes.push(styles$b.disabled);
1774
+ if (className)
1775
+ classes.push(className);
1693
1776
  return classes.join(' ');
1694
1777
  };
1695
1778
  return (jsxs(Fragment, { children: [jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { className: styles$b.label, children: [label, required && jsx("span", { className: styles$b.required, children: "*" })] }), jsxs("div", { className: styles$b.inputWrapper, children: [jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$b.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsx("button", { type: "button", onClick: handleClockClick, className: styles$b.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsx(FiClock, { size: 20 }) })] })] }), jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
@@ -4094,7 +4177,7 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
4094
4177
  if (data.length === 0) {
4095
4178
  return (jsxs("div", { className: `${styles.container} ${className}`, children: [title && jsx("h2", { className: styles.title, children: title }), jsxs("div", { className: styles.empty, children: [jsx("span", { className: styles.emptyIcon, children: "\uD83D\uDCCA" }), jsx("p", { children: emptyMessage })] })] }));
4096
4179
  }
4097
- return (jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions || bulkActions) && (jsxs("div", { className: styles.header, children: [title && jsx("h2", { className: styles.title, children: title }), selectedItems.length > 0 && (jsxs("div", { className: styles.bulkActions, children: [actions && (jsx("div", { className: styles.actions, children: actions(selectedItems) })), bulkActions && bulkActions.length > 0 && (jsx("div", { className: styles.bulkActionButtons, children: bulkActions.map((bulkAction, index) => {
4180
+ return (jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions || bulkActions) && (jsxs("div", { className: styles.header, children: [title && jsx("h2", { className: styles.title, children: title }), (actions || bulkActions) && (jsxs("div", { className: styles.bulkActions, children: [actions && selectedItems.length > 0 && (jsx("div", { className: styles.actions, children: actions(selectedItems) })), bulkActions && bulkActions.length > 0 && selectedItems.length > 0 && (jsx("div", { className: styles.bulkActionButtons, children: bulkActions.map((bulkAction, index) => {
4098
4181
  const isDisabled = (bulkAction.disabled && bulkAction.disabled(selectedItems)) ||
4099
4182
  (bulkAction.minSelection && selectedItems.length < bulkAction.minSelection) ||
4100
4183
  (bulkAction.maxSelection && selectedItems.length > bulkAction.maxSelection);