@mikenotthepope/substrateui 0.1.0 → 0.1.2
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.
- package/README.md +5 -5
- package/base/substrate.css +164 -1
- package/dist/index.d.mts +20 -3
- package/dist/index.d.ts +20 -3
- package/dist/index.js +318 -144
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +436 -264
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -66,17 +66,17 @@ Substrate UI uses three font families via CSS custom properties:
|
|
|
66
66
|
|
|
67
67
|
| Token | Default Font | Purpose |
|
|
68
68
|
| -------------- | --------------- | ---------- |
|
|
69
|
-
| `--font-head` |
|
|
69
|
+
| `--font-head` | Bricolage Grotesque | Headings |
|
|
70
70
|
| `--font-sans` | Space Grotesk | Body text |
|
|
71
71
|
| `--font-mono` | Space Mono | Code |
|
|
72
72
|
|
|
73
73
|
**Next.js:**
|
|
74
74
|
|
|
75
75
|
```tsx
|
|
76
|
-
import { Space_Grotesk,
|
|
76
|
+
import { Space_Grotesk, Bricolage_Grotesque, Space_Mono } from "next/font/google";
|
|
77
77
|
|
|
78
78
|
const sans = Space_Grotesk({ variable: "--font-sans", subsets: ["latin"], weight: "400" });
|
|
79
|
-
const head =
|
|
79
|
+
const head = Bricolage_Grotesque({ variable: "--font-head", subsets: ["latin"], weight: ["400", "700", "800"] });
|
|
80
80
|
const mono = Space_Mono({ variable: "--font-mono", subsets: ["latin"], weight: "400" });
|
|
81
81
|
|
|
82
82
|
export default function RootLayout({ children }) {
|
|
@@ -91,10 +91,10 @@ export default function RootLayout({ children }) {
|
|
|
91
91
|
**Plain HTML / Vite:**
|
|
92
92
|
|
|
93
93
|
```html
|
|
94
|
-
<link href="https://fonts.googleapis.com/css2?family=
|
|
94
|
+
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800&family=Space+Grotesk:wght@400;500;700&family=Space+Mono&display=swap" rel="stylesheet">
|
|
95
95
|
<style>
|
|
96
96
|
:root {
|
|
97
|
-
--font-head: '
|
|
97
|
+
--font-head: 'Bricolage Grotesque', sans-serif;
|
|
98
98
|
--font-sans: 'Space Grotesk', sans-serif;
|
|
99
99
|
--font-mono: 'Space Mono', monospace;
|
|
100
100
|
}
|
package/base/substrate.css
CHANGED
|
@@ -442,7 +442,7 @@
|
|
|
442
442
|
--info: #60a5fa;
|
|
443
443
|
--info-foreground: #000;
|
|
444
444
|
--error: #f87171;
|
|
445
|
-
--error-foreground: #
|
|
445
|
+
--error-foreground: #000;
|
|
446
446
|
--overlay: rgba(0, 0, 0, 0.85);
|
|
447
447
|
--border: #000;
|
|
448
448
|
--ring: #fff;
|
|
@@ -450,6 +450,169 @@
|
|
|
450
450
|
--grid-line: rgba(255, 255, 255, 0.06);
|
|
451
451
|
}
|
|
452
452
|
|
|
453
|
+
/* ─── Color Theme: Plum (Light) ───
|
|
454
|
+
Only anchor-related tokens (primary, accent, info, page, ring) are
|
|
455
|
+
overridden. Surface tokens (background, foreground, muted, secondary,
|
|
456
|
+
border, input, overlay) intentionally inherit from the base light theme
|
|
457
|
+
so that color themes only shift the brand accent, not the entire surface. */
|
|
458
|
+
|
|
459
|
+
.theme-plum {
|
|
460
|
+
--page: #F0DCFE;
|
|
461
|
+
--page-foreground: #000;
|
|
462
|
+
--primary: #B254CF;
|
|
463
|
+
--primary-hover: #9A42B5;
|
|
464
|
+
--primary-foreground: #000;
|
|
465
|
+
--accent: #B254CF;
|
|
466
|
+
--accent-foreground: #000;
|
|
467
|
+
--info: #B254CF;
|
|
468
|
+
--info-foreground: #000;
|
|
469
|
+
--ring: #B254CF;
|
|
470
|
+
--grid-line: rgba(178, 84, 207, 0.12);
|
|
471
|
+
|
|
472
|
+
--primary-50: #F8EDFC;
|
|
473
|
+
--primary-100: #F0D9F8;
|
|
474
|
+
--primary-200: #DFB0F0;
|
|
475
|
+
--primary-300: #CE87E8;
|
|
476
|
+
--primary-400: #B254CF;
|
|
477
|
+
--primary-500: #9A42B5;
|
|
478
|
+
--primary-600: #7D3596;
|
|
479
|
+
--primary-700: #602877;
|
|
480
|
+
--primary-800: #431C57;
|
|
481
|
+
--primary-900: #281038;
|
|
482
|
+
|
|
483
|
+
--info-50: #F8EDFC;
|
|
484
|
+
--info-100: #F0D9F8;
|
|
485
|
+
--info-200: #DFB0F0;
|
|
486
|
+
--info-300: #CE87E8;
|
|
487
|
+
--info-400: #B254CF;
|
|
488
|
+
--info-500: #9A42B5;
|
|
489
|
+
--info-600: #7D3596;
|
|
490
|
+
--info-700: #602877;
|
|
491
|
+
--info-800: #431C57;
|
|
492
|
+
--info-900: #281038;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
/* ─── Color Theme: Plum (Dark) ─── */
|
|
496
|
+
|
|
497
|
+
.dark.theme-plum,
|
|
498
|
+
.dark .theme-plum {
|
|
499
|
+
--page: #2E2045;
|
|
500
|
+
--page-foreground: #E6E6E6;
|
|
501
|
+
--card: #2E2045;
|
|
502
|
+
--card-foreground: #E6E6E6;
|
|
503
|
+
--primary: #B254CF;
|
|
504
|
+
--primary-hover: #9A42B5;
|
|
505
|
+
--primary-foreground: #000;
|
|
506
|
+
--accent: #B254CF;
|
|
507
|
+
--accent-foreground: #000;
|
|
508
|
+
--info: #B254CF;
|
|
509
|
+
--info-foreground: #000;
|
|
510
|
+
--ring: #fff;
|
|
511
|
+
--grid-line: rgba(178, 84, 207, 0.08);
|
|
512
|
+
|
|
513
|
+
/* Dark-adapted palette — lighter end toned down for dark backgrounds */
|
|
514
|
+
--primary-50: #3A2548;
|
|
515
|
+
--primary-100: #452D55;
|
|
516
|
+
--primary-200: #5A3870;
|
|
517
|
+
--primary-300: #7A4698;
|
|
518
|
+
--primary-400: #B254CF;
|
|
519
|
+
--primary-500: #C476DA;
|
|
520
|
+
--primary-600: #D49BE5;
|
|
521
|
+
--primary-700: #E0B8ED;
|
|
522
|
+
--primary-800: #ECD5F5;
|
|
523
|
+
--primary-900: #F5EAFA;
|
|
524
|
+
|
|
525
|
+
--info-50: #3A2548;
|
|
526
|
+
--info-100: #452D55;
|
|
527
|
+
--info-200: #5A3870;
|
|
528
|
+
--info-300: #7A4698;
|
|
529
|
+
--info-400: #B254CF;
|
|
530
|
+
--info-500: #C476DA;
|
|
531
|
+
--info-600: #D49BE5;
|
|
532
|
+
--info-700: #E0B8ED;
|
|
533
|
+
--info-800: #ECD5F5;
|
|
534
|
+
--info-900: #F5EAFA;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
/* ─── Color Theme: Plum Trio (Light) ─── */
|
|
538
|
+
|
|
539
|
+
.theme-plum-trio {
|
|
540
|
+
--page: #F0DCFE;
|
|
541
|
+
--page-foreground: #000;
|
|
542
|
+
--primary: #B254CF;
|
|
543
|
+
--primary-hover: #9A42B5;
|
|
544
|
+
--primary-foreground: #000;
|
|
545
|
+
--accent: #2ABFAB;
|
|
546
|
+
--accent-foreground: #000;
|
|
547
|
+
--info: #E8B42A;
|
|
548
|
+
--info-foreground: #000;
|
|
549
|
+
--ring: #B254CF;
|
|
550
|
+
--grid-line: rgba(178, 84, 207, 0.12);
|
|
551
|
+
|
|
552
|
+
--primary-50: #F8EDFC;
|
|
553
|
+
--primary-100: #F0D9F8;
|
|
554
|
+
--primary-200: #DFB0F0;
|
|
555
|
+
--primary-300: #CE87E8;
|
|
556
|
+
--primary-400: #B254CF;
|
|
557
|
+
--primary-500: #9A42B5;
|
|
558
|
+
--primary-600: #7D3596;
|
|
559
|
+
--primary-700: #602877;
|
|
560
|
+
--primary-800: #431C57;
|
|
561
|
+
--primary-900: #281038;
|
|
562
|
+
|
|
563
|
+
--info-50: #FDF6E4;
|
|
564
|
+
--info-100: #FAECC5;
|
|
565
|
+
--info-200: #F5D88E;
|
|
566
|
+
--info-300: #F0C457;
|
|
567
|
+
--info-400: #E8B42A;
|
|
568
|
+
--info-500: #C99A1E;
|
|
569
|
+
--info-600: #A47D16;
|
|
570
|
+
--info-700: #7F6010;
|
|
571
|
+
--info-800: #5A440B;
|
|
572
|
+
--info-900: #352806;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/* ─── Color Theme: Plum Trio (Dark) ─── */
|
|
576
|
+
|
|
577
|
+
.dark.theme-plum-trio,
|
|
578
|
+
.dark .theme-plum-trio {
|
|
579
|
+
--page: #2E2045;
|
|
580
|
+
--page-foreground: #E6E6E6;
|
|
581
|
+
--card: #2E2045;
|
|
582
|
+
--card-foreground: #E6E6E6;
|
|
583
|
+
--primary: #B254CF;
|
|
584
|
+
--primary-hover: #9A42B5;
|
|
585
|
+
--primary-foreground: #000;
|
|
586
|
+
--accent: #2ABFAB;
|
|
587
|
+
--accent-foreground: #000;
|
|
588
|
+
--info: #E8B42A;
|
|
589
|
+
--info-foreground: #000;
|
|
590
|
+
--ring: #fff;
|
|
591
|
+
--grid-line: rgba(178, 84, 207, 0.08);
|
|
592
|
+
|
|
593
|
+
--primary-50: #3A2548;
|
|
594
|
+
--primary-100: #452D55;
|
|
595
|
+
--primary-200: #5A3870;
|
|
596
|
+
--primary-300: #7A4698;
|
|
597
|
+
--primary-400: #B254CF;
|
|
598
|
+
--primary-500: #C476DA;
|
|
599
|
+
--primary-600: #D49BE5;
|
|
600
|
+
--primary-700: #E0B8ED;
|
|
601
|
+
--primary-800: #ECD5F5;
|
|
602
|
+
--primary-900: #F5EAFA;
|
|
603
|
+
|
|
604
|
+
--info-50: #3D2E10;
|
|
605
|
+
--info-100: #4D3A14;
|
|
606
|
+
--info-200: #6B5220;
|
|
607
|
+
--info-300: #9A7828;
|
|
608
|
+
--info-400: #E8B42A;
|
|
609
|
+
--info-500: #F0C457;
|
|
610
|
+
--info-600: #F5D88E;
|
|
611
|
+
--info-700: #FAECC5;
|
|
612
|
+
--info-800: #FDF6E4;
|
|
613
|
+
--info-900: #FEFBF2;
|
|
614
|
+
}
|
|
615
|
+
|
|
453
616
|
/* ─── Optional: rounded corners ─── */
|
|
454
617
|
|
|
455
618
|
.with-radius {
|
package/dist/index.d.mts
CHANGED
|
@@ -98,7 +98,13 @@ declare const DrawerComponent: typeof Drawer & {
|
|
|
98
98
|
Description: typeof DrawerDescription;
|
|
99
99
|
};
|
|
100
100
|
|
|
101
|
-
declare const
|
|
101
|
+
declare const avatarVariants: (props?: ({
|
|
102
|
+
shape?: "circle" | "square" | "rounded" | "hexagon" | "diamond" | "squircle" | "shield" | null | undefined;
|
|
103
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
104
|
+
type AvatarShape = NonNullable<VariantProps<typeof avatarVariants>["shape"]>;
|
|
105
|
+
interface AvatarProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
|
|
106
|
+
}
|
|
107
|
+
declare const AvatarComponent: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>> & {
|
|
102
108
|
Image: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
|
|
103
109
|
Fallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
104
110
|
};
|
|
@@ -153,6 +159,7 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<ICheckboxProps & React
|
|
|
153
159
|
declare const radioVariants: (props?: ({
|
|
154
160
|
variant?: "default" | "outline" | "solid" | null | undefined;
|
|
155
161
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
162
|
+
shape?: "circle" | "diamond" | null | undefined;
|
|
156
163
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
157
164
|
interface IRadioGroupItemProps extends React$1.ComponentPropsWithoutRef<typeof RadioPrimitive.Item>, VariantProps<typeof radioVariants> {
|
|
158
165
|
}
|
|
@@ -1014,23 +1021,33 @@ declare const TwoColumnLayoutComponent: typeof TwoColumnLayout & {
|
|
|
1014
1021
|
};
|
|
1015
1022
|
|
|
1016
1023
|
type Theme = "light" | "dark" | "system";
|
|
1024
|
+
type ColorTheme = "blue" | "plum" | "plum-trio";
|
|
1017
1025
|
interface ThemeProviderState {
|
|
1018
1026
|
theme: Theme;
|
|
1019
1027
|
resolvedTheme: "light" | "dark";
|
|
1020
1028
|
setTheme: (theme: Theme) => void;
|
|
1029
|
+
colorTheme: ColorTheme;
|
|
1030
|
+
setColorTheme: (colorTheme: ColorTheme) => void;
|
|
1031
|
+
colorThemes: readonly ColorTheme[];
|
|
1021
1032
|
}
|
|
1022
1033
|
interface ThemeProviderProps {
|
|
1023
1034
|
children: React.ReactNode;
|
|
1024
1035
|
defaultTheme?: Theme;
|
|
1036
|
+
defaultColorTheme?: ColorTheme;
|
|
1025
1037
|
storageKey?: string;
|
|
1038
|
+
colorStorageKey?: string;
|
|
1026
1039
|
}
|
|
1027
|
-
declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
1040
|
+
declare function ThemeProvider({ children, defaultTheme, defaultColorTheme, storageKey, colorStorageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
1028
1041
|
declare function useTheme(): ThemeProviderState;
|
|
1029
1042
|
|
|
1030
1043
|
interface ThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
|
|
1031
1044
|
}
|
|
1032
1045
|
declare function ThemeToggle({ variant, size, className, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
|
|
1033
1046
|
|
|
1047
|
+
interface ColorThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
|
|
1048
|
+
}
|
|
1049
|
+
declare function ColorThemeToggle({ variant, size, className, ...props }: ColorThemeToggleProps): react_jsx_runtime.JSX.Element;
|
|
1050
|
+
|
|
1034
1051
|
interface ThemeConfig {
|
|
1035
1052
|
/** Primary brand color and its foreground */
|
|
1036
1053
|
primary?: string;
|
|
@@ -1212,4 +1229,4 @@ declare function NewsletterSignup({ title, subtitle, inputPlaceholder, buttonLab
|
|
|
1212
1229
|
|
|
1213
1230
|
declare function cn(...classes: ClassNameValue[]): string;
|
|
1214
1231
|
|
|
1215
|
-
export { AccordionComponent as Accordion, AlertComponent as Alert, AlertDialogComponent as AlertDialog, AnnouncementBanner, type AnnouncementBannerProps, AvatarComponent as Avatar, Badge, BreadcrumbComponent as Breadcrumb, Button, CTABanner, type CTABannerProps, Calendar, CardComponent as Card, CardGrid, type CardGridProps, CarouselComponent as Carousel, type CarouselApi, ChartComponent as Chart, type ChartConfig, Checkbox, CollapsibleComponent as Collapsible, ComboboxComponent as Combobox, CommandComponent as Command, Container, ContextMenuComponent as ContextMenu, DataTableComponent as DataTable, DialogComponent as Dialog, Divider, DrawerComponent as Drawer, DropdownMenuComponent as DropdownMenu, FAQ, type FAQItem, type FAQProps, type Feature, FeatureSection, type FeatureSectionProps, Flex, Footer, type FooterLinkGroup, type FooterProps, FormComponent as Form, FormLayout, Grid, Hero, type HeroProps, HoverCardComponent as HoverCard, type IAlertDialogContentProps, type IAlertProps, type IBadgeProps, type IBreadcrumbLinkProps, type IButtonProps, type ICalendarProps, type ICardProps, type ICarouselProps, type IChartContainerProps, type ICheckboxProps, type IComboboxItem, type IComboboxProps, type IContainerProps, type IDataTableProps, type IDialogContentProps, type IDividerProps, type IFlexProps, type IFormActionsProps, type IFormFieldProps, type IFormLayoutProps, type IFormRowProps, type IFormSectionProps, type IGridProps, type IIconButtonProps, type IImageCardProps, type IInputOTPProps, type IInputProps, type ILinkProps, type ILoaderProps, type IMarqueeProps, type IPaginationLinkProps, type IProgressProps, type IRadioGroupItemProps, type ISectionNavProps, type ISheetContentProps, type ISkeletonProps, type ISonnerProps, type IStackProps, type ITextareaProps, IconButton, ImageCard, Input, InputOTPComponent as InputOTP, Label, Link, Loader, LogoCloud, type LogoCloudProps, Marquee, MenuComponent as Menu, MenubarComponent as Menubar, type NavAuth, NavBar, type NavBarProps, type NavBrand, type NavLink, type NavMenuItem, NavigationMenuComponent as NavigationMenu, NewsletterSignup, type NewsletterSignupProps, Pagination, PopoverComponent as Popover, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Progress, RadioGroup, ResizableComponent as Resizable, ScrollAreaComponent as ScrollArea, Section, SectionNav, type SectionNavItem, type SectionProps, Select, SheetComponent as Sheet, SidebarComponent as Sidebar, SimplePage, type SimplePageProps, Skeleton, Slider, Stack, type Stat, StatsBar, type StatsBarProps, Switch, TableComponent as Table, TabsComponent as Tabs, Testimonial, type TestimonialItem, type TestimonialProps, Text, Textarea, type ThemeConfig, ThemeProvider, ThemeToggle, type ThemeToggleProps, Toaster, TooltipComponent as Tooltip, TwoColumnLayoutComponent as TwoColumnLayout, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, containerVariants, createTheme, dialogContentVariants, dividerVariants, flexVariants, gridVariants, iconButtonVariants, linkVariants, loaderVariants, navigationMenuTriggerStyle, sectionVariants, sheetContentVariants, sidebarMenuButtonVariants, stackVariants, useCarousel, useChart, useFormField, useSidebar, useTheme };
|
|
1232
|
+
export { AccordionComponent as Accordion, AlertComponent as Alert, AlertDialogComponent as AlertDialog, AnnouncementBanner, type AnnouncementBannerProps, AvatarComponent as Avatar, type AvatarShape, Badge, BreadcrumbComponent as Breadcrumb, Button, CTABanner, type CTABannerProps, Calendar, CardComponent as Card, CardGrid, type CardGridProps, CarouselComponent as Carousel, type CarouselApi, ChartComponent as Chart, type ChartConfig, Checkbox, CollapsibleComponent as Collapsible, type ColorTheme, ColorThemeToggle, type ColorThemeToggleProps, ComboboxComponent as Combobox, CommandComponent as Command, Container, ContextMenuComponent as ContextMenu, DataTableComponent as DataTable, DialogComponent as Dialog, Divider, DrawerComponent as Drawer, DropdownMenuComponent as DropdownMenu, FAQ, type FAQItem, type FAQProps, type Feature, FeatureSection, type FeatureSectionProps, Flex, Footer, type FooterLinkGroup, type FooterProps, FormComponent as Form, FormLayout, Grid, Hero, type HeroProps, HoverCardComponent as HoverCard, type IAlertDialogContentProps, type IAlertProps, type IBadgeProps, type IBreadcrumbLinkProps, type IButtonProps, type ICalendarProps, type ICardProps, type ICarouselProps, type IChartContainerProps, type ICheckboxProps, type IComboboxItem, type IComboboxProps, type IContainerProps, type IDataTableProps, type IDialogContentProps, type IDividerProps, type IFlexProps, type IFormActionsProps, type IFormFieldProps, type IFormLayoutProps, type IFormRowProps, type IFormSectionProps, type IGridProps, type IIconButtonProps, type IImageCardProps, type IInputOTPProps, type IInputProps, type ILinkProps, type ILoaderProps, type IMarqueeProps, type IPaginationLinkProps, type IProgressProps, type IRadioGroupItemProps, type ISectionNavProps, type ISheetContentProps, type ISkeletonProps, type ISonnerProps, type IStackProps, type ITextareaProps, IconButton, ImageCard, Input, InputOTPComponent as InputOTP, Label, Link, Loader, LogoCloud, type LogoCloudProps, Marquee, MenuComponent as Menu, MenubarComponent as Menubar, type NavAuth, NavBar, type NavBarProps, type NavBrand, type NavLink, type NavMenuItem, NavigationMenuComponent as NavigationMenu, NewsletterSignup, type NewsletterSignupProps, Pagination, PopoverComponent as Popover, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Progress, RadioGroup, ResizableComponent as Resizable, ScrollAreaComponent as ScrollArea, Section, SectionNav, type SectionNavItem, type SectionProps, Select, SheetComponent as Sheet, SidebarComponent as Sidebar, SimplePage, type SimplePageProps, Skeleton, Slider, Stack, type Stat, StatsBar, type StatsBarProps, Switch, TableComponent as Table, TabsComponent as Tabs, Testimonial, type TestimonialItem, type TestimonialProps, Text, Textarea, type ThemeConfig, ThemeProvider, ThemeToggle, type ThemeToggleProps, Toaster, TooltipComponent as Tooltip, TwoColumnLayoutComponent as TwoColumnLayout, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, containerVariants, createTheme, dialogContentVariants, dividerVariants, flexVariants, gridVariants, iconButtonVariants, linkVariants, loaderVariants, navigationMenuTriggerStyle, sectionVariants, sheetContentVariants, sidebarMenuButtonVariants, stackVariants, useCarousel, useChart, useFormField, useSidebar, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -98,7 +98,13 @@ declare const DrawerComponent: typeof Drawer & {
|
|
|
98
98
|
Description: typeof DrawerDescription;
|
|
99
99
|
};
|
|
100
100
|
|
|
101
|
-
declare const
|
|
101
|
+
declare const avatarVariants: (props?: ({
|
|
102
|
+
shape?: "circle" | "square" | "rounded" | "hexagon" | "diamond" | "squircle" | "shield" | null | undefined;
|
|
103
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
104
|
+
type AvatarShape = NonNullable<VariantProps<typeof avatarVariants>["shape"]>;
|
|
105
|
+
interface AvatarProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
|
|
106
|
+
}
|
|
107
|
+
declare const AvatarComponent: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>> & {
|
|
102
108
|
Image: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
|
|
103
109
|
Fallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
104
110
|
};
|
|
@@ -153,6 +159,7 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<ICheckboxProps & React
|
|
|
153
159
|
declare const radioVariants: (props?: ({
|
|
154
160
|
variant?: "default" | "outline" | "solid" | null | undefined;
|
|
155
161
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
162
|
+
shape?: "circle" | "diamond" | null | undefined;
|
|
156
163
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
157
164
|
interface IRadioGroupItemProps extends React$1.ComponentPropsWithoutRef<typeof RadioPrimitive.Item>, VariantProps<typeof radioVariants> {
|
|
158
165
|
}
|
|
@@ -1014,23 +1021,33 @@ declare const TwoColumnLayoutComponent: typeof TwoColumnLayout & {
|
|
|
1014
1021
|
};
|
|
1015
1022
|
|
|
1016
1023
|
type Theme = "light" | "dark" | "system";
|
|
1024
|
+
type ColorTheme = "blue" | "plum" | "plum-trio";
|
|
1017
1025
|
interface ThemeProviderState {
|
|
1018
1026
|
theme: Theme;
|
|
1019
1027
|
resolvedTheme: "light" | "dark";
|
|
1020
1028
|
setTheme: (theme: Theme) => void;
|
|
1029
|
+
colorTheme: ColorTheme;
|
|
1030
|
+
setColorTheme: (colorTheme: ColorTheme) => void;
|
|
1031
|
+
colorThemes: readonly ColorTheme[];
|
|
1021
1032
|
}
|
|
1022
1033
|
interface ThemeProviderProps {
|
|
1023
1034
|
children: React.ReactNode;
|
|
1024
1035
|
defaultTheme?: Theme;
|
|
1036
|
+
defaultColorTheme?: ColorTheme;
|
|
1025
1037
|
storageKey?: string;
|
|
1038
|
+
colorStorageKey?: string;
|
|
1026
1039
|
}
|
|
1027
|
-
declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
1040
|
+
declare function ThemeProvider({ children, defaultTheme, defaultColorTheme, storageKey, colorStorageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
1028
1041
|
declare function useTheme(): ThemeProviderState;
|
|
1029
1042
|
|
|
1030
1043
|
interface ThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
|
|
1031
1044
|
}
|
|
1032
1045
|
declare function ThemeToggle({ variant, size, className, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
|
|
1033
1046
|
|
|
1047
|
+
interface ColorThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof iconButtonVariants> {
|
|
1048
|
+
}
|
|
1049
|
+
declare function ColorThemeToggle({ variant, size, className, ...props }: ColorThemeToggleProps): react_jsx_runtime.JSX.Element;
|
|
1050
|
+
|
|
1034
1051
|
interface ThemeConfig {
|
|
1035
1052
|
/** Primary brand color and its foreground */
|
|
1036
1053
|
primary?: string;
|
|
@@ -1212,4 +1229,4 @@ declare function NewsletterSignup({ title, subtitle, inputPlaceholder, buttonLab
|
|
|
1212
1229
|
|
|
1213
1230
|
declare function cn(...classes: ClassNameValue[]): string;
|
|
1214
1231
|
|
|
1215
|
-
export { AccordionComponent as Accordion, AlertComponent as Alert, AlertDialogComponent as AlertDialog, AnnouncementBanner, type AnnouncementBannerProps, AvatarComponent as Avatar, Badge, BreadcrumbComponent as Breadcrumb, Button, CTABanner, type CTABannerProps, Calendar, CardComponent as Card, CardGrid, type CardGridProps, CarouselComponent as Carousel, type CarouselApi, ChartComponent as Chart, type ChartConfig, Checkbox, CollapsibleComponent as Collapsible, ComboboxComponent as Combobox, CommandComponent as Command, Container, ContextMenuComponent as ContextMenu, DataTableComponent as DataTable, DialogComponent as Dialog, Divider, DrawerComponent as Drawer, DropdownMenuComponent as DropdownMenu, FAQ, type FAQItem, type FAQProps, type Feature, FeatureSection, type FeatureSectionProps, Flex, Footer, type FooterLinkGroup, type FooterProps, FormComponent as Form, FormLayout, Grid, Hero, type HeroProps, HoverCardComponent as HoverCard, type IAlertDialogContentProps, type IAlertProps, type IBadgeProps, type IBreadcrumbLinkProps, type IButtonProps, type ICalendarProps, type ICardProps, type ICarouselProps, type IChartContainerProps, type ICheckboxProps, type IComboboxItem, type IComboboxProps, type IContainerProps, type IDataTableProps, type IDialogContentProps, type IDividerProps, type IFlexProps, type IFormActionsProps, type IFormFieldProps, type IFormLayoutProps, type IFormRowProps, type IFormSectionProps, type IGridProps, type IIconButtonProps, type IImageCardProps, type IInputOTPProps, type IInputProps, type ILinkProps, type ILoaderProps, type IMarqueeProps, type IPaginationLinkProps, type IProgressProps, type IRadioGroupItemProps, type ISectionNavProps, type ISheetContentProps, type ISkeletonProps, type ISonnerProps, type IStackProps, type ITextareaProps, IconButton, ImageCard, Input, InputOTPComponent as InputOTP, Label, Link, Loader, LogoCloud, type LogoCloudProps, Marquee, MenuComponent as Menu, MenubarComponent as Menubar, type NavAuth, NavBar, type NavBarProps, type NavBrand, type NavLink, type NavMenuItem, NavigationMenuComponent as NavigationMenu, NewsletterSignup, type NewsletterSignupProps, Pagination, PopoverComponent as Popover, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Progress, RadioGroup, ResizableComponent as Resizable, ScrollAreaComponent as ScrollArea, Section, SectionNav, type SectionNavItem, type SectionProps, Select, SheetComponent as Sheet, SidebarComponent as Sidebar, SimplePage, type SimplePageProps, Skeleton, Slider, Stack, type Stat, StatsBar, type StatsBarProps, Switch, TableComponent as Table, TabsComponent as Tabs, Testimonial, type TestimonialItem, type TestimonialProps, Text, Textarea, type ThemeConfig, ThemeProvider, ThemeToggle, type ThemeToggleProps, Toaster, TooltipComponent as Tooltip, TwoColumnLayoutComponent as TwoColumnLayout, alertVariants, badgeVariants, buttonVariants, cardVariants, cn, containerVariants, createTheme, dialogContentVariants, dividerVariants, flexVariants, gridVariants, iconButtonVariants, linkVariants, loaderVariants, navigationMenuTriggerStyle, sectionVariants, sheetContentVariants, sidebarMenuButtonVariants, stackVariants, useCarousel, useChart, useFormField, useSidebar, useTheme };
|
|
1232
|
+
export { AccordionComponent as Accordion, AlertComponent as Alert, AlertDialogComponent as AlertDialog, AnnouncementBanner, type AnnouncementBannerProps, AvatarComponent as Avatar, type AvatarShape, Badge, BreadcrumbComponent as Breadcrumb, Button, CTABanner, type CTABannerProps, Calendar, CardComponent as Card, CardGrid, type CardGridProps, CarouselComponent as Carousel, type CarouselApi, ChartComponent as Chart, type ChartConfig, Checkbox, CollapsibleComponent as Collapsible, type ColorTheme, ColorThemeToggle, type ColorThemeToggleProps, ComboboxComponent as Combobox, CommandComponent as Command, Container, ContextMenuComponent as ContextMenu, DataTableComponent as DataTable, DialogComponent as Dialog, Divider, DrawerComponent as Drawer, DropdownMenuComponent as DropdownMenu, FAQ, type FAQItem, type FAQProps, type Feature, FeatureSection, type FeatureSectionProps, Flex, Footer, type FooterLinkGroup, type FooterProps, FormComponent as Form, FormLayout, Grid, Hero, type HeroProps, HoverCardComponent as HoverCard, type IAlertDialogContentProps, type IAlertProps, type IBadgeProps, type IBreadcrumbLinkProps, type IButtonProps, type ICalendarProps, type ICardProps, type ICarouselProps, type IChartContainerProps, type ICheckboxProps, type IComboboxItem, type IComboboxProps, type IContainerProps, type IDataTableProps, type IDialogContentProps, type IDividerProps, type IFlexProps, type IFormActionsProps, type IFormFieldProps, type IFormLayoutProps, type IFormRowProps, type IFormSectionProps, type IGridProps, type IIconButtonProps, type IImageCardProps, type IInputOTPProps, type IInputProps, type ILinkProps, type ILoaderProps, type IMarqueeProps, type IPaginationLinkProps, type IProgressProps, type IRadioGroupItemProps, type ISectionNavProps, type ISheetContentProps, type ISkeletonProps, type ISonnerProps, type IStackProps, type ITextareaProps, IconButton, ImageCard, Input, InputOTPComponent as InputOTP, Label, Link, Loader, LogoCloud, type LogoCloudProps, Marquee, MenuComponent as Menu, MenubarComponent as Menubar, type NavAuth, NavBar, type NavBarProps, type NavBrand, type NavLink, type NavMenuItem, NavigationMenuComponent as NavigationMenu, NewsletterSignup, type NewsletterSignupProps, Pagination, PopoverComponent as Popover, type PricingFeature, PricingTable, type PricingTableProps, type PricingTier, Progress, RadioGroup, ResizableComponent as Resizable, ScrollAreaComponent as ScrollArea, Section, SectionNav, type SectionNavItem, type SectionProps, Select, SheetComponent as Sheet, SidebarComponent as Sidebar, SimplePage, type SimplePageProps, Skeleton, Slider, Stack, type Stat, StatsBar, type StatsBarProps, Switch, TableComponent as Table, TabsComponent as Tabs, Testimonial, type TestimonialItem, type TestimonialProps, Text, Textarea, type ThemeConfig, ThemeProvider, ThemeToggle, type ThemeToggleProps, Toaster, TooltipComponent as Tooltip, TwoColumnLayoutComponent as TwoColumnLayout, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, containerVariants, createTheme, dialogContentVariants, dividerVariants, flexVariants, gridVariants, iconButtonVariants, linkVariants, loaderVariants, navigationMenuTriggerStyle, sectionVariants, sheetContentVariants, sidebarMenuButtonVariants, stackVariants, useCarousel, useChart, useFormField, useSidebar, useTheme };
|