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

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

@@ -1,41 +0,0 @@
-import { forwardRef } from 'react'
-
-import { NumberInput as ChakraNumberInput } from '@chakra-ui/react'
-
-import { InputGroup } from '#components/input-group/index.ts'
-
-export interface NumberInputProps
-  extends Omit<ChakraNumberInput.RootProps, 'children'> {
-  rootRef?: React.Ref<HTMLDivElement>
-  hideControls?: boolean
-  startElement?: React.ReactNode
-  endElement?: React.ReactNode
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-}
-
-export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  function NumberInput(props, ref) {
-    const {
-      hideControls,
-      startElement,
-      endElement,
-      inputProps,
-      rootRef,
-      ...rest
-    } = props
-    return (
-      <ChakraNumberInput.Root ref={rootRef} {...rest}>
-        <InputGroup startElement={startElement} endElement={endElement}>
-          <ChakraNumberInput.Input ref={ref} {...inputProps} />
-        </InputGroup>
-
-        {!hideControls && !endElement ? (
-          <ChakraNumberInput.Control>
-            <ChakraNumberInput.IncrementTrigger />
-            <ChakraNumberInput.DecrementTrigger />
-          </ChakraNumberInput.Control>
-        ) : null}
-      </ChakraNumberInput.Root>
-    )
-  },
-)

package/src/components/pagination.tsx

@@ -1,207 +0,0 @@
-"use client"
-
-import type { ButtonProps, TextProps } from "@chakra-ui/react"
-import {
-  Button,
-  Pagination as ChakraPagination,
-  IconButton,
-  Text,
-  createContext,
-  usePaginationContext,
-} from "@chakra-ui/react"
-import { forwardRef, useMemo } from "react"
-import {
-  HiChevronLeft,
-  HiChevronRight,
-  HiMiniEllipsisHorizontal,
-} from "react-icons/hi2"
-import { LinkButton } from "./link-button"
-
-interface ButtonVariantMap {
-  current: ButtonProps["variant"]
-  default: ButtonProps["variant"]
-  ellipsis: ButtonProps["variant"]
-}
-
-type PaginationVariant = "outline" | "solid" | "subtle"
-
-interface ButtonVariantContext {
-  size: ButtonProps["size"]
-  variantMap: ButtonVariantMap
-  getHref?: (page: number) => string
-}
-
-const [RootPropsProvider, useRootProps] = createContext<ButtonVariantContext>({
-  name: "RootPropsProvider",
-})
-
-export interface PaginationRootProps
-  extends Omit<ChakraPagination.RootProps, "type"> {
-  size?: ButtonProps["size"]
-  variant?: PaginationVariant
-  getHref?: (page: number) => string
-}
-
-const variantMap: Record<PaginationVariant, ButtonVariantMap> = {
-  outline: { default: "ghost", ellipsis: "plain", current: "outline" },
-  solid: { default: "outline", ellipsis: "outline", current: "solid" },
-  subtle: { default: "ghost", ellipsis: "plain", current: "subtle" },
-}
-
-export const PaginationRoot = forwardRef<HTMLDivElement, PaginationRootProps>(
-  function PaginationRoot(props, ref) {
-    const { size = "sm", variant = "outline", getHref, ...rest } = props
-    return (
-      <RootPropsProvider
-        value={{ size, variantMap: variantMap[variant], getHref }}
-      >
-        <ChakraPagination.Root
-          ref={ref}
-          type={getHref ? "link" : "button"}
-          {...rest}
-        />
-      </RootPropsProvider>
-    )
-  },
-)
-
-export const PaginationEllipsis = forwardRef<
-  HTMLDivElement,
-  ChakraPagination.EllipsisProps
->(function PaginationEllipsis(props, ref) {
-  const { size, variantMap } = useRootProps()
-  return (
-    <ChakraPagination.Ellipsis ref={ref} {...props} asChild>
-      <Button as="span" variant={variantMap.ellipsis} size={size}>
-        <HiMiniEllipsisHorizontal />
-      </Button>
-    </ChakraPagination.Ellipsis>
-  )
-})
-
-export const PaginationItem = forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.ItemProps
->(function PaginationItem(props, ref) {
-  const { page } = usePaginationContext()
-  const { size, variantMap, getHref } = useRootProps()
-
-  const current = page === props.value
-  const variant = current ? variantMap.current : variantMap.default
-
-  if (getHref) {
-    return (
-      <LinkButton href={getHref(props.value)} variant={variant} size={size}>
-        {props.value}
-      </LinkButton>
-    )
-  }
-
-  return (
-    <ChakraPagination.Item ref={ref} {...props} asChild>
-      <Button variant={variant} size={size}>
-        {props.value}
-      </Button>
-    </ChakraPagination.Item>
-  )
-})
-
-export const PaginationPrevTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.PrevTriggerProps
->(function PaginationPrevTrigger(props, ref) {
-  const { size, variantMap, getHref } = useRootProps()
-  const { previousPage } = usePaginationContext()
-
-  if (getHref) {
-    return (
-      <LinkButton
-        href={previousPage != null ? getHref(previousPage) : undefined}
-        variant={variantMap.default}
-        size={size}
-      >
-        <HiChevronLeft />
-      </LinkButton>
-    )
-  }
-
-  return (
-    <ChakraPagination.PrevTrigger ref={ref} asChild {...props}>
-      <IconButton variant={variantMap.default} size={size}>
-        <HiChevronLeft />
-      </IconButton>
-    </ChakraPagination.PrevTrigger>
-  )
-})
-
-export const PaginationNextTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraPagination.NextTriggerProps
->(function PaginationNextTrigger(props, ref) {
-  const { size, variantMap, getHref } = useRootProps()
-  const { nextPage } = usePaginationContext()
-
-  if (getHref) {
-    return (
-      <LinkButton
-        href={nextPage != null ? getHref(nextPage) : undefined}
-        variant={variantMap.default}
-        size={size}
-      >
-        <HiChevronRight />
-      </LinkButton>
-    )
-  }
-
-  return (
-    <ChakraPagination.NextTrigger ref={ref} asChild {...props}>
-      <IconButton variant={variantMap.default} size={size}>
-        <HiChevronRight />
-      </IconButton>
-    </ChakraPagination.NextTrigger>
-  )
-})
-
-export const PaginationItems = (props: React.HTMLAttributes<HTMLElement>) => {
-  return (
-    <ChakraPagination.Context>
-      {({ pages }) =>
-        pages.map((page, index) => {
-          return page.type === "ellipsis" ? (
-            <PaginationEllipsis key={index} index={index} {...props} />
-          ) : (
-            <PaginationItem
-              key={index}
-              type="page"
-              value={page.value}
-              {...props}
-            />
-          )
-        })
-      }
-    </ChakraPagination.Context>
-  )
-}
-
-interface PageTextProps extends TextProps {
-  format?: "short" | "compact" | "long"
-}
-
-export const PaginationPageText = forwardRef<
-  HTMLParagraphElement,
-  PageTextProps
->(function PaginationPageText(props, ref) {
-  const { format = "compact", ...rest } = props
-  const { page, pages, pageRange, count } = usePaginationContext()
-  const content = useMemo(() => {
-    if (format === "short") return `${page} / ${pages.length}`
-    if (format === "compact") return `${page} of ${pages.length}`
-    return `${pageRange.start + 1} - ${pageRange.end} of ${count}`
-  }, [format, page, pages.length, pageRange, count])
-
-  return (
-    <Text fontWeight="medium" ref={ref} {...rest}>
-      {content}
-    </Text>
-  )
-})

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

