@jongh/ui 1.6.5 → 2.20260905.1

package/src/component/chip/ui/index.tsx

@@ -1,30 +0,0 @@
-import { css, cx } from "@styled-system/css"
-import { Slot } from "radix-ui"
-import { type ComponentPropsWithoutRef, forwardRef } from "react"
-
-import { type ChipVariantProps, recipe } from "./recipe"
-
-export type ChipProps = ComponentPropsWithoutRef<"button"> &
-  ChipVariantProps & {
-    asChild?: boolean
-  }
-
-export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
-  ({ asChild, className, children, ...props }, ref) => {
-    const Comp = asChild ? Slot.Root : "button"
-    const [variantProps, componentProps] = recipe.splitVariantProps(props)
-    const styles = recipe.raw(variantProps)
-
-    return (
-      <Comp
-        ref={ref}
-        className={cx(css(styles), className)}
-        {...componentProps}
-      >
-        {children}
-      </Comp>
-    )
-  },
-)
-
-Chip.displayName = "Chip"

package/src/component/chip/ui/recipe.ts

@@ -1,112 +0,0 @@
-import { cva, type RecipeVariantProps } from "@styled-system/css"
-
-export type ChipVariantProps = RecipeVariantProps<typeof recipe>
-export const recipe = cva({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "full",
-    transition: "colors",
-    cursor: "pointer",
-    _focusVisible: {
-      ringWidth: "1",
-      ringColor: "ring",
-      ringOffset: "1",
-    },
-    "& svg": {
-      flexShrink: 0,
-    },
-    _disabled: {
-      opacity: 0.5,
-      cursor: "not-allowed",
-    },
-  },
-  variants: {
-    variant: {
-      filled: {
-        bg: "secondary",
-        color: "secondary.foreground",
-        _hover: {
-          bg: "secondary/80",
-        },
-      },
-      outlined: {
-        border: "base",
-        bg: "background",
-        color: "foreground",
-        _hover: {
-          bg: "secondary",
-        },
-      },
-    },
-    size: {
-      sm: {
-        height: "7",
-        fontSize: "sm",
-        "& svg": {
-          width: "3",
-          height: "3",
-        },
-      },
-      md: {
-        height: "9",
-        fontSize: "lg",
-        "& svg": {
-          width: "4",
-          height: "4",
-        },
-      },
-    },
-    layout: {
-      withText: {},
-      iconOnly: {
-        px: "2",
-        "& svg": {
-          m: "0",
-        },
-      },
-    },
-  },
-  compoundVariants: [
-    {
-      layout: "iconOnly",
-      size: "sm",
-      css: {
-        width: "7",
-        height: "7",
-      },
-    },
-    {
-      layout: "iconOnly",
-      size: "md",
-      css: {
-        width: "9",
-        height: "9",
-      },
-    },
-    {
-      layout: "withText",
-      size: "sm",
-      css: {
-        px: "2",
-        py: "1",
-        gap: "1",
-      },
-    },
-    {
-      layout: "withText",
-      size: "md",
-      css: {
-        px: "3",
-        py: "2",
-        gap: "2",
-      },
-    },
-  ],
-  defaultVariants: {
-    variant: "filled",
-    size: "md",
-    layout: "withText",
-  },
-})

package/src/component/dialog/ui/index.tsx

