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

package/src/components/persona/persona-primitive.tsx

@@ -1,220 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import {
-  Avatar,
-  type AvatarRootProps,
-  HTMLChakraProps,
-  type ImageProps,
-  SlotRecipeProps,
-  chakra,
-  createSlotRecipeContext,
-} from '@chakra-ui/react'
-import { dataAttr } from '@saas-ui/core/utils'
-
-const {
-  useStyles: usePersonaStyles,
-  withProvider,
-  withContext,
-} = createSlotRecipeContext({
-  key: 'persona',
-})
-
-export { usePersonaStyles }
-
-export type Presence = 'online' | 'offline' | 'busy' | 'dnd' | 'away'
-
-interface PresenceConfig {
-  label: string
-  color: string
-}
-
-export type PresenceOptions<P extends string = Presence> = Record<
-  P,
-  PresenceConfig
->
-
-/**
- * The presence configuration object.
- *
- * Default presence values: online, offline, busy, dnd, away
- *
- * You can overwrite colors in the theme semantic tokens.
- * theme.semanticTokens.colors['presence.online'] = 'cyan.500'
- *
- * Or add a custom presence value
- * theme.semanticTokens.colors['presence.vacay'] = 'blue.500'
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-export const defaultPresenceOptions: PresenceOptions = {
-  online: {
-    label: 'Online',
-    color: 'presence.online',
-  },
-  offline: {
-    label: 'Offline',
-    color: 'presence.offline',
-  },
-  busy: {
-    label: 'Busy',
-    color: 'presence.busy',
-  },
-  dnd: {
-    label: 'Do-not-disturb',
-    color: 'presence.dnd',
-  },
-  away: {
-    label: 'Away',
-    color: 'presence.away',
-  },
-}
-
-export interface PersonaRootProps
-  extends HTMLChakraProps<'div'>,
-    SlotRecipeProps<'persona'> {
-  /**
-   * Indicates that a person is out of office. Changes the presence badge style.
-   */
-  outOfOffice?: boolean
-  /**
-   * The presence status of the person
-   */
-  presence?: Presence
-}
-
-/**
- * The root component that provides context and styles.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-export const PersonaRoot = withProvider<HTMLDivElement, PersonaRootProps>(
-  forwardRef((props, ref) => {
-    const { outOfOffice, presence, ...rest } = props
-
-    return (
-      <chakra.div
-        ref={ref}
-        {...rest}
-        data-out-of-office={dataAttr(outOfOffice)}
-        data-presence={presence}
-        css={[
-          presence
-            ? {
-                '--persona-presence': `colors.presence.${presence}`,
-              }
-            : undefined,
-          rest.css,
-        ]}
-      />
-    )
-  }),
-  'root',
-)
-
-interface PersonaAvatarOptions {
-  /**
-   * The name of the person in the avatar.
-   *
-   * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
-   * - If `src` is not loaded, the name will be used to create the initials
-   */
-  name?: string
-}
-
-export interface PersonaAvatarProps
-  extends PersonaAvatarOptions,
-    AvatarRootProps {
-  src?: string
-  srcSet?: string
-  loading?: ImageProps['loading']
-  icon?: React.ReactElement
-  fallback?: React.ReactNode
-  getInitials?: (name?: string | null) => string | null
-}
-
-/**
- * An avatar with optional status badge.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-export const PersonaAvatar = forwardRef<HTMLDivElement, PersonaAvatarProps>(
-  (props, ref) => {
-    const {
-      name,
-      getInitials = (name?: string | null) => name?.[0],
-      icon,
-      loading,
-      onError,
-      src,
-      srcSet,
-      children,
-      ...rest
-    } = props
-
-    return (
-      <Avatar.Root ref={ref} {...rest}>
-        <Avatar.Fallback>{getInitials(name)}</Avatar.Fallback>
-        <Avatar.Image
-          src={src}
-          srcSet={srcSet}
-          loading={loading}
-          onError={onError}
-        />
-        {children}
-      </Avatar.Root>
-    )
-  },
-)
-
-export interface PersonaPresenceBadgeProps extends HTMLChakraProps<'span'> {}
-
-export const PersonaPresenceBadge = withContext<
-  HTMLSpanElement,
-  PersonaPresenceBadgeProps
->('span', 'presence')
-
-export interface PersonaDetailsProps extends HTMLChakraProps<'div'> {}
-
-/**
- * Wrapper component for the labels.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-export const PersonaDetails = withContext<HTMLDivElement, PersonaDetailsProps>(
-  'div',
-  'details',
-)
-
-export interface PersonaLabelProps extends HTMLChakraProps<'span'> {}
-
-/**
- * The main label, usually a name.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-export const PersonaLabel = withContext<HTMLSpanElement, PersonaLabelProps>(
-  'span',
-  'label',
-)
-
-PersonaLabel.displayName = 'PersonaLabel'
-
-/**
- * The secondary label, usually the role of a person.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-export const PersonaSecondaryLabel = withContext<
-  HTMLSpanElement,
-  PersonaLabelProps
->('span', 'secondaryLabel')
-
-/**
- * The tertiary label, typically a status message.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-export const PersonaTertiaryLabel = withContext<
-  HTMLSpanElement,
-  PersonaLabelProps
->('span', 'tertiaryLabel')

package/src/components/persona/persona.recipe.ts

@@ -1,94 +0,0 @@
-import { defineSlotRecipe, defineStyle } from '@chakra-ui/react'
-
-const baseStyleLabel = defineStyle({
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  minW: 0,
-})
-
-export const personaSlotRecipe = defineSlotRecipe({
-  className: 'sui-persona',
-  slots: [
-    'root',
-    'avatar',
-    'presence',
-    'details',
-    'label',
-    'secondaryLabel',
-    'tertiaryLabel',
-  ],
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    presence: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      boxSize: '1em',
-      transform: 'translate(15%, 15%)',
-      borderWidth: '0.15em',
-      borderRadius: '50%',
-      borderColor: 'bg.panel',
-      bg: 'var(--persona-presence)',
-    },
-    details: {
-      display: 'flex',
-      flexDirection: 'column',
-      minW: 0,
-      lineHeight: 'short',
-    },
-    label: baseStyleLabel,
-    secondaryLabel: {
-      ...baseStyleLabel,
-      color: 'fg.muted',
-    },
-    tertiaryLabel: {
-      ...baseStyleLabel,
-      color: 'fg.muted',
-    },
-  },
-  variants: {
-    size: {
-      xs: {
-        details: { ms: 2 },
-        label: { fontSize: 'xs' },
-        secondaryLabel: { display: 'none' },
-        tertiaryLabel: { display: 'none' },
-      },
-      sm: {
-        details: { ms: 2 },
-        label: { fontSize: 'sm' },
-        secondaryLabel: { fontSize: 'xs' },
-        tertiaryLabel: { display: 'none' },
-      },
-      md: {
-        details: { ms: 2 },
-        label: { fontSize: 'sm' },
-        secondaryLabel: { fontSize: 'xs' },
-        tertiaryLabel: { display: 'none' },
-      },
-      lg: {
-        details: { ms: 3 },
-        label: { fontSize: 'md' },
-        secondaryLabel: { fontSize: 'sm' },
-        tertiaryLabel: { fontSize: 'sm' },
-      },
-      xl: {
-        details: { ms: 4 },
-        label: { fontSize: 'lg' },
-        secondaryLabel: { fontSize: 'md' },
-        tertiaryLabel: { fontSize: 'md' },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})

package/src/components/persona/persona.stories.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react'
-
-import { Container, VStack } from '@chakra-ui/react'
-import { FiMinus, FiPhone } from 'react-icons/fi'
-
-import { Persona } from './persona.tsx'
-
-export default {
-  title: 'Components/Persona',
-  decorators: [
-    (Story: any) => (
-      <Container mt="40px">
-        <Story />
-      </Container>
-    ),
-  ],
-}
-
-const persona = {
-  name: 'Elliot Alderson',
-  presence: 'online',
-  secondaryLabel: 'Mr Robot',
-  tertiaryLabel: 'Away for lunch',
-}
-
-export const Basic = () => (
-  <>
-    <VStack gap="8">
-      <Persona {...persona} presence="online" size="xs" />
-
-      <Persona {...persona} presence="online" size="sm" />
-
-      <Persona {...persona} presence="online" size="md" />
-
-      <Persona {...persona} presence="online" size="lg" />
-
-      <Persona {...persona} presence="online" size="xl" />
-    </VStack>
-  </>
-)
-
-export const HideDetails = () => (
-  <>
-    <VStack gap="8">
-      <Persona {...persona} hideDetails presence="offline" />
-    </VStack>
-  </>
-)
-
-export const BadgeIcon = () => (
-  <>
-    <VStack gap="8">
-      <Persona
-        {...persona}
-        presenceIcon={<FiMinus size="0.4em" />}
-        size="xl"
-        presence="busy"
-      />
-    </VStack>
-  </>
-)
-
-export const LabelWithIcon = () => (
-  <>
-    <VStack gap="8">
-      <Persona
-        {...persona}
-        presence="busy"
-        secondaryLabel={
-          <>
-            <FiPhone /> On a call
-          </>
-        }
-      />
-    </VStack>
-  </>
-)
-
-export const OutOfOffice = () => (
-  <>
-    <VStack gap="8">
-      <Persona {...persona} presence="offline" size="xs" isOutOfOffice />
-      <Persona {...persona} presence="online" isOutOfOffice />
-      <Persona {...persona} presence="away" size="xl" isOutOfOffice />
-    </VStack>
-  </>
-)
-
-export const Overflow = () => (
-  <>
-    <VStack gap="8">
-      <Persona
-        {...persona}
-        secondaryLabel="This is a very long text and should overflow."
-        presence="offline"
-        isOutOfOffice
-        maxW="200px"
-      />
-    </VStack>
-  </>
-)

package/src/components/persona/persona.tsx

@@ -1,142 +0,0 @@
-import * as React from 'react'
-
-import * as PersonaPrimitive from './namespace.ts'
-
-interface PersonaOptions {
-  /**
-   * The name of the person in the avatar.
-   *
-   * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
-   * - If `src` is not loaded, the name will be used to create the initials
-   */
-  name?: string
-  /**
-   * The presence status of the person
-   *
-   * If set will add an AvatarBadge with color configured in `Presence`
-   * Default presence options:
-   * - online
-   * - offline
-   * - busy
-   * - dnd
-   * - away
-   */
-  presence?: PersonaPrimitive.Presence
-  /**
-   * The icon shown in the AvatarBadge
-   */
-  presenceIcon?: React.ReactNode
-  /**
-   * Indicates that a person is out of office. Changes the presence badge style.
-   */
-  isOutOfOffice?: boolean
-  /**
-   * Primary label of the persona, defaults to the name
-   */
-  label?: React.ReactNode
-  /**
-   * Secondary label, usually the role of the person
-   * Only visible from md size and up.
-   */
-  secondaryLabel?: React.ReactNode
-  /**
-   * Tertiary label, usually the status of the person.
-   * Only visible from lg size and up.
-   */
-  tertiaryLabel?: React.ReactNode
-  /**
-   * Hide the persona details next to the avatar.
-   */
-  hideDetails?: boolean
-}
-
-export interface PersonaProps
-  extends PersonaOptions,
-    PersonaPrimitive.AvatarProps,
-    PersonaPrimitive.RootProps {}
-
-/**
- * The wrapper component that handles default composition.
- *
- * @see Docs https://saas-ui.dev/docs/components/data-display/persona
- */
-export const Persona = React.forwardRef<HTMLDivElement, PersonaProps>(
-  (props, ref) => {
-    const {
-      name,
-      presence,
-      presenceIcon,
-      isOutOfOffice,
-      label,
-      secondaryLabel,
-      tertiaryLabel,
-      size,
-      hideDetails,
-      children,
-      /** Avatar props */
-      getInitials,
-      icon,
-      loading,
-      onError,
-      src,
-      srcSet,
-      ...rest
-    } = props
-
-    return (
-      <PersonaPrimitive.Root
-        ref={ref}
-        outOfOffice={isOutOfOffice}
-        presence={presence}
-        {...rest}
-      >
-        <PersonaPrimitive.Avatar
-          name={name}
-          size={size}
-          getInitials={getInitials}
-          icon={icon}
-          loading={loading}
-          onError={onError}
-          src={src}
-          srcSet={srcSet}
-        >
-          <PersonaPrimitive.PresenceBadge>
-            {presenceIcon}
-          </PersonaPrimitive.PresenceBadge>
-        </PersonaPrimitive.Avatar>
-
-        {!hideDetails && (
-          <PersonaPrimitive.Details>
-            <PersonaPrimitive.Label>{label || name}</PersonaPrimitive.Label>
-            {secondaryLabel && (
-              <PersonaPrimitive.SecondaryLabel>
-                {secondaryLabel}
-              </PersonaPrimitive.SecondaryLabel>
-            )}
-            {tertiaryLabel && (
-              <PersonaPrimitive.TertiaryLabel>
-                {tertiaryLabel}
-              </PersonaPrimitive.TertiaryLabel>
-            )}
-            {children}
-          </PersonaPrimitive.Details>
-        )}
-      </PersonaPrimitive.Root>
-    )
-  },
-)
-
-Persona.displayName = 'Persona'
-
-export interface PersonaAvatarProps
-  extends Omit<
-    PersonaProps,
-    'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'
-  > {}
-
-export const PersonaAvatar = React.forwardRef<
-  HTMLDivElement,
-  PersonaAvatarProps
->(function PersonaAvatar(props, ref) {
-  return <Persona ref={ref} {...props} hideDetails />
-})

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

