From ce8c247dfea37977b9673b0f827a8c8c113b032a Mon Sep 17 00:00:00 2001 From: Eelco Wiersma Date: Fri, 7 Feb 2025 15:48:39 +0000 Subject: [PATCH] feat: theme improvements --- .changeset/gorgeous-olives-add.md | 5 ++ .changeset/grumpy-yaks-divide.md | 5 ++ .changeset/healthy-bats-develop.md | 5 ++ package.json | 2 +- packages/pro | 2 +- packages/saas-ui-clerk/package.json | 2 +- .../breadcrumb/breadcrumb.recipe.ts} | 0 .../src/components/button/button.recipe.ts | 12 +-- .../card/card.recipe.ts} | 0 .../components/data-list/data-list.recipe.ts | 2 +- .../input-group/input-group.stories.tsx | 20 +++++ .../src/components/input/index.ts | 12 +++ .../input/input-addon.recipe.ts} | 10 +-- .../input/input.recipe.ts} | 10 +-- .../src/components/input/input.stories.tsx | 54 ++++++++++++ .../link/link.recipe.ts} | 0 .../loading-overlay/loading-overlay.tsx | 24 +++--- .../src/components/menu/menu.recipe.ts | 14 +++- .../src/components/menu/menu.stories.tsx | 19 ++++- .../number-input/number-input.recipe.ts} | 4 +- .../number-input/number-input.stories.tsx | 49 +++++++++++ .../password-input/password-input.stories.tsx | 22 +++++ .../pin-input/pin-input.recipe.ts} | 4 +- .../pin-input/pin-input.stories.tsx | 10 +++ .../src/components/progress-circle/index.ts | 1 + .../progress-circle.recipe.ts} | 0 .../src/components/progress/index.ts | 1 + .../progress/progress.recipe.ts} | 0 .../segmented-control/segment-group.recipe.ts | 7 +- .../select/select.recipe.ts} | 0 .../src/components/select/select.stories.tsx | 45 ++++++++++ ...m.recipe.ts => sidebar-nav-item.recipe.ts} | 10 +-- .../sidebar/sidebar-nav-item.stories.tsx | 82 +++++++++++++++++++ .../spinner/spinner.recipe.ts} | 0 .../src/components/textarea/index.ts | 3 + .../textarea/textarea.recipe.ts} | 10 +-- packages/saas-ui-react/src/index.ts | 3 + .../saas-ui-react/src/theme/conditions.ts | 2 + packages/saas-ui-react/src/theme/recipes.ts | 10 +-- .../src/theme/recipes/chakra/native-select.ts | 2 +- .../saas-ui-react/src/theme/slot-recipes.ts | 16 ++-- .../saas-ui-react/src/theme/tokens/radius.ts | 21 +---- packages/storybook/package.json | 2 +- tooling/storybook-addon/package.json | 2 +- yarn.lock | 69 ++++++++-------- 45 files changed, 451 insertions(+), 122 deletions(-) create mode 100644 .changeset/gorgeous-olives-add.md create mode 100644 .changeset/grumpy-yaks-divide.md create mode 100644 .changeset/healthy-bats-develop.md rename packages/saas-ui-react/src/{theme/recipes/chakra/breadcrumb.ts => components/breadcrumb/breadcrumb.recipe.ts} (100%) rename packages/saas-ui-react/src/{theme/recipes/chakra/card.ts => components/card/card.recipe.ts} (100%) create mode 100644 packages/saas-ui-react/src/components/input-group/input-group.stories.tsx create mode 100644 packages/saas-ui-react/src/components/input/index.ts rename packages/saas-ui-react/src/{theme/recipes/chakra/input-addon.ts => components/input/input-addon.recipe.ts} (81%) rename packages/saas-ui-react/src/{theme/recipes/chakra/input.ts => components/input/input.recipe.ts} (91%) create mode 100644 packages/saas-ui-react/src/components/input/input.stories.tsx rename packages/saas-ui-react/src/{theme/recipes/chakra/link.ts => components/link/link.recipe.ts} (100%) rename packages/saas-ui-react/src/{theme/recipes/chakra/number-input.ts => components/number-input/number-input.recipe.ts} (96%) create mode 100644 packages/saas-ui-react/src/components/number-input/number-input.stories.tsx create mode 100644 packages/saas-ui-react/src/components/password-input/password-input.stories.tsx rename packages/saas-ui-react/src/{theme/recipes/chakra/pin-input.ts => components/pin-input/pin-input.recipe.ts} (87%) create mode 100644 packages/saas-ui-react/src/components/pin-input/pin-input.stories.tsx create mode 100644 packages/saas-ui-react/src/components/progress-circle/index.ts rename packages/saas-ui-react/src/{theme/recipes/chakra/progress-circle.ts => components/progress-circle/progress-circle.recipe.ts} (100%) create mode 100644 packages/saas-ui-react/src/components/progress/index.ts rename packages/saas-ui-react/src/{theme/recipes/chakra/progress.ts => components/progress/progress.recipe.ts} (100%) rename packages/saas-ui-react/src/{theme/recipes/chakra/select.ts => components/select/select.recipe.ts} (100%) create mode 100644 packages/saas-ui-react/src/components/select/select.stories.tsx rename packages/saas-ui-react/src/components/sidebar/{sidebar-item.recipe.ts => sidebar-nav-item.recipe.ts} (95%) create mode 100644 packages/saas-ui-react/src/components/sidebar/sidebar-nav-item.stories.tsx rename packages/saas-ui-react/src/{theme/recipes/chakra/spinner.ts => components/spinner/spinner.recipe.ts} (100%) create mode 100644 packages/saas-ui-react/src/components/textarea/index.ts rename packages/saas-ui-react/src/{theme/recipes/chakra/textarea.ts => components/textarea/textarea.recipe.ts} (91%) diff --git a/.changeset/gorgeous-olives-add.md b/.changeset/gorgeous-olives-add.md new file mode 100644 index 000000000..b9548b37d --- /dev/null +++ b/.changeset/gorgeous-olives-add.md @@ -0,0 +1,5 @@ +--- +'@saas-ui/react': patch +--- + +Inputs now use semanti radii tokens diff --git a/.changeset/grumpy-yaks-divide.md b/.changeset/grumpy-yaks-divide.md new file mode 100644 index 000000000..2f6221442 --- /dev/null +++ b/.changeset/grumpy-yaks-divide.md @@ -0,0 +1,5 @@ +--- +'@saas-ui/react': patch +--- + +SegmentGroup now use semantic radii tokens diff --git a/.changeset/healthy-bats-develop.md b/.changeset/healthy-bats-develop.md new file mode 100644 index 000000000..b62aebf50 --- /dev/null +++ b/.changeset/healthy-bats-develop.md @@ -0,0 +1,5 @@ +--- +'@saas-ui/react': patch +--- + +Forward ref to LoadingOverlay.Root diff --git a/package.json b/package.json index 34cd71228..c68de2709 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "tooling/storybook-addon" ], "devDependencies": { - "@chakra-ui/cli": "^3.5.1", + "@chakra-ui/cli": "^3.7.0", "@changesets/cli": "^2.27.9", "@manypkg/get-packages": "^2.2.2", "@trivago/prettier-plugin-sort-imports": "^4.3.0", diff --git a/packages/pro b/packages/pro index 498aa76bf..5112e6785 160000 --- a/packages/pro +++ b/packages/pro @@ -1 +1 @@ -Subproject commit 498aa76bf60e5a76efbfa2e4b83a2f5c806b5d87 +Subproject commit 5112e67852a289f7dc2c8f7eb4292a4e40393a01 diff --git a/packages/saas-ui-clerk/package.json b/packages/saas-ui-clerk/package.json index 5a54a217a..8dc170d27 100644 --- a/packages/saas-ui-clerk/package.json +++ b/packages/saas-ui-clerk/package.json @@ -53,7 +53,7 @@ "url": "https://storybook.saas-ui.dev" }, "dependencies": { - "@clerk/types": "^4.34.0", + "@clerk/types": "^4.45.0", "@saas-ui/auth-provider": "workspace:*" }, "peerDependencies": { diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/breadcrumb.ts b/packages/saas-ui-react/src/components/breadcrumb/breadcrumb.recipe.ts similarity index 100% rename from packages/saas-ui-react/src/theme/recipes/chakra/breadcrumb.ts rename to packages/saas-ui-react/src/components/breadcrumb/breadcrumb.recipe.ts diff --git a/packages/saas-ui-react/src/components/button/button.recipe.ts b/packages/saas-ui-react/src/components/button/button.recipe.ts index bd7c79862..6b5547c76 100644 --- a/packages/saas-ui-react/src/components/button/button.recipe.ts +++ b/packages/saas-ui-react/src/components/button/button.recipe.ts @@ -82,7 +82,7 @@ export const buttonRecipe = defineRecipe({ _hover: { bg: 'colorPalette.solid/90', }, - _expanded: { + _popupExpanded: { bg: 'colorPalette.solid/90', }, }, @@ -93,7 +93,7 @@ export const buttonRecipe = defineRecipe({ _hover: { bg: 'colorPalette.subtle', }, - _expanded: { + _popupExpanded: { bg: 'colorPalette.subtle', }, }, @@ -126,7 +126,7 @@ export const buttonRecipe = defineRecipe({ 'linear-gradient(180deg, rgba(255,255,255,0.8) 40%, rgba(0,0,0,0.6))', }, }, - _expanded: { + _popupExpanded: { bg: 'colorPalette.solid', _after: { background: @@ -145,7 +145,7 @@ export const buttonRecipe = defineRecipe({ bg: 'colorPalette.muted', borderColor: 'colorPalette.emphasized', }, - _expanded: { + _popupExpanded: { bg: 'colorPalette.muted', borderColor: 'colorPalette.emphasized', }, @@ -158,7 +158,7 @@ export const buttonRecipe = defineRecipe({ _hover: { bg: 'colorPalette.muted', }, - _expanded: { + _popupExpanded: { bg: 'colorPalette.muted', }, }, @@ -168,7 +168,7 @@ export const buttonRecipe = defineRecipe({ _hover: { bg: 'colorPalette.subtle', }, - _expanded: { + _popupExpanded: { bg: 'colorPalette.subtle', }, }, diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/card.ts b/packages/saas-ui-react/src/components/card/card.recipe.ts similarity index 100% rename from packages/saas-ui-react/src/theme/recipes/chakra/card.ts rename to packages/saas-ui-react/src/components/card/card.recipe.ts diff --git a/packages/saas-ui-react/src/components/data-list/data-list.recipe.ts b/packages/saas-ui-react/src/components/data-list/data-list.recipe.ts index c01690e4b..89fd4f054 100644 --- a/packages/saas-ui-react/src/components/data-list/data-list.recipe.ts +++ b/packages/saas-ui-react/src/components/data-list/data-list.recipe.ts @@ -75,6 +75,6 @@ export const dataListSlotRecipe = defineSlotRecipe({ defaultVariants: { size: 'md', - orientation: 'vertical', + orientation: 'horizontal', }, }) diff --git a/packages/saas-ui-react/src/components/input-group/input-group.stories.tsx b/packages/saas-ui-react/src/components/input-group/input-group.stories.tsx new file mode 100644 index 000000000..1f3a6cc57 --- /dev/null +++ b/packages/saas-ui-react/src/components/input-group/input-group.stories.tsx @@ -0,0 +1,20 @@ +import { Text } from '@chakra-ui/react' + +import { Input } from '../input' +import { InputGroup } from './input-group' + +export default { + title: 'Components/InputGroup', + component: InputGroup, +} + +export const Basic = () => { + return ( + https://} + endElement={.com} + > + + + ) +} diff --git a/packages/saas-ui-react/src/components/input/index.ts b/packages/saas-ui-react/src/components/input/index.ts new file mode 100644 index 000000000..e130b4aff --- /dev/null +++ b/packages/saas-ui-react/src/components/input/index.ts @@ -0,0 +1,12 @@ +export { + Input, + InputAddon, + InputElement, + InputPropsProvider, +} from '@chakra-ui/react/input' + +export type { + InputProps, + InputAddonProps, + InputElementProps, +} from '@chakra-ui/react/input' diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/input-addon.ts b/packages/saas-ui-react/src/components/input/input-addon.recipe.ts similarity index 81% rename from packages/saas-ui-react/src/theme/recipes/chakra/input-addon.ts rename to packages/saas-ui-react/src/components/input/input-addon.recipe.ts index 61bf24c88..10a097793 100644 --- a/packages/saas-ui-react/src/theme/recipes/chakra/input-addon.ts +++ b/packages/saas-ui-react/src/components/input/input-addon.recipe.ts @@ -1,12 +1,13 @@ import { defineRecipe } from '@chakra-ui/react' -import { inputRecipe } from './input' +import { inputRecipe } from './input.recipe' export const inputAddonRecipe = defineRecipe({ className: 'chakra-input-addon', base: { flex: '0 0 auto', width: 'auto', + height: 'var(--input-height)', display: 'flex', alignItems: 'center', whiteSpace: 'nowrap', @@ -16,7 +17,7 @@ export const inputAddonRecipe = defineRecipe({ variant: { outline: { border: '1px solid', - borderColor: { _light: 'border', _dark: 'whiteAlpha.50' }, + borderColor: 'border', bg: 'bg.muted', }, subtle: { @@ -33,8 +34,5 @@ export const inputAddonRecipe = defineRecipe({ }, }, }, - defaultVariants: { - size: 'md', - variant: 'outline', - }, + defaultVariants: inputRecipe.defaultVariants, }) diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/input.ts b/packages/saas-ui-react/src/components/input/input.recipe.ts similarity index 91% rename from packages/saas-ui-react/src/theme/recipes/chakra/input.ts rename to packages/saas-ui-react/src/components/input/input.recipe.ts index 1c5966b4e..255653f18 100644 --- a/packages/saas-ui-react/src/theme/recipes/chakra/input.ts +++ b/packages/saas-ui-react/src/components/input/input.recipe.ts @@ -25,31 +25,31 @@ export const inputRecipe = defineRecipe({ variants: { size: { xs: { - borderRadius: 'sm', + borderRadius: 'control.sm', textStyle: 'xs', px: '2', '--input-height': 'sizes.6', }, sm: { - borderRadius: 'sm', + borderRadius: 'control.md', textStyle: 'sm', px: '2.5', '--input-height': 'sizes.7', }, md: { - borderRadius: 'md', + borderRadius: 'control.md', textStyle: 'sm', px: '3', '--input-height': 'sizes.8', }, lg: { - borderRadius: 'lg', + borderRadius: 'control.lg', textStyle: 'md', px: '4.5', '--input-height': 'sizes.10', }, xl: { - borderRadius: 'lg', + borderRadius: 'control.lg', textStyle: 'md', px: '6', '--input-height': 'sizes.12', diff --git a/packages/saas-ui-react/src/components/input/input.stories.tsx b/packages/saas-ui-react/src/components/input/input.stories.tsx new file mode 100644 index 000000000..f89f29de9 --- /dev/null +++ b/packages/saas-ui-react/src/components/input/input.stories.tsx @@ -0,0 +1,54 @@ +import { Group, Stack } from '@chakra-ui/react' + +import { Input, InputAddon } from './index' + +export default { + title: 'Components/Input', + component: Input, +} + +export const Basic = () => { + return +} + +export const Sizes = () => { + return ( + + + + + + + + + + + + ) +} + +export const Variants = () => { + return ( + + + + + + + + ) +} + +export const WithAddon = () => ( + + + +31 + + + + + + acme.com + + +) diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/link.ts b/packages/saas-ui-react/src/components/link/link.recipe.ts similarity index 100% rename from packages/saas-ui-react/src/theme/recipes/chakra/link.ts rename to packages/saas-ui-react/src/components/link/link.recipe.ts diff --git a/packages/saas-ui-react/src/components/loading-overlay/loading-overlay.tsx b/packages/saas-ui-react/src/components/loading-overlay/loading-overlay.tsx index a47920e35..7dfa0cf31 100644 --- a/packages/saas-ui-react/src/components/loading-overlay/loading-overlay.tsx +++ b/packages/saas-ui-react/src/components/loading-overlay/loading-overlay.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { forwardRef } from 'react' import { Presence, @@ -22,17 +22,21 @@ interface LoadingOverlayProps loading?: boolean } -const LoadingOverlay: React.FC = (props) => { - const { children, loading = true, ...rest } = props +const LoadingOverlay = forwardRef( + (props, ref) => { + const { children, loading = true, ...rest } = props - const [presenceProps, rootProps] = splitPresenceProps(rest) + const [presenceProps, rootProps] = splitPresenceProps(rest) - return ( - - {children} - - ) -} + return ( + + + {children} + + + ) + }, +) const LoadingOverlayRoot = withProvider( LoadingOverlay, diff --git a/packages/saas-ui-react/src/components/menu/menu.recipe.ts b/packages/saas-ui-react/src/components/menu/menu.recipe.ts index 9e8eef734..e0cd0cbd0 100644 --- a/packages/saas-ui-react/src/components/menu/menu.recipe.ts +++ b/packages/saas-ui-react/src/components/menu/menu.recipe.ts @@ -46,10 +46,8 @@ export const menuSlotRecipe = defineSlotRecipe({ flex: '1', }, itemGroupLabel: { - px: '2', - py: '1.5', - fontWeight: 'semibold', textStyle: 'sm', + color: 'fg.subtle', }, indicator: { display: 'inline-flex', @@ -103,6 +101,11 @@ export const menuSlotRecipe = defineSlotRecipe({ py: '1', px: '1.5', }, + itemGroupLabel: { + textStyle: 'xs', + py: '1', + px: '1.5', + }, }, md: { content: { @@ -115,6 +118,11 @@ export const menuSlotRecipe = defineSlotRecipe({ py: '1.5', px: '2', }, + itemGroupLabel: { + textStyle: 'sm', + py: '1.5', + px: '2', + }, }, }, }, diff --git a/packages/saas-ui-react/src/components/menu/menu.stories.tsx b/packages/saas-ui-react/src/components/menu/menu.stories.tsx index d20a236a3..c66ea21a4 100644 --- a/packages/saas-ui-react/src/components/menu/menu.stories.tsx +++ b/packages/saas-ui-react/src/components/menu/menu.stories.tsx @@ -9,7 +9,7 @@ export default { export const Basic = () => { return ( - + Open @@ -25,7 +25,7 @@ export const Basic = () => { export const MenuWithSubmenu = () => { return ( - + Open @@ -45,3 +45,18 @@ export const MenuWithSubmenu = () => { ) } + +export const MenuWithItemGroup = () => { + return ( + + Open + + + + New Text File + New File... + + + + ) +} diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/number-input.ts b/packages/saas-ui-react/src/components/number-input/number-input.recipe.ts similarity index 96% rename from packages/saas-ui-react/src/theme/recipes/chakra/number-input.ts rename to packages/saas-ui-react/src/components/number-input/number-input.recipe.ts index b3283598a..717b7132b 100644 --- a/packages/saas-ui-react/src/theme/recipes/chakra/number-input.ts +++ b/packages/saas-ui-react/src/components/number-input/number-input.recipe.ts @@ -1,8 +1,8 @@ import { defineSlotRecipe, defineStyle } from '@chakra-ui/react' import { numberInputAnatomy } from '@chakra-ui/react/anatomy' -import { mapEntries } from '../../utils.ts' -import { inputRecipe } from './input.ts' +import { mapEntries } from '../../theme/utils.ts' +import { inputRecipe } from '../input/input.recipe.ts' const triggerStyle = defineStyle({ display: 'flex', diff --git a/packages/saas-ui-react/src/components/number-input/number-input.stories.tsx b/packages/saas-ui-react/src/components/number-input/number-input.stories.tsx new file mode 100644 index 000000000..f68a7a231 --- /dev/null +++ b/packages/saas-ui-react/src/components/number-input/number-input.stories.tsx @@ -0,0 +1,49 @@ +import { Group, InputAddon, Stack } from '@chakra-ui/react' + +import { NumberInput } from './index.ts' + +export default { + title: 'Components/NumberInput', + component: NumberInput, +} + +export const Basic = () => { + return +} + +export const Sizes = () => { + return ( + + + + + + + ) +} + +export const Variants = () => { + return ( + + + + + + ) +} + +export const WithAddon = () => { + return ( + + + € + + + + + + per year + + + ) +} diff --git a/packages/saas-ui-react/src/components/password-input/password-input.stories.tsx b/packages/saas-ui-react/src/components/password-input/password-input.stories.tsx new file mode 100644 index 000000000..63195729e --- /dev/null +++ b/packages/saas-ui-react/src/components/password-input/password-input.stories.tsx @@ -0,0 +1,22 @@ +import { Stack } from '@chakra-ui/react' + +import { PasswordInput } from './index.ts' + +export default { + title: 'Components/PasswordInput', + component: PasswordInput, +} + +export const Basic = () => { + return +} + +export const Sizes = () => { + return ( + + + + + + ) +} diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/pin-input.ts b/packages/saas-ui-react/src/components/pin-input/pin-input.recipe.ts similarity index 87% rename from packages/saas-ui-react/src/theme/recipes/chakra/pin-input.ts rename to packages/saas-ui-react/src/components/pin-input/pin-input.recipe.ts index 0515b893d..69da60bdb 100644 --- a/packages/saas-ui-react/src/theme/recipes/chakra/pin-input.ts +++ b/packages/saas-ui-react/src/components/pin-input/pin-input.recipe.ts @@ -1,8 +1,8 @@ import { defineSlotRecipe } from '@chakra-ui/react' import { pinInputAnatomy } from '@chakra-ui/react/anatomy' -import { mapEntries } from '../../utils.ts' -import { inputRecipe } from './input' +import { mapEntries } from '../../theme/utils.ts' +import { inputRecipe } from '../input/input.recipe.ts' const { variants, defaultVariants } = inputRecipe diff --git a/packages/saas-ui-react/src/components/pin-input/pin-input.stories.tsx b/packages/saas-ui-react/src/components/pin-input/pin-input.stories.tsx new file mode 100644 index 000000000..cc0e1c2a6 --- /dev/null +++ b/packages/saas-ui-react/src/components/pin-input/pin-input.stories.tsx @@ -0,0 +1,10 @@ +import { PinInput } from './index.ts' + +export default { + title: 'Components/PinInput', + component: PinInput, +} + +export const Basic = () => { + return +} diff --git a/packages/saas-ui-react/src/components/progress-circle/index.ts b/packages/saas-ui-react/src/components/progress-circle/index.ts new file mode 100644 index 000000000..1010ca36c --- /dev/null +++ b/packages/saas-ui-react/src/components/progress-circle/index.ts @@ -0,0 +1 @@ +export { ProgressCircle } from '@chakra-ui/react/progress-circle' diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/progress-circle.ts b/packages/saas-ui-react/src/components/progress-circle/progress-circle.recipe.ts similarity index 100% rename from packages/saas-ui-react/src/theme/recipes/chakra/progress-circle.ts rename to packages/saas-ui-react/src/components/progress-circle/progress-circle.recipe.ts diff --git a/packages/saas-ui-react/src/components/progress/index.ts b/packages/saas-ui-react/src/components/progress/index.ts new file mode 100644 index 000000000..16934ba06 --- /dev/null +++ b/packages/saas-ui-react/src/components/progress/index.ts @@ -0,0 +1 @@ +export { Progress } from '@chakra-ui/react/progress' diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/progress.ts b/packages/saas-ui-react/src/components/progress/progress.recipe.ts similarity index 100% rename from packages/saas-ui-react/src/theme/recipes/chakra/progress.ts rename to packages/saas-ui-react/src/components/progress/progress.recipe.ts diff --git a/packages/saas-ui-react/src/components/segmented-control/segment-group.recipe.ts b/packages/saas-ui-react/src/components/segmented-control/segment-group.recipe.ts index 0da73b83a..64ed2f5a2 100644 --- a/packages/saas-ui-react/src/components/segmented-control/segment-group.recipe.ts +++ b/packages/saas-ui-react/src/components/segmented-control/segment-group.recipe.ts @@ -6,8 +6,7 @@ export const segmentGroupSlotRecipe = defineSlotRecipe({ slots: segmentGroupAnatomy.keys(), base: { root: { - '--segment-radius': 'radii.md', - borderRadius: 'md', + borderRadius: 'var(--segment-radius)', display: 'inline-flex', boxShadow: 'inset', minW: 'max-content', @@ -82,6 +81,7 @@ export const segmentGroupSlotRecipe = defineSlotRecipe({ size: { xs: { root: { + '--segment-radius': 'radii.control.sm', height: '6', }, item: { @@ -92,6 +92,7 @@ export const segmentGroupSlotRecipe = defineSlotRecipe({ }, sm: { root: { + '--segment-radius': 'radii.control.md', height: '7', }, item: { @@ -102,6 +103,7 @@ export const segmentGroupSlotRecipe = defineSlotRecipe({ }, md: { root: { + '--segment-radius': 'radii.control.md', height: '8', }, item: { @@ -112,6 +114,7 @@ export const segmentGroupSlotRecipe = defineSlotRecipe({ }, lg: { root: { + '--segment-radius': 'radii.control.lg', height: '10', }, item: { diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/select.ts b/packages/saas-ui-react/src/components/select/select.recipe.ts similarity index 100% rename from packages/saas-ui-react/src/theme/recipes/chakra/select.ts rename to packages/saas-ui-react/src/components/select/select.recipe.ts diff --git a/packages/saas-ui-react/src/components/select/select.stories.tsx b/packages/saas-ui-react/src/components/select/select.stories.tsx new file mode 100644 index 000000000..1741f2614 --- /dev/null +++ b/packages/saas-ui-react/src/components/select/select.stories.tsx @@ -0,0 +1,45 @@ +import { Stack, createListCollection } from '@chakra-ui/react' + +import { Select } from './index' + +export default { + title: 'Components/Select', + component: Select, +} + +const frameworks = createListCollection({ + items: [ + { label: 'React.js', value: 'react' }, + { label: 'Vue.js', value: 'vue' }, + { label: 'Angular', value: 'angular' }, + { label: 'Svelte', value: 'svelte' }, + ], +}) + +export const Basic = (props: Partial>) => { + return ( + + Select framework + + + + + {frameworks.items.map((movie) => ( + + {movie.label} + + ))} + + + ) +} + +export const Sizes = () => { + return ( + + + + + + ) +} diff --git a/packages/saas-ui-react/src/components/sidebar/sidebar-item.recipe.ts b/packages/saas-ui-react/src/components/sidebar/sidebar-nav-item.recipe.ts similarity index 95% rename from packages/saas-ui-react/src/components/sidebar/sidebar-item.recipe.ts rename to packages/saas-ui-react/src/components/sidebar/sidebar-nav-item.recipe.ts index 2f68fb6d6..6c0166dbf 100644 --- a/packages/saas-ui-react/src/components/sidebar/sidebar-item.recipe.ts +++ b/packages/saas-ui-react/src/components/sidebar/sidebar-nav-item.recipe.ts @@ -65,11 +65,11 @@ export const sidebarNavItemSlotRecipe = defineSlotRecipe({ size: { sm: { item: { - fontSize: 'sm', + textStyle: 'sm', }, button: { borderRadius: 'control.md', - px: 1.5, + px: 2, height: 7, }, endElement: { @@ -78,11 +78,11 @@ export const sidebarNavItemSlotRecipe = defineSlotRecipe({ }, md: { item: { - fontSize: 'sm', + textStyle: 'sm', }, button: { borderRadius: 'control.md', - px: 3, + px: 2.5, height: 8, }, endElement: { @@ -91,7 +91,7 @@ export const sidebarNavItemSlotRecipe = defineSlotRecipe({ }, lg: { item: { - fontSize: 'sm', + textStyle: 'sm', }, button: { borderRadius: 'control.lg', diff --git a/packages/saas-ui-react/src/components/sidebar/sidebar-nav-item.stories.tsx b/packages/saas-ui-react/src/components/sidebar/sidebar-nav-item.stories.tsx new file mode 100644 index 000000000..94a70caf2 --- /dev/null +++ b/packages/saas-ui-react/src/components/sidebar/sidebar-nav-item.stories.tsx @@ -0,0 +1,82 @@ +import { Container, Stack } from '@chakra-ui/react' +import { LuHome, LuMoreHorizontal } from 'react-icons/lu' + +import { Menu } from '../menu' +import { Sidebar } from './index.ts' + +export default { + title: 'Components/SidebarNavItem', + component: Sidebar.NavItem, + decorators: [ + (Story: React.ComponentType) => ( + + + + ), + ], +} + +export const Basic = () => { + return ( + + Home + + ) +} + +export const Sizes = () => { + return ( + + + Home + + + Home + + + Home + + + ) +} + +export const Active = () => { + return ( + + Home + + ) +} + +export const WithIcon = () => { + return ( + + + + Home + + + ) +} + +export const WithEndElement = () => { + return ( + + + Home + + + + + + + Item 1 + Item 2 + Item 3 + + + + + + ) +} diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/spinner.ts b/packages/saas-ui-react/src/components/spinner/spinner.recipe.ts similarity index 100% rename from packages/saas-ui-react/src/theme/recipes/chakra/spinner.ts rename to packages/saas-ui-react/src/components/spinner/spinner.recipe.ts diff --git a/packages/saas-ui-react/src/components/textarea/index.ts b/packages/saas-ui-react/src/components/textarea/index.ts new file mode 100644 index 000000000..29d1829b8 --- /dev/null +++ b/packages/saas-ui-react/src/components/textarea/index.ts @@ -0,0 +1,3 @@ +export { Textarea } from '@chakra-ui/react/textarea' + +export type { TextareaProps } from '@chakra-ui/react/textarea' diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/textarea.ts b/packages/saas-ui-react/src/components/textarea/textarea.recipe.ts similarity index 91% rename from packages/saas-ui-react/src/theme/recipes/chakra/textarea.ts rename to packages/saas-ui-react/src/components/textarea/textarea.recipe.ts index 45f2d1d5e..a36a1efd9 100644 --- a/packages/saas-ui-react/src/theme/recipes/chakra/textarea.ts +++ b/packages/saas-ui-react/src/components/textarea/textarea.recipe.ts @@ -22,35 +22,35 @@ export const textareaRecipe = defineRecipe({ variants: { size: { xs: { - borderRadius: 'sm', + borderRadius: 'control.sm', textStyle: 'xs', px: '2', py: '1', scrollPaddingBottom: '1', }, sm: { - borderRadius: 'sm', + borderRadius: 'control.md', textStyle: 'sm', px: '2.5', py: '1.5', scrollPaddingBottom: '1.5', }, md: { - borderRadius: 'md', + borderRadius: 'control.md', textStyle: 'sm', px: '3', py: '1.5', scrollPaddingBottom: '1.5', }, lg: { - borderRadius: 'md', + borderRadius: 'control.lg', textStyle: 'md', px: '4', py: '2', scrollPaddingBottom: '2', }, xl: { - borderRadius: 'lg', + borderRadius: 'control.lg', textStyle: 'md', px: '4.5', py: '3.5', diff --git a/packages/saas-ui-react/src/index.ts b/packages/saas-ui-react/src/index.ts index d78ed1b57..3be81a559 100644 --- a/packages/saas-ui-react/src/index.ts +++ b/packages/saas-ui-react/src/index.ts @@ -20,6 +20,7 @@ export * from './components/file-upload/index.ts' export * from './components/grid-list/index.ts' export * from './components/icon-badge/index.ts' export * from './components/icon-button/index.ts' +export * from './components/input/index.ts' export * from './components/input-group/index.ts' export * from './components/link/index.ts' export * from './components/loading-overlay/index.ts' @@ -31,6 +32,7 @@ export * from './components/password-input/index.ts' export * from './components/persona/index.ts' export * from './components/pin-input/index.ts' export * from './components/popover/index.ts' +export * from './components/progress/index.ts' export * from './components/radio/index.ts' export * from './components/search-input/index.ts' export * from './components/select/index.ts' @@ -44,3 +46,4 @@ export * from './components/tabs/index.ts' export * from './components/tag/index.ts' export * from './components/toaster/index.ts' export * from './components/tooltip/index.ts' +export * from './components/textarea/index.ts' diff --git a/packages/saas-ui-react/src/theme/conditions.ts b/packages/saas-ui-react/src/theme/conditions.ts index c3608bd0d..6dd70488e 100644 --- a/packages/saas-ui-react/src/theme/conditions.ts +++ b/packages/saas-ui-react/src/theme/conditions.ts @@ -24,4 +24,6 @@ export const conditions = defineConditions({ groupInvalid: '.group:invalid &, [role=group]:invalid &', parentHover: 'button:hover &, a:hover &, [role=button]:hover &', pressable: '&:is(a, button, [role=button])', + popupExpanded: + '&:is([aria-haspopup][aria-expanded=true], [aria-haspopup][data-expanded], [aria-haspopup][data-state=expanded])', }) diff --git a/packages/saas-ui-react/src/theme/recipes.ts b/packages/saas-ui-react/src/theme/recipes.ts index 21f7f2fe5..c1a506829 100644 --- a/packages/saas-ui-react/src/theme/recipes.ts +++ b/packages/saas-ui-react/src/theme/recipes.ts @@ -2,23 +2,23 @@ import { badgeRecipe } from '#components/badge/badge.recipe.ts' import { buttonRecipe } from '#components/button/button.recipe.ts' import { commandRecipe } from '#components/command/command.recipe.ts' import { iconBadgeRecipe } from '#components/icon-badge/icon-badge.recipe.ts' +import { inputAddonRecipe } from '#components/input/input-addon.recipe.ts' +import { inputRecipe } from '#components/input/input.recipe.ts' +import { linkRecipe } from '#components/link/link.recipe.ts' +import { spinnerRecipe } from '#components/spinner/spinner.recipe.ts' +import { textareaRecipe } from '#components/textarea/textarea.recipe.ts' import { checkmarkRecipe } from './recipes/chakra/checkmark' import { codeRecipe } from './recipes/chakra/code' import { containerRecipe } from './recipes/chakra/container' import { headingRecipe } from './recipes/chakra/heading' import { iconRecipe } from './recipes/chakra/icon' -import { inputRecipe } from './recipes/chakra/input' -import { inputAddonRecipe } from './recipes/chakra/input-addon' import { kbdRecipe } from './recipes/chakra/kbd' -import { linkRecipe } from './recipes/chakra/link' import { markRecipe } from './recipes/chakra/mark' import { radiomarkRecipe } from './recipes/chakra/radiomark' import { separatorRecipe } from './recipes/chakra/separator' import { skeletonRecipe } from './recipes/chakra/skeleton' import { skipNavLinkRecipe } from './recipes/chakra/skip-nav-link' -import { spinnerRecipe } from './recipes/chakra/spinner' -import { textareaRecipe } from './recipes/chakra/textarea' export const recipes = { // Chakra UI Recipes diff --git a/packages/saas-ui-react/src/theme/recipes/chakra/native-select.ts b/packages/saas-ui-react/src/theme/recipes/chakra/native-select.ts index e5957575f..5baf41fcd 100644 --- a/packages/saas-ui-react/src/theme/recipes/chakra/native-select.ts +++ b/packages/saas-ui-react/src/theme/recipes/chakra/native-select.ts @@ -1,7 +1,7 @@ import { defineSlotRecipe } from '@chakra-ui/react' import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy' -import { selectSlotRecipe } from './select' +import { selectSlotRecipe } from '../../../components/select/select.recipe' export const nativeSelectSlotRecipe = defineSlotRecipe({ className: 'chakra-native-select', diff --git a/packages/saas-ui-react/src/theme/slot-recipes.ts b/packages/saas-ui-react/src/theme/slot-recipes.ts index eda0314e4..8f4938da4 100644 --- a/packages/saas-ui-react/src/theme/slot-recipes.ts +++ b/packages/saas-ui-react/src/theme/slot-recipes.ts @@ -1,5 +1,7 @@ import { appShellSlotRecipe } from '#components/app-shell/app-shell.recipe.ts' import { avatarSlotRecipe } from '#components/avatar/avatar.recipe.ts' +import { breadcrumbSlotRecipe } from '#components/breadcrumb/breadcrumb.recipe.ts' +import { cardSlotRecipe } from '#components/card/card.recipe.ts' import { dataListSlotRecipe } from '#components/data-list/data-list.recipe.ts' import { dialogSlotRecipe } from '#components/dialog/dialog.recipe.ts' import { drawerSlotRecipe } from '#components/drawer/drawer.recipe.ts' @@ -9,10 +11,15 @@ import { gridListSlotRecipe } from '#components/grid-list/grid-list.recipe.ts' import { loadingOverlaySlotRecipe } from '#components/loading-overlay/loading-overlay.recipe.ts' import { menuSlotRecipe } from '#components/menu/menu.recipe.ts' import { navbarSlotRecipe } from '#components/navbar/navbar.recipe.ts' +import { numberInputSlotRecipe } from '#components/number-input/number-input.recipe.ts' import { personaSlotRecipe } from '#components/persona/persona.recipe.ts' +import { pinInputSlotRecipe } from '#components/pin-input/pin-input.recipe.ts' import { popoverSlotRecipe } from '#components/popover/popover.recipe.ts' +import { progressCircleSlotRecipe } from '#components/progress-circle/progress-circle.recipe.ts' +import { progressSlotRecipe } from '#components/progress/progress.recipe.ts' import { segmentGroupSlotRecipe } from '#components/segmented-control/segment-group.recipe.ts' -import { sidebarNavItemSlotRecipe } from '#components/sidebar/sidebar-item.recipe.ts' +import { selectSlotRecipe } from '#components/select/select.recipe.ts' +import { sidebarNavItemSlotRecipe } from '#components/sidebar/sidebar-nav-item.recipe.ts' import { sidebarSlotRecipe } from '#components/sidebar/sidebar.recipe.ts' import { statusSlotRecipe } from '#components/status/status.recipe.ts' import { tabsSlotRecipe } from '#components/tabs/tabs.recipe.ts' @@ -24,8 +31,6 @@ import { accordionSlotRecipe } from './recipes/chakra/accordion' import { actionBarSlotRecipe } from './recipes/chakra/action-bar' import { alertSlotRecipe } from './recipes/chakra/alert' import { blockquoteSlotRecipe } from './recipes/chakra/blockquote' -import { breadcrumbSlotRecipe } from './recipes/chakra/breadcrumb' -import { cardSlotRecipe } from './recipes/chakra/card' import { checkboxSlotRecipe } from './recipes/chakra/checkbox' import { checkboxCardSlotRecipe } from './recipes/chakra/checkbox-card' import { collapsibleSlotRecipe } from './recipes/chakra/collapsible' @@ -34,14 +39,9 @@ import { fieldSlotRecipe } from './recipes/chakra/field' import { hoverCardSlotRecipe } from './recipes/chakra/hover-card' import { listSlotRecipe } from './recipes/chakra/list' import { nativeSelectSlotRecipe } from './recipes/chakra/native-select' -import { numberInputSlotRecipe } from './recipes/chakra/number-input' -import { pinInputSlotRecipe } from './recipes/chakra/pin-input' -import { progressSlotRecipe } from './recipes/chakra/progress' -import { progressCircleSlotRecipe } from './recipes/chakra/progress-circle' import { radioCardSlotRecipe } from './recipes/chakra/radio-card' import { radioGroupSlotRecipe } from './recipes/chakra/radio-group' import { ratingGroupSlotRecipe } from './recipes/chakra/rating-group' -import { selectSlotRecipe } from './recipes/chakra/select' import { sliderSlotRecipe } from './recipes/chakra/slider' import { statSlotRecipe } from './recipes/chakra/stat' import { stepsSlotRecipe } from './recipes/chakra/steps' diff --git a/packages/saas-ui-react/src/theme/tokens/radius.ts b/packages/saas-ui-react/src/theme/tokens/radius.ts index f415d40c9..31f5674cf 100644 --- a/packages/saas-ui-react/src/theme/tokens/radius.ts +++ b/packages/saas-ui-react/src/theme/tokens/radius.ts @@ -1,27 +1,10 @@ import { defineTokens } from '@chakra-ui/react' -import { radiusToken } from '../utils' - -// export const radii = defineTokens.radii({ -// '2xs': { -// value: radiusToken('0.0625rem'), -// }, -// xs: { value: radiusToken('0.125rem') }, -// sm: { value: radiusToken('0.25rem') }, -// md: { value: radiusToken('0.375rem') }, -// lg: { value: radiusToken('0.5rem') }, -// xl: { value: radiusToken('0.75rem') }, -// '2xl': { value: radiusToken('1rem') }, -// '3xl': { value: radiusToken('1.5rem') }, -// '4xl': { value: radiusToken('2rem') }, -// full: { value: 'var(--radius-full)' }, -// }) - export const radii = defineTokens.radii({ '2xs': { - value: '0.0625rem', + value: '0.15rem', }, - xs: { value: '0.125rem' }, + xs: { value: '0.2rem' }, sm: { value: '0.25rem' }, md: { value: '0.375rem' }, lg: { value: '0.5rem' }, diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 7b9bff3cd..8045d3926 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -12,7 +12,7 @@ "@babel/preset-env": "^7.26.0", "@babel/preset-react": "^7.25.9", "@babel/preset-typescript": "^7.26.0", - "@chakra-ui/react": "^3.5.1", + "@chakra-ui/react": "^3.7.0", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@fontsource-variable/inter": "^5.1.0", diff --git a/tooling/storybook-addon/package.json b/tooling/storybook-addon/package.json index 2d0e4ff41..45465f97e 100644 --- a/tooling/storybook-addon/package.json +++ b/tooling/storybook-addon/package.json @@ -64,7 +64,7 @@ }, "homepage": "https://github.com/saas-ui/saas-ui#readme", "devDependencies": { - "@chakra-ui/react": "^3.5.1", + "@chakra-ui/react": "^3.7.0", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@saas-ui/react": "workspace:*", diff --git a/yarn.lock b/yarn.lock index ade824e60..9a0a7b2bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1675,11 +1675,11 @@ __metadata: languageName: node linkType: hard -"@chakra-ui/cli@npm:^3.5.1": - version: 3.5.1 - resolution: "@chakra-ui/cli@npm:3.5.1" +"@chakra-ui/cli@npm:^3.7.0": + version: 3.7.0 + resolution: "@chakra-ui/cli@npm:3.7.0" dependencies: - "@clack/prompts": "npm:0.7.0" + "@clack/prompts": "npm:0.9.1" "@pandacss/is-valid-prop": "npm:0.41.0" "@types/cli-table": "npm:^0.3.4" "@types/debug": "npm:^4.1.12" @@ -1702,7 +1702,7 @@ __metadata: "@chakra-ui/react": ">=3.0.0-next.0" bin: chakra: bin/index.js - checksum: 10/75f8304c3abef25bc8a5817585eb8636ee902c8678f22087591334159d685b751b70bdd81741dd80f7130a5e7981620ea17bd68055fb0a7f57b89973eaf672bf + checksum: 10/95d2f8d83428676f4f42bd64972eee2ce3df266a54b2605c4db74f8d3ba533e1d20aec4125395786586f292a9ef6b3434113087a801fda9c8b101817230d5046 languageName: node linkType: hard @@ -1710,7 +1710,7 @@ __metadata: version: 0.0.0-use.local resolution: "@chakra-ui/compositions@workspace:apps/compositions" dependencies: - "@chakra-ui/react": "npm:^3.5.1" + "@chakra-ui/react": "npm:^3.7.0" "@hookform/resolvers": "npm:3.10.0" "@tanstack/react-table": "npm:8.19.3" "@types/react": "npm:^18" @@ -1983,34 +1983,33 @@ __metadata: languageName: node linkType: hard -"@clack/core@npm:^0.3.3": - version: 0.3.4 - resolution: "@clack/core@npm:0.3.4" +"@clack/core@npm:0.4.1": + version: 0.4.1 + resolution: "@clack/core@npm:0.4.1" dependencies: picocolors: "npm:^1.0.0" sisteransi: "npm:^1.0.5" - checksum: 10/36e5bef782f082dbddcd1f3502df3d366abbab2c5b608cfa986b2eb2c69f7122cf67dcffafe65488aba3560c51485feeed7f17f968f5fc99dd5be27b3d53bfa0 + checksum: 10/b7757a725a6ce3802e6499833c0a9fdf109a70274ddaaf8e38a13bc2270a798c3a4cdf95911fa29d29e3d0d9472c3dda8f90f91b5283e96b9c9bce64c463acc1 languageName: node linkType: hard -"@clack/prompts@npm:0.7.0": - version: 0.7.0 - resolution: "@clack/prompts@npm:0.7.0" +"@clack/prompts@npm:0.9.1": + version: 0.9.1 + resolution: "@clack/prompts@npm:0.9.1" dependencies: - "@clack/core": "npm:^0.3.3" - is-unicode-supported: "npm:*" + "@clack/core": "npm:0.4.1" picocolors: "npm:^1.0.0" sisteransi: "npm:^1.0.5" - checksum: 10/2ca1f84b1d36c5d08794994f6f96b86287e0b96f8b6a7483eceb98bbd34a7f9f0012775df8bf29a6d86737b48f52ac18809bdcf14c0453d1a43c7cf4da671a26 + checksum: 10/df0587bed14a978bcd3bb3ae950e400c49fc9ca4bf4556393de81f2907a010a7c4042d7a52f3125245c1de478ab371d041327a5f8bee06f3042ad39263835143 languageName: node linkType: hard -"@clerk/types@npm:^4.34.0": - version: 4.34.0 - resolution: "@clerk/types@npm:4.34.0" +"@clerk/types@npm:^4.45.0": + version: 4.45.0 + resolution: "@clerk/types@npm:4.45.0" dependencies: csstype: "npm:3.1.1" - checksum: 10/5531b46ff47c5f3ab6b4559a88bdd4cb2012aaa4ba7599f0eff8206f89ce52062df27dfab0fb89b2ad571beb172422e9329198f9fc2ccebba0ecdc29bc57d200 + checksum: 10/13cad349697c2145615617062c0b8a5d36f2ab2c50b9865292874fdca86f5b40104ada9b3120f76d564565788ad098b352c4777005859e9b31896239db9e666d languageName: node linkType: hard @@ -4461,7 +4460,7 @@ __metadata: resolution: "@saas-ui-pro/react@workspace:packages/pro/packages/react" dependencies: "@ark-ui/react": "npm:^4.9.1" - "@chakra-ui/react": "npm:^3.5.1" + "@chakra-ui/react": "npm:^3.7.0" "@emotion/react": "npm:^11.14.0" "@ngneat/falso": "npm:^7.3.0" "@react-hookz/web": "npm:^25.0.1" @@ -4551,7 +4550,7 @@ __metadata: version: 0.0.0-use.local resolution: "@saas-ui/clerk@workspace:packages/saas-ui-clerk" dependencies: - "@clerk/types": "npm:^4.34.0" + "@clerk/types": "npm:^4.45.0" "@saas-ui/auth-provider": "workspace:*" peerDependencies: react: ">=18.0.0" @@ -4836,7 +4835,7 @@ __metadata: version: 0.0.0-use.local resolution: "@saas-ui/storybook-addon@workspace:tooling/storybook-addon" dependencies: - "@chakra-ui/react": "npm:^3.5.1" + "@chakra-ui/react": "npm:^3.7.0" "@emotion/react": "npm:^11.14.0" "@emotion/styled": "npm:^11.14.0" "@saas-ui/react": "workspace:*" @@ -4913,7 +4912,7 @@ __metadata: resolution: "@saas-ui/web-v3@workspace:apps/v3" dependencies: "@ark-ui/react": "npm:4.9.1" - "@chakra-ui/react": "npm:3.5.1" + "@chakra-ui/react": "npm:3.7.0" "@emotion/react": "npm:11.14.0" "@octokit/rest": "npm:^21.0.2" "@react-three/drei": "npm:^9.117.3" @@ -13104,13 +13103,6 @@ __metadata: languageName: node linkType: hard -"is-unicode-supported@npm:*, is-unicode-supported@npm:^2.0.0": - version: 2.1.0 - resolution: "is-unicode-supported@npm:2.1.0" - checksum: 10/f254e3da6b0ab1a57a94f7273a7798dd35d1d45b227759f600d0fa9d5649f9c07fa8d3c8a6360b0e376adf916d151ec24fc9a50c5295c58bae7ca54a76a063f9 - languageName: node - linkType: hard - "is-unicode-supported@npm:^0.1.0": version: 0.1.0 resolution: "is-unicode-supported@npm:0.1.0" @@ -13125,6 +13117,13 @@ __metadata: languageName: node linkType: hard +"is-unicode-supported@npm:^2.0.0": + version: 2.1.0 + resolution: "is-unicode-supported@npm:2.1.0" + checksum: 10/f254e3da6b0ab1a57a94f7273a7798dd35d1d45b227759f600d0fa9d5649f9c07fa8d3c8a6360b0e376adf916d151ec24fc9a50c5295c58bae7ca54a76a063f9 + languageName: node + linkType: hard + "is-upper-case@npm:^1.1.0": version: 1.1.2 resolution: "is-upper-case@npm:1.1.2" @@ -17314,7 +17313,7 @@ __metadata: version: 0.0.0-use.local resolution: "saas-ui-blocks@workspace:packages/pro/packages/blocks" dependencies: - "@chakra-ui/react": "npm:^3.5.1" + "@chakra-ui/react": "npm:^3.7.0" "@dnd-kit/core": "npm:^6.3.1" "@dnd-kit/modifiers": "npm:^7.0.0" "@dnd-kit/sortable": "npm:^8.0.0" @@ -17337,7 +17336,7 @@ __metadata: resolution: "saas-ui-storybook-pro@workspace:packages/pro/packages/storybook" dependencies: "@babel/core": "npm:^7.26.7" - "@chakra-ui/react": "npm:^3.5.1" + "@chakra-ui/react": "npm:^3.7.0" "@emotion/react": "npm:^11.14.0" "@fontsource-variable/inter": "npm:^5.1.1" "@saas-ui-pro/react": "workspace:*" @@ -17376,7 +17375,7 @@ __metadata: "@babel/preset-env": "npm:^7.26.0" "@babel/preset-react": "npm:^7.25.9" "@babel/preset-typescript": "npm:^7.26.0" - "@chakra-ui/react": "npm:^3.5.1" + "@chakra-ui/react": "npm:^3.7.0" "@emotion/react": "npm:^11.14.0" "@emotion/styled": "npm:^11.14.0" "@fontsource-variable/inter": "npm:^5.1.0" @@ -17411,7 +17410,7 @@ __metadata: version: 0.0.0-use.local resolution: "saas-ui@workspace:." dependencies: - "@chakra-ui/cli": "npm:^3.5.1" + "@chakra-ui/cli": "npm:^3.7.0" "@changesets/cli": "npm:^2.27.9" "@manypkg/get-packages": "npm:^2.2.2" "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0"