@@ -1,2 +0,0 @@
-export { PasswordInput } from './password-input'
-export type { PasswordInputProps } from './password-input'

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

@@ -1,98 +0,0 @@
-'use client'
-
-import { forwardRef, useRef } from 'react'
-
-import type {
-  ButtonProps,
-  GroupProps,
-  InputProps,
-  StackProps,
-} from '@chakra-ui/react'
-import {
-  IconButton,
-  Input,
-  mergeRefs,
-  useControllableState,
-} from '@chakra-ui/react'
-import { LuEye, LuEyeOff } from 'react-icons/lu'
-
-import { InputGroup } from '../input-group'
-
-export interface PasswordInputProps
-  extends InputProps,
-    PasswordVisibilityProps {
-  rootProps?: GroupProps
-}
-
-export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  function PasswordInput(props, ref) {
-    const {
-      rootProps,
-      defaultVisible,
-      visible: visibleProp,
-      onVisibleChange,
-      visibilityIcon = { on: <LuEye />, off: <LuEyeOff /> },
-      ...rest
-    } = props
-
-    const [visible, setVisible] = useControllableState({
-      value: visibleProp,
-      defaultValue: defaultVisible || false,
-      onChange: onVisibleChange,
-    })
-
-    const inputRef = useRef<HTMLInputElement>(null)
-
-    return (
-      <InputGroup
-        width="full"
-        endElement={
-          <VisibilityTrigger
-            disabled={rest.disabled}
-            onPointerDown={(e) => {
-              if (rest.disabled) return
-              if (e.button !== 0) return
-              e.preventDefault()
-              setVisible(!visible)
-            }}
-          >
-            {visible ? visibilityIcon.off : visibilityIcon.on}
-          </VisibilityTrigger>
-        }
-        {...rootProps}
-      >
-        <Input
-          {...rest}
-          ref={mergeRefs(ref, inputRef)}
-          type={visible ? 'text' : 'password'}
-        />
-      </InputGroup>
-    )
-  },
-)
-
-export interface PasswordVisibilityProps {
-  defaultVisible?: boolean
-  visible?: boolean
-  onVisibleChange?: (visible: boolean) => void
-  visibilityIcon?: { on: React.ReactNode; off: React.ReactNode }
-}
-
-const VisibilityTrigger = forwardRef<HTMLButtonElement, ButtonProps>(
-  function VisibilityTrigger(props, ref) {
-    return (
-      <IconButton
-        tabIndex={-1}
-        ref={ref}
-        me="-2"
-        aspectRatio="square"
-        size="sm"
-        variant="ghost"
-        colorPalette="gray"
-        height="calc(100% - {spacing.2})"
-        aria-label="Toggle password visibility"
-        {...props}
-      />
-    )
-  },
-)

package/src/components/persona/index.ts

@@ -1,2 +0,0 @@
-export { Persona, PersonaAvatar } from './persona.tsx'
-export type { PersonaProps, PersonaAvatarProps } from './persona.tsx'

package/src/components/persona/namespace.ts

@@ -1,18 +0,0 @@
-export {
-  PersonaRoot as Root,
-  PersonaAvatar as Avatar,
-  PersonaPresenceBadge as PresenceBadge,
-  PersonaDetails as Details,
-  PersonaLabel as Label,
-  PersonaSecondaryLabel as SecondaryLabel,
-  PersonaTertiaryLabel as TertiaryLabel,
-} from './persona-primitive.tsx'
-
-export type {
-  PersonaRootProps as RootProps,
-  PersonaAvatarProps as AvatarProps,
-  PersonaPresenceBadgeProps as PresenceBadgeProps,
-  PersonaDetailsProps as DetailsProps,
-  PersonaLabelProps as LabelProps,
-  Presence,
-} from './persona-primitive.tsx'

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