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

package/src/compositions/native-select.tsx

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

@@ -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/compositions/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/compositions/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/compositions/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/compositions/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/compositions/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>
-  )
-}