feat: theme improvements

.changeset/gorgeous-olives-add.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/react': patch
+---
+
+Inputs now use semanti radii tokens

.changeset/grumpy-yaks-divide.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/react': patch
+---
+
+SegmentGroup now use semantic radii tokens

.changeset/healthy-bats-develop.md

@@ -0,0 +1,5 @@
+---
+'@saas-ui/react': patch
+---
+
+Forward ref to LoadingOverlay.Root

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",

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": {

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',
         },
       },

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',
   },
 })

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 (
+    <InputGroup
+      startElement={<Text>https://</Text>}
+      endElement={<Text>.com</Text>}
+    >
+      <Input ps="60px" />
+    </InputGroup>
+  )
+}

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'

packages/saas-ui-react/src/theme/recipes/chakra/input-addon.ts → 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,
 })

packages/saas-ui-react/src/theme/recipes/chakra/input.ts → 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',

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 <Input placeholder="Enter your email" />
+}
+
+export const Sizes = () => {
+  return (
+    <Stack gap="4">
+      <Input placeholder="Enter your email" size="xs" />
+
+      <Input placeholder="Enter your email" size="sm" />
+
+      <Input placeholder="Enter your email" size="md" />
+
+      <Input placeholder="Enter your email" size="lg" />
+
+      <Input placeholder="Enter your email" size="xl" />
+    </Stack>
+  )
+}
+
+export const Variants = () => {
+  return (
+    <Stack gap="4">
+      <Input placeholder="Enter your email" variant="outline" />
+
+      <Input placeholder="Enter your email" variant="subtle" />
+
+      <Input placeholder="Enter your email" variant="flushed" />
+    </Stack>
+  )
+}
+
+export const WithAddon = () => (
+  <Stack gap="10" maxW="320px">
+    <Group attached>
+      <InputAddon>+31</InputAddon>
+      <Input placeholder="Phone number..." />
+    </Group>
+
+    <Group attached>
+      <Input placeholder="Subdomain" />
+      <InputAddon>acme.com</InputAddon>
+    </Group>
+  </Stack>
+)

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<LoadingOverlayProps> = (props) => {
-  const { children, loading = true, ...rest } = props
+const LoadingOverlay = forwardRef<HTMLDivElement, LoadingOverlayProps>(
+  (props, ref) => {
+    const { children, loading = true, ...rest } = props
 
-  const [presenceProps, rootProps] = splitPresenceProps(rest)
+    const [presenceProps, rootProps] = splitPresenceProps(rest)
 
-  return (
-    <Presence present={loading} {...presenceProps} asChild>
-      <chakra.div {...rootProps}>{children}</chakra.div>
-    </Presence>
-  )
-}
+    return (
+      <Presence present={loading} {...presenceProps} asChild>
+        <chakra.div ref={ref} {...rootProps}>
+          {children}
+        </chakra.div>
+      </Presence>
+    )
+  },
+)
 
 const LoadingOverlayRoot = withProvider<HTMLDivElement, LoadingOverlayProps>(
   LoadingOverlay,

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',
+        },
       },
     },
   },

packages/saas-ui-react/src/components/menu/menu.stories.tsx

@@ -9,7 +9,7 @@ export default {
 
 export const Basic = () => {
   return (
-    <Menu.Root>
+    <Menu.Root defaultOpen>
       <Menu.Button>Open</Menu.Button>
 
       <Menu.Content>
@@ -25,7 +25,7 @@ export const Basic = () => {
 
 export const MenuWithSubmenu = () => {
   return (
-    <Menu.Root>
+    <Menu.Root defaultOpen>
       <Menu.Button>Open</Menu.Button>
 
       <Menu.Content>
@@ -45,3 +45,18 @@ export const MenuWithSubmenu = () => {
     </Menu.Root>
   )
 }
+
+export const MenuWithItemGroup = () => {
+  return (
+    <Menu.Root defaultOpen>
+      <Menu.Button>Open</Menu.Button>
+
+      <Menu.Content>
+        <Menu.ItemGroup title="File">
+          <Menu.Item value="new-txt">New Text File</Menu.Item>
+          <Menu.Item value="new-file">New File...</Menu.Item>
+        </Menu.ItemGroup>
+      </Menu.Content>
+    </Menu.Root>
+  )
+}

packages/saas-ui-react/src/theme/recipes/chakra/number-input.ts → 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',