@saas-ui/react 2.11.2 → 3.0.0-alpha.1

package/src/components/search-input/search-input.tsx

@@ -0,0 +1,134 @@
+import React, { forwardRef } from 'react'
+
+import {
+  Group,
+  IconButton,
+  type IconButtonProps,
+  Input,
+  InputElement,
+  InputProps,
+  mergeRefs,
+  useControllableState,
+} from '@chakra-ui/react'
+import { callAll } from '@saas-ui/core/utils'
+
+import { CloseIcon, SearchIcon } from '#components/icons/index.ts'
+
+export interface SearchInputProps extends InputProps {
+  value?: string
+  defaultValue?: string
+  placeholder?: string
+  icon?: React.ReactElement
+  resetIcon?: React.ReactElement
+  endElement?: React.ReactElement
+  onReset?: () => void
+}
+
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (props, ref) => {
+    const {
+      placeholder = 'Search',
+      value: valueProp,
+      defaultValue: defaultValueProp,
+      size,
+      variant,
+      width = 'full',
+      icon = <SearchIcon />,
+      resetIcon,
+      endElement: endElementProp,
+      onChange: onChangeProp,
+      onReset: onResetProp,
+      onKeyDown: onKeyDownProp,
+      disabled,
+      ...inputProps
+    } = props
+
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValueProp,
+    })
+
+    const onChange = React.useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value)
+      },
+      [setValue],
+    )
+
+    const onKeyDown = React.useCallback(
+      (event: React.KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          setValue('')
+          onReset()
+        }
+      },
+      [onResetProp, setValue],
+    )
+
+    const onReset = () => {
+      setValue('')
+      onResetProp?.()
+      inputRef.current?.focus()
+    }
+
+    const showReset = value && !props.disabled
+
+    const endElement = showReset ? (
+      <SearchInputResetButton size={size}>{resetIcon}</SearchInputResetButton>
+    ) : (
+      endElementProp
+    )
+
+    return (
+      <Group width={width}>
+        <InputElement
+          placement="start"
+          px="0"
+          aspectRatio="9/10"
+          fontSize={size}
+        >
+          {icon}
+        </InputElement>
+        <Input
+          type="text"
+          placeholder={placeholder}
+          variant={variant}
+          size={size}
+          value={value}
+          disabled={disabled}
+          ref={mergeRefs(ref, inputRef)}
+          onChange={callAll(onChange, onChangeProp)}
+          onKeyDown={callAll(onKeyDown, onKeyDownProp)}
+          ps="calc(var(--input-height) - var(--input-height) / 10)"
+          pe="calc(var(--input-height) - var(--input-height) / 10)"
+          {...inputProps}
+        />
+        <InputElement placement="end">{endElement}</InputElement>
+      </Group>
+    )
+  },
+)
+
+const SearchInputResetButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    const { children = <CloseIcon />, ...rest } = props
+
+    return (
+      <IconButton
+        ref={ref}
+        variant="ghost"
+        aria-label="Reset search"
+        me="-2"
+        aspectRatio="square"
+        height="calc(100% - {spacing.2})"
+        {...rest}
+      >
+        {children}
+      </IconButton>
+    )
+  },
+)
+
+SearchInput.displayName = 'SearchInput'

package/src/components/select/index.ts

@@ -0,0 +1 @@
+export * as Select from './namespace'

package/src/components/select/namespace.ts

@@ -0,0 +1,18 @@
+export {
+  SelectRoot as Root,
+  SelectTrigger as Trigger,
+  SelectContent as Content,
+  SelectItem as Item,
+  SelectLabel as Label,
+  SelectItemGroup as ItemGroup,
+  SelectItemText as ItemText,
+  SelectValueText as ValueText,
+} from './select.tsx'
+
+export type {
+  SelectRootProps as RootProps,
+  SelectTriggerProps as TriggerProps,
+  SelectContentProps as ContentProps,
+  SelectItemGroupProps as ItemGroupProps,
+  SelectValueTextProps as ValueTextProps,
+} from './select.tsx'