@@ -1,73 +0,0 @@
-import { css } from "@styled-system/css"
-import { createStyleContext } from "@utils/createStyleContext"
-import { X } from "lucide-react"
-import { Dialog } from "radix-ui"
-import {
-  type ComponentProps,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  forwardRef,
-} from "react"
-
-import { recipe } from "./recipe"
-
-const { withRootProvider, withContext } = createStyleContext(recipe)
-
-export const Root = withRootProvider(Dialog.Root)
-
-export const Portal = withRootProvider(Dialog.Portal)
-export const Overlay = withContext<
-  ElementRef<typeof Dialog.Overlay>,
-  Dialog.DialogOverlayProps
->(Dialog.Overlay, "overlay")
-
-export const Close = withContext<
-  ElementRef<typeof Dialog.Close>,
-  Dialog.DialogCloseProps
->(Dialog.Close, "close")
-
-export const ContentPrimitive = forwardRef<
-  React.ElementRef<typeof Dialog.Content>,
-  React.ComponentPropsWithoutRef<typeof Dialog.Content>
->(({ children, ...props }, ref) => (
-  <Portal>
-    <Overlay />
-    <Dialog.Content ref={ref} {...props}>
-      {children}
-      <Close>
-        <X />
-        <span className={css({ srOnly: true })}>Close</span>
-      </Close>
-    </Dialog.Content>
-  </Portal>
-))
-
-export const Content = withContext<
-  ElementRef<typeof ContentPrimitive>,
-  ComponentProps<typeof ContentPrimitive>
->(ContentPrimitive, "content")
-
-export const Trigger = withContext<
-  ElementRef<typeof Dialog.Trigger>,
-  Dialog.DialogTriggerProps
->(Dialog.Trigger, "trigger")
-
-export const Header = withContext<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->("div", "header")
-
-export const Footer = withContext<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<"div">
->("div", "footer")
-
-export const Title = withContext<
-  ElementRef<typeof Dialog.Title>,
-  Dialog.DialogTitleProps
->(Dialog.Title, "title")
-
-export const Description = withContext<
-  ElementRef<typeof Dialog.Description>,
-  Dialog.DialogDescriptionProps
->(Dialog.Description, "description")

package/src/component/dialog/ui/recipe.ts

@@ -1,92 +0,0 @@
-import { sva } from "@styled-system/css"
-
-export const recipe = sva({
-  slots: [
-    "root",
-    "trigger",
-    "portal",
-    "overlay",
-    "close",
-    "content",
-    "header",
-    "footer",
-    "title",
-    "description",
-  ],
-  base: {
-    overlay: {
-      position: "fixed",
-      inset: "0",
-      bg: "black/90",
-    },
-    content: {
-      bg: "background",
-      border: "input",
-      borderRadius: "md",
-      position: "fixed",
-      top: "[50%]",
-      left: "[50%]",
-      transform: "translate(-50%,-50%)",
-      width: "[100%]",
-      maxWidth: "[32rem]",
-      maxHeight: "[85vh]",
-      padding: "4",
-      "&[data-state=open]": {
-        animationName: "contentShow",
-        animationDuration: "slow",
-      },
-
-      "&[data-state=closed]": {
-        animationName: "fadeOut",
-        animationDuration: "slow",
-      },
-    },
-    close: {
-      position: "absolute",
-      right: "4",
-      top: "4",
-      rounded: "sm",
-      opacity: "0.7",
-      transition: "opacity",
-      cursor: "pointer",
-
-      _hover: {
-        opacity: "1",
-      },
-
-      _focus: {
-        ringWidth: "1",
-        ringColor: "ring",
-        ringOffset: "1",
-      },
-
-      _disabled: {
-        pointerEvents: "none",
-      },
-
-      "&[data-state=open]": {
-        bg: "accent",
-        color: "muted.foreground",
-      },
-    },
-    header: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "1.5",
-    },
-    footer: {
-      display: "flex",
-      flexDirection: "column-reverse",
-    },
-    title: {
-      fontSize: "lg",
-      fontWeight: "semibold",
-      lineHeight: "none",
-      letterSpacing: "tight",
-    },
-    description: {
-      fontSize: "sm",
-      color: "foreground",
-    },
-  },
-})

package/src/component/select/ui/index.tsx

