@still-forest/canopy 0.56.1 → 0.57.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 (11) hide show
  1. package/README.md +26 -5
  2. package/dist/index.css +1 -0
  3. package/dist/index.d.ts +51 -71
  4. package/dist/index.js +20851 -21101
  5. package/dist/styles/base.css +4 -0
  6. package/dist/styles/color.css +421 -0
  7. package/dist/styles/dimensions.css +14 -0
  8. package/dist/styles/index.css +29 -0
  9. package/dist/styles/theme.css +166 -0
  10. package/dist/styles/typography.css +112 -0
  11. package/package.json +11 -2
package/README.md CHANGED
@@ -29,12 +29,11 @@ _React components, built with Tailwind CSS, Shadcn, and VisX_
29
29
 
30
30
  ### Installation
31
31
 
32
- When using Vite, Canopy must be included in your primary `.css` file in order to ensure the necessary CSS classes are included in the build. For more details, read the Tailwind CSS documentation on [explicitly registering sources](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources).
33
-
34
- Example `index.css`:
32
+ Canopy provides foundational styles (colors, theme, typography, dimensions) as importable CSS. Import the styles in your primary `.css` file:
35
33
 
36
34
  ```css
37
35
  @import "tailwindcss";
36
+ @import "@still-forest/canopy/styles";
38
37
  @source "../node_modules/@still-forest/canopy/dist";
39
38
 
40
39
  @layer base {
@@ -42,6 +41,28 @@ Example `index.css`:
42
41
  }
43
42
  ```
44
43
 
44
+ The `@import` provides Canopy's design tokens, theme variables, and utility classes. The `@source` directive ensures Tailwind detects classes used by Canopy components ([docs](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources)).
45
+
46
+ You can also import individual style modules:
47
+
48
+ ```css
49
+ @import "@still-forest/canopy/styles/theme.css";
50
+ @import "@still-forest/canopy/styles/typography.css";
51
+ ```
52
+
53
+ ### Customization
54
+
55
+ Override any Canopy design tokens by redefining CSS variables after the import:
56
+
57
+ ```css
58
+ @import "@still-forest/canopy/styles";
59
+
60
+ :root {
61
+ --font-brand: "My Custom Font", serif;
62
+ --color-brand: #4a90d9;
63
+ }
64
+ ```
65
+
45
66
  ## Testing locally
46
67
 
47
68
  ### Using pnpm link
@@ -49,7 +70,7 @@ Example `index.css`:
49
70
  1. In this package, run build in watch mode:
50
71
 
51
72
  ```bash
52
- pnpm build --watch
73
+ pnpm build:watch
53
74
  ```
54
75
 
55
76
  Then expose it locally for linking:
@@ -76,7 +97,7 @@ pnpm store prune # clear pnpm's global store
76
97
  1. In this package, run build in watch mode:
77
98
 
78
99
  ```bash
79
- pnpm build --watch
100
+ pnpm build:watch
80
101
  ```
81
102
 
82
103
  2. In the consuming package, point package.json to the locally built version:
