feat: static unirse

src/components/ui/Button.tsx

@@ -0,0 +1,22 @@
+import { cx } from '@/styled-system/css'
+import { button, type ButtonVariantProps } from '@/styled-system/recipes/button'
+import { type MergeOmitting } from '@/types/utilities'
+import { type ButtonHTMLAttributes, type DetailedHTMLProps, type FC } from 'react'
+
+type ComposedButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonVariantProps>
+
+export interface ButtonProps extends ComposedButtonProps {}
+
+const Button: FC<ButtonProps> = ({ children, className, ...rest }) => {
+  const [buttonRecipeArgs, allOtherButtonProps] = button.splitVariantProps(rest)
+  return (
+    <button
+      className={cx(button(buttonRecipeArgs), className)}
+      {...allOtherButtonProps}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button

src/components/ui/IconButton.tsx

@@ -0,0 +1,22 @@
+import { cx } from '@/styled-system/css'
+import { iconButton, type IconButtonVariantProps } from '@/styled-system/recipes/icon-button'
+import { type MergeOmitting } from '@/types/utilities'
+import React, { type FC } from 'react'
+
+type ComposedIconButtonProps = MergeOmitting<React.HTMLAttributes<HTMLButtonElement>, IconButtonVariantProps>
+
+export interface IconButtonProps extends ComposedIconButtonProps {}
+
+const IconButton: FC<IconButtonProps> = ({ children, className, ...rest }) => {
+  const [iconButtonRecipeArgs, allOtherIconButtonProps] = iconButton.splitVariantProps(rest)
+  return (
+    <button
+      className={cx(iconButton(iconButtonRecipeArgs), className)}
+      {...allOtherIconButtonProps}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default IconButton

src/components/ui/form/FormGroup.tsx

@@ -0,0 +1,23 @@
+import { css, cx } from '@/styled-system/css'
+import { type DetailedHTMLProps, type FC, type HTMLAttributes, type ReactNode } from 'react'
+
+export interface FormGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  children: ReactNode
+}
+
+const FormGroup: FC<FormGroupProps> = ({ children, className, ...props }) => {
+  return (
+    <div
+      className={cx(css({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'small',
+        paddingBlock: 'small'
+      }), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+export default FormGroup

src/components/ui/form/Input.tsx

@@ -0,0 +1,17 @@
+import { cx } from '@/styled-system/css'
+import { input, type InputVariantProps } from '@/styled-system/recipes/input'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type InputHTMLAttributes } from 'react'
+
+export type InputProps = MergeOmitting<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputVariantProps>
+
+const Input: FC<InputProps> = ({ className, ...props }) => {
+  const [inputCss, rest] = input.splitVariantProps(props)
+  return (
+    <input
+      className={cx(input(inputCss), className)}
+      {...rest}
+    />
+  )
+}
+export default Input