@@ -1,2 +0,0 @@
-export { PinInput } from './pin-input.tsx'
-export type { PinInputProps } from './pin-input.tsx'

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

@@ -1,36 +0,0 @@
-import { forwardRef } from 'react'
-
-import { PinInput as ChakraPinInput, Group } from '@chakra-ui/react'
-
-export interface PinInputProps extends ChakraPinInput.RootProps {
-  rootRef?: React.Ref<HTMLDivElement>
-  pinLength?: number
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-  attached?: boolean
-}
-
-export const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
-  function PinInput(props, ref) {
-    const {
-      pinLength = 4,
-      inputProps,
-      rootRef,
-      attached,
-      gap = attached ? 0 : 2,
-      ...rest
-    } = props
-
-    return (
-      <ChakraPinInput.Root ref={rootRef} {...rest}>
-        <ChakraPinInput.HiddenInput ref={ref} {...inputProps} />
-        <ChakraPinInput.Control>
-          <Group attached={attached} gap={gap}>
-            {Array.from({ length: pinLength }).map((_, index) => (
-              <ChakraPinInput.Input key={index} index={index} />
-            ))}
-          </Group>
-        </ChakraPinInput.Control>
-      </ChakraPinInput.Root>
-    )
-  },
-)

package/src/components/radio/index.ts

@@ -1,2 +0,0 @@
-export { Radio, RadioGroup } from './radio'
-export type { RadioProps, RadioGroupProps } from './radio'

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