@fabio.caffarello/react-design-system 3.8.0 → 3.10.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.
- package/README.md +2 -1
- package/dist/granular/index.js +447 -0
- package/dist/granular/index.js.map +1 -0
- package/dist/granular/ui/components/Accordion/Accordion.js +105 -0
- package/dist/granular/ui/components/Accordion/Accordion.js.map +1 -0
- package/dist/granular/ui/components/Autocomplete/Autocomplete.js +133 -0
- package/dist/granular/ui/components/Autocomplete/Autocomplete.js.map +1 -0
- package/dist/granular/ui/components/Autocomplete/AutocompleteList.js +119 -0
- package/dist/granular/ui/components/Autocomplete/AutocompleteList.js.map +1 -0
- package/dist/granular/ui/components/Autocomplete/AutocompleteOption.js +42 -0
- package/dist/granular/ui/components/Autocomplete/AutocompleteOption.js.map +1 -0
- package/dist/granular/ui/components/Breadcrumb/Breadcrumb.js +100 -0
- package/dist/granular/ui/components/Breadcrumb/Breadcrumb.js.map +1 -0
- package/dist/granular/ui/components/Card/Card.js +113 -0
- package/dist/granular/ui/components/Card/Card.js.map +1 -0
- package/dist/granular/ui/components/Card/CardActions.js +51 -0
- package/dist/granular/ui/components/Card/CardActions.js.map +1 -0
- package/dist/granular/ui/components/Card/CardBody.js +32 -0
- package/dist/granular/ui/components/Card/CardBody.js.map +1 -0
- package/dist/granular/ui/components/Card/CardHeader.js +47 -0
- package/dist/granular/ui/components/Card/CardHeader.js.map +1 -0
- package/dist/granular/ui/components/Card/CardSubtitle.js +38 -0
- package/dist/granular/ui/components/Card/CardSubtitle.js.map +1 -0
- package/dist/granular/ui/components/Card/CardTitle.js +61 -0
- package/dist/granular/ui/components/Card/CardTitle.js.map +1 -0
- package/dist/granular/ui/components/ColorPicker/ColorPicker.js +250 -0
- package/dist/granular/ui/components/ColorPicker/ColorPicker.js.map +1 -0
- package/dist/granular/ui/components/CommandPalette/CommandPalette.js +274 -0
- package/dist/granular/ui/components/CommandPalette/CommandPalette.js.map +1 -0
- package/dist/granular/ui/components/DashboardLayout/DashboardLayout.js +37 -0
- package/dist/granular/ui/components/DashboardLayout/DashboardLayout.js.map +1 -0
- package/dist/granular/ui/components/DataGrid/DataGrid.js +155 -0
- package/dist/granular/ui/components/DataGrid/DataGrid.js.map +1 -0
- package/dist/granular/ui/components/DataTablePattern/DataTablePattern.js +113 -0
- package/dist/granular/ui/components/DataTablePattern/DataTablePattern.js.map +1 -0
- package/dist/granular/ui/components/DatePicker/DatePicker.js +126 -0
- package/dist/granular/ui/components/DatePicker/DatePicker.js.map +1 -0
- package/dist/granular/ui/components/DatePicker/DatePickerCalendar.js +294 -0
- package/dist/granular/ui/components/DatePicker/DatePickerCalendar.js.map +1 -0
- package/dist/granular/ui/components/DatePicker/DatePickerContext.js +16 -0
- package/dist/granular/ui/components/DatePicker/DatePickerContext.js.map +1 -0
- package/dist/granular/ui/components/DatePicker/DatePickerInput.js +119 -0
- package/dist/granular/ui/components/DatePicker/DatePickerInput.js.map +1 -0
- package/dist/granular/ui/components/DatePicker/DatePickerProvider.js +47 -0
- package/dist/granular/ui/components/DatePicker/DatePickerProvider.js.map +1 -0
- package/dist/granular/ui/components/Dialog/AlertDialog.js +48 -0
- package/dist/granular/ui/components/Dialog/AlertDialog.js.map +1 -0
- package/dist/granular/ui/components/Dialog/Dialog.js +36 -0
- package/dist/granular/ui/components/Dialog/Dialog.js.map +1 -0
- package/dist/granular/ui/components/Dialog/DialogClose.js +34 -0
- package/dist/granular/ui/components/Dialog/DialogClose.js.map +1 -0
- package/dist/granular/ui/components/Dialog/DialogContent.js +114 -0
- package/dist/granular/ui/components/Dialog/DialogContent.js.map +1 -0
- package/dist/granular/ui/components/Dialog/DialogDescription.js +51 -0
- package/dist/granular/ui/components/Dialog/DialogDescription.js.map +1 -0
- package/dist/granular/ui/components/Dialog/DialogFooter.js +45 -0
- package/dist/granular/ui/components/Dialog/DialogFooter.js.map +1 -0
- package/dist/granular/ui/components/Dialog/DialogHeader.js +45 -0
- package/dist/granular/ui/components/Dialog/DialogHeader.js.map +1 -0
- package/dist/granular/ui/components/Dialog/DialogTitle.js +53 -0
- package/dist/granular/ui/components/Dialog/DialogTitle.js.map +1 -0
- package/dist/granular/ui/components/Dialog/DialogTrigger.js +28 -0
- package/dist/granular/ui/components/Dialog/DialogTrigger.js.map +1 -0
- package/dist/granular/ui/components/Drawer/Drawer.js +47 -0
- package/dist/granular/ui/components/Drawer/Drawer.js.map +1 -0
- package/dist/granular/ui/components/Drawer/DrawerContent.js +140 -0
- package/dist/granular/ui/components/Drawer/DrawerContent.js.map +1 -0
- package/dist/granular/ui/components/Drawer/DrawerContext.js +21 -0
- package/dist/granular/ui/components/Drawer/DrawerContext.js.map +1 -0
- package/dist/granular/ui/components/Drawer/DrawerFooter.js +53 -0
- package/dist/granular/ui/components/Drawer/DrawerFooter.js.map +1 -0
- package/dist/granular/ui/components/Drawer/DrawerHeader.js +50 -0
- package/dist/granular/ui/components/Drawer/DrawerHeader.js.map +1 -0
- package/dist/granular/ui/components/Dropdown/Dropdown.js +243 -0
- package/dist/granular/ui/components/Dropdown/Dropdown.js.map +1 -0
- package/dist/granular/ui/components/EmptyState/EmptyState.js +102 -0
- package/dist/granular/ui/components/EmptyState/EmptyState.js.map +1 -0
- package/dist/granular/ui/components/FileUpload/FileUpload.js +342 -0
- package/dist/granular/ui/components/FileUpload/FileUpload.js.map +1 -0
- package/dist/granular/ui/components/FilterChips/FilterChips.js +67 -0
- package/dist/granular/ui/components/FilterChips/FilterChips.js.map +1 -0
- package/dist/granular/ui/components/Form/Form.js +184 -0
- package/dist/granular/ui/components/Form/Form.js.map +1 -0
- package/dist/granular/ui/components/Form/FormContext.js +19 -0
- package/dist/granular/ui/components/Form/FormContext.js.map +1 -0
- package/dist/granular/ui/components/Form/FormField.js +66 -0
- package/dist/granular/ui/components/Form/FormField.js.map +1 -0
- package/dist/granular/ui/components/Form/FormProvider.js +17 -0
- package/dist/granular/ui/components/Form/FormProvider.js.map +1 -0
- package/dist/granular/ui/components/Form/useFormFieldArray.js +29 -0
- package/dist/granular/ui/components/Form/useFormFieldArray.js.map +1 -0
- package/dist/granular/ui/components/FormWizardPattern/FormWizardPattern.js +121 -0
- package/dist/granular/ui/components/FormWizardPattern/FormWizardPattern.js.map +1 -0
- package/dist/granular/ui/components/Header/Header.js +98 -0
- package/dist/granular/ui/components/Header/Header.js.map +1 -0
- package/dist/granular/ui/components/Header/components/HeaderActions.js +21 -0
- package/dist/granular/ui/components/Header/components/HeaderActions.js.map +1 -0
- package/dist/granular/ui/components/Header/components/HeaderHamburger.js +31 -0
- package/dist/granular/ui/components/Header/components/HeaderHamburger.js.map +1 -0
- package/dist/granular/ui/components/Header/components/HeaderLogo.js +50 -0
- package/dist/granular/ui/components/Header/components/HeaderLogo.js.map +1 -0
- package/dist/granular/ui/components/Header/components/HeaderMobileMenu.js +38 -0
- package/dist/granular/ui/components/Header/components/HeaderMobileMenu.js.map +1 -0
- package/dist/granular/ui/components/Header/components/HeaderNavigation.js +27 -0
- package/dist/granular/ui/components/Header/components/HeaderNavigation.js.map +1 -0
- package/dist/granular/ui/components/Header/contexts/HeaderContext.js +49 -0
- package/dist/granular/ui/components/Header/contexts/HeaderContext.js.map +1 -0
- package/dist/granular/ui/components/LoginBox/LoginBox.js +84 -0
- package/dist/granular/ui/components/LoginBox/LoginBox.js.map +1 -0
- package/dist/granular/ui/components/Menu/Menu.js +45 -0
- package/dist/granular/ui/components/Menu/Menu.js.map +1 -0
- package/dist/granular/ui/components/Menu/MenuContent.js +94 -0
- package/dist/granular/ui/components/Menu/MenuContent.js.map +1 -0
- package/dist/granular/ui/components/Menu/MenuContext.js +21 -0
- package/dist/granular/ui/components/Menu/MenuContext.js.map +1 -0
- package/dist/granular/ui/components/Menu/MenuItem.js +93 -0
- package/dist/granular/ui/components/Menu/MenuItem.js.map +1 -0
- package/dist/granular/ui/components/Menu/MenuSeparator.js +46 -0
- package/dist/granular/ui/components/Menu/MenuSeparator.js.map +1 -0
- package/dist/granular/ui/components/Menu/MenuTrigger.js +71 -0
- package/dist/granular/ui/components/Menu/MenuTrigger.js.map +1 -0
- package/dist/granular/ui/components/Modal/Modal.js +171 -0
- package/dist/granular/ui/components/Modal/Modal.js.map +1 -0
- package/dist/granular/ui/components/MultiSelect/MultiSelect.js +193 -0
- package/dist/granular/ui/components/MultiSelect/MultiSelect.js.map +1 -0
- package/dist/granular/ui/components/Navigation/Navigation.js +141 -0
- package/dist/granular/ui/components/Navigation/Navigation.js.map +1 -0
- package/dist/granular/ui/components/PageHeader/PageHeader.js +95 -0
- package/dist/granular/ui/components/PageHeader/PageHeader.js.map +1 -0
- package/dist/granular/ui/components/Pagination/Pagination.js +156 -0
- package/dist/granular/ui/components/Pagination/Pagination.js.map +1 -0
- package/dist/granular/ui/components/Popover/Popover.js +171 -0
- package/dist/granular/ui/components/Popover/Popover.js.map +1 -0
- package/dist/granular/ui/components/Rating/Rating.js +110 -0
- package/dist/granular/ui/components/Rating/Rating.js.map +1 -0
- package/dist/granular/ui/components/SearchAndFilterPattern/SearchAndFilterPattern.js +120 -0
- package/dist/granular/ui/components/SearchAndFilterPattern/SearchAndFilterPattern.js.map +1 -0
- package/dist/granular/ui/components/SearchInput/SearchInput.js +103 -0
- package/dist/granular/ui/components/SearchInput/SearchInput.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/SideNavbar.js +143 -0
- package/dist/granular/ui/components/SideNavbar/SideNavbar.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/Navbar.js +173 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/Navbar.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarGroup.js +87 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarGroup.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarItem.js +242 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarItem.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarSeparator.js +66 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarSeparator.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarToggle.js +108 -0
- package/dist/granular/ui/components/SideNavbar/components/Navbar/NavbarToggle.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/SideNavbarBackdrop.js +63 -0
- package/dist/granular/ui/components/SideNavbar/components/SideNavbarBackdrop.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/SideNavbarResizeHandle.js +113 -0
- package/dist/granular/ui/components/SideNavbar/components/SideNavbarResizeHandle.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/SideNavbarRoot.js +150 -0
- package/dist/granular/ui/components/SideNavbar/components/SideNavbarRoot.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/SideNavbarToggle.js +197 -0
- package/dist/granular/ui/components/SideNavbar/components/SideNavbarToggle.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/Sidebar.js +108 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/Sidebar.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarContent.js +71 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarContent.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarFooter.js +64 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarFooter.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarGroup.js +141 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarGroup.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarHeader.js +90 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarHeader.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarSlot.js +12 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarSlot.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarSlotContent.js +13 -0
- package/dist/granular/ui/components/SideNavbar/components/Sidebar/SidebarSlotContent.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/contexts/NavbarContext.js +20 -0
- package/dist/granular/ui/components/SideNavbar/contexts/NavbarContext.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarConfigContext.js +37 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarConfigContext.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarStateContext.js +20 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarStateContext.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarThemeContext.js +28 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarThemeContext.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarToggleContext.js +19 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SideNavbarToggleContext.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SidebarContext.js +20 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SidebarContext.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SidebarSlotContext.js +22 -0
- package/dist/granular/ui/components/SideNavbar/contexts/SidebarSlotContext.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useFocusManagement.js +43 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useFocusManagement.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useGroupState.js +59 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useGroupState.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useKeyboardShortcut.js +34 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useKeyboardShortcut.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useResize.js +58 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useResize.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useResponsiveSidebar.js +35 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useResponsiveSidebar.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbar.js +21 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbar.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbarContent.js +19 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbarContent.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbarNavigation.js +21 -0
- package/dist/granular/ui/components/SideNavbar/hooks/useSideNavbarNavigation.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/providers/SideNavbarConfigProvider.js +61 -0
- package/dist/granular/ui/components/SideNavbar/providers/SideNavbarConfigProvider.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/providers/SideNavbarProvider.js +82 -0
- package/dist/granular/ui/components/SideNavbar/providers/SideNavbarProvider.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/providers/SideNavbarStateProvider.js +165 -0
- package/dist/granular/ui/components/SideNavbar/providers/SideNavbarStateProvider.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/providers/SideNavbarThemeProvider.js +34 -0
- package/dist/granular/ui/components/SideNavbar/providers/SideNavbarThemeProvider.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/providers/SidebarSlotProvider.js +28 -0
- package/dist/granular/ui/components/SideNavbar/providers/SidebarSlotProvider.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/utils/parseKeyboardShortcut.js +60 -0
- package/dist/granular/ui/components/SideNavbar/utils/parseKeyboardShortcut.js.map +1 -0
- package/dist/granular/ui/components/SideNavbar/utils/parseWidth.js +19 -0
- package/dist/granular/ui/components/SideNavbar/utils/parseWidth.js.map +1 -0
- package/dist/granular/ui/components/Stat/Stat.js +84 -0
- package/dist/granular/ui/components/Stat/Stat.js.map +1 -0
- package/dist/granular/ui/components/Stat/StatGroup.js +61 -0
- package/dist/granular/ui/components/Stat/StatGroup.js.map +1 -0
- package/dist/granular/ui/components/Stepper/Stepper.js +248 -0
- package/dist/granular/ui/components/Stepper/Stepper.js.map +1 -0
- package/dist/granular/ui/components/Table/Table.js +162 -0
- package/dist/granular/ui/components/Table/Table.js.map +1 -0
- package/dist/granular/ui/components/Table/TableActions/TableActions.js +67 -0
- package/dist/granular/ui/components/Table/TableActions/TableActions.js.map +1 -0
- package/dist/granular/ui/components/Table/TableActions.js +44 -0
- package/dist/granular/ui/components/Table/TableActions.js.map +1 -0
- package/dist/granular/ui/components/Table/TableBody.js +134 -0
- package/dist/granular/ui/components/Table/TableBody.js.map +1 -0
- package/dist/granular/ui/components/Table/TableCell.js +40 -0
- package/dist/granular/ui/components/Table/TableCell.js.map +1 -0
- package/dist/granular/ui/components/Table/TableContext.js +19 -0
- package/dist/granular/ui/components/Table/TableContext.js.map +1 -0
- package/dist/granular/ui/components/Table/TableEmptyState.js +62 -0
- package/dist/granular/ui/components/Table/TableEmptyState.js.map +1 -0
- package/dist/granular/ui/components/Table/TableFilters/TableFilters.js +189 -0
- package/dist/granular/ui/components/Table/TableFilters/TableFilters.js.map +1 -0
- package/dist/granular/ui/components/Table/TableFilters.js +48 -0
- package/dist/granular/ui/components/Table/TableFilters.js.map +1 -0
- package/dist/granular/ui/components/Table/TableHeader.js +45 -0
- package/dist/granular/ui/components/Table/TableHeader.js.map +1 -0
- package/dist/granular/ui/components/Table/TableHeaderCell.js +117 -0
- package/dist/granular/ui/components/Table/TableHeaderCell.js.map +1 -0
- package/dist/granular/ui/components/Table/TableHeaderRow.js +89 -0
- package/dist/granular/ui/components/Table/TableHeaderRow.js.map +1 -0
- package/dist/granular/ui/components/Table/TablePagination/TablePagination.js +216 -0
- package/dist/granular/ui/components/Table/TablePagination/TablePagination.js.map +1 -0
- package/dist/granular/ui/components/Table/TablePagination.js +56 -0
- package/dist/granular/ui/components/Table/TablePagination.js.map +1 -0
- package/dist/granular/ui/components/Table/TableProvider.js +244 -0
- package/dist/granular/ui/components/Table/TableProvider.js.map +1 -0
- package/dist/granular/ui/components/Table/TableRow.js +95 -0
- package/dist/granular/ui/components/Table/TableRow.js.map +1 -0
- package/dist/granular/ui/components/Table/useColumnResizing.js +71 -0
- package/dist/granular/ui/components/Table/useColumnResizing.js.map +1 -0
- package/dist/granular/ui/components/Table/useVirtualScrolling.js +50 -0
- package/dist/granular/ui/components/Table/useVirtualScrolling.js.map +1 -0
- package/dist/granular/ui/components/Tabs/Tabs.js +39 -0
- package/dist/granular/ui/components/Tabs/Tabs.js.map +1 -0
- package/dist/granular/ui/components/Tabs/TabsContent.js +59 -0
- package/dist/granular/ui/components/Tabs/TabsContent.js.map +1 -0
- package/dist/granular/ui/components/Tabs/TabsContext.js +18 -0
- package/dist/granular/ui/components/Tabs/TabsContext.js.map +1 -0
- package/dist/granular/ui/components/Tabs/TabsList.js +84 -0
- package/dist/granular/ui/components/Tabs/TabsList.js.map +1 -0
- package/dist/granular/ui/components/Tabs/TabsProvider.js +31 -0
- package/dist/granular/ui/components/Tabs/TabsProvider.js.map +1 -0
- package/dist/granular/ui/components/Tabs/TabsTrigger.js +103 -0
- package/dist/granular/ui/components/Tabs/TabsTrigger.js.map +1 -0
- package/dist/granular/ui/components/TimePicker/TimePicker.js +216 -0
- package/dist/granular/ui/components/TimePicker/TimePicker.js.map +1 -0
- package/dist/granular/ui/components/Timeline/Timeline.js +152 -0
- package/dist/granular/ui/components/Timeline/Timeline.js.map +1 -0
- package/dist/granular/ui/components/Toast/Toast.js +159 -0
- package/dist/granular/ui/components/Toast/Toast.js.map +1 -0
- package/dist/granular/ui/components/Toast/ToastContainer.js +41 -0
- package/dist/granular/ui/components/Toast/ToastContainer.js.map +1 -0
- package/dist/granular/ui/components/Toast/useToast.js +64 -0
- package/dist/granular/ui/components/Toast/useToast.js.map +1 -0
- package/dist/granular/ui/hooks/createGenericContext.js +27 -0
- package/dist/granular/ui/hooks/createGenericContext.js.map +1 -0
- package/dist/granular/ui/hooks/focusable.js +14 -0
- package/dist/granular/ui/hooks/focusable.js.map +1 -0
- package/dist/granular/ui/hooks/useAutoFocus.js +23 -0
- package/dist/granular/ui/hooks/useAutoFocus.js.map +1 -0
- package/dist/granular/ui/hooks/useCollapsible.js +37 -0
- package/dist/granular/ui/hooks/useCollapsible.js.map +1 -0
- package/dist/granular/ui/hooks/useFocusRestore.js +20 -0
- package/dist/granular/ui/hooks/useFocusRestore.js.map +1 -0
- package/dist/granular/ui/hooks/useFocusTrap.js +31 -0
- package/dist/granular/ui/hooks/useFocusTrap.js.map +1 -0
- package/dist/granular/ui/hooks/useScrollSpy.js +23 -0
- package/dist/granular/ui/hooks/useScrollSpy.js.map +1 -0
- package/dist/granular/ui/layouts/Container/Container.js +73 -0
- package/dist/granular/ui/layouts/Container/Container.js.map +1 -0
- package/dist/granular/ui/layouts/Stack/Stack.js +79 -0
- package/dist/granular/ui/layouts/Stack/Stack.js.map +1 -0
- package/dist/granular/ui/primitives/Avatar/Avatar.js +122 -0
- package/dist/granular/ui/primitives/Avatar/Avatar.js.map +1 -0
- package/dist/granular/ui/primitives/Avatar/AvatarGroup.js +97 -0
- package/dist/granular/ui/primitives/Avatar/AvatarGroup.js.map +1 -0
- package/dist/granular/ui/primitives/Badge/Badge.js +212 -0
- package/dist/granular/ui/primitives/Badge/Badge.js.map +1 -0
- package/dist/granular/ui/primitives/Button/Button.js +288 -0
- package/dist/granular/ui/primitives/Button/Button.js.map +1 -0
- package/dist/granular/ui/primitives/Checkbox/Checkbox.js +129 -0
- package/dist/granular/ui/primitives/Checkbox/Checkbox.js.map +1 -0
- package/dist/granular/ui/primitives/Chip/Chip.js +206 -0
- package/dist/granular/ui/primitives/Chip/Chip.js.map +1 -0
- package/dist/granular/ui/primitives/Collapsible/Collapsible.js +115 -0
- package/dist/granular/ui/primitives/Collapsible/Collapsible.js.map +1 -0
- package/dist/granular/ui/primitives/ErrorMessage/ErrorMessage.js +54 -0
- package/dist/granular/ui/primitives/ErrorMessage/ErrorMessage.js.map +1 -0
- package/dist/granular/ui/primitives/Info/Info.js +57 -0
- package/dist/granular/ui/primitives/Info/Info.js.map +1 -0
- package/dist/granular/ui/primitives/Input/Input.js +351 -0
- package/dist/granular/ui/primitives/Input/Input.js.map +1 -0
- package/dist/granular/ui/primitives/Label/Label.js +61 -0
- package/dist/granular/ui/primitives/Label/Label.js.map +1 -0
- package/dist/granular/ui/primitives/NavLink/NavLink.js +229 -0
- package/dist/granular/ui/primitives/NavLink/NavLink.js.map +1 -0
- package/dist/granular/ui/primitives/NavLink/hooks/useNavLink.js +15 -0
- package/dist/granular/ui/primitives/NavLink/hooks/useNavLink.js.map +1 -0
- package/dist/granular/ui/primitives/Progress/Progress.js +182 -0
- package/dist/granular/ui/primitives/Progress/Progress.js.map +1 -0
- package/dist/granular/ui/primitives/Radio/Radio.js +118 -0
- package/dist/granular/ui/primitives/Radio/Radio.js.map +1 -0
- package/dist/granular/ui/primitives/Select/Select.js +210 -0
- package/dist/granular/ui/primitives/Select/Select.js.map +1 -0
- package/dist/granular/ui/primitives/Separator/Separator.js +69 -0
- package/dist/granular/ui/primitives/Separator/Separator.js.map +1 -0
- package/dist/granular/ui/primitives/Skeleton/Skeleton.js +87 -0
- package/dist/granular/ui/primitives/Skeleton/Skeleton.js.map +1 -0
- package/dist/granular/ui/primitives/Slider/Slider.js +291 -0
- package/dist/granular/ui/primitives/Slider/Slider.js.map +1 -0
- package/dist/granular/ui/primitives/Spinner/Spinner.js +95 -0
- package/dist/granular/ui/primitives/Spinner/Spinner.js.map +1 -0
- package/dist/granular/ui/primitives/Switch/Switch.js +212 -0
- package/dist/granular/ui/primitives/Switch/Switch.js.map +1 -0
- package/dist/granular/ui/primitives/Text/Text.js +118 -0
- package/dist/granular/ui/primitives/Text/Text.js.map +1 -0
- package/dist/granular/ui/primitives/Textarea/Textarea.js +129 -0
- package/dist/granular/ui/primitives/Textarea/Textarea.js.map +1 -0
- package/dist/granular/ui/primitives/Tooltip/Tooltip.js +227 -0
- package/dist/granular/ui/primitives/Tooltip/Tooltip.js.map +1 -0
- package/dist/granular/ui/providers/AppProvider.js +50 -0
- package/dist/granular/ui/providers/AppProvider.js.map +1 -0
- package/dist/granular/ui/providers/ConfigProvider.js +95 -0
- package/dist/granular/ui/providers/ConfigProvider.js.map +1 -0
- package/dist/granular/ui/providers/DialogContext.js +20 -0
- package/dist/granular/ui/providers/DialogContext.js.map +1 -0
- package/dist/granular/ui/providers/DialogProvider.js +32 -0
- package/dist/granular/ui/providers/DialogProvider.js.map +1 -0
- package/dist/granular/ui/providers/ThemeProvider.js +56 -0
- package/dist/granular/ui/providers/ThemeProvider.js.map +1 -0
- package/dist/granular/ui/providers/ToastContext.js +20 -0
- package/dist/granular/ui/providers/ToastContext.js.map +1 -0
- package/dist/granular/ui/providers/ToastProvider.js +47 -0
- package/dist/granular/ui/providers/ToastProvider.js.map +1 -0
- package/dist/granular/ui/providers/providers-bundle.js +23 -0
- package/dist/granular/ui/providers/providers-bundle.js.map +1 -0
- package/dist/granular/ui/tokens/animations.js +106 -0
- package/dist/granular/ui/tokens/animations.js.map +1 -0
- package/dist/granular/ui/tokens/borders.js +54 -0
- package/dist/granular/ui/tokens/borders.js.map +1 -0
- package/dist/granular/ui/tokens/breakpoints.js +43 -0
- package/dist/granular/ui/tokens/breakpoints.js.map +1 -0
- package/dist/granular/ui/tokens/colors/brand.js +67 -0
- package/dist/granular/ui/tokens/colors/brand.js.map +1 -0
- package/dist/granular/ui/tokens/colors/index.js +25 -0
- package/dist/granular/ui/tokens/colors/index.js.map +1 -0
- package/dist/granular/ui/tokens/colors/primitives.js +320 -0
- package/dist/granular/ui/tokens/colors/primitives.js.map +1 -0
- package/dist/granular/ui/tokens/colors/semantic.js +212 -0
- package/dist/granular/ui/tokens/colors/semantic.js.map +1 -0
- package/dist/granular/ui/tokens/colors/types.js +18 -0
- package/dist/granular/ui/tokens/colors/types.js.map +1 -0
- package/dist/granular/ui/tokens/colors/utils.js +131 -0
- package/dist/granular/ui/tokens/colors/utils.js.map +1 -0
- package/dist/granular/ui/tokens/opacity.js +59 -0
- package/dist/granular/ui/tokens/opacity.js.map +1 -0
- package/dist/granular/ui/tokens/radius.js +76 -0
- package/dist/granular/ui/tokens/radius.js.map +1 -0
- package/dist/granular/ui/tokens/shadows.js +63 -0
- package/dist/granular/ui/tokens/shadows.js.map +1 -0
- package/dist/granular/ui/tokens/sidebar.js +92 -0
- package/dist/granular/ui/tokens/sidebar.js.map +1 -0
- package/dist/granular/ui/tokens/spacing.js +143 -0
- package/dist/granular/ui/tokens/spacing.js.map +1 -0
- package/dist/granular/ui/tokens/switch.js +51 -0
- package/dist/granular/ui/tokens/switch.js.map +1 -0
- package/dist/granular/ui/tokens/typography.js +146 -0
- package/dist/granular/ui/tokens/typography.js.map +1 -0
- package/dist/granular/ui/tokens/z-index.js +79 -0
- package/dist/granular/ui/tokens/z-index.js.map +1 -0
- package/dist/granular/ui/utils/cn.js +10 -0
- package/dist/granular/ui/utils/cn.js.map +1 -0
- package/dist/granular/ui/utils/cva.js +14 -0
- package/dist/granular/ui/utils/cva.js.map +1 -0
- package/dist/granular/ui/utils/mergeRefs.js +11 -0
- package/dist/granular/ui/utils/mergeRefs.js.map +1 -0
- package/dist/granular/vite.svg +1 -0
- package/dist/index.cjs +46 -46
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1172 -1135
- package/dist/index.js.map +1 -1
- package/dist/react-design-system.css +1 -1
- package/dist/server/index.cjs +23 -23
- package/dist/server/index.cjs.map +1 -1
- package/dist/server/index.js +882 -1179
- package/dist/server/index.js.map +1 -1
- package/dist/ui/components/FilterChips/FilterChips.d.ts +83 -0
- package/dist/ui/components/FilterChips/index.d.ts +2 -0
- package/dist/ui/components/index.d.ts +2 -0
- package/dist/ui/server.d.ts +2 -0
- package/package.json +9 -2
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { SLATE as r, SKY as t, ROSE as a, AMBER as i, EMERALD as l, CYAN as s } from "./primitives.js";
|
|
3
|
+
import { BRAND_SECONDARY as c, BRAND_PRIMARY as o } from "./brand.js";
|
|
4
|
+
const e = {
|
|
5
|
+
primary: {
|
|
6
|
+
light: o[400],
|
|
7
|
+
DEFAULT: o[500],
|
|
8
|
+
dark: o[600],
|
|
9
|
+
contrast: {
|
|
10
|
+
hex: "#ffffff",
|
|
11
|
+
rgb: "255, 255, 255",
|
|
12
|
+
hsl: "0, 0%, 100%",
|
|
13
|
+
cssVar: "var(--color-white)",
|
|
14
|
+
tailwind: "white"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
secondary: {
|
|
18
|
+
light: c[400],
|
|
19
|
+
DEFAULT: c[500],
|
|
20
|
+
dark: c[600],
|
|
21
|
+
contrast: {
|
|
22
|
+
hex: "#ffffff",
|
|
23
|
+
rgb: "255, 255, 255",
|
|
24
|
+
hsl: "0, 0%, 100%",
|
|
25
|
+
cssVar: "var(--color-white)",
|
|
26
|
+
tailwind: "white"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
accent: {
|
|
30
|
+
light: s[400],
|
|
31
|
+
DEFAULT: s[500],
|
|
32
|
+
dark: s[600],
|
|
33
|
+
contrast: {
|
|
34
|
+
hex: "#ffffff",
|
|
35
|
+
rgb: "255, 255, 255",
|
|
36
|
+
hsl: "0, 0%, 100%",
|
|
37
|
+
cssVar: "var(--color-white)",
|
|
38
|
+
tailwind: "white"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
success: {
|
|
42
|
+
light: l[400],
|
|
43
|
+
DEFAULT: l[500],
|
|
44
|
+
dark: l[600],
|
|
45
|
+
contrast: {
|
|
46
|
+
hex: "#ffffff",
|
|
47
|
+
rgb: "255, 255, 255",
|
|
48
|
+
hsl: "0, 0%, 100%",
|
|
49
|
+
cssVar: "var(--color-white)",
|
|
50
|
+
tailwind: "white"
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
warning: {
|
|
54
|
+
light: i[400],
|
|
55
|
+
DEFAULT: i[500],
|
|
56
|
+
dark: i[600],
|
|
57
|
+
contrast: {
|
|
58
|
+
hex: "#000000",
|
|
59
|
+
rgb: "0, 0, 0",
|
|
60
|
+
hsl: "0, 0%, 0%",
|
|
61
|
+
cssVar: "var(--color-black)",
|
|
62
|
+
tailwind: "black"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
error: {
|
|
66
|
+
light: a[400],
|
|
67
|
+
DEFAULT: a[500],
|
|
68
|
+
dark: a[600],
|
|
69
|
+
contrast: {
|
|
70
|
+
hex: "#ffffff",
|
|
71
|
+
rgb: "255, 255, 255",
|
|
72
|
+
hsl: "0, 0%, 100%",
|
|
73
|
+
cssVar: "var(--color-white)",
|
|
74
|
+
tailwind: "white"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
info: {
|
|
78
|
+
light: t[400],
|
|
79
|
+
DEFAULT: t[500],
|
|
80
|
+
dark: t[600],
|
|
81
|
+
contrast: {
|
|
82
|
+
hex: "#ffffff",
|
|
83
|
+
rgb: "255, 255, 255",
|
|
84
|
+
hsl: "0, 0%, 100%",
|
|
85
|
+
cssVar: "var(--color-white)",
|
|
86
|
+
tailwind: "white"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
neutral: {
|
|
90
|
+
light: r[100],
|
|
91
|
+
DEFAULT: r[500],
|
|
92
|
+
dark: r[700],
|
|
93
|
+
contrast: {
|
|
94
|
+
hex: "#ffffff",
|
|
95
|
+
rgb: "255, 255, 255",
|
|
96
|
+
hsl: "0, 0%, 100%",
|
|
97
|
+
cssVar: "var(--color-white)",
|
|
98
|
+
tailwind: "white"
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}, w = {
|
|
102
|
+
primary: {
|
|
103
|
+
light: o[500],
|
|
104
|
+
DEFAULT: o[400],
|
|
105
|
+
dark: o[300],
|
|
106
|
+
contrast: {
|
|
107
|
+
hex: "#ffffff",
|
|
108
|
+
rgb: "255, 255, 255",
|
|
109
|
+
hsl: "0, 0%, 100%",
|
|
110
|
+
cssVar: "var(--color-white)",
|
|
111
|
+
tailwind: "white"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
secondary: {
|
|
115
|
+
light: c[500],
|
|
116
|
+
DEFAULT: c[400],
|
|
117
|
+
dark: c[300],
|
|
118
|
+
contrast: {
|
|
119
|
+
hex: "#ffffff",
|
|
120
|
+
rgb: "255, 255, 255",
|
|
121
|
+
hsl: "0, 0%, 100%",
|
|
122
|
+
cssVar: "var(--color-white)",
|
|
123
|
+
tailwind: "white"
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
accent: {
|
|
127
|
+
light: s[500],
|
|
128
|
+
DEFAULT: s[400],
|
|
129
|
+
dark: s[300],
|
|
130
|
+
contrast: {
|
|
131
|
+
hex: "#000000",
|
|
132
|
+
rgb: "0, 0, 0",
|
|
133
|
+
hsl: "0, 0%, 0%",
|
|
134
|
+
cssVar: "var(--color-black)",
|
|
135
|
+
tailwind: "black"
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
success: {
|
|
139
|
+
light: l[500],
|
|
140
|
+
DEFAULT: l[400],
|
|
141
|
+
dark: l[300],
|
|
142
|
+
contrast: {
|
|
143
|
+
hex: "#000000",
|
|
144
|
+
rgb: "0, 0, 0",
|
|
145
|
+
hsl: "0, 0%, 0%",
|
|
146
|
+
cssVar: "var(--color-black)",
|
|
147
|
+
tailwind: "black"
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
warning: {
|
|
151
|
+
light: i[500],
|
|
152
|
+
DEFAULT: i[400],
|
|
153
|
+
dark: i[300],
|
|
154
|
+
contrast: {
|
|
155
|
+
hex: "#000000",
|
|
156
|
+
rgb: "0, 0, 0",
|
|
157
|
+
hsl: "0, 0%, 0%",
|
|
158
|
+
cssVar: "var(--color-black)",
|
|
159
|
+
tailwind: "black"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
error: {
|
|
163
|
+
light: a[500],
|
|
164
|
+
DEFAULT: a[400],
|
|
165
|
+
dark: a[300],
|
|
166
|
+
contrast: {
|
|
167
|
+
hex: "#ffffff",
|
|
168
|
+
rgb: "255, 255, 255",
|
|
169
|
+
hsl: "0, 0%, 100%",
|
|
170
|
+
cssVar: "var(--color-white)",
|
|
171
|
+
tailwind: "white"
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
info: {
|
|
175
|
+
light: t[500],
|
|
176
|
+
DEFAULT: t[400],
|
|
177
|
+
dark: t[300],
|
|
178
|
+
contrast: {
|
|
179
|
+
hex: "#ffffff",
|
|
180
|
+
rgb: "255, 255, 255",
|
|
181
|
+
hsl: "0, 0%, 100%",
|
|
182
|
+
cssVar: "var(--color-white)",
|
|
183
|
+
tailwind: "white"
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
neutral: {
|
|
187
|
+
light: r[700],
|
|
188
|
+
DEFAULT: r[400],
|
|
189
|
+
dark: r[300],
|
|
190
|
+
contrast: {
|
|
191
|
+
hex: "#ffffff",
|
|
192
|
+
rgb: "255, 255, 255",
|
|
193
|
+
hsl: "0, 0%, 100%",
|
|
194
|
+
cssVar: "var(--color-white)",
|
|
195
|
+
tailwind: "white"
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}, k = e;
|
|
199
|
+
function E(f, h = "DEFAULT", n = "light") {
|
|
200
|
+
return (n === "dark" ? w : e)[f][h];
|
|
201
|
+
}
|
|
202
|
+
function b(f, h = "light") {
|
|
203
|
+
return (h === "dark" ? w : e)[f];
|
|
204
|
+
}
|
|
205
|
+
export {
|
|
206
|
+
k as SEMANTIC_COLORS,
|
|
207
|
+
w as SEMANTIC_COLORS_DARK,
|
|
208
|
+
e as SEMANTIC_COLORS_LIGHT,
|
|
209
|
+
E as getSemanticColor,
|
|
210
|
+
b as getSemanticColorRole
|
|
211
|
+
};
|
|
212
|
+
//# sourceMappingURL=semantic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"semantic.js","sources":["../../../../../src/ui/tokens/colors/semantic.ts"],"sourcesContent":["/**\n * Design System - Semantic Color Tokens\n *\n * Semantic colors that reference primitive palettes.\n * These are the colors you should use in components.\n *\n * @brand brasil-a-vera (default, overridable)\n * @version 1.0.0\n */\n\nimport type {\n SemanticColor,\n SemanticColorName,\n SemanticColorPalette,\n ColorToken,\n} from \"./types\";\nimport { CYAN, SLATE, EMERALD, AMBER, ROSE, SKY } from \"./primitives\";\nimport { BRAND_PRIMARY, BRAND_SECONDARY } from \"./brand\";\n\n/**\n * Light theme semantic colors\n */\nexport const SEMANTIC_COLORS_LIGHT: SemanticColorPalette = {\n primary: {\n light: BRAND_PRIMARY[400],\n DEFAULT: BRAND_PRIMARY[500],\n dark: BRAND_PRIMARY[600],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n secondary: {\n light: BRAND_SECONDARY[400],\n DEFAULT: BRAND_SECONDARY[500],\n dark: BRAND_SECONDARY[600],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n accent: {\n light: CYAN[400],\n DEFAULT: CYAN[500],\n dark: CYAN[600],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n success: {\n light: EMERALD[400],\n DEFAULT: EMERALD[500],\n dark: EMERALD[600],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n warning: {\n light: AMBER[400],\n DEFAULT: AMBER[500],\n dark: AMBER[600],\n contrast: {\n hex: \"#000000\",\n rgb: \"0, 0, 0\",\n hsl: \"0, 0%, 0%\",\n cssVar: \"var(--color-black)\",\n tailwind: \"black\",\n },\n },\n error: {\n light: ROSE[400],\n DEFAULT: ROSE[500],\n dark: ROSE[600],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n info: {\n light: SKY[400],\n DEFAULT: SKY[500],\n dark: SKY[600],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n neutral: {\n light: SLATE[100],\n DEFAULT: SLATE[500],\n dark: SLATE[700],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n};\n\n/**\n * Dark theme semantic colors\n */\nexport const SEMANTIC_COLORS_DARK: SemanticColorPalette = {\n primary: {\n light: BRAND_PRIMARY[500],\n DEFAULT: BRAND_PRIMARY[400],\n dark: BRAND_PRIMARY[300],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n secondary: {\n light: BRAND_SECONDARY[500],\n DEFAULT: BRAND_SECONDARY[400],\n dark: BRAND_SECONDARY[300],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n accent: {\n light: CYAN[500],\n DEFAULT: CYAN[400],\n dark: CYAN[300],\n contrast: {\n hex: \"#000000\",\n rgb: \"0, 0, 0\",\n hsl: \"0, 0%, 0%\",\n cssVar: \"var(--color-black)\",\n tailwind: \"black\",\n },\n },\n success: {\n light: EMERALD[500],\n DEFAULT: EMERALD[400],\n dark: EMERALD[300],\n contrast: {\n hex: \"#000000\",\n rgb: \"0, 0, 0\",\n hsl: \"0, 0%, 0%\",\n cssVar: \"var(--color-black)\",\n tailwind: \"black\",\n },\n },\n warning: {\n light: AMBER[500],\n DEFAULT: AMBER[400],\n dark: AMBER[300],\n contrast: {\n hex: \"#000000\",\n rgb: \"0, 0, 0\",\n hsl: \"0, 0%, 0%\",\n cssVar: \"var(--color-black)\",\n tailwind: \"black\",\n },\n },\n error: {\n light: ROSE[500],\n DEFAULT: ROSE[400],\n dark: ROSE[300],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n info: {\n light: SKY[500],\n DEFAULT: SKY[400],\n dark: SKY[300],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n neutral: {\n light: SLATE[700],\n DEFAULT: SLATE[400],\n dark: SLATE[300],\n contrast: {\n hex: \"#ffffff\",\n rgb: \"255, 255, 255\",\n hsl: \"0, 0%, 100%\",\n cssVar: \"var(--color-white)\",\n tailwind: \"white\",\n },\n },\n};\n\n/**\n * Default semantic colors (light theme)\n */\nexport const SEMANTIC_COLORS = SEMANTIC_COLORS_LIGHT;\n\n/**\n * Get semantic color by role and shade\n */\nexport function getSemanticColor(\n role: SemanticColorName,\n shade: \"light\" | \"DEFAULT\" | \"dark\" | \"contrast\" = \"DEFAULT\",\n theme: \"light\" | \"dark\" = \"light\",\n): ColorToken {\n const colors =\n theme === \"dark\" ? SEMANTIC_COLORS_DARK : SEMANTIC_COLORS_LIGHT;\n return colors[role][shade];\n}\n\n/**\n * Get all shades for a semantic color role\n */\nexport function getSemanticColorRole(\n role: SemanticColorName,\n theme: \"light\" | \"dark\" = \"light\",\n): SemanticColor {\n const colors =\n theme === \"dark\" ? SEMANTIC_COLORS_DARK : SEMANTIC_COLORS_LIGHT;\n return colors[role];\n}\n"],"names":["SEMANTIC_COLORS_LIGHT","BRAND_PRIMARY","BRAND_SECONDARY","CYAN","EMERALD","AMBER","ROSE","SKY","SLATE","SEMANTIC_COLORS_DARK","SEMANTIC_COLORS","getSemanticColor","role","shade","theme","getSemanticColorRole"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../../../src/ui/tokens/colors/types.ts"],"sourcesContent":["/**\n * Design System - Color Token Types\n *\n * TypeScript types for the color system.\n *\n * @brand brasil-a-vera (default, overridable)\n * @version 1.0.0\n */\n\n/**\n * Color scale values (50-950)\n * Standard Tailwind-compatible color scale\n */\nexport type ColorScale =\n | 50\n | 100\n | 200\n | 300\n | 400\n | 500\n | 600\n | 700\n | 800\n | 900\n | 950;\n\n/**\n * All available color scale values as array\n */\nexport const COLOR_SCALES: ColorScale[] = [\n 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950,\n];\n\n/**\n * Primitive color names (raw color palettes)\n *\n * Two families coexist:\n * - Tailwind tones (indigo, violet, ..., lime) — honest to Tailwind v4 HEX.\n * - Brand primitives (brand-primary, brand-secondary) — the design system's\n * own scales, declared in src/styles/primitives/brand.css and mirrored\n * in src/ui/tokens/colors/brand.ts. These are the reskin surface;\n * semantic tokens reference them, not Tailwind tones.\n */\nexport type PrimitiveColorName =\n | \"brand-primary\"\n | \"brand-secondary\"\n | \"indigo\"\n | \"violet\"\n | \"cyan\"\n | \"slate\"\n | \"gray\"\n | \"emerald\"\n | \"green\"\n | \"amber\"\n | \"yellow\"\n | \"orange\"\n | \"rose\"\n | \"red\"\n | \"sky\"\n | \"blue\"\n | \"fuchsia\"\n | \"pink\"\n | \"purple\"\n | \"teal\"\n | \"lime\";\n\n/**\n * Semantic color names (meaningful colors)\n */\nexport type SemanticColorName =\n | \"primary\"\n | \"secondary\"\n | \"accent\"\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\"\n | \"neutral\";\n\n/**\n * Text color semantic names\n */\nexport type TextColorName =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"quaternary\"\n | \"placeholder\"\n | \"disabled\"\n | \"inverse\"\n | \"link\"\n | \"success\"\n | \"warning\"\n | \"error\"\n | \"info\";\n\n/**\n * Background color semantic names\n */\nexport type BgColorName =\n | \"base\"\n | \"subtle\"\n | \"muted\"\n | \"emphasis\"\n | \"strong\"\n | \"inverse\"\n | \"brand\"\n | \"secondary\"\n | \"accent\";\n\n/**\n * Border color semantic names\n */\nexport type BorderColorName =\n | \"default\"\n | \"muted\"\n | \"subtle\"\n | \"emphasis\"\n | \"strong\"\n | \"focus\"\n | \"brand\";\n\n/**\n * State color names\n */\nexport type StateColorName =\n | \"hover\"\n | \"active\"\n | \"selected\"\n | \"disabled\"\n | \"focus\";\n\n/**\n * Theme mode\n */\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Theme variant (visual style)\n */\nexport type ThemeVariant = \"tech\" | \"creative\" | \"minimal\";\n\n/**\n * Single color token with multiple formats\n */\nexport interface ColorToken {\n /** Hex color value (e.g., #6366f1) */\n hex: string;\n /** RGB values as string (e.g., \"99, 102, 241\") */\n rgb: string;\n /** HSL values as string (e.g., \"239, 84%, 67%\") */\n hsl: string;\n /** CSS variable reference (e.g., \"var(--color-indigo-500)\") */\n cssVar: string;\n /** Tailwind class suffix (e.g., \"indigo-500\") */\n tailwind: string;\n}\n\n/**\n * Complete color palette (all shades)\n */\nexport type ColorPalette = Record<ColorScale, ColorToken>;\n\n/**\n * Semantic color with light/dark/contrast variants\n */\nexport interface SemanticColor {\n light: ColorToken;\n DEFAULT: ColorToken;\n dark: ColorToken;\n contrast: ColorToken;\n}\n\n/**\n * Complete semantic color palette\n */\nexport type SemanticColorPalette = Record<SemanticColorName, SemanticColor>;\n\n/**\n * All primitive colors\n */\nexport type PrimitiveColors = Record<PrimitiveColorName, ColorPalette>;\n\n/**\n * Theme color configuration\n */\nexport interface ThemeColors {\n /** Brand colors */\n brand: {\n primary: ColorToken;\n primaryLight: ColorToken;\n primaryDark: ColorToken;\n secondary: ColorToken;\n secondaryLight: ColorToken;\n secondaryDark: ColorToken;\n accent: ColorToken;\n accentLight: ColorToken;\n accentDark: ColorToken;\n };\n /** Text colors */\n text: Record<TextColorName, ColorToken>;\n /** Background colors */\n bg: Record<BgColorName, ColorToken>;\n /** Border colors */\n border: Record<BorderColorName, ColorToken>;\n /** State colors */\n state: Record<StateColorName, ColorToken>;\n /** Feedback colors */\n feedback: {\n success: ColorToken;\n successBg: ColorToken;\n warning: ColorToken;\n warningBg: ColorToken;\n error: ColorToken;\n errorBg: ColorToken;\n info: ColorToken;\n infoBg: ColorToken;\n };\n}\n\n/**\n * Color utility function options\n */\nexport interface GetColorOptions {\n /** Output format */\n format?: \"hex\" | \"rgb\" | \"hsl\" | \"cssVar\" | \"tailwind\";\n /** Include opacity */\n opacity?: number;\n}\n\n/**\n * Color class generation options\n */\nexport interface GetColorClassOptions {\n /** Class type */\n type?: \"text\" | \"bg\" | \"border\" | \"ring\" | \"fill\" | \"stroke\";\n /** Include hover variant */\n hover?: boolean;\n /** Include focus variant */\n focus?: boolean;\n /** Include active variant */\n active?: boolean;\n}\n"],"names":["COLOR_SCALES"],"mappings":";AA6BO,MAAMA,IAA6B;AAAA,EACxC;AAAA,EAAI;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AACnD;"}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { getPrimitiveColor as l } from "./primitives.js";
|
|
3
|
+
import { getSemanticColor as u } from "./semantic.js";
|
|
4
|
+
function v(n, t, r = {}) {
|
|
5
|
+
const { format: e = "hex", opacity: a } = r, o = l(n, t);
|
|
6
|
+
let s;
|
|
7
|
+
switch (e) {
|
|
8
|
+
case "rgb":
|
|
9
|
+
s = a !== void 0 ? `rgba(${o.rgb}, ${a})` : `rgb(${o.rgb})`;
|
|
10
|
+
break;
|
|
11
|
+
case "hsl":
|
|
12
|
+
s = a !== void 0 ? `hsla(${o.hsl}, ${a})` : `hsl(${o.hsl})`;
|
|
13
|
+
break;
|
|
14
|
+
case "cssVar":
|
|
15
|
+
s = o.cssVar;
|
|
16
|
+
break;
|
|
17
|
+
case "tailwind":
|
|
18
|
+
s = o.tailwind;
|
|
19
|
+
break;
|
|
20
|
+
default:
|
|
21
|
+
s = o.hex;
|
|
22
|
+
}
|
|
23
|
+
return s;
|
|
24
|
+
}
|
|
25
|
+
function p(n, t = "DEFAULT", r = {}) {
|
|
26
|
+
const { format: e = "hex", opacity: a } = r, o = u(n, t);
|
|
27
|
+
let s;
|
|
28
|
+
switch (e) {
|
|
29
|
+
case "rgb":
|
|
30
|
+
s = a !== void 0 ? `rgba(${o.rgb}, ${a})` : `rgb(${o.rgb})`;
|
|
31
|
+
break;
|
|
32
|
+
case "hsl":
|
|
33
|
+
s = a !== void 0 ? `hsla(${o.hsl}, ${a})` : `hsl(${o.hsl})`;
|
|
34
|
+
break;
|
|
35
|
+
case "cssVar":
|
|
36
|
+
s = o.cssVar;
|
|
37
|
+
break;
|
|
38
|
+
case "tailwind":
|
|
39
|
+
s = o.tailwind;
|
|
40
|
+
break;
|
|
41
|
+
default:
|
|
42
|
+
s = o.hex;
|
|
43
|
+
}
|
|
44
|
+
return s;
|
|
45
|
+
}
|
|
46
|
+
function C(n, t, r = {}) {
|
|
47
|
+
const {
|
|
48
|
+
type: e = "text",
|
|
49
|
+
hover: a = !1,
|
|
50
|
+
focus: o = !1,
|
|
51
|
+
active: s = !1
|
|
52
|
+
} = r, i = l(n, t), c = [`${e}-${i.tailwind}`];
|
|
53
|
+
return a && c.push(`hover:${e}-${i.tailwind}`), o && c.push(`focus:${e}-${i.tailwind}`), s && c.push(`active:${e}-${i.tailwind}`), c.join(" ");
|
|
54
|
+
}
|
|
55
|
+
function w(n, t = "DEFAULT", r = {}) {
|
|
56
|
+
const {
|
|
57
|
+
type: e = "text",
|
|
58
|
+
hover: a = !1,
|
|
59
|
+
focus: o = !1,
|
|
60
|
+
active: s = !1
|
|
61
|
+
} = r, i = u(n, t), c = [`${e}-${i.tailwind}`];
|
|
62
|
+
if (a) {
|
|
63
|
+
const f = u(
|
|
64
|
+
n,
|
|
65
|
+
t === "DEFAULT" ? "dark" : "DEFAULT"
|
|
66
|
+
);
|
|
67
|
+
c.push(`hover:${e}-${f.tailwind}`);
|
|
68
|
+
}
|
|
69
|
+
if (o && c.push(`focus:${e}-${i.tailwind}`), s) {
|
|
70
|
+
const f = u(n, "dark");
|
|
71
|
+
c.push(`active:${e}-${f.tailwind}`);
|
|
72
|
+
}
|
|
73
|
+
return c.join(" ");
|
|
74
|
+
}
|
|
75
|
+
function m(n, t, r = "bg") {
|
|
76
|
+
const e = l(n, t);
|
|
77
|
+
return `hover:${r}-${e.tailwind}`;
|
|
78
|
+
}
|
|
79
|
+
function x(n, t, r = "border") {
|
|
80
|
+
const e = l(n, t);
|
|
81
|
+
return `focus:${r}-${e.tailwind}`;
|
|
82
|
+
}
|
|
83
|
+
function T(n, t) {
|
|
84
|
+
return `focus:ring-${l(n, t).tailwind}`;
|
|
85
|
+
}
|
|
86
|
+
function y(n, t) {
|
|
87
|
+
return `rgba(${n.rgb}, ${t})`;
|
|
88
|
+
}
|
|
89
|
+
function h(n) {
|
|
90
|
+
const t = $(n);
|
|
91
|
+
return t ? 0.299 * t[0] + 0.587 * t[1] + 0.114 * t[2] > 128 : !0;
|
|
92
|
+
}
|
|
93
|
+
function F(n) {
|
|
94
|
+
return h(n) ? "#000000" : "#ffffff";
|
|
95
|
+
}
|
|
96
|
+
function $(n) {
|
|
97
|
+
const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);
|
|
98
|
+
return t ? [
|
|
99
|
+
parseInt(t[1], 16),
|
|
100
|
+
parseInt(t[2], 16),
|
|
101
|
+
parseInt(t[3], 16)
|
|
102
|
+
] : null;
|
|
103
|
+
}
|
|
104
|
+
function b(n, t, r = 0.5) {
|
|
105
|
+
const e = $(n), a = $(t);
|
|
106
|
+
if (!e || !a) return n;
|
|
107
|
+
const o = Math.round(e[0] * (1 - r) + a[0] * r), s = Math.round(e[1] * (1 - r) + a[1] * r), i = Math.round(e[2] * (1 - r) + a[2] * r);
|
|
108
|
+
return `#${((1 << 24) + (o << 16) + (s << 8) + i).toString(16).slice(1)}`;
|
|
109
|
+
}
|
|
110
|
+
function A(n, t) {
|
|
111
|
+
return b(n, "#ffffff", t / 100);
|
|
112
|
+
}
|
|
113
|
+
function L(n, t) {
|
|
114
|
+
return b(n, "#000000", t / 100);
|
|
115
|
+
}
|
|
116
|
+
export {
|
|
117
|
+
b as blendColors,
|
|
118
|
+
L as darken,
|
|
119
|
+
v as getColor,
|
|
120
|
+
C as getColorClass,
|
|
121
|
+
F as getContrastColor,
|
|
122
|
+
x as getFocusColorClass,
|
|
123
|
+
T as getFocusRingClass,
|
|
124
|
+
m as getHoverColorClass,
|
|
125
|
+
w as getSemanticColorClass,
|
|
126
|
+
p as getSemanticColorValue,
|
|
127
|
+
h as isLightColor,
|
|
128
|
+
A as lighten,
|
|
129
|
+
y as withOpacity
|
|
130
|
+
};
|
|
131
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../../src/ui/tokens/colors/utils.ts"],"sourcesContent":["/**\n * Design System - Color Utilities\n *\n * Helper functions for working with colors.\n *\n * @brand brasil-a-vera (default, overridable)\n * @version 1.0.0\n */\n\nimport type {\n ColorToken,\n ColorScale,\n PrimitiveColorName,\n SemanticColorName,\n GetColorOptions,\n GetColorClassOptions,\n} from \"./types\";\nimport { getPrimitiveColor } from \"./primitives\";\nimport { getSemanticColor } from \"./semantic\";\n\n/**\n * Get a primitive color value in the specified format\n */\nexport function getColor(\n name: PrimitiveColorName,\n scale: ColorScale,\n options: GetColorOptions = {},\n): string {\n const { format = \"hex\", opacity } = options;\n const token = getPrimitiveColor(name, scale);\n\n let value: string;\n switch (format) {\n case \"rgb\":\n value =\n opacity !== undefined\n ? `rgba(${token.rgb}, ${opacity})`\n : `rgb(${token.rgb})`;\n break;\n case \"hsl\":\n value =\n opacity !== undefined\n ? `hsla(${token.hsl}, ${opacity})`\n : `hsl(${token.hsl})`;\n break;\n case \"cssVar\":\n value = token.cssVar;\n break;\n case \"tailwind\":\n value = token.tailwind;\n break;\n case \"hex\":\n default:\n value = token.hex;\n }\n\n return value;\n}\n\n/**\n * Get a semantic color value in the specified format\n */\nexport function getSemanticColorValue(\n role: SemanticColorName,\n shade: \"light\" | \"DEFAULT\" | \"dark\" | \"contrast\" = \"DEFAULT\",\n options: GetColorOptions = {},\n): string {\n const { format = \"hex\", opacity } = options;\n const token = getSemanticColor(role, shade);\n\n let value: string;\n switch (format) {\n case \"rgb\":\n value =\n opacity !== undefined\n ? `rgba(${token.rgb}, ${opacity})`\n : `rgb(${token.rgb})`;\n break;\n case \"hsl\":\n value =\n opacity !== undefined\n ? `hsla(${token.hsl}, ${opacity})`\n : `hsl(${token.hsl})`;\n break;\n case \"cssVar\":\n value = token.cssVar;\n break;\n case \"tailwind\":\n value = token.tailwind;\n break;\n case \"hex\":\n default:\n value = token.hex;\n }\n\n return value;\n}\n\n/**\n * Get Tailwind color class for a primitive color\n */\nexport function getColorClass(\n name: PrimitiveColorName,\n scale: ColorScale,\n options: GetColorClassOptions = {},\n): string {\n const {\n type = \"text\",\n hover = false,\n focus = false,\n active = false,\n } = options;\n const token = getPrimitiveColor(name, scale);\n const base = `${type}-${token.tailwind}`;\n\n const classes: string[] = [base];\n\n if (hover) {\n classes.push(`hover:${type}-${token.tailwind}`);\n }\n if (focus) {\n classes.push(`focus:${type}-${token.tailwind}`);\n }\n if (active) {\n classes.push(`active:${type}-${token.tailwind}`);\n }\n\n return classes.join(\" \");\n}\n\n/**\n * Get Tailwind color class for a semantic color\n */\nexport function getSemanticColorClass(\n role: SemanticColorName,\n shade: \"light\" | \"DEFAULT\" | \"dark\" = \"DEFAULT\",\n options: GetColorClassOptions = {},\n): string {\n const {\n type = \"text\",\n hover = false,\n focus = false,\n active = false,\n } = options;\n const token = getSemanticColor(role, shade);\n const base = `${type}-${token.tailwind}`;\n\n const classes: string[] = [base];\n\n if (hover) {\n const hoverToken = getSemanticColor(\n role,\n shade === \"DEFAULT\" ? \"dark\" : \"DEFAULT\",\n );\n classes.push(`hover:${type}-${hoverToken.tailwind}`);\n }\n if (focus) {\n classes.push(`focus:${type}-${token.tailwind}`);\n }\n if (active) {\n const activeToken = getSemanticColor(role, \"dark\");\n classes.push(`active:${type}-${activeToken.tailwind}`);\n }\n\n return classes.join(\" \");\n}\n\n/**\n * Get hover color class\n */\nexport function getHoverColorClass(\n name: PrimitiveColorName,\n scale: ColorScale,\n type: \"text\" | \"bg\" | \"border\" = \"bg\",\n): string {\n const token = getPrimitiveColor(name, scale);\n return `hover:${type}-${token.tailwind}`;\n}\n\n/**\n * Get focus color class\n */\nexport function getFocusColorClass(\n name: PrimitiveColorName,\n scale: ColorScale,\n type: \"text\" | \"bg\" | \"border\" = \"border\",\n): string {\n const token = getPrimitiveColor(name, scale);\n return `focus:${type}-${token.tailwind}`;\n}\n\n/**\n * Get focus ring class for a color\n */\nexport function getFocusRingClass(\n name: PrimitiveColorName,\n scale: ColorScale,\n): string {\n const token = getPrimitiveColor(name, scale);\n return `focus:ring-${token.tailwind}`;\n}\n\n/**\n * Generate a color with opacity\n */\nexport function withOpacity(token: ColorToken, opacity: number): string {\n return `rgba(${token.rgb}, ${opacity})`;\n}\n\n/**\n * Check if a color is considered \"light\" (for contrast calculations)\n */\nexport function isLightColor(hex: string): boolean {\n const rgb = hexToRgbArray(hex);\n if (!rgb) return true;\n\n // Calculate relative luminance\n const luminance = 0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2];\n return luminance > 128;\n}\n\n/**\n * Get contrast color (black or white) for a given color\n */\nexport function getContrastColor(hex: string): \"#000000\" | \"#ffffff\" {\n return isLightColor(hex) ? \"#000000\" : \"#ffffff\";\n}\n\n/**\n * Convert hex to RGB array\n */\nfunction hexToRgbArray(hex: string): [number, number, number] | null {\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n if (!result) return null;\n return [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16),\n ];\n}\n\n/**\n * Blend two colors together\n */\nexport function blendColors(\n color1: string,\n color2: string,\n weight: number = 0.5,\n): string {\n const rgb1 = hexToRgbArray(color1);\n const rgb2 = hexToRgbArray(color2);\n\n if (!rgb1 || !rgb2) return color1;\n\n const r = Math.round(rgb1[0] * (1 - weight) + rgb2[0] * weight);\n const g = Math.round(rgb1[1] * (1 - weight) + rgb2[1] * weight);\n const b = Math.round(rgb1[2] * (1 - weight) + rgb2[2] * weight);\n\n return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;\n}\n\n/**\n * Lighten a color by a percentage\n */\nexport function lighten(hex: string, percent: number): string {\n return blendColors(hex, \"#ffffff\", percent / 100);\n}\n\n/**\n * Darken a color by a percentage\n */\nexport function darken(hex: string, percent: number): string {\n return blendColors(hex, \"#000000\", percent / 100);\n}\n"],"names":["getColor","name","scale","options","format","opacity","token","getPrimitiveColor","value","getSemanticColorValue","role","shade","getSemanticColor","getColorClass","type","hover","focus","active","classes","getSemanticColorClass","hoverToken","activeToken","getHoverColorClass","getFocusColorClass","getFocusRingClass","withOpacity","isLightColor","hex","rgb","hexToRgbArray","getContrastColor","result","blendColors","color1","color2","weight","rgb1","rgb2","r","g","b","lighten","percent","darken"],"mappings":"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"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
class i {
|
|
3
|
+
/**
|
|
4
|
+
* Create an opacity token
|
|
5
|
+
*/
|
|
6
|
+
static create(a) {
|
|
7
|
+
const c = a / 100, o = {
|
|
8
|
+
0: "Fully transparent",
|
|
9
|
+
5: "Very light overlay",
|
|
10
|
+
10: "Light overlay",
|
|
11
|
+
20: "Subtle overlay",
|
|
12
|
+
25: "Quarter opacity",
|
|
13
|
+
30: "Light background",
|
|
14
|
+
40: "Semi-transparent",
|
|
15
|
+
50: "Half opacity",
|
|
16
|
+
60: "Semi-opaque",
|
|
17
|
+
70: "Mostly opaque",
|
|
18
|
+
75: "Three-quarter opacity",
|
|
19
|
+
80: "High opacity",
|
|
20
|
+
90: "Very high opacity",
|
|
21
|
+
95: "Nearly opaque",
|
|
22
|
+
100: "Fully opaque"
|
|
23
|
+
};
|
|
24
|
+
return {
|
|
25
|
+
value: a,
|
|
26
|
+
decimal: c,
|
|
27
|
+
tailwind: {
|
|
28
|
+
0: "opacity-0",
|
|
29
|
+
5: "opacity-5",
|
|
30
|
+
10: "opacity-10",
|
|
31
|
+
20: "opacity-20",
|
|
32
|
+
25: "opacity-25",
|
|
33
|
+
30: "opacity-30",
|
|
34
|
+
40: "opacity-40",
|
|
35
|
+
50: "opacity-50",
|
|
36
|
+
60: "opacity-60",
|
|
37
|
+
70: "opacity-70",
|
|
38
|
+
75: "opacity-75",
|
|
39
|
+
80: "opacity-80",
|
|
40
|
+
90: "opacity-90",
|
|
41
|
+
95: "opacity-95",
|
|
42
|
+
100: "opacity-100"
|
|
43
|
+
}[a],
|
|
44
|
+
description: o[a]
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
function e(t) {
|
|
49
|
+
return i.create(t);
|
|
50
|
+
}
|
|
51
|
+
function y(t) {
|
|
52
|
+
return i.create(t).tailwind;
|
|
53
|
+
}
|
|
54
|
+
export {
|
|
55
|
+
i as OpacityTokenFactory,
|
|
56
|
+
e as getOpacity,
|
|
57
|
+
y as getOpacityClass
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=opacity.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"opacity.js","sources":["../../../../src/ui/tokens/opacity.ts"],"sourcesContent":["/**\n * Opacity Tokens\n *\n * Centralized opacity system for consistent transparency values.\n * Uses Factory Pattern for type-safe token creation.\n */\n\nexport type OpacityValue =\n | 0\n | 5\n | 10\n | 20\n | 25\n | 30\n | 40\n | 50\n | 60\n | 70\n | 75\n | 80\n | 90\n | 95\n | 100;\n\nexport interface OpacityToken {\n value: OpacityValue;\n decimal: number;\n tailwind: string;\n description: string;\n}\n\n/**\n * Opacity Token Factory\n * Creates opacity tokens with consistent values\n */\nexport class OpacityTokenFactory {\n /**\n * Create an opacity token\n */\n static create(value: OpacityValue): OpacityToken {\n const decimal = value / 100;\n\n const descriptionMap: Record<OpacityValue, string> = {\n 0: \"Fully transparent\",\n 5: \"Very light overlay\",\n 10: \"Light overlay\",\n 20: \"Subtle overlay\",\n 25: \"Quarter opacity\",\n 30: \"Light background\",\n 40: \"Semi-transparent\",\n 50: \"Half opacity\",\n 60: \"Semi-opaque\",\n 70: \"Mostly opaque\",\n 75: \"Three-quarter opacity\",\n 80: \"High opacity\",\n 90: \"Very high opacity\",\n 95: \"Nearly opaque\",\n 100: \"Fully opaque\",\n };\n\n // Map to Tailwind classes\n const tailwindMap: Record<OpacityValue, string> = {\n 0: \"opacity-0\",\n 5: \"opacity-5\",\n 10: \"opacity-10\",\n 20: \"opacity-20\",\n 25: \"opacity-25\",\n 30: \"opacity-30\",\n 40: \"opacity-40\",\n 50: \"opacity-50\",\n 60: \"opacity-60\",\n 70: \"opacity-70\",\n 75: \"opacity-75\",\n 80: \"opacity-80\",\n 90: \"opacity-90\",\n 95: \"opacity-95\",\n 100: \"opacity-100\",\n };\n\n return {\n value,\n decimal,\n tailwind: tailwindMap[value],\n description: descriptionMap[value],\n };\n }\n}\n\n/**\n * Pre-defined opacity tokens\n */\nexport const OPACITY_TOKENS = {\n transparent: OpacityTokenFactory.create(0),\n \"5\": OpacityTokenFactory.create(5),\n \"10\": OpacityTokenFactory.create(10),\n \"20\": OpacityTokenFactory.create(20),\n \"25\": OpacityTokenFactory.create(25),\n \"30\": OpacityTokenFactory.create(30),\n \"40\": OpacityTokenFactory.create(40),\n \"50\": OpacityTokenFactory.create(50),\n \"60\": OpacityTokenFactory.create(60),\n \"70\": OpacityTokenFactory.create(70),\n \"75\": OpacityTokenFactory.create(75),\n \"80\": OpacityTokenFactory.create(80),\n \"90\": OpacityTokenFactory.create(90),\n \"95\": OpacityTokenFactory.create(95),\n opaque: OpacityTokenFactory.create(100),\n} as const;\n\n/**\n * Helper function to get opacity token\n */\nexport function getOpacity(value: OpacityValue): OpacityToken {\n return OpacityTokenFactory.create(value);\n}\n\n/**\n * Helper function to get opacity as Tailwind class\n */\nexport function getOpacityClass(value: OpacityValue): string {\n return OpacityTokenFactory.create(value).tailwind;\n}\n"],"names":["OpacityTokenFactory","value","decimal","descriptionMap","getOpacity","getOpacityClass"],"mappings":";AAmCO,MAAMA,EAAoB;AAAA;AAAA;AAAA;AAAA,EAI/B,OAAO,OAAOC,GAAmC;AAC/C,UAAMC,IAAUD,IAAQ,KAElBE,IAA+C;AAAA,MACnD,GAAG;AAAA,MACH,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,IAAA;AAsBP,WAAO;AAAA,MACL,OAAAF;AAAA,MACA,SAAAC;AAAA,MACA,UArBgD;AAAA,QAChD,GAAG;AAAA,QACH,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,KAAK;AAAA,MAAA,EAMiBD,CAAK;AAAA,MAC3B,aAAaE,EAAeF,CAAK;AAAA,IAAA;AAAA,EAErC;AACF;AA0BO,SAASG,EAAWH,GAAmC;AAC5D,SAAOD,EAAoB,OAAOC,CAAK;AACzC;AAKO,SAASI,EAAgBJ,GAA6B;AAC3D,SAAOD,EAAoB,OAAOC,CAAK,EAAE;AAC3C;"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
class e {
|
|
3
|
+
/**
|
|
4
|
+
* Create a radius token
|
|
5
|
+
*/
|
|
6
|
+
static create(n) {
|
|
7
|
+
const r = {
|
|
8
|
+
none: {
|
|
9
|
+
px: 0,
|
|
10
|
+
tailwind: "rounded-none",
|
|
11
|
+
description: "No border radius"
|
|
12
|
+
},
|
|
13
|
+
sm: {
|
|
14
|
+
px: 2,
|
|
15
|
+
tailwind: "rounded-sm",
|
|
16
|
+
description: "Small radius (2px) for subtle rounding"
|
|
17
|
+
},
|
|
18
|
+
md: {
|
|
19
|
+
px: 6,
|
|
20
|
+
tailwind: "rounded-md",
|
|
21
|
+
description: "Medium radius (6px) for buttons and inputs"
|
|
22
|
+
},
|
|
23
|
+
lg: {
|
|
24
|
+
px: 8,
|
|
25
|
+
tailwind: "rounded-lg",
|
|
26
|
+
description: "Large radius (8px) for cards and containers"
|
|
27
|
+
},
|
|
28
|
+
xl: {
|
|
29
|
+
px: 12,
|
|
30
|
+
tailwind: "rounded-xl",
|
|
31
|
+
description: "Extra large radius (12px) for prominent elements"
|
|
32
|
+
},
|
|
33
|
+
"2xl": {
|
|
34
|
+
px: 16,
|
|
35
|
+
tailwind: "rounded-2xl",
|
|
36
|
+
description: "2X large radius (16px) for large containers"
|
|
37
|
+
},
|
|
38
|
+
"3xl": {
|
|
39
|
+
px: 24,
|
|
40
|
+
tailwind: "rounded-3xl",
|
|
41
|
+
description: "3X large radius (24px) for very large containers"
|
|
42
|
+
},
|
|
43
|
+
full: {
|
|
44
|
+
px: 9999,
|
|
45
|
+
tailwind: "rounded-full",
|
|
46
|
+
description: "Full radius for circular elements"
|
|
47
|
+
}
|
|
48
|
+
}[n];
|
|
49
|
+
return {
|
|
50
|
+
value: r.px,
|
|
51
|
+
rem: `${r.px / 16}rem`,
|
|
52
|
+
px: `${r.px}px`,
|
|
53
|
+
tailwind: r.tailwind,
|
|
54
|
+
description: r.description
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
const d = {
|
|
59
|
+
none: e.create("none"),
|
|
60
|
+
sm: e.create("sm"),
|
|
61
|
+
md: e.create("md"),
|
|
62
|
+
lg: e.create("lg"),
|
|
63
|
+
xl: e.create("xl"),
|
|
64
|
+
"2xl": e.create("2xl"),
|
|
65
|
+
"3xl": e.create("3xl"),
|
|
66
|
+
full: e.create("full")
|
|
67
|
+
};
|
|
68
|
+
function t(i) {
|
|
69
|
+
return d[i].tailwind;
|
|
70
|
+
}
|
|
71
|
+
export {
|
|
72
|
+
d as RADIUS_TOKENS,
|
|
73
|
+
e as RadiusTokenFactory,
|
|
74
|
+
t as getRadiusClass
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=radius.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radius.js","sources":["../../../../src/ui/tokens/radius.ts"],"sourcesContent":["/**\n * Border Radius Tokens\n *\n * Centralized border radius system for consistent rounded corners.\n * Uses Factory Pattern for type-safe token creation.\n */\n\nexport type RadiusSize =\n | \"none\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"2xl\"\n | \"3xl\"\n | \"full\";\n\nexport interface RadiusToken {\n value: number;\n rem: string;\n px: string;\n tailwind: string;\n description: string;\n}\n\n/**\n * Radius Token Factory\n * Creates radius tokens with consistent values\n */\nexport class RadiusTokenFactory {\n /**\n * Create a radius token\n */\n static create(size: RadiusSize): RadiusToken {\n const radiusMap: Record<\n RadiusSize,\n { px: number; tailwind: string; description: string }\n > = {\n none: {\n px: 0,\n tailwind: \"rounded-none\",\n description: \"No border radius\",\n },\n sm: {\n px: 2,\n tailwind: \"rounded-sm\",\n description: \"Small radius (2px) for subtle rounding\",\n },\n md: {\n px: 6,\n tailwind: \"rounded-md\",\n description: \"Medium radius (6px) for buttons and inputs\",\n },\n lg: {\n px: 8,\n tailwind: \"rounded-lg\",\n description: \"Large radius (8px) for cards and containers\",\n },\n xl: {\n px: 12,\n tailwind: \"rounded-xl\",\n description: \"Extra large radius (12px) for prominent elements\",\n },\n \"2xl\": {\n px: 16,\n tailwind: \"rounded-2xl\",\n description: \"2X large radius (16px) for large containers\",\n },\n \"3xl\": {\n px: 24,\n tailwind: \"rounded-3xl\",\n description: \"3X large radius (24px) for very large containers\",\n },\n full: {\n px: 9999,\n tailwind: \"rounded-full\",\n description: \"Full radius for circular elements\",\n },\n };\n\n const config = radiusMap[size];\n return {\n value: config.px,\n rem: `${config.px / 16}rem`,\n px: `${config.px}px`,\n tailwind: config.tailwind,\n description: config.description,\n };\n }\n}\n\n/**\n * Pre-defined radius tokens\n */\nexport const RADIUS_TOKENS = {\n none: RadiusTokenFactory.create(\"none\"),\n sm: RadiusTokenFactory.create(\"sm\"),\n md: RadiusTokenFactory.create(\"md\"),\n lg: RadiusTokenFactory.create(\"lg\"),\n xl: RadiusTokenFactory.create(\"xl\"),\n \"2xl\": RadiusTokenFactory.create(\"2xl\"),\n \"3xl\": RadiusTokenFactory.create(\"3xl\"),\n full: RadiusTokenFactory.create(\"full\"),\n} as const;\n\n/**\n * Helper function to get radius token\n */\nexport function getRadius(size: keyof typeof RADIUS_TOKENS): RadiusToken {\n return RADIUS_TOKENS[size];\n}\n\n/**\n * Helper function to get radius as Tailwind class\n */\nexport function getRadiusClass(size: keyof typeof RADIUS_TOKENS): string {\n return RADIUS_TOKENS[size].tailwind;\n}\n"],"names":["RadiusTokenFactory","size","config","RADIUS_TOKENS","getRadiusClass"],"mappings":";AA6BO,MAAMA,EAAmB;AAAA;AAAA;AAAA;AAAA,EAI9B,OAAO,OAAOC,GAA+B;AA+C3C,UAAMC,IA3CF;AAAA,MACF,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,IACf,EAGuBD,CAAI;AAC7B,WAAO;AAAA,MACL,OAAOC,EAAO;AAAA,MACd,KAAK,GAAGA,EAAO,KAAK,EAAE;AAAA,MACtB,IAAI,GAAGA,EAAO,EAAE;AAAA,MAChB,UAAUA,EAAO;AAAA,MACjB,aAAaA,EAAO;AAAA,IAAA;AAAA,EAExB;AACF;AAKO,MAAMC,IAAgB;AAAA,EAC3B,MAAMH,EAAmB,OAAO,MAAM;AAAA,EACtC,IAAIA,EAAmB,OAAO,IAAI;AAAA,EAClC,IAAIA,EAAmB,OAAO,IAAI;AAAA,EAClC,IAAIA,EAAmB,OAAO,IAAI;AAAA,EAClC,IAAIA,EAAmB,OAAO,IAAI;AAAA,EAClC,OAAOA,EAAmB,OAAO,KAAK;AAAA,EACtC,OAAOA,EAAmB,OAAO,KAAK;AAAA,EACtC,MAAMA,EAAmB,OAAO,MAAM;AACxC;AAYO,SAASI,EAAeH,GAA0C;AACvE,SAAOE,EAAcF,CAAI,EAAE;AAC7B;"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
class e {
|
|
3
|
+
/**
|
|
4
|
+
* Create a shadow token
|
|
5
|
+
*/
|
|
6
|
+
static create(n) {
|
|
7
|
+
return {
|
|
8
|
+
none: {
|
|
9
|
+
value: "none",
|
|
10
|
+
tailwind: "shadow-none",
|
|
11
|
+
description: "No shadow"
|
|
12
|
+
},
|
|
13
|
+
sm: {
|
|
14
|
+
value: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
15
|
+
tailwind: "shadow-sm",
|
|
16
|
+
description: "Small shadow for subtle elevation"
|
|
17
|
+
},
|
|
18
|
+
md: {
|
|
19
|
+
value: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
20
|
+
tailwind: "shadow-md",
|
|
21
|
+
description: "Medium shadow for cards and elevated elements"
|
|
22
|
+
},
|
|
23
|
+
lg: {
|
|
24
|
+
value: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
25
|
+
tailwind: "shadow-lg",
|
|
26
|
+
description: "Large shadow for modals and dropdowns"
|
|
27
|
+
},
|
|
28
|
+
xl: {
|
|
29
|
+
value: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
30
|
+
tailwind: "shadow-xl",
|
|
31
|
+
description: "Extra large shadow for prominent modals"
|
|
32
|
+
},
|
|
33
|
+
"2xl": {
|
|
34
|
+
value: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
|
35
|
+
tailwind: "shadow-2xl",
|
|
36
|
+
description: "2X large shadow for maximum elevation"
|
|
37
|
+
},
|
|
38
|
+
inner: {
|
|
39
|
+
value: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
|
|
40
|
+
tailwind: "shadow-inner",
|
|
41
|
+
description: "Inner shadow for inset elements"
|
|
42
|
+
}
|
|
43
|
+
}[n];
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
const o = {
|
|
47
|
+
none: e.create("none"),
|
|
48
|
+
sm: e.create("sm"),
|
|
49
|
+
md: e.create("md"),
|
|
50
|
+
lg: e.create("lg"),
|
|
51
|
+
xl: e.create("xl"),
|
|
52
|
+
"2xl": e.create("2xl"),
|
|
53
|
+
inner: e.create("inner")
|
|
54
|
+
};
|
|
55
|
+
function d(a) {
|
|
56
|
+
return o[a].tailwind;
|
|
57
|
+
}
|
|
58
|
+
export {
|
|
59
|
+
o as SHADOW_TOKENS,
|
|
60
|
+
e as ShadowTokenFactory,
|
|
61
|
+
d as getShadowClass
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=shadows.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shadows.js","sources":["../../../../src/ui/tokens/shadows.ts"],"sourcesContent":["/**\n * Shadow Tokens\n *\n * Centralized shadow system for consistent elevation and depth.\n * Uses Factory Pattern for type-safe token creation.\n */\n\nexport type ShadowSize = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"inner\";\n\nexport interface ShadowToken {\n value: string;\n tailwind: string;\n description: string;\n}\n\n/**\n * Shadow Token Factory\n * Creates shadow tokens with consistent values\n */\nexport class ShadowTokenFactory {\n /**\n * Create a shadow token\n */\n static create(size: ShadowSize): ShadowToken {\n const shadowMap: Record<\n ShadowSize,\n { value: string; tailwind: string; description: string }\n > = {\n none: {\n value: \"none\",\n tailwind: \"shadow-none\",\n description: \"No shadow\",\n },\n sm: {\n value: \"0 1px 2px 0 rgb(0 0 0 / 0.05)\",\n tailwind: \"shadow-sm\",\n description: \"Small shadow for subtle elevation\",\n },\n md: {\n value: \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n tailwind: \"shadow-md\",\n description: \"Medium shadow for cards and elevated elements\",\n },\n lg: {\n value:\n \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\",\n tailwind: \"shadow-lg\",\n description: \"Large shadow for modals and dropdowns\",\n },\n xl: {\n value:\n \"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)\",\n tailwind: \"shadow-xl\",\n description: \"Extra large shadow for prominent modals\",\n },\n \"2xl\": {\n value:\n \"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)\",\n tailwind: \"shadow-2xl\",\n description: \"2X large shadow for maximum elevation\",\n },\n inner: {\n value: \"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)\",\n tailwind: \"shadow-inner\",\n description: \"Inner shadow for inset elements\",\n },\n };\n\n return shadowMap[size];\n }\n}\n\n/**\n * Pre-defined shadow tokens\n */\nexport const SHADOW_TOKENS = {\n none: ShadowTokenFactory.create(\"none\"),\n sm: ShadowTokenFactory.create(\"sm\"),\n md: ShadowTokenFactory.create(\"md\"),\n lg: ShadowTokenFactory.create(\"lg\"),\n xl: ShadowTokenFactory.create(\"xl\"),\n \"2xl\": ShadowTokenFactory.create(\"2xl\"),\n inner: ShadowTokenFactory.create(\"inner\"),\n} as const;\n\n/**\n * Helper function to get shadow token\n */\nexport function getShadow(size: keyof typeof SHADOW_TOKENS): ShadowToken {\n return SHADOW_TOKENS[size];\n}\n\n/**\n * Helper function to get shadow as Tailwind class\n */\nexport function getShadowClass(size: keyof typeof SHADOW_TOKENS): string {\n return SHADOW_TOKENS[size].tailwind;\n}\n"],"names":["ShadowTokenFactory","size","SHADOW_TOKENS","getShadowClass"],"mappings":";AAmBO,MAAMA,EAAmB;AAAA;AAAA;AAAA;AAAA,EAI9B,OAAO,OAAOC,GAA+B;AA6C3C,WAzCI;AAAA,MACF,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,IAAI;AAAA,QACF,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,IAAI;AAAA,QACF,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,IAAI;AAAA,QACF,OACE;AAAA,QACF,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,IAAI;AAAA,QACF,OACE;AAAA,QACF,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,OAAO;AAAA,QACL,OACE;AAAA,QACF,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,MAEf,OAAO;AAAA,QACL,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa;AAAA,MAAA;AAAA,IACf,EAGeA,CAAI;AAAA,EACvB;AACF;AAKO,MAAMC,IAAgB;AAAA,EAC3B,MAAMF,EAAmB,OAAO,MAAM;AAAA,EACtC,IAAIA,EAAmB,OAAO,IAAI;AAAA,EAClC,IAAIA,EAAmB,OAAO,IAAI;AAAA,EAClC,IAAIA,EAAmB,OAAO,IAAI;AAAA,EAClC,IAAIA,EAAmB,OAAO,IAAI;AAAA,EAClC,OAAOA,EAAmB,OAAO,KAAK;AAAA,EACtC,OAAOA,EAAmB,OAAO,OAAO;AAC1C;AAYO,SAASG,EAAeF,GAA0C;AACvE,SAAOC,EAAcD,CAAI,EAAE;AAC7B;"}
|