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

package/src/components/pagination.tsx

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

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

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

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

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

package/src/components/persona/namespace.ts

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

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