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

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,143 +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}
-        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

@@ -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/popover.tsx

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

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

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

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

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

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