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

package/src/components/radio/radio.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react'
+
+import { RadioGroup as ChakraRadioGroup } from '@chakra-ui/react'
+
+export interface RadioProps extends ChakraRadioGroup.ItemProps {
+  rootRef?: React.Ref<HTMLDivElement>
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  function Radio(props, ref) {
+    const { children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraRadioGroup.Item ref={rootRef} {...rest}>
+        <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+        <ChakraRadioGroup.ItemIndicator />
+        {children && (
+          <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
+        )}
+      </ChakraRadioGroup.Item>
+    )
+  },
+)
+
+export type RadioGroupProps = ChakraRadioGroup.RootProps
+
+export const RadioGroup = ChakraRadioGroup.Root

package/src/components/radio-card.tsx

@@ -0,0 +1,57 @@
+import { RadioCard } from "@chakra-ui/react"
+import { Fragment, forwardRef } from "react"
+
+interface RadioCardItemProps extends RadioCard.ItemProps {
+  icon?: React.ReactElement
+  label?: React.ReactNode
+  description?: React.ReactNode
+  addon?: React.ReactNode
+  indicator?: React.ReactNode | null
+  indicatorPlacement?: "start" | "end" | "inside"
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+export const RadioCardItem = forwardRef<HTMLInputElement, RadioCardItemProps>(
+  function RadioCardItem(props, ref) {
+    const {
+      inputProps,
+      label,
+      description,
+      addon,
+      icon,
+      indicator = <RadioCard.ItemIndicator />,
+      indicatorPlacement = "end",
+      ...rest
+    } = props
+
+    const hasContent = label || description || icon
+    const ContentWrapper = indicator ? RadioCard.ItemContent : Fragment
+
+    return (
+      <RadioCard.Item {...rest}>
+        <RadioCard.ItemHiddenInput ref={ref} {...inputProps} />
+        <RadioCard.ItemControl>
+          {indicatorPlacement === "start" && indicator}
+          {hasContent && (
+            <ContentWrapper>
+              {icon}
+              {label && <RadioCard.ItemText>{label}</RadioCard.ItemText>}
+              {description && (
+                <RadioCard.ItemDescription>
+                  {description}
+                </RadioCard.ItemDescription>
+              )}
+              {indicatorPlacement === "inside" && indicator}
+            </ContentWrapper>
+          )}
+          {indicatorPlacement === "end" && indicator}
+        </RadioCard.ItemControl>
+        {addon && <RadioCard.ItemAddon>{addon}</RadioCard.ItemAddon>}
+      </RadioCard.Item>
+    )
+  },
+)
+
+export const RadioCardRoot = RadioCard.Root
+export const RadioCardLabel = RadioCard.Label
+export const RadioCardItemIndicator = RadioCard.ItemIndicator

package/src/components/radio.tsx

@@ -0,0 +1,24 @@
+import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface RadioProps extends ChakraRadioGroup.ItemProps {
+  rootRef?: React.Ref<HTMLDivElement>
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  function Radio(props, ref) {
+    const { children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraRadioGroup.Item ref={rootRef} {...rest}>
+        <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+        <ChakraRadioGroup.ItemIndicator />
+        {children && (
+          <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
+        )}
+      </ChakraRadioGroup.Item>
+    )
+  },
+)
+
+export const RadioGroup = ChakraRadioGroup.Root

package/src/components/rating.tsx

@@ -0,0 +1,27 @@
+import { RatingGroup } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface RatingProps extends RatingGroup.RootProps {
+  icon?: React.ReactElement
+  count?: number
+  label?: React.ReactNode
+}
+
+export const Rating = forwardRef<HTMLDivElement, RatingProps>(
+  function Rating(props, ref) {
+    const { icon, count = 5, label, ...rest } = props
+    return (
+      <RatingGroup.Root ref={ref} count={count} {...rest}>
+        {label && <RatingGroup.Label>{label}</RatingGroup.Label>}
+        <RatingGroup.HiddenInput />
+        <RatingGroup.Control>
+          {Array.from({ length: count }).map((_, index) => (
+            <RatingGroup.Item key={index} index={index + 1}>
+              <RatingGroup.ItemIndicator icon={icon} />
+            </RatingGroup.Item>
+          ))}
+        </RatingGroup.Control>
+      </RatingGroup.Root>
+    )
+  },
+)

package/src/components/search-input/index.ts

@@ -0,0 +1,2 @@
+export { SearchInput } from './search-input.tsx'
+export type { SearchInputProps } from './search-input.tsx'

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

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+
+import { Container, Stack } from '@chakra-ui/react'
+import { StoryObj } from '@storybook/react'
+import { RiCloseLine, RiSearch2Line } from 'react-icons/ri'
+
+import { SearchInput, SearchInputProps } from './search-input'
+
+export default {
+  title: 'Components/SearchInput',
+  component: SearchInput,
+  decorators: [
+    (Story: any) => (
+      <Container mt="40px">
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+type Story = StoryObj<SearchInputProps>
+
+export const Basic: Story = {}
+
+export const Sizes: Story = {
+  render: () => {
+    return (
+      <Stack>
+        <SearchInput size="lg" />
+        <SearchInput size="md" />
+        <SearchInput size="sm" />
+        <SearchInput size="xs" />
+      </Stack>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+}
+
+export const CustomIcons: Story = {
+  args: {
+    icon: <RiSearch2Line />,
+    resetIcon: <RiCloseLine />,
+  },
+}
+
+export const Controlled: Story = {
+  render: (props: any) => {
+    const [value, setValue] = useState('')
+    return (
+      <SearchInput
+        value={value}
+        onChange={({ target }) => setValue(target.value)}
+        onReset={() => setValue('')}
+        {...props}
+      />
+    )
+  },
+}

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/segmented-control.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { For, SegmentGroup } from "@chakra-ui/react"
+import { forwardRef, useMemo } from "react"
+
+interface Item {
+  value: string
+  label: React.ReactNode
+  disabled?: boolean
+}
+
+export interface SegmentedControlProps extends SegmentGroup.RootProps {
+  items: Array<string | Item>
+}
+
+function normalize(items: Array<string | Item>): Item[] {
+  return items.map((item) => {
+    if (typeof item === "string") return { value: item, label: item }
+    return item
+  })
+}
+
+export const SegmentedControl = forwardRef<
+  HTMLDivElement,
+  SegmentedControlProps
+>(function SegmentedControl(props, ref) {
+  const { items, ...rest } = props
+  const data = useMemo(() => normalize(items), [items])
+
+  return (
+    <SegmentGroup.Root ref={ref} {...rest}>
+      <SegmentGroup.Indicator />
+      <For each={data}>
+        {(item) => (
+          <SegmentGroup.Item
+            key={item.value}
+            value={item.value}
+            disabled={item.disabled}
+          >
+            <SegmentGroup.ItemText>{item.label}</SegmentGroup.ItemText>
+            <SegmentGroup.ItemHiddenInput />
+          </SegmentGroup.Item>
+        )}
+      </For>
+    </SegmentGroup.Root>
+  )
+})

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