@stfrigerio/sito-template 0.1.26 → 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 (13) hide show
  1. package/dist/components/atoms/NumberStepper/NumberStepper.d.ts +65 -0
  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 +83 -9
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +83 -9
  12. package/dist/index.js.map +1 -1
  13. package/package.json +1 -1
package/dist/components/atoms/NumberStepper/NumberStepper.d.ts CHANGED
@@ -83,6 +83,71 @@ export interface NumberStepperProps {
83
83
  * icon="📦"
84
84
  * />
85
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
+ *
86
151
  * @param {NumberStepperProps} props - The props for the NumberStepper component
87
152
  * @returns {JSX.Element} The rendered NumberStepper component
88
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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgOtD,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 = () => {
@@ -822,6 +824,71 @@ 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
  */
@@ -919,13 +986,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
919
986
  const [isButtonHovered, setIsButtonHovered] = useState(null);
920
987
  const isDecrementDisabled = disabled || value <= min;
921
988
  const isIncrementDisabled = disabled || value >= max;
922
- 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 })] })), jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(motion.button, { className: styles$i.button, style: {
923
- ...customStyles.button,
924
- ...(isButtonHovered === 'decrement' && customStyles.buttonHover)
925
- }, 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: {
926
- ...customStyles.button,
927
- ...(isButtonHovered === 'increment' && customStyles.buttonHover)
928
- }, 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" }) }))) })] }), !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}` })] }))] }));
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}` })] }))] }));
929
1001
  };
930
1002
 
931
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"};
@@ -1639,7 +1711,7 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
1639
1711
 
1640
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-"};
1641
1713
 
1642
- 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 = "" }) {
1643
1715
  const [showPicker, setShowPicker] = useState(false);
1644
1716
  const formatTime24 = (time) => {
1645
1717
  if (!time)
@@ -1699,6 +1771,8 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
1699
1771
  classes.push(styles$b.loading);
1700
1772
  if (disabled)
1701
1773
  classes.push(styles$b.disabled);
1774
+ if (className)
1775
+ classes.push(className);
1702
1776
  return classes.join(' ');
1703
1777
  };
1704
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 })] }));