torch-glare 1.3.0 → 1.5.0

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 (18) hide show
  1. package/apps/lib/components/Button.tsx +115 -64
  2. package/apps/lib/components/Drawer.tsx +368 -84
  3. package/apps/lib/components/SectionBlock.tsx +71 -0
  4. package/apps/lib/components/Stepper.tsx +374 -0
  5. package/apps/lib/components/Timeline.tsx +283 -0
  6. package/apps/lib/utils/types.ts +8 -4
  7. package/docs/components/alert-dialog.md +160 -0
  8. package/docs/components/date-picker.md +78 -0
  9. package/docs/components/dialog.md +189 -0
  10. package/docs/components/input-field.md +36 -0
  11. package/docs/components/section-block.md +275 -0
  12. package/docs/components/select.md +24 -0
  13. package/docs/components/simple-select.md +34 -0
  14. package/docs/components/table.md +75 -0
  15. package/docs/components/textarea.md +40 -0
  16. package/docs/components/toggle.md +59 -0
  17. package/docs/how-to/form-and-list-recipes.md +379 -0
  18. package/package.json +1 -1
package/apps/lib/components/Button.tsx CHANGED
@@ -5,15 +5,16 @@ import { cn } from "../utils/cn";
5
5
  import { ButtonVariant, Themes } from "../utils/types";
6
6
 
7
7
  interface Props
8
- extends ButtonHTMLAttributes<HTMLButtonElement>,
9
- VariantProps<typeof buttonVariants> {
8
+ extends
9
+ ButtonHTMLAttributes<HTMLButtonElement>,
10
+ VariantProps<typeof buttonVariants> {
10
11
  is_loading?: boolean;
11
12
  disabled?: boolean;
12
13
  asChild?: boolean;
13
14
  variant?: ButtonVariant;
14
15
  as?: React.ElementType;
15
- theme?: Themes
16
- containerClassName?: string
16
+ theme?: Themes;
17
+ containerClassName?: string;
17
18
  }
18
19
  export const Button = forwardRef<HTMLButtonElement, Props>(
19
20
  (
@@ -32,7 +33,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
32
33
  containerClassName,
33
34
  ...props
34
35
  },
35
- ref
36
+ ref,
36
37
  ) => {
37
38
  const Component = asChild ? Slot : Tag;
38
39
 
@@ -51,34 +52,45 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
51
52
  buttonType,
52
53
  disabled,
53
54
  }),
54
- className
55
+ className,
55
56
  )}
56
57
  >
57
58
  {asChild ? (
58
59
  React.cloneElement(
59
60
  children as React.ReactElement,
60
61
  {},
61
- <div className={cn("px-[3px] flex items-center justify-center gap-[3px] has-[>i]:p-0", containerClassName)}>
62
+ <div
63
+ className={cn(
64
+ "flex items-center justify-center [&>:is(i,svg):first-child]:mr-[3px] [&>:is(i,svg):last-child]:ml-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:pl-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pr-[6px]",
65
+ containerClassName,
66
+ )}
67
+ >
62
68
  {(children as React.ReactElement<any>).props.children}
63
69
  {is_loading && <LoadingIcon size={size} />}
64
- </div>
70
+ </div>,
65
71
  )
66
72
  ) : (
67
- <div className={cn("px-[3px] flex items-center justify-center gap-[3px] has-[>i]:p-0", containerClassName)}>
73
+ <div
74
+ className={cn(
75
+ "flex items-center justify-center [&>:is(i,svg):first-child]:mr-[3px] [&>:is(i,svg):last-child]:ml-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:pl-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pr-[6px]",
76
+ containerClassName,
77
+ )}
78
+ >
68
79
  {children}
69
80
  {is_loading && <LoadingIcon size={size} />}
70
81
  </div>
71
82
  )}
72
83
  </Component>
73
84
  );
74
- }
85
+ },
75
86
  );
76
87
 
