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

package/src/compositions/native-select.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { NativeSelect as Select } from "@chakra-ui/react"
+import { forwardRef, useMemo } from "react"
+
+interface NativeSelectRootProps extends Select.RootProps {
+  icon?: React.ReactNode
+}
+
+export const NativeSelectRoot = forwardRef<
+  HTMLDivElement,
+  NativeSelectRootProps
+>(function NativeSelect(props, ref) {
+  const { icon, children, ...rest } = props
+  return (
+    <Select.Root ref={ref} {...rest}>
+      {children}
+      <Select.Indicator>{icon}</Select.Indicator>
+    </Select.Root>
+  )
+})
+
+interface NativeSelectItem {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+interface NativeSelectField extends Select.FieldProps {
+  items?: Array<string | NativeSelectItem>
+}
+
+export const NativeSelectField = forwardRef<
+  HTMLSelectElement,
+  NativeSelectField
+>(function NativeSelectField(props, ref) {
+  const { items: itemsProp, children, ...rest } = props
+
+  const items = useMemo(
+    () =>
+      itemsProp?.map((item) =>
+        typeof item === "string" ? { label: item, value: item } : item,
+      ),
+    [itemsProp],
+  )
+
+  return (
+    <Select.Field ref={ref} {...rest}>
+      {children}
+      {items?.map((item) => (
+        <option key={item.value} value={item.value} disabled={item.disabled}>
+          {item.label}
+        </option>
+      ))}
+    </Select.Field>
+  )
+})

package/src/compositions/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/compositions/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/compositions/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/compositions/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/compositions/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/compositions/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>
+  )
+}