package/dist/index.css ADDED
@@ -0,0 +1 @@
1
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-border-style:solid}}}@layer components{.btn{cursor:pointer;border-radius:calc(var(--radius) - 2px);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);white-space:nowrap;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-outline-style:none;height:calc(var(--spacing,.25rem) * 9);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);border-style:var(--tw-border-style);border-width:1px;outline-style:none;flex-shrink:0;display:inline-flex}.btn[data-submitting=true] .btn-icon{animation:var(--animate-spin,spin 1s linear infinite)}.btn:disabled{pointer-events:none;opacity:.5}.btn:focus-visible{border-color:var(--color-ring,var(--ring));--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-ring,var(--ring))}@supports (color:color-mix(in lab,red,red)){.btn:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-ring,var(--ring)) 50%, transparent)}}.btn[aria-invalid=true]{border-color:var(--color-danger,var(--danger));--tw-ring-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.btn[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--color-danger,var(--danger)) 20%, transparent)}}.btn[aria-invalid=true]:is(.dark *){--tw-ring-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.btn[aria-invalid=true]:is(.dark *){--tw-ring-color:color-mix(in oklab, var(--color-danger,var(--danger)) 40%, transparent)}}.btn:has(svg){padding-inline:calc(var(--spacing,.25rem) * 3)}.btn>svg{pointer-events:none;flex-shrink:0}.btn>svg:not([class*=size-]){width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.btn.btn--icon{width:calc(var(--spacing,.25rem) * 9);height:calc(var(--spacing,.25rem) * 9);padding:calc(var(--spacing,.25rem) * 2)!important}.btn.btn--xs{height:calc(var(--spacing,.25rem) * 6);gap:calc(var(--spacing,.25rem) * 1);padding-inline:calc(var(--spacing,.25rem) * 2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.btn.btn--xs.btn--icon{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6);padding:calc(var(--spacing,.25rem) * 1)!important}.btn.btn--xs:has(svg){padding-inline:calc(var(--spacing,.25rem) * 1.5)}.btn.btn--sm{height:calc(var(--spacing,.25rem) * 8);gap:calc(var(--spacing,.25rem) * 1.5);padding-inline:calc(var(--spacing,.25rem) * 3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.btn.btn--sm.btn--icon{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8);padding:calc(var(--spacing,.25rem) * 2)!important}.btn.btn--sm:has(svg){padding-inline:calc(var(--spacing,.25rem) * 2.5)}.btn.btn--lg{height:calc(var(--spacing,.25rem) * 10);gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 6);font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))}.btn.btn--lg.btn--icon{width:calc(var(--spacing,.25rem) * 10);height:calc(var(--spacing,.25rem) * 10);padding:calc(var(--spacing,.25rem) * 2)!important}.btn.btn--lg:has(svg){padding-inline:calc(var(--spacing,.25rem) * 4)}.btn.btn--xl{height:calc(var(--spacing,.25rem) * 12);gap:calc(var(--spacing,.25rem) * 2);padding-inline:calc(var(--spacing,.25rem) * 8);font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))}.btn.btn--xl.btn--icon{width:calc(var(--spacing,.25rem) * 12);height:calc(var(--spacing,.25rem) * 12);padding:calc(var(--spacing,.25rem) * 3)!important}.btn.btn--xl:has(svg){padding-inline:calc(var(--spacing,.25rem) * 6)}.btn.btn--outline{border-style:var(--tw-border-style);background-color:var(--color-background,var(--background));border-width:1px}.btn.btn--outline:is(.dark *){border-color:var(--color-input,var(--input));background-color:var(--color-input,var(--input))}@supports (color:color-mix(in lab,red,red)){.btn.btn--outline:is(.dark *){background-color:color-mix(in oklab,var(--color-input,var(--input)) 30%,transparent)}}.btn.btn--outline:hover,.btn.btn--outline[aria-pressed=true]{background-color:var(--color-accent,var(--accent));color:var(--color-accent-foreground,var(--accent-foreground))}:is(.btn.btn--outline:hover,.btn.btn--outline[aria-pressed=true]):is(.dark *){background-color:var(--color-accent,var(--accent))}@supports (color:color-mix(in lab,red,red)){:is(.btn.btn--outline:hover,.btn.btn--outline[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-accent,var(--accent)) 50%,transparent)}}.btn.btn--knockout{border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-foreground,var(--foreground));background-color:var(--color-background,var(--background));color:var(--color-foreground,var(--foreground))}.btn.btn--knockout:hover,.btn.btn--knockout[aria-pressed=true]{background-color:var(--color-foreground,var(--foreground));color:var(--color-background,var(--background))}.btn.btn--rounded{border-radius:3.40282e38px}.btn.btn--fit{width:fit-content}.btn-primary{border-color:var(--color-primary,var(--primary));background-color:var(--color-primary,var(--primary));color:var(--color-primary-foreground,var(--primary-foreground))}.btn-primary:hover,.btn-primary[aria-pressed=true]{background-color:var(--color-primary,var(--primary))}@supports (color:color-mix(in lab,red,red)){.btn-primary:hover,.btn-primary[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-primary,var(--primary)) 90%,transparent)}}.btn-primary.btn--outline{border-color:var(--color-primary,var(--primary))}@supports (color:color-mix(in lab,red,red)){.btn-primary.btn--outline{border-color:color-mix(in oklab,var(--color-primary,var(--primary)) 30%,transparent)}}.btn-primary.btn--outline{background-color:var(--color-background,var(--background));color:var(--color-primary,var(--primary))}.btn-primary.btn--outline:hover,.btn-primary.btn--outline[aria-pressed=true]{background-color:var(--color-primary,var(--primary))}@supports (color:color-mix(in lab,red,red)){.btn-primary.btn--outline:hover,.btn-primary.btn--outline[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-primary,var(--primary)) 10%,transparent)}}:is(.btn-primary.btn--outline:hover,.btn-primary.btn--outline[aria-pressed=true]):is(.dark *){background-color:var(--color-primary,var(--primary))}@supports (color:color-mix(in lab,red,red)){:is(.btn-primary.btn--outline:hover,.btn-primary.btn--outline[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-primary,var(--primary)) 20%,transparent)}}.btn-primary.btn--knockout:hover,.btn-primary.btn--knockout[aria-pressed=true]{background-color:var(--color-primary,var(--primary));color:var(--color-background,var(--background))}.btn-secondary{border-color:var(--color-secondary,var(--secondary));background-color:var(--color-secondary,var(--secondary));color:var(--color-secondary-foreground,var(--secondary-foreground))}.btn-secondary:hover,.btn-secondary[aria-pressed=true]{background-color:var(--color-secondary,var(--secondary))}@supports (color:color-mix(in lab,red,red)){.btn-secondary:hover,.btn-secondary[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-secondary,var(--secondary)) 80%,transparent)}}.btn-secondary.btn--outline{border-color:var(--color-secondary-foreground,var(--secondary-foreground))}@supports (color:color-mix(in lab,red,red)){.btn-secondary.btn--outline{border-color:color-mix(in oklab,var(--color-secondary-foreground,var(--secondary-foreground)) 20%,transparent)}}.btn-secondary.btn--outline{background-color:var(--color-background,var(--background));color:var(--color-secondary-foreground,var(--secondary-foreground))}@supports (color:color-mix(in lab,red,red)){.btn-secondary.btn--outline{color:color-mix(in oklab,var(--color-secondary-foreground,var(--secondary-foreground)) 80%,transparent)}}.btn-secondary.btn--outline:hover,.btn-secondary.btn--outline[aria-pressed=true]{background-color:var(--color-secondary,var(--secondary))}@supports (color:color-mix(in lab,red,red)){.btn-secondary.btn--outline:hover,.btn-secondary.btn--outline[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-secondary,var(--secondary)) 10%,transparent)}}:is(.btn-secondary.btn--outline:hover,.btn-secondary.btn--outline[aria-pressed=true]):is(.dark *){background-color:var(--color-secondary,var(--secondary))}@supports (color:color-mix(in lab,red,red)){:is(.btn-secondary.btn--outline:hover,.btn-secondary.btn--outline[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-secondary,var(--secondary)) 20%,transparent)}}.btn-muted{border-color:var(--color-muted,var(--muted));background-color:var(--color-muted,var(--muted));color:var(--color-muted-foreground,var(--muted-foreground))}.btn-muted:focus-visible{--tw-ring-color:var(--color-muted,var(--muted))}@supports (color:color-mix(in lab,red,red)){.btn-muted:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-muted,var(--muted)) 20%, transparent)}}.btn-muted:is(.dark *){background-color:var(--color-muted,var(--muted))}@supports (color:color-mix(in lab,red,red)){.btn-muted:is(.dark *){background-color:color-mix(in oklab,var(--color-muted,var(--muted)) 60%,transparent)}}.btn-muted:is(.dark *):focus-visible{--tw-ring-color:var(--color-muted,var(--muted))}@supports (color:color-mix(in lab,red,red)){.btn-muted:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-muted,var(--muted)) 40%, transparent)}}.btn-muted:hover,.btn-muted[aria-pressed=true]{background-color:var(--color-muted,var(--muted))}@supports (color:color-mix(in lab,red,red)){.btn-muted:hover,.btn-muted[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-muted,var(--muted)) 90%,transparent)}}:is(.btn-muted:hover,.btn-muted[aria-pressed=true]):is(.dark *){background-color:var(--color-muted,var(--muted))}@supports (color:color-mix(in lab,red,red)){:is(.btn-muted:hover,.btn-muted[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-muted,var(--muted)) 50%,transparent)}}.btn-muted.btn--outline{border-color:var(--color-muted-foreground,var(--muted-foreground))}@supports (color:color-mix(in lab,red,red)){.btn-muted.btn--outline{border-color:color-mix(in oklab,var(--color-muted-foreground,var(--muted-foreground)) 30%,transparent)}}.btn-muted.btn--outline{background-color:var(--color-background,var(--background));color:var(--color-muted-foreground,var(--muted-foreground))}.btn-muted.btn--outline:hover,.btn-muted.btn--outline[aria-pressed=true]{background-color:var(--color-muted,var(--muted))}@supports (color:color-mix(in lab,red,red)){.btn-muted.btn--outline:hover,.btn-muted.btn--outline[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-muted,var(--muted)) 10%,transparent)}}:is(.btn-muted.btn--outline:hover,.btn-muted.btn--outline[aria-pressed=true]):is(.dark *){background-color:var(--color-muted,var(--muted))}@supports (color:color-mix(in lab,red,red)){:is(.btn-muted.btn--outline:hover,.btn-muted.btn--outline[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-muted,var(--muted)) 20%,transparent)}}.btn-ghost{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#0000}.btn-ghost:hover,.btn-ghost[aria-pressed=true]{background-color:var(--color-accent,var(--accent));color:var(--color-accent-foreground,var(--accent-foreground))}:is(.btn-ghost:hover,.btn-ghost[aria-pressed=true]):is(.dark *){background-color:var(--color-accent,var(--accent))}@supports (color:color-mix(in lab,red,red)){:is(.btn-ghost:hover,.btn-ghost[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-accent,var(--accent)) 50%,transparent)}}.btn-info{border-color:var(--color-info,var(--info));background-color:var(--color-info,var(--info));color:var(--color-info-foreground,var(--info-foreground))}.btn-info:is(.dark *){background-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){.btn-info:is(.dark *){background-color:color-mix(in oklab,var(--color-info,var(--info)) 60%,transparent)}}.btn-info:hover,.btn-info[aria-pressed=true]{background-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){.btn-info:hover,.btn-info[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-info,var(--info)) 90%,transparent)}}:is(.btn-info:hover,.btn-info[aria-pressed=true]):is(.dark *){background-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){:is(.btn-info:hover,.btn-info[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-info,var(--info)) 50%,transparent)}}.btn-info:focus-visible{--tw-ring-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){.btn-info:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-info,var(--info)) 20%, transparent)}}.btn-info:focus-visible:is(.dark *){--tw-ring-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){.btn-info:focus-visible:is(.dark *){--tw-ring-color:color-mix(in oklab, var(--color-info,var(--info)) 40%, transparent)}}.btn-info.btn--outline{border-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){.btn-info.btn--outline{border-color:color-mix(in oklab,var(--color-info,var(--info)) 80%,transparent)}}.btn-info.btn--outline{background-color:var(--color-background,var(--background));color:var(--color-info,var(--info))}.btn-info.btn--outline:hover,.btn-info.btn--outline[aria-pressed=true]{background-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){.btn-info.btn--outline:hover,.btn-info.btn--outline[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-info,var(--info)) 10%,transparent)}}.btn-info.btn--outline:hover,.btn-info.btn--outline[aria-pressed=true]{color:var(--color-info,var(--info))}:is(.btn-info.btn--outline:hover,.btn-info.btn--outline[aria-pressed=true]):is(.dark *){background-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){:is(.btn-info.btn--outline:hover,.btn-info.btn--outline[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-info,var(--info)) 20%,transparent)}}.btn-success{border-color:var(--color-success,var(--success));background-color:var(--color-success,var(--success));color:var(--color-success-foreground,var(--success-foreground))}.btn-success:is(.dark *){background-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){.btn-success:is(.dark *){background-color:color-mix(in oklab,var(--color-success,var(--success)) 60%,transparent)}}.btn-success:hover,.btn-success[aria-pressed=true]{background-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){.btn-success:hover,.btn-success[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-success,var(--success)) 90%,transparent)}}:is(.btn-success:hover,.btn-success[aria-pressed=true]):is(.dark *){background-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){:is(.btn-success:hover,.btn-success[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-success,var(--success)) 50%,transparent)}}.btn-success:focus-visible{--tw-ring-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){.btn-success:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-success,var(--success)) 20%, transparent)}}.btn-success:focus-visible:is(.dark *){--tw-ring-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){.btn-success:focus-visible:is(.dark *){--tw-ring-color:color-mix(in oklab, var(--color-success,var(--success)) 40%, transparent)}}.btn-success.btn--outline{border-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){.btn-success.btn--outline{border-color:color-mix(in oklab,var(--color-success,var(--success)) 80%,transparent)}}.btn-success.btn--outline{background-color:var(--color-background,var(--background));color:var(--color-success,var(--success))}.btn-success.btn--outline:hover,.btn-success.btn--outline[aria-pressed=true]{background-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){.btn-success.btn--outline:hover,.btn-success.btn--outline[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-success,var(--success)) 10%,transparent)}}.btn-success.btn--outline:hover,.btn-success.btn--outline[aria-pressed=true]{color:var(--color-success,var(--success))}:is(.btn-success.btn--outline:hover,.btn-success.btn--outline[aria-pressed=true]):is(.dark *){background-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){:is(.btn-success.btn--outline:hover,.btn-success.btn--outline[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-success,var(--success)) 20%,transparent)}}.btn-warning{border-color:var(--color-warning,var(--warning));background-color:var(--color-warning,var(--warning));color:var(--color-warning-foreground,var(--warning-foreground))}.btn-warning:is(.dark *){background-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){.btn-warning:is(.dark *){background-color:color-mix(in oklab,var(--color-warning,var(--warning)) 60%,transparent)}}.btn-warning:hover,.btn-warning[aria-pressed=true]{background-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){.btn-warning:hover,.btn-warning[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-warning,var(--warning)) 90%,transparent)}}:is(.btn-warning:hover,.btn-warning[aria-pressed=true]):is(.dark *){background-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){:is(.btn-warning:hover,.btn-warning[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-warning,var(--warning)) 50%,transparent)}}.btn-warning:focus-visible{--tw-ring-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){.btn-warning:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-warning,var(--warning)) 20%, transparent)}}.btn-warning:focus-visible:is(.dark *){--tw-ring-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){.btn-warning:focus-visible:is(.dark *){--tw-ring-color:color-mix(in oklab, var(--color-warning,var(--warning)) 40%, transparent)}}.btn-warning.btn--outline{border-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){.btn-warning.btn--outline{border-color:color-mix(in oklab,var(--color-warning,var(--warning)) 80%,transparent)}}.btn-warning.btn--outline{background-color:var(--color-background,var(--background));color:var(--color-warning,var(--warning))}.btn-warning.btn--outline:hover,.btn-warning.btn--outline[aria-pressed=true]{background-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){.btn-warning.btn--outline:hover,.btn-warning.btn--outline[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-warning,var(--warning)) 10%,transparent)}}.btn-warning.btn--outline:hover,.btn-warning.btn--outline[aria-pressed=true]{color:var(--color-warning,var(--warning))}:is(.btn-warning.btn--outline:hover,.btn-warning.btn--outline[aria-pressed=true]):is(.dark *){background-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){:is(.btn-warning.btn--outline:hover,.btn-warning.btn--outline[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-warning,var(--warning)) 20%,transparent)}}.btn-danger{border-color:var(--color-danger,var(--danger));background-color:var(--color-danger,var(--danger));color:var(--color-danger-foreground,var(--danger-foreground))}.btn-danger:is(.dark *){background-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.btn-danger:is(.dark *){background-color:color-mix(in oklab,var(--color-danger,var(--danger)) 60%,transparent)}}.btn-danger:hover,.btn-danger[aria-pressed=true]{background-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.btn-danger:hover,.btn-danger[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-danger,var(--danger)) 90%,transparent)}}:is(.btn-danger:hover,.btn-danger[aria-pressed=true]):is(.dark *){background-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){:is(.btn-danger:hover,.btn-danger[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-danger,var(--danger)) 50%,transparent)}}.btn-danger:focus-visible{--tw-ring-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.btn-danger:focus-visible{--tw-ring-color:color-mix(in oklab, var(--color-danger,var(--danger)) 20%, transparent)}}.btn-danger:focus-visible:is(.dark *){--tw-ring-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.btn-danger:focus-visible:is(.dark *){--tw-ring-color:color-mix(in oklab, var(--color-danger,var(--danger)) 40%, transparent)}}.btn-danger.btn--outline{border-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.btn-danger.btn--outline{border-color:color-mix(in oklab,var(--color-danger,var(--danger)) 80%,transparent)}}.btn-danger.btn--outline{background-color:var(--color-background,var(--background));color:var(--color-danger,var(--danger))}.btn-danger.btn--outline:hover,.btn-danger.btn--outline[aria-pressed=true]{background-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.btn-danger.btn--outline:hover,.btn-danger.btn--outline[aria-pressed=true]{background-color:color-mix(in oklab,var(--color-danger,var(--danger)) 10%,transparent)}}.btn-danger.btn--outline:hover,.btn-danger.btn--outline[aria-pressed=true]{color:var(--color-danger,var(--danger))}:is(.btn-danger.btn--outline:hover,.btn-danger.btn--outline[aria-pressed=true]):is(.dark *){background-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){:is(.btn-danger.btn--outline:hover,.btn-danger.btn--outline[aria-pressed=true]):is(.dark *){background-color:color-mix(in oklab,var(--color-danger,var(--danger)) 20%,transparent)}}.btn-link{color:var(--color-foreground,var(--foreground));--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#0000}.btn-link:hover,.btn-link[aria-pressed=true]{text-underline-offset:4px;text-decoration-line:underline;text-decoration-thickness:2px}.btn-link.btn--outline:hover,.btn-link.btn--outline[aria-pressed=true]{background-color:#0000}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@keyframes spin{to{transform:rotate(360deg)}}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{.button-group{align-items:stretch;width:fit-content;display:inline-flex}.button-group>:focus-visible,.button-group>:is(.dropdown-menu,.popover,.select)>button:focus-visible{z-index:10;position:relative}.button-group>hr[role=separator]{margin:calc(var(--spacing,.25rem) * 0);height:auto;width:calc(var(--spacing,.25rem) * 0);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-input,var(--input));flex-shrink:0;align-self:stretch}.button-group:not([data-orientation=vertical])>:not(:first-of-type),.button-group:not([data-orientation=vertical])>:is(.dropdown-menu,.popover,.select):not(:first-of-type)>button{border-left-style:var(--tw-border-style);border-left-width:0;border-top-left-radius:0;border-bottom-left-radius:0}.button-group:not([data-orientation=vertical])>:not(:last-of-type),.button-group:not([data-orientation=vertical])>:is(.dropdown-menu,.popover,.select):not(:last-of-type)>button{border-top-right-radius:0;border-bottom-right-radius:0}.button-group[data-orientation=vertical]{flex-direction:column}.button-group[data-orientation=vertical]>hr[role=separator]{width:auto;height:1px}.button-group[data-orientation=vertical]>:not(:first-child),.button-group[data-orientation=vertical]>:is(.dropdown-menu,.popover,.select):not(:first-child)>button{border-top-style:var(--tw-border-style);border-top-width:0;border-top-left-radius:0;border-top-right-radius:0}.button-group[data-orientation=vertical]>:not(:last-child),.button-group[data-orientation=vertical]>:is(.dropdown-menu,.popover,.select):not(:last-child)>button{border-bottom-right-radius:0;border-bottom-left-radius:0}}@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{.badge{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 1);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);cursor:default;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;border-style:var(--tw-border-style);background-color:var(--color-primary,var(--primary));width:fit-content;height:fit-content;color:var(--color-primary-foreground,var(--primary-foreground));border-width:1px;border-color:var(--color-primary,var(--primary));font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));padding-inline:calc(var(--spacing,.25rem) * 2.5);padding-block:calc(var(--spacing,.25rem) * .5);border-radius:3.40282e38px;display:inline-flex;overflow:hidden}.badge.badge-primary{background-color:var(--color-primary,var(--primary));color:var(--color-primary-foreground,var(--primary-foreground));border-color:var(--color-primary,var(--primary))}.badge.badge-primary.badge--outline{border-color:var(--color-primary,var(--primary))}@supports (color:color-mix(in lab,red,red)){.badge.badge-primary.badge--outline{border-color:color-mix(in oklab,var(--color-primary,var(--primary)) 50%,transparent)}}.badge.badge-primary.badge--outline{background-color:var(--color-background,var(--background));color:var(--color-primary,var(--primary))}.badge.badge-secondary{background-color:var(--color-secondary,var(--secondary));color:var(--color-secondary-foreground,var(--secondary-foreground));border-color:var(--color-secondary,var(--secondary))}.badge.badge-secondary.badge--outline{border-color:var(--color-secondary-foreground,var(--secondary-foreground))}@supports (color:color-mix(in lab,red,red)){.badge.badge-secondary.badge--outline{border-color:color-mix(in oklab,var(--color-secondary-foreground,var(--secondary-foreground)) 20%,transparent)}}.badge.badge-secondary.badge--outline{background-color:var(--color-background,var(--background));color:var(--color-secondary-foreground,var(--secondary-foreground))}@supports (color:color-mix(in lab,red,red)){.badge.badge-secondary.badge--outline{color:color-mix(in oklab,var(--color-secondary-foreground,var(--secondary-foreground)) 80%,transparent)}}.badge.badge-muted{background-color:var(--color-muted,var(--muted));color:var(--color-muted-foreground,var(--muted-foreground));border-color:var(--color-muted,var(--muted))}.badge.badge-muted.badge--outline{border-color:var(--color-muted-foreground,var(--muted-foreground))}@supports (color:color-mix(in lab,red,red)){.badge.badge-muted.badge--outline{border-color:color-mix(in oklab,var(--color-muted-foreground,var(--muted-foreground)) 50%,transparent)}}.badge.badge-muted.badge--outline{background-color:var(--color-background,var(--background));color:var(--color-muted-foreground,var(--muted-foreground))}.badge.badge-info{background-color:var(--color-info,var(--info));color:var(--color-info-foreground,var(--info-foreground));border-color:var(--color-info,var(--info))}.badge.badge-info.badge--outline{border-color:var(--color-info,var(--info))}@supports (color:color-mix(in lab,red,red)){.badge.badge-info.badge--outline{border-color:color-mix(in oklab,var(--color-info,var(--info)) 50%,transparent)}}.badge.badge-info.badge--outline{background-color:var(--color-background,var(--background));color:var(--color-info,var(--info))}.badge.badge-success{background-color:var(--color-success,var(--success));color:var(--color-success-foreground,var(--success-foreground));border-color:var(--color-success,var(--success))}.badge.badge-success.badge--outline{border-color:var(--color-success,var(--success))}@supports (color:color-mix(in lab,red,red)){.badge.badge-success.badge--outline{border-color:color-mix(in oklab,var(--color-success,var(--success)) 50%,transparent)}}.badge.badge-success.badge--outline{background-color:var(--color-background,var(--background));color:var(--color-success,var(--success))}.badge.badge-danger{background-color:var(--color-danger,var(--danger));color:var(--color-danger-foreground,var(--danger-foreground));border-color:var(--color-danger,var(--danger))}.badge.badge-danger.badge--outline{border-color:var(--color-danger,var(--danger))}@supports (color:color-mix(in lab,red,red)){.badge.badge-danger.badge--outline{border-color:color-mix(in oklab,var(--color-danger,var(--danger)) 50%,transparent)}}.badge.badge-danger.badge--outline{background-color:var(--color-background,var(--background));color:var(--color-danger,var(--danger))}.badge.badge-warning{background-color:var(--color-warning,var(--warning));color:var(--color-warning-foreground,var(--warning-foreground));border-color:var(--color-warning,var(--warning))}.badge.badge-warning.badge--outline{border-color:var(--color-warning,var(--warning))}@supports (color:color-mix(in lab,red,red)){.badge.badge-warning.badge--outline{border-color:color-mix(in oklab,var(--color-warning,var(--warning)) 50%,transparent)}}.badge.badge-warning.badge--outline{background-color:var(--color-background,var(--background));color:var(--color-warning,var(--warning))}.badge.badge-ghost{background-color:var(--color-background,var(--background));color:var(--color-foreground,var(--foreground));border-color:var(--color-border,var(--border))}.badge.badge-ghost.badge--outline{background-color:var(--color-background,var(--background));color:var(--color-foreground,var(--foreground))}.badge.badge--outline{border-color:var(--color-border,var(--border));background-color:var(--color-background,var(--background));color:var(--color-primary,var(--primary))}.badge.badge--xs{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));padding-inline:calc(var(--spacing,.25rem) * 2);padding-block:calc(var(--spacing,.25rem) * .25)}.badge.badge--sm{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));padding-inline:calc(var(--spacing,.25rem) * 2.5);padding-block:calc(var(--spacing,.25rem) * .5)}.badge.badge--md{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1)}.badge.badge--lg{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 1.5)}.badge.badge--xl{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding-inline:calc(var(--spacing,.25rem) * 5);padding-block:calc(var(--spacing,.25rem) * 2)}.badge>svg{pointer-events:none;width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
package/dist/index.d.ts CHANGED
@@ -8,7 +8,6 @@ import { ComponentProps } from 'react';
8
8
  import { default as default_2 } from 'react';
9
9
  import { Dialog as Dialog_3 } from '@base-ui/react/dialog';
10
10
  import { JSX } from 'react/jsx-runtime';
11
- import { JSXElementConstructor } from 'react';
12
11
  import { Popover as Popover_3 } from '@base-ui/react/popover';
13
12
  import * as React_2 from 'react';
14
13
  import { ReactElement } from 'react';
@@ -60,28 +59,32 @@ export declare interface AlertProps {
60
59
 
61
60
  declare type AlertVariant = "info" | "success" | "warning" | "error";
62
61
 
63
- export declare const Badge: ({ label, onClick, className, variant, color, children, render, ...props }: BadgeProps) => JSX.Element;
62
+ export declare const Badge: ({ children, label, variant, outline, size, as, className, tooltip, ...props }: BadgeProps) => JSX.Element;
64
63
 
65
- declare function Badge_2({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): ReactElement<unknown, string | JSXElementConstructor<any>>;
66
-
67
- export declare interface BadgeProps extends React.ComponentProps<typeof Badge_2> {
68
- variant?: BadgeVariant;
69
- color?: TailwindColor;
64
+ export declare interface BadgeProps {
65
+ variant?: ButtonVariant;
66
+ outline?: boolean;
67
+ size?: ButtonSize;
68
+ as?: "button" | "div";
69
+ onClick?: () => void;
70
70
  label?: string;
71
+ tooltip?: string;
71
72
  children?: React.ReactNode;
72
- onClick?: () => void;
73
73
  className?: string;
74
74
  }
75
75
 
76
- declare type BadgeVariant = AlertVariant | "default" | "secondary" | "destructive" | "outline";
77
-
78
- declare const badgeVariants: (props?: ({
79
- variant?: "link" | "info" | "success" | "warning" | "error" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
80
- } & ClassProp) | undefined) => string;
81
-
82
- export declare type BaseButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "unstyled";
83
-
84
- export declare type BaseButtonVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "unstyled" | "error" | "info" | "success" | "warning";
76
+ export declare type BaseButtonProps = {
77
+ className?: string;
78
+ label?: string;
79
+ icon?: ReactElement<ComponentProps<"svg">>;
80
+ variant?: ButtonVariant;
81
+ size?: ButtonSize;
82
+ outline?: boolean;
83
+ knockout?: boolean;
84
+ rounded?: boolean;
85
+ fit?: boolean;
86
+ asIcon?: boolean;
87
+ };
85
88
 
86
89
  declare const Body_2: ({ children, className, withContainer, ...props }: BodyProps) => JSX.Element;
87
90
 
@@ -117,6 +120,8 @@ export declare interface BreadcrumbType {
117
120
  to?: string;
118
121
  }
119
122
 
123
+ export declare const buildButtonClassNames: ({ variant, size, outline, knockout, rounded, fit, asIcon, className, }: BaseButtonProps) => string;
124
+
120
125
  export declare const BulletList: BulletListComponent;
121
126
 
122
127
  declare type BulletListComponent = React.FC<BulletListProps> & {
@@ -127,36 +132,17 @@ declare type BulletListItemProps = ComponentProps<typeof Text_2>;
127
132
 
128
133
  declare type BulletListProps = ComponentProps<"ul">;
129
134
 
130
- export declare const Button: ({ label, children, onClick, variant, size, icon, asIcon, disabled, className, type, full, fit, rounded, render, ...rest }: ButtonProps) => JSX.Element;
135
+ export declare const Button: ({ className, variant, size, outline, knockout, rounded, fit, asIcon, icon, label, type, children, ...props }: ButtonProps) => JSX.Element;
131
136
 
132
137
  declare function Button_2({ className, variant, size, ...props }: Button_3.Props & VariantProps<typeof buttonVariants>): JSX.Element;
133
138
 
134
- export declare const ButtonGroup: {
135
- ({ children, className, ...props }: ButtonGroupProps): JSX.Element;
136
- Button: default_2.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & default_2.RefAttributes<HTMLButtonElement>>;
137
- };
139
+ export declare const ButtonGroup: ({ children, className, ...props }: ButtonGroupProps) => JSX.Element;
138
140
 
139
- export declare interface ButtonGroupProps extends default_2.ComponentPropsWithoutRef<"div"> {
140
- children: default_2.ReactNode;
141
- className?: string;
141
+ export declare interface ButtonGroupProps extends ComponentProps<"fieldset"> {
142
+ children: ReactNode;
142
143
  }
143
144
 
144
- export declare interface ButtonProps extends React.ComponentProps<"button"> {
145
- label?: string;
146
- children?: React.ReactNode;
147
- onClick?: () => void;
148
- variant?: ButtonVariant;
149
- size?: "default" | "xs" | "sm" | "md" | "lg" | "xl";
150
- icon?: ReactElement;
151
- asIcon?: boolean;
152
- disabled?: boolean;
153
- className?: string;
154
- type?: "button" | "submit" | "reset";
155
- fit?: boolean;
156
- full?: boolean;
157
- rounded?: boolean;
158
- render?: React.ComponentProps<typeof Button_2>["render"];
159
- }
145
+ export declare type ButtonProps = BaseButtonProps & ComponentProps<"button">;
160
146
 
161
147
  export declare const ButtonRadioField: ({ name, label, hint, options, error, note, secondaryOptions, value, onChange, buttonClassName, secondaryButtonClassName, className: groupClassName, ...props }: ButtonRadioFieldProps) => JSX.Element;
162
148
 
@@ -174,11 +160,13 @@ declare interface ButtonRadioFieldProps extends Omit<ButtonGroupProps, "children
174
160
  secondaryButtonClassName?: string;
175
161
  }
176
162
 
177
- export declare type ButtonVariant = "default" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "unstyled" | "error" | "info" | "success" | "warning";
163
+ export declare type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
164
+
165
+ export declare type ButtonVariant = "primary" | "secondary" | "muted" | "ghost" | "link" | "info" | "success" | "warning" | "danger";
178
166
 
179
167
  declare const buttonVariants: (props?: ({
180
- variant?: "link" | "info" | "success" | "warning" | "error" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "unstyled" | null | undefined;
181
- size?: "default" | "unstyled" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
168
+ variant?: "link" | "secondary" | "ghost" | "info" | "success" | "warning" | "outline" | "error" | "default" | "destructive" | "unstyled" | null | undefined;
169
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "default" | "unstyled" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
182
170
  } & ClassProp) | undefined) => string;
183
171
 
184
172
  export declare const Card: CardComponent;
@@ -272,7 +260,7 @@ export declare interface ContainerProps extends FlexProps {
272
260
  separation?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
273
261
  }
274
262
 
275
- export declare const CopyButton: ({ content, className, size, ...props }: CopyButtonProps) => JSX.Element;
263
+ export declare const CopyButton: ({ content, ...props }: CopyButtonProps) => JSX.Element;
276
264
 
277
265
  declare interface CopyButtonProps extends Omit<ButtonProps, "onClick" | "disabled"> {
278
266
  content: string;
@@ -287,17 +275,22 @@ export declare const DateField: ({ name, label, placeholder, note, className, si
287
275
  declare interface DateFieldProps extends Omit<TextFieldProps, "type"> {
288
276
  }
289
277
 
290
- export declare const DatePickerField: ({ onDateSelection, initialValue, className, size, error, }: DatePickerFieldProps) => JSX.Element;
278
+ export declare const DatePickerField: ({ onDateSelection, initialValue, className, size, error }: DatePickerFieldProps) => JSX.Element;
291
279
 
292
280
  declare interface DatePickerFieldProps {
293
281
  onDateSelection: (date: Date) => void;
294
282
  initialValue?: Date;
295
283
  className?: string;
296
- size?: "default" | "xs" | "sm" | "lg";
284
+ size?: ButtonSize;
297
285
  error?: string;
298
286
  }
299
287
 
300
- export declare const DeleteButton: ({ icon, disabled, handleDelete, ...rest }: Props_4) => JSX.Element;
288
+ export declare const DeleteButton: ({ icon, disabled, handleDelete, ...rest }: DeleteButtonProps) => JSX.Element;
289
+
290
+ declare interface DeleteButtonProps extends BaseButtonProps {
291
+ disabled?: boolean;
292
+ handleDelete: () => void;
293
+ }
301
294
 
302
295
  export declare const Dialog: {
303
296
  (props: ComponentProps<typeof Dialog_2>): JSX.Element;
@@ -367,7 +360,7 @@ declare function EmptyMedia({ className, variant, ...props }: React.ComponentPro
367
360
  declare type EmptyMediaProps = React.ComponentProps<typeof EmptyMedia>;
368
361
 
369
362
  declare const emptyMediaVariants: (props?: ({
370
- variant?: "default" | "icon" | null | undefined;
363
+ variant?: "icon" | "default" | null | undefined;
371
364
  } & ClassProp) | undefined) => string;
372
365
 
373
366
  export declare type EmptyProps = React.ComponentProps<typeof Empty_2> & {
@@ -613,7 +606,7 @@ declare function ItemMedia({ className, variant, ...props }: React_2.ComponentPr
613
606
  declare type ItemMediaProps = React.ComponentProps<typeof ItemMedia>;
614
607
 
615
608
  declare const itemMediaVariants: (props?: ({
616
- variant?: "image" | "default" | "icon" | null | undefined;
609
+ variant?: "image" | "icon" | "default" | null | undefined;
617
610
  } & ClassProp) | undefined) => string;
618
611
 
619
612
  declare type ItemProps = React.ComponentProps<typeof Item_2> & {
@@ -625,8 +618,8 @@ declare function ItemTitle({ className, ...props }: React_2.ComponentProps<"div"
625
618
  declare type ItemTitleProps = React.ComponentProps<typeof ItemTitle>;
626
619
 
627
620
  declare const itemVariants: (props?: ({
628
- variant?: "default" | "outline" | "muted" | null | undefined;
629
- size?: "default" | "xs" | "sm" | null | undefined;
621
+ variant?: "muted" | "outline" | "default" | null | undefined;
622
+ size?: "xs" | "sm" | "default" | null | undefined;
630
623
  } & ClassProp) | undefined) => string;
631
624
 
632
625
  export declare const Label: ({ htmlFor, value, children, size, className, ...props }: LabelProps) => JSX.Element;
@@ -723,7 +716,7 @@ export declare interface NumberFieldProps extends Omit<TextFieldProps, "type"> {
723
716
  declare interface Option_2 {
724
717
  label?: string;
725
718
  value: string;
726
- icon?: React.ReactElement;
719
+ icon?: ReactElement<ComponentProps<"svg">>;
727
720
  }
728
721
 
729
722
  declare interface Option_3 {
@@ -796,13 +789,7 @@ declare interface Props_3 {
796
789
  onChange: (page: number) => void;
797
790
  }
798
791
 
799
- declare interface Props_4 extends ButtonProps {
800
- icon?: ReactElement;
801
- disabled?: boolean;
802
- handleDelete: () => void;
803
- }
804
-
805
- declare interface Props_5 extends SidebarProps {
792
+ declare interface Props_4 extends SidebarProps {
806
793
  children?: React.ReactNode;
807
794
  }
808
795
 
@@ -866,7 +853,7 @@ declare function Sidebar_2({ side, variant, collapsible, className, children, di
866
853
  collapsible?: "offcanvas" | "icon" | "none";
867
854
  }): JSX.Element;
868
855
 
869
- export declare const SidebarLayout: ({ children, ...props }: Props_5) => JSX.Element;
856
+ export declare const SidebarLayout: ({ children, ...props }: Props_4) => JSX.Element;
870
857
 
871
858
  export declare interface SidebarProps extends React.ComponentProps<typeof Sidebar_2> {
872
859
  brandContent: React.ReactNode;
@@ -930,17 +917,10 @@ declare interface SliderProps extends Slider_2.Root.Props {
930
917
  trackClassName?: string;
931
918
  }
932
919
 
933
- export declare const SubmitButton: ({ submitting, disabled, submittingIcon, action, label: customLabel, submittingLabel: customSubmittingLabel, icon: customIcon, noIcon, ...rest }: SubmitButtonProps) => JSX.Element;
920
+ export declare const SubmitButton: ({ variant, disabled, submitting, label, icon, children, ...props }: SubmitButtonProps) => JSX.Element;
934
921
 
935
- export declare interface SubmitButtonProps extends Omit<ButtonProps, "icon"> {
936
- action?: "default" | "submit" | "save" | "send";
937
- label?: string;
938
- submittingLabel?: string;
939
- submitting?: boolean;
940
- disabled?: boolean;
941
- icon?: ReactElement;
942
- submittingIcon?: ReactElement;
943
- noIcon?: boolean;
922
+ export declare interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
923
+ submitting: boolean;
944
924
  }
945
925
 
946
926
  declare function Switch({ className, size, ...props }: Switch_2.Root.Props & {