package/src/components/select/select.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { forwardRef } from 'react'
+
+import type { CollectionItem } from '@chakra-ui/react'
+import { Portal, Select as SelectPrimitive } from '@chakra-ui/react'
+
+import { CloseButton } from '#components/close-button'
+
+export interface SelectTriggerProps extends SelectPrimitive.ControlProps {
+  clearable?: boolean
+}
+
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  function SelectTrigger(props, ref) {
+    const { children, clearable, ...rest } = props
+    return (
+      <SelectPrimitive.Control {...rest}>
+        <SelectPrimitive.Trigger ref={ref}>{children}</SelectPrimitive.Trigger>
+        <SelectPrimitive.IndicatorGroup>
+          {clearable && <SelectClearTrigger />}
+          <SelectPrimitive.Indicator />
+        </SelectPrimitive.IndicatorGroup>
+      </SelectPrimitive.Control>
+    )
+  },
+)
+
+const SelectClearTrigger = forwardRef<
+  HTMLButtonElement,
+  SelectPrimitive.ClearTriggerProps
+>(function SelectClearTrigger(props, ref) {
+  return (
+    <SelectPrimitive.ClearTrigger asChild {...props} ref={ref}>
+      <CloseButton
+        size="xs"
+        variant="plain"
+        focusVisibleRing="inside"
+        focusRingWidth="2px"
+        pointerEvents="auto"
+      />
+    </SelectPrimitive.ClearTrigger>
+  )
+})
+
+export interface SelectContentProps extends SelectPrimitive.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  function SelectContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <SelectPrimitive.Positioner>
+          <SelectPrimitive.Content {...rest} ref={ref} />
+        </SelectPrimitive.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectPrimitive.ItemProps>(
+  function SelectItem(props, ref) {
+    const { item, children, ...rest } = props
+    return (
+      <SelectPrimitive.Item key={item.value} item={item} {...rest} ref={ref}>
+        {children}
+        <SelectPrimitive.ItemIndicator />
+      </SelectPrimitive.Item>
+    )
+  },
+)
+
+export interface SelectValueTextProps
+  extends Omit<SelectPrimitive.ValueTextProps, 'children'> {
+  children?(items: CollectionItem[]): React.ReactNode
+}
+
+export const SelectValueText = forwardRef<
+  HTMLSpanElement,
+  SelectValueTextProps
+>(function SelectValueText(props, ref) {
+  const { children, ...rest } = props
+  return (
+    <SelectPrimitive.ValueText {...rest} ref={ref}>
+      <SelectPrimitive.Context>
+        {(select) => {
+          const items = select.selectedItems
+          if (items.length === 0) return props.placeholder
+          if (children) return children(items)
+          if (items.length === 1)
+            return select.collection.stringifyItem(items[0])
+          return `${items.length} selected`
+        }}
+      </SelectPrimitive.Context>
+    </SelectPrimitive.ValueText>
+  )
+})
+
+export interface SelectRootProps<T> extends SelectPrimitive.RootProps<T> {}
+
+export const SelectRoot = forwardRef(function SelectRoot<
+  T extends CollectionItem,
+>(props: SelectRootProps<T>, ref: React.Ref<HTMLDivElement>) {
+  return (
+    <SelectPrimitive.Root
+      {...props}
+      ref={ref}
+      positioning={{ sameWidth: true, ...props.positioning }}
+    />
+  )
+}) as <T extends CollectionItem>(
+  props: SelectRootProps<T> & React.RefAttributes<HTMLDivElement>,
+) => React.ReactElement
+
+export interface SelectItemGroupProps extends SelectPrimitive.ItemGroupProps {
+  label: React.ReactNode
+}
+
+export const SelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(
+  function SelectItemGroup(props, ref) {
+    const { children, label, ...rest } = props
+    return (
+      <SelectPrimitive.ItemGroup {...rest} ref={ref}>
+        <SelectPrimitive.ItemGroupLabel>{label}</SelectPrimitive.ItemGroupLabel>
+        {children}
+      </SelectPrimitive.ItemGroup>
+    )
+  },
+)
+
+export const SelectLabel = SelectPrimitive.Label
+export const SelectItemText = SelectPrimitive.ItemText

package/src/components/sidebar/index.ts

@@ -0,0 +1,7 @@
+export * as Sidebar from './namespace'
+
+export {
+  useSidebar,
+  useSidebarStyles,
+  useSidebarItemStyles,
+} from './sidebar.tsx'

