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

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

@@ -1,134 +0,0 @@
-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

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

package/src/components/select/namespace.ts

@@ -1,18 +0,0 @@
-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

@@ -1,135 +0,0 @@
-'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

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

package/src/components/sidebar/namespace.ts

@@ -1,27 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,237 +0,0 @@
-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',
-  },
-})