77
- Button.displayName = "Button"
88
+ Button.displayName = "Button";
78
89
 
79
-
80
-
81
- export function LoadingIcon({ size, className }: {
90
+ export function LoadingIcon({
91
+ size,
92
+ className,
93
+ }: {
82
94
  size?: "S" | "M" | "L" | "XL" | null;
83
95
  className?: string;
84
96
  }) {
@@ -88,7 +100,7 @@ export function LoadingIcon({ size, className }: {
88
100
  S: "w-[12px] h-[12px]",
89
101
  M: "w-[18px] h-[18px]",
90
102
  L: "w-[20px] h-[20px]",
91
- XL: "w-[20px] h-[20px]"
103
+ XL: "w-[20px] h-[20px]",
92
104
  },
93
105
  },
94
106
  defaultVariants: {
@@ -115,91 +127,130 @@ export function LoadingIcon({ size, className }: {
115
127
  );
116
128
  }
117
129
 
118
-
119
-
120
-
121
130
  export const buttonVariants = cva(
122
131
  "flex items-center whitespace-nowrap justify-center transition-[background,color] duration-200 ease-in-out border border-transparent outline-none leading-none [&-i]:!leading-none",
123
132
  {
124
133
  variants: {
125
134
  variant: {
126
- // fucus styles for medium screens and above
135
+ // Sec variants: base = button-secondary, hover picks up fill color
127
136
  PrimeStyle: [
128
- "bg-background-presentation-action-secondary",
137
+ "bg-background-presentation-button-secondary",
129
138
  "text-content-presentation-action-light-primary",
130
- "hover:bg-background-presentation-action-hover",
131
- "hover:text-content-presentation-action-hover",
132
- "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus", // Focus style only for medium screens and above
133
- "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
139
+ "hover:bg-background-presentation-button-hover",
140
+ "hover:text-content-presentation-global-hover",
141
+ "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus",
142
+ "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
134
143
  ],
135
- BlueSecStyle: [
136
- "bg-background-presentation-action-secondary",
144
+ BluSecStyle: [
145
+ "bg-background-presentation-button-secondary",
137
146
  "text-content-presentation-action-light-primary",
138
- "hover:bg-background-presentation-state-information-primary",
139
- "hover:text-content-presentation-action-hover",
147
+ "hover:bg-background-presentation-button-fill-blue-primary",
148
+ "hover:text-content-presentation-global-hover",
140
149
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
141
- "active:bg-background-presentation-state-information-primary active:text-content-presentation-action-hover",
150
+ "active:bg-background-presentation-button-fill-blue-primary active:text-content-presentation-global-hover",
142
151
  ],
143
152
  YelSecStyle: [
144
- "bg-background-presentation-action-secondary",
153
+ "bg-background-presentation-button-secondary",
145
154
  "text-content-presentation-action-light-primary",
146
- "hover:bg-background-presentation-state-warning-primary",
155
+ "hover:bg-background-presentation-button-fill-yellow-primary",
147
156
  "hover:text-content-presentation-action-light-primary",
148
157
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
149
- "active:bg-background-presentation-state-warning-primary active:text-content-presentation-action-light-primary",
158
+ "active:bg-background-presentation-button-fill-yellow-primary active:text-content-presentation-action-light-primary",
150
159
  ],
151
160
  RedSecStyle: [
152
- "bg-background-presentation-action-secondary",
161
+ "bg-background-presentation-button-secondary",
153
162
  "text-content-presentation-action-light-primary",
154
- "hover:bg-background-presentation-state-negative-primary",
155
- "hover:text-content-presentation-action-hover",
163
+ "hover:bg-background-presentation-button-fill-red-primary",
164
+ "hover:text-content-presentation-global-hover",
156
165
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
157
- "active:bg-background-presentation-state-negative-primary active:text-content-presentation-action-hover",
166
+ "active:bg-background-presentation-button-fill-red-primary active:text-content-presentation-global-hover",
158
167
  ],
159
168
  BorderStyle: [
160
169
  "text-content-presentation-action-light-primary",
161
170
  "border border-border-presentation-action-disabled",
162
- "bg-background-presentation-action-borderstyle",
163
- "hover:bg-background-presentation-action-hover",
164
- "hover:text-content-presentation-action-hover",
171
+ "bg-background-presentation-button-borderstyle",
172
+ "hover:bg-background-presentation-button-hover",
173
+ "hover:text-content-presentation-global-hover",
165
174
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
166
175
  "focus:lg:text-content-presentation-action-light-primary",
167
- "focus:hover:lg:text-content-presentation-action-hover",
168
- "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
176
+ "focus:hover:lg:text-content-presentation-global-hover",
177
+ "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
169
178
  ],
179
+ // Cont variants: transparent base, hover shows button-contstyle-hover
170
180
  PrimeContStyle: [
171
181
  "text-content-presentation-action-light-primary",
172
182
  "border-transparent bg-transparent",
173
- "hover:bg-background-presentation-action-contstyle-hover",
183
+ "hover:bg-background-presentation-button-contstyle-hover",
174
184
  "hover:text-content-presentation-action-light-primary",
175
185
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
176
- "focus:lg:bg-background-presentation-action-borderstyle",
177
- "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-light-primary",
186
+ "focus:lg:bg-background-presentation-button-borderstyle",
187
+ "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-action-light-primary",
178
188
  ],
179
- BlueContStyle: [
189
+ BluContStyle: [
180
190
  "text-content-presentation-action-light-primary",
181
191
  "border-transparent bg-transparent",
182
- "hover:bg-background-presentation-action-contstyle-hover",
183
- "hover:text-content-presentation-action-information-hover",
192
+ "hover:bg-background-presentation-button-contstyle-hover",
193
+ "hover:text-content-presentation-global-information-hover",
184
194
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
185
- "focus:lg:bg-background-presentation-action-borderstyle",
186
- "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-information-hover",
195
+ "focus:lg:bg-background-presentation-button-borderstyle",
196
+ "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-global-information-hover",
187
197
  ],
188
198
  RedContStyle: [
189
199
  "text-content-presentation-action-light-primary",
190
200
  "border-transparent bg-transparent",
191
- "hover:bg-background-presentation-action-contstyle-hover",
192
- "hover:text-content-presentation-action-negative-hover",
201
+ "hover:bg-background-presentation-button-contstyle-hover",
202
+ "hover:text-content-presentation-global-negative-hover",
203
+ "focus:lg:border focus:lg:border-border-presentation-state-focus",
204
+ "focus:lg:bg-background-presentation-button-borderstyle",
205
+ "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-global-negative-hover",
206
+ ],
207
+ // Col variants: filled solid color base, hover deepens to -secondary
208
+ PrimeColStyle: [
209
+ "bg-background-presentation-button-primary",
210
+ "text-content-presentation-global-primary-inverse",
211
+ "hover:bg-background-presentation-button-hover",
212
+ "hover:text-content-presentation-global-primary-inverse",
213
+ "focus:lg:border focus:lg:border-border-presentation-state-focus",
214
+ "active:bg-background-presentation-button-hover active:text-content-presentation-global-primary-inverse",
215
+ ],
216
+ BluColStyle: [
217
+ "bg-background-presentation-button-fill-blue-primary",
218
+ "text-content-presentation-action-dark-primary",
219
+ "hover:bg-background-presentation-button-fill-blue-secondary",
220
+ "hover:text-content-presentation-action-dark-primary",
221
+ "focus:lg:border focus:lg:border-border-presentation-state-focus",
222
+ "active:bg-background-presentation-button-fill-blue-secondary active:text-content-presentation-action-dark-primary",
223
+ ],
224
+ RedColStyle: [
225
+ "bg-background-presentation-button-fill-red-primary",
226
+ "text-content-presentation-action-dark-primary",
227
+ "hover:bg-background-presentation-button-fill-red-secondary",
228
+ "hover:text-content-presentation-action-dark-primary",
229
+ "focus:lg:border focus:lg:border-border-presentation-state-focus",
230
+ "active:bg-background-presentation-button-fill-red-secondary active:text-content-presentation-action-dark-primary",
231
+ ],
232
+ GreenColStyle: [
233
+ "bg-background-presentation-button-fill-green-primary",
234
+ "text-content-presentation-action-dark-primary",
235
+ "hover:bg-background-presentation-button-fill-green-secondary",
236
+ "hover:text-content-presentation-action-dark-primary",
237
+ "focus:lg:border focus:lg:border-border-presentation-state-focus",
238
+ "active:bg-background-presentation-button-fill-green-secondary active:text-content-presentation-action-dark-primary",
239
+ ],
240
+ YelColStyle: [
241
+ "bg-background-presentation-button-fill-yellow-primary",
242
+ "text-content-presentation-global-primary",
243
+ "hover:bg-background-presentation-button-fill-yellow-secondary",
244
+ "hover:text-content-presentation-global-primary",
193
245
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
194
- "focus:lg:bg-background-presentation-action-borderstyle",
195
- "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-negative-hover",
246
+ "active:bg-background-presentation-button-fill-yellow-secondary active:text-content-presentation-global-primary",
196
247
  ],
197
248
  },
198
249
  size: {
199
- S: "h-[22px] px-[6px] typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
200
- M: "h-[28px] px-[14px] typography-body-large-medium rounded-[4px] [&_i]:text-[18px]",
201
- L: "h-[34px] px-[22px] typography-body-large-medium rounded-[6px] [&_i]:text-[20px]",
202
- XL: "h-[40px] px-[30px] typography-headers-medium-medium rounded-[6px] [&_i]:text-[22px]",
250
+ S: "h-[22px] py-[2px] px-[6px] typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
251
+ M: "h-[28px] py-[2px] px-[14px] typography-body-large-medium rounded-[6px] [&_i]:text-[18px]",
252
+ L: "h-[34px] py-[5px] px-[22px] typography-body-large-medium rounded-[8px] [&_i]:text-[20px]",
253
+ XL: "h-[40px] py-[8px] px-[30px] typography-headers-medium-medium rounded-[8px] [&_i]:text-[22px]",
203
254
  },
204
255
  is_loading: {
205
256
  true: "[&_i]:hidden",
@@ -222,12 +273,12 @@ export const buttonVariants = cva(
222
273
  is_loading: true,
223
274
  className: [
224
275
  "cursor-wait",
225
- "bg-background-presentation-action-hover",
226
- "text-content-presentation-action-hover",
227
- "hover:bg-background-presentation-action-hover",
228
- "hover:text-content-presentation-action-hover",
276
+ "bg-background-presentation-button-hover",
277
+ "text-content-presentation-global-hover",
278
+ "hover:bg-background-presentation-button-hover",
279
+ "hover:text-content-presentation-global-hover",
229
280
  "focus:lg:border focus:lg:border-transparent",
230
- "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
281
+ "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
231
282
  ],
232
283
  },
233
284
  {
@@ -235,7 +286,7 @@ export const buttonVariants = cva(
235
286
  className: [
236
287
  "cursor-not-allowed",
237
288
  "pointer-events-none",
238
- "bg-background-presentation-action-disabled",
289
+ "bg-background-presentation-button-disabled",
239
290
  "text-content-presentation-state-disabled",
240
291
  "border-transparent",
241
292
  ],
@@ -261,5 +312,5 @@ export const buttonVariants = cva(
261
312
  className: "w-[40px] h-[40px] p-0 leading-[0]",
262
313
  },
263
314
  ],
264
- }
315
+ },
265
316
  );