package/src/components/sidebar/namespace.ts

@@ -0,0 +1,27 @@
+export {
+  SidebarProvider as Provider,
+  SidebarRoot as Root,
+  SidebarTrigger as Trigger,
+  SidebarFlyoutTrigger as FlyoutTrigger,
+  SidebarBackdrop as Backdrop,
+  SidebarHeader as Header,
+  SidebarBody as Body,
+  SidebarFooter as Footer,
+  SidebarTrack as Track,
+  SidebarGroup as Group,
+  SidebarGroupHeader as GroupHeader,
+  SidebarGroupTitle as GroupTitle,
+  SidebarGroupEndElement as GroupEndElement,
+  SidebarGroupContent as GroupContent,
+  SidebarNavItem as NavItem,
+  SidebarNavButton as NavButton,
+  SidebarNavItemEndElement as NavItemEndElement,
+} from './sidebar.tsx'
+
+export type {
+  SidebarRootProps as RootProps,
+  SidebarNavButtonProps as NavButtonProps,
+  SidebarFlyoutTriggerProps as FlyoutTriggerProps,
+  SidebarProviderProps as ProviderProps,
+  SidebarTriggerProps as TriggerProps,
+} from './sidebar.tsx'

package/src/components/sidebar/sidebar-item.recipe.ts

