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

package/src/components/radio/radio.tsx

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

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

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

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

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

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

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

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

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

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