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

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

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

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

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

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

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

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

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

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

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