@@ -0,0 +1,65 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+
+export const sidebarNavItemSlotRecipe = defineSlotRecipe({
+  className: 'sui-sidebar-nav-item',
+  slots: ['item', 'button'],
+  base: {
+    item: {
+      position: 'relative',
+    },
+    button: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      isolation: 'isolate',
+      width: '100%',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      cursor: 'button',
+      transitionProperty: 'common',
+      transitionDuration: 'fast',
+      focusVisibleRing: 'outside',
+      '& > svg': {
+        boxSize: 4,
+      },
+    },
+  },
+  variants: {
+    variant: {
+      muted: {
+        button: {
+          bg: 'transparent',
+          color: 'sidebar.accent.fg/85',
+          _hover: {
+            bg: 'sidebar.accent.bg/90',
+            color: 'sidebar.accent.fg',
+          },
+          _active: {
+            bg: 'sidebar.accent.bg',
+            color: 'sidebar.accent.fg',
+          },
+        },
+      },
+    },
+    size: {
+      md: {
+        item: {
+          fontSize: 'sm',
+        },
+        button: {
+          borderRadius: 'md',
+          px: 2,
+          height: 8,
+          '&:has(:nth-child(3))': {
+            pe: 0,
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'muted',
+    size: 'md',
+  },
+})

package/src/components/sidebar/sidebar.recipe.ts

@@ -0,0 +1,237 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+
+export const sidebarSlotRecipe = defineSlotRecipe({
+  className: 'sui-sidebar',
+  slots: [
+    'root',
+    'backdrop',
+    'header',
+    'body',
+    'footer',
+    'trigger',
+    'flyoutTrigger',
+    'group',
+    'groupHeader',
+    'groupTitle',
+    'groupEndElement',
+    'groupContent',
+    'item',
+    'itemEndElement',
+    'track',
+  ],
+  base: {
+    root: {
+      '--sidebar-z-index': 'zIndex.layer-3',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    backdrop: {
+      bg: 'blackAlpha.200',
+      position: 'fixed',
+      inset: 0,
+      '--sidebar-backdrop-z-index': 'zIndex.layer-3',
+      zIndex: 'calc(var(--sidebar-backdrop-z-index) - 2)',
+      _open: {
+        animationName: 'fade-in',
+        animationDuration: 'slow',
+      },
+      _closed: {
+        animationName: 'fade-out',
+        animationDuration: 'moderate',
+      },
+    },
+    trigger: {
+      display: 'inline-flex',
+      appearance: 'none',
+      alignItems: 'center',
+      justifyContent: 'center',
+      userSelect: 'none',
+      whiteSpace: 'nowrap',
+      verticalAlign: 'middle',
+      outline: 'none',
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'row',
+      py: 2,
+    },
+    body: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 4,
+      flex: 1,
+      py: 3,
+      overflowY: 'auto',
+    },
+    footer: {
+      display: 'flex',
+      flexDirection: 'column',
+      py: 2,
+    },
+    group: {
+      position: 'relative',
+    },
+    groupHeader: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: 1,
+      height: 6,
+      borderRadius: 'md',
+      fontSize: 'xs',
+      transitionProperty: 'common',
+      transitionDuration: 'fast',
+      _groupCollapsible: {
+        cursor: 'button',
+        userSelect: 'none',
+        _hover: {
+          bg: 'sidebar.accent.bg/80',
+        },
+      },
+    },
+    groupTitle: {
+      display: 'flex',
+      alignItems: 'center',
+      flex: 1,
+      px: 2,
+      fontWeight: 'medium',
+      color: 'sidebar.fg/70',
+    },
+    groupEndElement: {
+      '& > button': {
+        boxSize: 6,
+      },
+    },
+    groupContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1',
+    },
+    track: {
+      display: 'flex',
+      justifyContent: 'center',
+      position: 'absolute',
+      top: 0,
+      right: '-4px',
+      bottom: 0,
+      width: '7px',
+      cursor: 'button',
+      _after: {
+        content: '""',
+        display: 'block',
+        height: '100%',
+        width: '2px',
+        opacity: 0,
+        transitionProperty: 'opacity',
+        transitionDuration: 'fast',
+        transitionDelay: '0.2s',
+        bg: 'sidebar.accent.fg/60',
+        pointerEvents: 'none',
+      },
+      _hover: {
+        _after: {
+          opacity: 1,
+        },
+      },
+    },
+    flyoutTrigger: {
+      display: 'none',
+    },
+  },
+  variants: {
+    mode: {
+      collapsible: {
+        root: {
+          base: {
+            position: 'fixed',
+            height: '100dvh',
+            zIndex: 'layer-3',
+          },
+          md: {
+            position: 'relative',
+            height: 'auto',
+            zIndex: 'unset',
+          },
+          width: 'var(--sidebar-width, 280px)',
+          maxWidth: ['100vw', 'var(--sidebar-max-width, 320px)'],
+          minWidth: 'var(--sidebar-min-width, 220px)',
+          bg: 'sidebar.bg',
+          transitionProperty: 'margin-left',
+          _open: {
+            marginLeft: 0,
+            transitionDuration: 'moderate',
+            transitionTimingFunction: 'bounce-in',
+          },
+          _closed: {
+            marginLeft: 'calc(var(--sidebar-width, 280px) * -1)',
+            transitionDuration: 'fast',
+            transitionTimingFunction: 'bounce-out',
+          },
+        },
+      },
+      flyout: {
+        root: {
+          position: 'fixed',
+          top: 2,
+          left: 2,
+          bottom: 2,
+          zIndex: 'var(--sidebar-z-index)',
+          width: 'var(--sidebar-width, 280px)',
+          maxWidth: ['100vw', 'var(--sidebar-max-width, 320px)'],
+          minWidth: 'var(--sidebar-min-width, 220px)',
+          bg: 'sidebar.bg',
+          borderColor: 'sidebar.border',
+          boxShadow: 'none',
+          borderWidth: '1px',
+          borderRadius: 'lg',
+          _open: {
+            transitionDuration: 'moderate',
+            transitionTimingFunction: 'ease-out',
+            boxShadow: 'lg',
+          },
+          _closed: {
+            left: 'calc(var(--sidebar-width, 280px) * -1)',
+            transitionDuration: 'fast',
+            transitionTimingFunction: 'ease-in-out',
+          },
+        },
+        flyoutTrigger: {
+          display: 'block',
+          position: 'absolute',
+          '--sidebar-flyout-trigger-z-index': 'zIndex.layer-3',
+          zIndex: 'calc(var(--sidebar-flyout-trigger-z-index) - 1)',
+          height: '100%',
+          width: '8px',
+        },
+        track: {
+          top: '8px',
+          bottom: '8px',
+        },
+      },
+      compact: {},
+    },
+    variant: {
+      muted: {},
+      solid: {},
+      subtle: {},
+    },
+    size: {
+      md: {
+        header: {
+          px: 3,
+        },
+        body: {
+          px: 3,
+        },
+        footer: {
+          px: 3,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    mode: 'collapsible',
+    variant: 'muted',
+    size: 'md',
+  },
+})