@@ -1,128 +0,0 @@
-import { css, cx } from "@styled-system/css"
-import { Select as SelectPrimitive } from "radix-ui"
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
-
-import { recipe } from "./recipe"
-
-const BaseTrigger = forwardRef<
-  ElementRef<typeof SelectPrimitive.Trigger>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ children, ...props }, ref) => (
-  <SelectPrimitive.Trigger ref={ref} {...props}>
-    {children}
-    <SelectPrimitive.Icon asChild></SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-
-BaseTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-export const Root = SelectPrimitive.Root
-export const Group = SelectPrimitive.Group
-export const Value = SelectPrimitive.Value
-
-export const Trigger = forwardRef<
-  ElementRef<typeof BaseTrigger>,
-  ComponentPropsWithoutRef<typeof BaseTrigger>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <BaseTrigger
-      ref={ref}
-      className={cx(css(styles.trigger), className)}
-      {...props}
-    />
-  )
-})
-
-export const Content = forwardRef<
-  ElementRef<typeof SelectPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, position = "popper", children, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        ref={ref}
-        position={position}
-        data-position={position}
-        className={cx(css(styles.content), className)}
-        {...props}
-      >
-        <Viewport data-position={position}>{children}</Viewport>
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-})
-
-export const Viewport = forwardRef<
-  ElementRef<typeof SelectPrimitive.Viewport>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Viewport>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SelectPrimitive.Viewport
-      ref={ref}
-      {...props}
-      className={cx(css(styles.viewport), className)}
-    />
-  )
-})
-
-export const Item = forwardRef<
-  ElementRef<typeof SelectPrimitive.Item>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SelectPrimitive.Item
-      ref={ref}
-      className={cx(css(styles.item), className)}
-      {...props}
-    >
-      <Indicator />
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-})
-
-export const Label = forwardRef<
-  ElementRef<typeof SelectPrimitive.Label>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SelectPrimitive.Label
-      ref={ref}
-      className={cx(css(styles.label), className)}
-      {...props}
-    />
-  )
-})
-
-export const Separator = forwardRef<
-  ElementRef<typeof SelectPrimitive.Separator>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SelectPrimitive.Separator
-      ref={ref}
-      className={cx(css(styles.separator), className)}
-      {...props}
-    />
-  )
-})
-
-export const Indicator = forwardRef<
-  ElementRef<typeof SelectPrimitive.ItemIndicator>,
-  ComponentPropsWithoutRef<typeof SelectPrimitive.ItemIndicator>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SelectPrimitive.ItemIndicator
-      ref={ref}
-      className={cx(css(styles.itemIndicator), className)}
-      {...props}
-    />
-  )
-})

package/src/component/select/ui/recipe.ts

@@ -1,142 +0,0 @@
-import { sva } from "@styled-system/css"
-
-export const recipe = sva({
-  className: "select",
-  slots: [
-    "root",
-    "group",
-    "value",
-    "trigger",
-    "viewport",
-    "content",
-    "label",
-    "item",
-    "itemIndicator",
-    "separator",
-  ],
-  base: {
-    trigger: {
-      display: "flex",
-      h: "10",
-      w: "full",
-      alignItems: "center",
-      justifyContent: "space-between",
-      rounded: "md",
-      border: "input",
-      bg: "transparent",
-      px: "3",
-      py: "2",
-      textStyle: "sm",
-      cursor: "pointer",
-      ringColor: "background",
-
-      _placeholder: {
-        color: "muted.foreground",
-      },
-
-      _focus: {
-        ringWidth: "1",
-        ringColor: "ring",
-        outlineOffset: "1",
-      },
-
-      _disabled: {
-        cursor: "not-allowed",
-        opacity: "0.5",
-      },
-    },
-    viewport: {
-      "&:is([data-position=popper])": {
-        h: "var(--radix-select-trigger-height)",
-        w: "full",
-        minW: "var(--radix-select-trigger-width)",
-      },
-    },
-    content: {
-      position: "relative",
-      zIndex: 50,
-      minW: "full",
-      overflow: "hidden",
-      rounded: "md",
-      border: "base",
-      bg: "popover",
-      color: "popover.foreground",
-      shadow: "md",
-      maxH: "96",
-
-      "&:is([data-state=open])": {
-        animationName: "fadeIn",
-        animationState: "ease-in",
-        animationDuration: "slowest",
-      },
-
-      "&:is(&[data-state=closed])": {
-        animationName: "slideInDown",
-        animationState: "ease-in",
-        animationDuration: "slowest",
-      },
-
-      "&:is([data-position=popper])": {
-        "&:is([data-side=top])": {
-          translateY: "-1",
-        },
-
-        "&:is([data-side=bottom])": {
-          translateY: "1",
-        },
-
-        "&:is([data-side=left])": {
-          translateX: "-1",
-        },
-
-        "&:is([data-side=right])": {
-          translateX: "1",
-        },
-      },
-    },
-    label: {
-      py: "1.5",
-      pl: "8",
-      pr: "2",
-      textStyle: "sm",
-      fontWeight: "semibold",
-    },
-    item: {
-      position: "relative",
-      display: "flex",
-      cursor: "default",
-      userSelect: "none",
-      alignItems: "center",
-      rounded: "sm",
-      py: "1.5",
-      pl: "8",
-      pr: "2",
-      textStyle: "sm",
-
-      _focus: {
-        bg: "accent",
-        color: "accent.foreground",
-      },
-
-      ["&[data-disabled]"]: {
-        pointerEvents: "none",
-        opacity: "0.5",
-      },
-    },
-    itemIndicator: {
-      position: "absolute",
-      left: "2",
-      display: "flex",
-      h: "3.5",
-      w: "3.5",
-      alignItems: "center",
-      justifyContent: "center",
-    },
-    separator: {
-      mx: "-1",
-      my: "1",
-      h: "1",
-      bg: "muted",
-    },
-  },
-})

