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

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,143 @@
+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}
+        size={size}
+        {...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/popover.tsx

@@ -0,0 +1,58 @@
+import { Popover as ChakraPopover, Portal } from "@chakra-ui/react"
+import { CloseButton } from "compositions/ui/close-button"
+import { forwardRef } from "react"
+
+interface PopoverContentProps extends ChakraPopover.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
+  function PopoverContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraPopover.Positioner>
+          <ChakraPopover.Content ref={ref} {...rest} />
+        </ChakraPopover.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const PopoverArrow = forwardRef<
+  HTMLDivElement,
+  ChakraPopover.ArrowProps
+>(function PopoverArrow(props, ref) {
+  return (
+    <ChakraPopover.Arrow {...props} ref={ref}>
+      <ChakraPopover.ArrowTip />
+    </ChakraPopover.Arrow>
+  )
+})
+
+export const PopoverCloseTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraPopover.CloseTriggerProps
+>(function PopoverCloseTrigger(props, ref) {
+  return (
+    <ChakraPopover.CloseTrigger
+      position="absolute"
+      top="1"
+      insetEnd="1"
+      {...props}
+      asChild
+      ref={ref}
+    >
+      <CloseButton size="sm" />
+    </ChakraPopover.CloseTrigger>
+  )
+})
+
+export const PopoverTitle = ChakraPopover.Title
+export const PopoverDescription = ChakraPopover.Description
+export const PopoverFooter = ChakraPopover.Footer
+export const PopoverHeader = ChakraPopover.Header
+export const PopoverRoot = ChakraPopover.Root
+export const PopoverBody = ChakraPopover.Body
+export const PopoverTrigger = ChakraPopover.Trigger

package/src/components/progress-circle.tsx

@@ -0,0 +1,37 @@
+import type { SystemStyleObject } from "@chakra-ui/react"
+import {
+  AbsoluteCenter,
+  ProgressCircle as ChakraProgressCircle,
+} from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export const ProgressCircleRoot = ChakraProgressCircle.Root
+
+interface ProgressCircleRingProps extends ChakraProgressCircle.CircleProps {
+  trackColor?: SystemStyleObject["stroke"]
+  cap?: SystemStyleObject["strokeLinecap"]
+}
+
+export const ProgressCircleRing = forwardRef<
+  SVGSVGElement,
+  ProgressCircleRingProps
+>(function ProgressCircleRing(props, ref) {
+  const { trackColor, cap, color, ...rest } = props
+  return (
+    <ChakraProgressCircle.Circle {...rest} ref={ref}>
+      <ChakraProgressCircle.Track stroke={trackColor} />
+      <ChakraProgressCircle.Range stroke={color} strokeLinecap={cap} />
+    </ChakraProgressCircle.Circle>
+  )
+})
+
+export const ProgressCircleValueText = forwardRef<
+  HTMLDivElement,
+  ChakraProgressCircle.ValueTextProps
+>(function ProgressCircleValueText(props, ref) {
+  return (
+    <AbsoluteCenter>
+      <ChakraProgressCircle.ValueText {...props} ref={ref} />
+    </AbsoluteCenter>
+  )
+})

package/src/components/progress.tsx

@@ -0,0 +1,40 @@
+import { Progress as ChakraProgress, IconButton } from "@chakra-ui/react"
+import { ToggleTip } from "compositions/ui/toggle-tip"
+import { forwardRef } from "react"
+import { HiOutlineInformationCircle } from "react-icons/hi"
+
+export const ProgressBar = forwardRef<
+  HTMLDivElement,
+  ChakraProgress.TrackProps
+>(function ProgressBar(props, ref) {
+  return (
+    <ChakraProgress.Track {...props} ref={ref}>
+      <ChakraProgress.Range />
+    </ChakraProgress.Track>
+  )
+})
+
+export const ProgressRoot = ChakraProgress.Root
+export const ProgressValueText = ChakraProgress.ValueText
+
+export interface ProgressLabelProps extends ChakraProgress.LabelProps {
+  info?: React.ReactNode
+}
+
+export const ProgressLabel = forwardRef<HTMLDivElement, ProgressLabelProps>(
+  function ProgressLabel(props, ref) {
+    const { children, info, ...rest } = props
+    return (
+      <ChakraProgress.Label {...rest} ref={ref}>
+        {children}
+        {info && (
+          <ToggleTip content={info}>
+            <IconButton variant="ghost" aria-label="info" size="2xs" ms="1">
+              <HiOutlineInformationCircle />
+            </IconButton>
+          </ToggleTip>
+        )}
+      </ChakraProgress.Label>
+    )
+  },
+)

package/src/components/prose.tsx

@@ -0,0 +1,264 @@
+"use client"
+
+import { chakra } from "@chakra-ui/react"
+
+export const Prose = chakra("div", {
+  base: {
+    color: "fg.muted",
+    maxWidth: "65ch",
+    fontSize: "sm",
+    lineHeight: "1.7em",
+    "& p": {
+      marginTop: "1em",
+      marginBottom: "1em",
+    },
+    "& blockquote": {
+      marginTop: "1.285em",
+      marginBottom: "1.285em",
+      paddingInline: "1.285em",
+      borderInlineStartWidth: "0.25em",
+    },
+    "& a": {
+      color: "fg",
+      textDecoration: "underline",
+      textUnderlineOffset: "3px",
+      textDecorationThickness: "2px",
+      textDecorationColor: "border.muted",
+      fontWeight: "500",
+    },
+    "& strong": {
+      fontWeight: "600",
+    },
+    "& a strong": {
+      color: "inherit",
+    },
+    "& h1": {
+      fontSize: "2.15em",
+      letterSpacing: "-0.02em",
+      marginTop: "0",
+      marginBottom: "0.8em",
+      lineHeight: "1.2em",
+    },
+    "& h2": {
+      fontSize: "1.4em",
+      letterSpacing: "-0.02em",
+      marginTop: "1.6em",
+      marginBottom: "0.8em",
+      lineHeight: "1.4em",
+    },
+    "& h3": {
+      fontSize: "1.285em",
+      letterSpacing: "-0.01em",
+      marginTop: "1.5em",
+      marginBottom: "0.4em",
+      lineHeight: "1.5em",
+    },
+    "& h4": {
+      marginTop: "1.4em",
+      marginBottom: "0.5em",
+      letterSpacing: "-0.01em",
+      lineHeight: "1.5em",
+    },
+    "& img": {
+      marginTop: "1.7em",
+      marginBottom: "1.7em",
+      borderRadius: "lg",
+      boxShadow: "inset",
+    },
+    "& picture": {
+      marginTop: "1.7em",
+      marginBottom: "1.7em",
+    },
+    "& picture > img": {
+      marginTop: "0",
+      marginBottom: "0",
+    },
+    "& video": {
+      marginTop: "1.7em",
+      marginBottom: "1.7em",
+    },
+    "& kbd": {
+      fontSize: "0.85em",
+      borderRadius: "xs",
+      paddingTop: "0.15em",
+      paddingBottom: "0.15em",
+      paddingInlineEnd: "0.35em",
+      paddingInlineStart: "0.35em",
+      fontFamily: "inherit",
+      color: "fg.muted",
+      "--shadow": "colors.border",
+      boxShadow: "0 0 0 1px var(--shadow),0 1px 0 1px var(--shadow)",
+    },
+    "& code": {
+      fontSize: "0.925em",
+      letterSpacing: "-0.01em",
+      borderRadius: "md",
+      borderWidth: "1px",
+      padding: "0.25em",
+    },
+    "& pre code": {
+      fontSize: "inherit",
+      letterSpacing: "inherit",
+      borderWidth: "inherit",
+      padding: "0",
+    },
+    "& h2 code": {
+      fontSize: "0.9em",
+    },
+    "& h3 code": {
+      fontSize: "0.8em",
+    },
+    "& pre": {
+      backgroundColor: "bg.subtle",
+      marginTop: "1.6em",
+      marginBottom: "1.6em",
+      borderRadius: "md",
+      fontSize: "0.9em",
+      paddingTop: "0.65em",
+      paddingBottom: "0.65em",
+      paddingInlineEnd: "1em",
+      paddingInlineStart: "1em",
+      overflowX: "auto",
+      fontWeight: "400",
+    },
+    "& ol": {
+      marginTop: "1em",
+      marginBottom: "1em",
+      paddingInlineStart: "1.5em",
+    },
+    "& ul": {
+      marginTop: "1em",
+      marginBottom: "1em",
+      paddingInlineStart: "1.5em",
+    },
+    "& li": {
+      marginTop: "0.285em",
+      marginBottom: "0.285em",
+    },
+    "& ol > li": {
+      paddingInlineStart: "0.4em",
+      listStyleType: "decimal",
+      "&::marker": {
+        color: "fg.muted",
+      },
+    },
+    "& ul > li": {
+      paddingInlineStart: "0.4em",
+      listStyleType: "disc",
+      "&::marker": {
+        color: "fg.muted",
+      },
+    },
+    "& > ul > li p": {
+      marginTop: "0.5em",
+      marginBottom: "0.5em",
+    },
+    "& > ul > li > p:first-of-type": {
+      marginTop: "1em",
+    },
+    "& > ul > li > p:last-of-type": {
+      marginBottom: "1em",
+    },
+    "& > ol > li > p:first-of-type": {
+      marginTop: "1em",
+    },
+    "& > ol > li > p:last-of-type": {
+      marginBottom: "1em",
+    },
+    "& ul ul, ul ol, ol ul, ol ol": {
+      marginTop: "0.5em",
+      marginBottom: "0.5em",
+    },
+    "& dl": {
+      marginTop: "1em",
+      marginBottom: "1em",
+    },
+    "& dt": {
+      fontWeight: "600",
+      marginTop: "1em",
+    },
+    "& dd": {
+      marginTop: "0.285em",
+      paddingInlineStart: "1.5em",
+    },
+    "& hr": {
+      marginTop: "2.25em",
+      marginBottom: "2.25em",
+    },
+    "& :is(h1,h2,h3,h4,h5,hr) + *": {
+      marginTop: "0",
+    },
+    "& table": {
+      width: "100%",
+      tableLayout: "auto",
+      textAlign: "start",
+      lineHeight: "1.5em",
+      marginTop: "2em",
+      marginBottom: "2em",
+    },
+    "& thead": {
+      borderBottomWidth: "1px",
+      color: "fg",
+    },
+    "& tbody tr": {
+      borderBottomWidth: "1px",
+      borderBottomColor: "border",
+    },
+    "& thead th": {
+      paddingInlineEnd: "1em",
+      paddingBottom: "0.65em",
+      paddingInlineStart: "1em",
+      fontWeight: "medium",
+      textAlign: "start",
+    },
+    "& thead th:first-of-type": {
+      paddingInlineStart: "0",
+    },
+    "& thead th:last-of-type": {
+      paddingInlineEnd: "0",
+    },
+    "& tbody td, tfoot td": {
+      paddingTop: "0.65em",
+      paddingInlineEnd: "1em",
+      paddingBottom: "0.65em",
+      paddingInlineStart: "1em",
+    },
+    "& tbody td:first-of-type, tfoot td:first-of-type": {
+      paddingInlineStart: "0",
+    },
+    "& tbody td:last-of-type, tfoot td:last-of-type": {
+      paddingInlineEnd: "0",
+    },
+    "& figure": {
+      marginTop: "1.625em",
+      marginBottom: "1.625em",
+    },
+    "& figure > *": {
+      marginTop: "0",
+      marginBottom: "0",
+    },
+    "& figcaption": {
+      fontSize: "0.85em",
+      lineHeight: "1.25em",
+      marginTop: "0.85em",
+      color: "fg.muted",
+    },
+    "& h1, h2, h3, h4": {
+      color: "fg",
+      fontWeight: "600",
+    },
+  },
+  variants: {
+    size: {
+      md: {
+        fontSize: "sm",
+      },
+      lg: {
+        fontSize: "md",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+})

package/src/components/provider.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
+import { ColorModeProvider } from "compositions/ui/color-mode"
+
+export function Provider(props: React.PropsWithChildren) {
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider>{props.children}</ColorModeProvider>
+    </ChakraProvider>
+  )
+}

package/src/components/radio/index.ts

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