torch-glare 1.5.0 → 1.5.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 (5) hide show
  1. package/apps/lib/components/Button.tsx +1 -1
  2. package/apps/lib/components/LinkButton.tsx +21 -13
  3. package/apps/lib/components/SectionBlock.tsx +28 -7
  4. package/apps/lib/layouts/FieldSection.tsx +7 -5
  5. package/package.json +1 -1
package/apps/lib/components/Button.tsx CHANGED
@@ -207,7 +207,7 @@ export const buttonVariants = cva(
207
207
  // Col variants: filled solid color base, hover deepens to -secondary
208
208
  PrimeColStyle: [
209
209
  "bg-background-presentation-button-primary",
210
- "text-content-presentation-global-primary-inverse",
210
+ "text-content-presentation-global-hover",
211
211
  "hover:bg-background-presentation-button-hover",
212
212
  "hover:text-content-presentation-global-primary-inverse",
213
213
  "focus:lg:border focus:lg:border-border-presentation-state-focus",
package/apps/lib/components/LinkButton.tsx CHANGED
@@ -11,8 +11,8 @@ export const linkButtonStyles = cva(
11
11
  "flex items-center justify-center",
12
12
  "rounded-[6px]",
13
13
  "p-[2px]",
14
- "text-content-presentation-action-link",
15
- "hover:bg-background-presentation-action-link-hover hover:px-[2px]",
14
+ "text-content-presentation-global-link",
15
+ "hover:bg-background-presentation-button-link-hover hover:px-[2px]",
16
16
  "transition-all duration-250 ease-in-out",
17
17
  "group", // Add group class here
18
18
  ],
@@ -26,17 +26,23 @@ export const linkButtonStyles = cva(
26
26
  defaultVariants: {
27
27
  size: "S",
28
28
  },
29
- }
29
+ },
30
30
  );
31
31
 
32
32
  interface Props extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
33
33
  size?: "S" | "M"; // this props will change the button style size see on figma design file
34
- theme?: Themes
35
- asChild?: boolean
36
- href?: string
34
+ theme?: Themes;
35
+ asChild?: boolean;
36
+ href?: string;
37
37
  }
38
38
 
