@jongh/ui 1.6.5

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

@@ -0,0 +1,30 @@
+import { sva } from "@styled-system/css"
+
+export const recipe = sva({
+  slots: ["root", "image", "fallback"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      h: "12",
+      w: "12",
+      flexShrink: "0",
+      overflow: "hidden",
+      rounded: "full",
+    },
+    image: {
+      aspectRatio: "square",
+      h: "full",
+      w: "full",
+    },
+    fallback: {
+      display: "flex",
+      h: "full",
+      w: "full",
+      alignItems: "center",
+      justifyContent: "center",
+      rounded: "full",
+      bg: "muted",
+    },
+  },
+})

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

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

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

@@ -0,0 +1,102 @@
+import { cva, type RecipeVariantProps } from "@styled-system/css"
+
+export type ButtonVariantProps = RecipeVariantProps<typeof recipe>
+export const recipe = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    rounded: "md",
+    textStyle: "sm",
+    fontWeight: "medium",
+    transition: "colors",
+    cursor: "pointer",
+    gap: "2",
+    _focusVisible: {
+      ringWidth: "1",
+      ringColor: "ring",
+      ringOffset: "1",
+    },
+
+    _disabled: {
+      cursor: "not-allowed",
+      opacity: "50%",
+    },
+  },
+  variants: {
+    variant: {
+      default: {
+        bg: "primary",
+        color: "primary.foreground",
+
+        _hover: {
+          bg: "primary/90",
+        },
+      },
+      destructive: {
+        bg: "destructive",
+        color: "destructive.foreground",
+
+        _hover: {
+          bg: "destructive/90",
+        },
+      },
+      outline: {
+        border: "input",
+        bg: "background",
+
+        _hover: {
+          bg: "accent",
+          color: "accent.foreground",
+        },
+      },
+      secondary: {
+        bg: "secondary",
+        color: "secondary.foreground",
+
+        _hover: {
+          bga: "secondary/90",
+        },
+      },
+      ghost: {
+        _hover: {
+          bg: "accent",
+          color: "accent.foreground",
+        },
+      },
+      link: {
+        color: "primary",
+        textUnderlineOffset: "4px",
+
+        _hover: {
+          textDecoration: "underline",
+        },
+      },
+    },
+    size: {
+      default: {
+        h: "10",
+        px: "4",
+        py: "2",
+      },
+      sm: {
+        h: "9",
+        rounded: "md",
+        px: "3",
+      },
+      lg: {
+        h: "11",
+        rounded: "md",
+        px: "8",
+      },
+      icon: {
+        h: "10",
+        w: "10",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+})

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

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

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

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

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

@@ -0,0 +1,128 @@
+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}
+    />
+  )
+})