package/src/component/slider/ui/index.tsx

@@ -1,61 +0,0 @@
-import { css, cx } from "@styled-system/css"
-import { Slider as SliderPrimitive } from "radix-ui"
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
-
-import { recipe } from "./recipe"
-
-export const Root = forwardRef<
-  ElementRef<typeof SliderPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SliderPrimitive.Root
-      ref={ref}
-      className={cx(css(styles.root), className)}
-      {...props}
-    />
-  )
-})
-
-export const Track = forwardRef<
-  ElementRef<typeof SliderPrimitive.Track>,
-  ComponentPropsWithoutRef<typeof SliderPrimitive.Track>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SliderPrimitive.Track
-      ref={ref}
-      className={cx(css(styles.track), className)}
-      {...props}
-    />
-  )
-})
-
-export const Range = forwardRef<
-  ElementRef<typeof SliderPrimitive.Range>,
-  ComponentPropsWithoutRef<typeof SliderPrimitive.Range>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SliderPrimitive.Range
-      ref={ref}
-      className={cx(css(styles.range), className)}
-      {...props}
-    />
-  )
-})
-
-export const Thumb = forwardRef<
-  ElementRef<typeof SliderPrimitive.Thumb>,
-  ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb>
->(({ className, ...props }, ref) => {
-  const styles = recipe.raw()
-  return (
-    <SliderPrimitive.Thumb
-      ref={ref}
-      className={cx(css(styles.thumb), className)}
-      {...props}
-    />
-  )
-})

package/src/component/slider/ui/recipe.ts

@@ -1,52 +0,0 @@
-import { sva } from "@styled-system/css"
-
-export const recipe = sva({
-  slots: ["root", "track", "range", "thumb"],
-  base: {
-    root: {
-      position: "relative",
-      display: "flex",
-      touchAction: "none",
-      userSelect: "none",
-      alignItems: "center",
-    },
-    track: {
-      position: "relative",
-      h: "2",
-      w: "full",
-      flexGrow: "1",
-      overflow: "hidden",
-      rounded: "full",
-      bg: "secondary",
-    },
-    range: {
-      position: "absolute",
-      h: "full",
-      bg: "primary",
-    },
-    thumb: {
-      display: "block",
-      h: "5",
-      w: "5",
-      cursor: "pointer",
-      rounded: "full",
-      borderWidth: "2px",
-      borderStyle: "solid",
-      borderColor: "primary",
-      bg: "background",
-      ringColor: "background",
-      transition: "colors",
-
-      _focusVisible: {
-        ringWidth: "1",
-        ringColor: "ring",
-        ringOffset: "1",
-      },
-
-      _disabled: {
-        pointerEvents: "none",
-        opacity: "0.5",
-      },
-    },
-  },
-})