39
- export const LinkButton: React.FC<Props> = ({ theme, className, size = "S", asChild, ...props }) => {
39
+ export const LinkButton: React.FC<Props> = ({
40
+ theme,
41
+ className,
42
+ size = "S",
43
+ asChild,
44
+ ...props
45
+ }) => {
40
46
  const Component = asChild ? Slot : props.href ? "a" : "span";
41
47
  return (
42
48
  <Component
@@ -46,25 +52,27 @@ export const LinkButton: React.FC<Props> = ({ theme, className, size = "S", asCh
46
52
  linkButtonStyles({
47
53
  size: size,
48
54
  }),
49
- className
55
+ className,
50
56
  )}
51
57
  >
52
- <div className="px-[3px] whitespace-nowrap break-keep">{props.children}</div>
58
+ <div className="px-[3px] whitespace-nowrap break-keep">
59
+ {props.children}
60
+ </div>
53
61
  <div
54
62
  className={cn(
55
- "rounded-[4px]",
63
+ "rounded-[4px] overflow-hidden",
56
64
  "bg-background-presentation-state-information-primary",
57
65
  "transition-all duration-[100] ease-in-out",
58
- "h-0 w-0 p-0",
66
+ "h-0 w-0 p-0",
59
67
  "opacity-0 group-hover:opacity-100 group-hover:p-[3px]",
60
68
  {
61
69
  "group-hover:w-[20px] group-hover:h-[20px]": size === "S",
62
70
  "group-hover:w-[22px] group-hover:h-[22px]": size === "M",
63
- }
71
+ },
64
72
  )}
65
73
  >
66
74
  <Arrow
67
- className={cn("rtl:rotate-[260deg]", {
75
+ className={cn("w-0 h-0 rtl:rotate-[260deg]", {
68
76
  "group-hover:w-[14px] group-hover:h-[14px]": size === "S",
69
77
  "group-hover:w-[16px] group-hover:h-[16px]": size === "M",
70
78
  })}
package/apps/lib/components/SectionBlock.tsx CHANGED
@@ -21,11 +21,17 @@ const titleBadge = cva(
21
21
  },
22
22
  );
23
23
 
24
- export type SectionColor = NonNullable<VariantProps<typeof titleBadge>["color"]>;
24
+ export type SectionColor = NonNullable<
25
+ VariantProps<typeof titleBadge>["color"]
26
+ >;
25
27
 
26
- export interface SectionBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
28
+ export interface SectionBlockProps extends Omit<
29
+ HTMLAttributes<HTMLDivElement>,
30
+ "title"
31
+ > {
27
32
  color?: SectionColor;
28
33
  title?: ReactNode;
34
+ icon?: ReactNode;
29
35
  containerClassName?: string;
30
36
  headerClassName?: string;
31
37
  bodyClassName?: string;
@@ -41,6 +47,7 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
41
47
  containerClassName,
42
48
  headerClassName,
43
49
  bodyClassName,
50
+ icon,
44
51
  ...props
45
52
  },
46
53
  ref,
@@ -49,19 +56,33 @@ export const SectionBlock = forwardRef<HTMLDivElement, SectionBlockProps>(
49
56
  <div
50
57
  ref={ref}
51
58
  className={cn(
52
- "flex w-[1100px] pt-[6px] pb-[24px] px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
59
+ "flex w-full pt-[6px] pb-[24px] px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
53
60
  className,
54
61
  containerClassName,
55
62
  )}
56
63
  {...props}
57
64
  >
58
65
  {title && (
59
- <div className={cn("flex px-[6px] flex-col gap-[10px]", headerClassName)}>
60
- <div className={cn(titleBadge({ color }))}>{title}</div>
66
+ <div
67
+ className={cn("flex px-[6px] flex-col gap-[10px]", headerClassName)}
68
+ >
69
+ <div className={cn(titleBadge({ color }))}>
70
+ <span className="flex items-center gap-1.5">
71
+ {icon}
72
+ {title}
73
+ </span>
74
+ </div>
61
75
  </div>
62
76
  )}
63
- <div className={cn("flex px-[42px] flex-col gap-[2px]", bodyClassName)}>
64
- {children}
77
+ <div
78
+ className={cn(
79
+ "flex px-[42px] flex-col gap-[2px] px-[42px]",
80
+ bodyClassName,
81
+ )}
82
+ >
83
+ <div className="flex w-full divide-y divide-gray-300 min-w-[300px] flex-col items-start ">
84
+ {children}
85
+ </div>
65
86
  </div>
66
87
  </div>
67
88
  );
package/apps/lib/layouts/FieldSection.tsx CHANGED
@@ -32,12 +32,12 @@ export function FieldSection({
32
32
  {...props}
33
33
  data-theme={theme}
34
34
  className={cn(
35
- "grid border-t border-border-presentation-global-primary py-[16px] px-[12px] w-full max-w-[1200px] min-w-[0px] ",
35
+ "grid py-[16px] px-[12px] w-full max-w-[1200px] min-w-[0px] ",
36
36
  direction === "vertical" && "grid-rows-[auto_1fr] gap-[12px]",
37
37
  direction === "horizontal" && "grid-cols-[350px_1fr] gap-[24px]",
38
38
  direction === "flexible" &&
39
- "grid-rows-[auto_1fr] gap-[12px] lg:grid-cols-[350px_1fr] lg:grid-rows-[1fr] lg:gap-[24px]",
40
- className
39
+ "grid-rows-[auto_1fr] gap-[12px] lg:grid-cols-[350px_1fr] lg:grid-rows-[1fr] lg:gap-[24px]",
40
+ className,
41
41
  )}
42
42
  >
43
43
  {/* Fixed width section for labels */}
@@ -58,7 +58,9 @@ export function FieldSection({
58
58
  </div>
59
59
 
60
60
  {/* Flexible section that takes up the remaining space */}
61
- <div className="grid grid-cols-1 place-items-end gap-[12px]">{children}</div>
61
+ <div className="grid grid-cols-1 place-items-end gap-[12px]">
62
+ {children}
63
+ </div>
62
64
  </section>
63
65
  );
64
- }
66
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "torch-glare",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "files": [