@cocso-ui/react 0.2.21 → 1.0.1

package/dist/esm/components/button/button.mjs

@@ -0,0 +1,80 @@
+import { button } from '../../ecosystem/codegen/generated/button.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './button.module.css.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { fontWeight } from '../../token/typography.mjs';
+import { Spinner } from '../spinner/spinner.mjs';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+
+function getButtonSpinnerVariant(variant) {
+  return ["primary", "success", "error", "info"].includes(variant) ? "white" : "secondary";
+}
+
+/** Polymorphic button component with variant, color, and size options. */
+function Button({
+  render: renderProp,
+  ref,
+  className,
+  style: _style,
+  children,
+  size = "medium",
+  variant = "primary",
+  weight = "medium",
+  shape = "square",
+  prefix,
+  suffix,
+  svgOnly = false,
+  disabled = false,
+  loading = false,
+  spinnerVariant,
+  ...props
+}) {
+  const style = {
+    ..._style,
+    "--cocso-button-font-weight": fontWeight[weight]
+  };
+  const isDisabled = disabled || loading;
+  const mergedClassName = cn(button({
+    variant,
+    size,
+    shape
+  }), styles.button, svgOnly && styles.svgOnly, className);
+  const renderButtonContent = ctx => /*#__PURE__*/jsxs(Fragment, {
+    children: [loading && /*#__PURE__*/jsx("span", {
+      className: styles.spinnerOverlay,
+      children: /*#__PURE__*/jsx(Spinner, {
+        size: "medium",
+        variant: spinnerVariant ?? getButtonSpinnerVariant(variant)
+      })
+    }), /*#__PURE__*/jsxs("span", {
+      className: cn(styles.buttonInner, loading && styles.invisible),
+      children: [prefix && /*#__PURE__*/jsx("span", {
+        className: styles.prefix,
+        children: prefix
+      }), /*#__PURE__*/jsx("span", {
+        className: styles.content,
+        children: ctx
+      }), suffix && /*#__PURE__*/jsx("span", {
+        className: styles.suffix,
+        children: suffix
+      })]
+    })]
+  });
+  return useRender({
+    render: renderProp,
+    ref,
+    props: mergeProps({
+      className: mergedClassName,
+      style,
+      disabled: isDisabled,
+      "aria-busy": loading || undefined,
+      type: "button"
+    }, props, {
+      children: renderButtonContent(children)
+    }),
+    defaultTagName: "button"
+  });
+}
+
+export { Button };

package/dist/esm/components/button/button.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"button":"button-module_button__5dzDN","content":"button-module_content__q0g4H","prefix":"button-module_prefix__836bE","suffix":"button-module_suffix__6k1TK","svgOnly":"button-module_svgOnly__QHNx6","spinnerOverlay":"button-module_spinnerOverlay__kbemq","buttonInner":"button-module_buttonInner__aXpaa","invisible":"button-module_invisible__esdRe"};
+
+export { styles as default };

package/dist/esm/components/card/card.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type CardVariant = "elevated" | "outlined" | "filled";
+type CardPadding = "sm" | "md" | "lg";
+interface CardProps extends ComponentProps<"div"> {
+    padding?: CardPadding;
+    variant?: CardVariant;
+}
+declare function Card({ ref, className, style, variant, padding, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
+export { Card };
+export type { CardPadding, CardProps, CardVariant };

package/dist/esm/components/card/card.mjs

@@ -0,0 +1,27 @@
+import { card } from '../../ecosystem/codegen/generated/card.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './card.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function Card({
+  ref,
+  className,
+  style,
+  variant = "elevated",
+  padding = "md",
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsx("div", {
+    className: cn(card({
+      variant,
+      padding
+    }), styles.card, variant === "elevated" && styles.elevated, className),
+    ref: ref,
+    style: style,
+    ...props,
+    children: children
+  });
+}
+
+export { Card };

package/dist/esm/components/card/card.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"card":"card-module_card__ZPFTz","elevated":"card-module_elevated__Gua8s"};
+
+export { styles as default };

package/dist/esm/components/checkbox/checkbox.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+
+type CheckboxSize = "large" | "medium" | "small";
+type CheckboxStatus = "on" | "off" | "intermediate";
+interface CheckboxProps extends Omit<ComponentProps<typeof Checkbox$1.Root>, "checked" | "onCheckedChange" | "onChange" | "indeterminate" | "defaultChecked"> {
+    defaultStatus?: CheckboxStatus;
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+    onChange?: (status: "on" | "off") => void;
+    size?: CheckboxSize;
+    status?: CheckboxStatus;
+}
+/** Check/uncheck toggle with support for an indeterminate state. */
+declare function Checkbox({ ref, id: _id, className, style: _style, size, status: statusProp, defaultStatus, onChange, label, disabled, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+export { Checkbox };
+export type { CheckboxProps, CheckboxSize, CheckboxStatus };

package/dist/esm/components/checkbox/checkbox.mjs

@@ -0,0 +1,113 @@
+"use client";
+import { checkbox } from '../../ecosystem/codegen/generated/checkbox.mjs';
+import { CheckIcon, CheckIndeterminateSmallIcon } from '@cocso-ui/react-icons';
+import { useId, useRef, useState } from 'react';
+import { match } from 'ts-pattern';
+import { cn } from '../../cn.mjs';
+import styles from './checkbox.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { colors } from '../../token/color.mjs';
+import { Typography } from '../typography/typography.mjs';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+
+/** Check/uncheck toggle with support for an indeterminate state. */
+function Checkbox({
+  ref,
+  id: _id,
+  className,
+  style: _style,
+  size = "medium",
+  status: statusProp,
+  defaultStatus,
+  onChange,
+  label,
+  disabled,
+  ...props
+}) {
+  const generatedId = useId();
+  const id = _id ?? generatedId;
+  const isControlledRef = useRef(statusProp !== undefined);
+  const isControlled = isControlledRef.current;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (statusProp !== undefined)) {
+      console.error("Checkbox: switching between controlled and uncontrolled mode is not supported. " + "Use `status` (controlled) or `defaultStatus` (uncontrolled) for the component lifetime.");
+    }
+    if (statusProp !== undefined && defaultStatus !== undefined) {
+      console.error("Checkbox: `status` and `defaultStatus` are mutually exclusive. " + "Use `status` for controlled mode or `defaultStatus` for uncontrolled mode.");
+    }
+  }
+  const [internalStatus, setInternalStatus] = useState(defaultStatus ?? "off");
+  const status = isControlled ? statusProp : internalStatus;
+  const handleCheckedChange = checked => {
+    if (!disabled) {
+      const nextStatus = checked ? "on" : "off";
+      if (!isControlled) {
+        setInternalStatus(nextStatus);
+      }
+      onChange?.(nextStatus);
+    }
+  };
+  const style = {
+    ..._style,
+    "--cocso-checkbox-color": colors.white
+  };
+  const checkedState = getCheckedState(status);
+  return /*#__PURE__*/jsxs("div", {
+    className: cn(checkbox({
+      size,
+      status
+    }), styles.wrapper, className),
+    style: style,
+    children: [/*#__PURE__*/jsxs(Checkbox$1.Root, {
+      checked: checkedState.checked,
+      className: styles.checkbox,
+      disabled: disabled,
+      id: id,
+      indeterminate: checkedState.indeterminate,
+      onCheckedChange: handleCheckedChange,
+      ref: ref,
+      ...props,
+      children: [/*#__PURE__*/jsx(Checkbox$1.Indicator, {
+        className: styles.indicator,
+        style: {
+          opacity: status === "on" ? 1 : 0
+        },
+        children: /*#__PURE__*/jsx(CheckIcon, {
+          className: styles.icon,
+          size: 24
+        })
+      }), /*#__PURE__*/jsx("div", {
+        "aria-hidden": "true",
+        className: styles.indicator,
+        style: {
+          opacity: status === "intermediate" ? 1 : 0
+        },
+        children: /*#__PURE__*/jsx(CheckIndeterminateSmallIcon, {
+          className: styles.icon,
+          size: 24
+        })
+      })]
+    }), label && /*#__PURE__*/jsx(Typography, {
+      "aria-disabled": disabled,
+      className: styles.label,
+      render: /*#__PURE__*/jsx("label", {
+        htmlFor: id,
+        children: label
+      }),
+      size: size,
+      type: "body"
+    })]
+  });
+}
+const getCheckedState = status => match(status).with("on", () => ({
+  checked: true,
+  indeterminate: false
+})).with("intermediate", () => ({
+  checked: false,
+  indeterminate: true
+})).with("off", () => ({
+  checked: false,
+  indeterminate: false
+})).exhaustive();
+
+export { Checkbox };

package/dist/esm/components/checkbox/checkbox.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"wrapper":"checkbox-module_wrapper__vP2bp","checkbox":"checkbox-module_checkbox__zAB1y","icon":"checkbox-module_icon__Taf0X","indicator":"checkbox-module_indicator__Cs9Yi","label":"checkbox-module_label__EvRQ7"};
+
+export { styles as default };

package/dist/esm/components/day-picker/day-picker.d.mts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Locale } from 'date-fns';
+import { ComponentProps, ReactElement } from 'react';
+
+interface DayPickerProps extends Omit<ComponentProps<"div">, "children"> {
+    dateFormat?: string;
+    disabled?: boolean;
+    locale?: Locale;
+    maxDate?: Date;
+    minDate?: Date;
+    onValueChange?: (value: Date | null) => void;
+    trigger?: ReactElement;
+    value?: Date;
+}
+declare function DayPicker({ ref, className, value, onValueChange, disabled, trigger, locale, dateFormat, minDate, maxDate, ...props }: DayPickerProps): react_jsx_runtime.JSX.Element;
+
+export { DayPicker };
+export type { DayPickerProps };

package/dist/esm/components/day-picker/day-picker.mjs

@@ -0,0 +1,115 @@
+"use client";
+import { ArrowIOSBackwardIcon, ArrowIOSForwardIcon } from '@cocso-ui/react-icons';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { useState } from 'react';
+import DatePicker from 'react-datepicker';
+import { cn } from '../../cn.mjs';
+import styles from './day-picker.module.css.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Dropdown } from '../dropdown/dropdown.mjs';
+import { Button } from '../button/button.mjs';
+import { Typography } from '../typography/typography.mjs';
+
+function DayPicker({
+  ref,
+  className,
+  value,
+  onValueChange,
+  disabled,
+  trigger,
+  locale = ko,
+  dateFormat = "yyyy년 MM월 dd일",
+  minDate,
+  maxDate,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const handleChange = date => {
+    onValueChange?.(date);
+    setOpen(false);
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: cn(styles.root, className),
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/jsxs(Dropdown, {
+      onOpenChange: setOpen,
+      open: open,
+      children: [/*#__PURE__*/jsx(Dropdown.Trigger, {
+        render: trigger ?? /*#__PURE__*/jsx(Button, {
+          disabled: disabled,
+          size: "small",
+          variant: "outline",
+          children: value ? format(value, dateFormat, {
+            locale
+          }) : "Select date"
+        })
+      }), /*#__PURE__*/jsx(Dropdown.Content, {
+        "aria-label": "Select date",
+        className: styles.content,
+        children: /*#__PURE__*/jsx(DatePicker, {
+          dateFormat: dateFormat,
+          dayClassName: date => {
+            const day = date.getDay();
+            if (day === 0) {
+              return styles.sunday;
+            }
+            if (day === 6) {
+              return styles.saturday;
+            }
+            return "";
+          },
+          disabled: disabled,
+          inline: true,
+          locale: locale,
+          maxDate: maxDate,
+          minDate: minDate,
+          onChange: handleChange,
+          renderCustomHeader: ({
+            date,
+            decreaseMonth,
+            increaseMonth,
+            prevMonthButtonDisabled,
+            nextMonthButtonDisabled
+          }) => /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(Typography, {
+              size: "small",
+              type: "body",
+              weight: "semibold",
+              children: date.toLocaleDateString(locale.code ?? "ko-KR", {
+                year: "numeric",
+                month: "long"
+              })
+            }), /*#__PURE__*/jsxs("div", {
+              className: styles.menu,
+              children: [/*#__PURE__*/jsx(Button, {
+                className: styles.arrow,
+                disabled: prevMonthButtonDisabled,
+                onClick: decreaseMonth,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsx(ArrowIOSBackwardIcon, {})
+              }), /*#__PURE__*/jsx(Button, {
+                className: styles.arrow,
+                disabled: nextMonthButtonDisabled,
+                onClick: increaseMonth,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
+              })]
+            })]
+          }),
+          selected: value,
+          showPopperArrow: false
+        })
+      })]
+    })
+  });
+}
+
+export { DayPicker };

package/dist/esm/components/day-picker/day-picker.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"root":"day-picker-module_root__QVrbb","content":"day-picker-module_content__34qUu","menu":"day-picker-module_menu__2eMt0","arrow":"day-picker-module_arrow__p9QLq","sunday":"day-picker-module_sunday__nVavs","saturday":"day-picker-module_saturday__ZYoB9"};
+
+export { styles as default };

package/dist/esm/components/dialog/dialog.d.mts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactElement } from 'react';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+
+type DialogSize = "small" | "medium" | "large";
+declare function DialogContent({ className, size, children, ...props }: ComponentProps<typeof Dialog$1.Popup> & {
+    size?: DialogSize;
+}): react_jsx_runtime.JSX.Element;
+interface DialogCloseProps extends ComponentProps<typeof Dialog$1.Close> {
+    render?: ReactElement;
+}
+declare function DialogClose({ className, render: renderProp, children, ...props }: DialogCloseProps): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, children, ...props }: ComponentProps<typeof Dialog$1.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, children, ...props }: ComponentProps<typeof Dialog$1.Description>): react_jsx_runtime.JSX.Element;
+/**
+ * Modal dialog. Compose with `Dialog.Trigger`, `Dialog.Content`, `Dialog.Title`,
+ * `Dialog.Description`, and `Dialog.Close`.
+ */
+declare const Dialog: typeof Dialog$1.Root & {
+    displayName: "Dialog";
+    Trigger: Dialog$1.Trigger;
+    Content: typeof DialogContent;
+    Close: typeof DialogClose;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+};
+
+export { Dialog };
+export type { DialogCloseProps, DialogSize };

package/dist/esm/components/dialog/dialog.mjs

@@ -0,0 +1,103 @@
+import { CloseIcon } from '@cocso-ui/react-icons';
+import { cn } from '../../cn.mjs';
+import styles from './dialog.module.css.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Typography } from '../typography/typography.mjs';
+import { colors } from '../../token/color.mjs';
+import { Button } from '../button/button.mjs';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+
+function DialogContent({
+  className,
+  size = "medium",
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs(Dialog$1.Portal, {
+    children: [/*#__PURE__*/jsx(Dialog$1.Backdrop, {
+      className: styles.overlay,
+      "data-cocso-component": "dialog-overlay"
+    }), /*#__PURE__*/jsx(Dialog$1.Popup, {
+      className: cn(styles.panel, styles[size], className),
+      "data-cocso-component": "dialog-content",
+      ...props,
+      children: children
+    })]
+  });
+}
+function DialogClose({
+  className,
+  render: renderProp,
+  children,
+  ...props
+}) {
+  if (renderProp) {
+    return /*#__PURE__*/jsx(Dialog$1.Close, {
+      className: className,
+      render: renderProp,
+      ...props
+    });
+  }
+  return /*#__PURE__*/jsx(Dialog$1.Close, {
+    "aria-label": "Close",
+    className: cn(styles.close, className),
+    render: /*#__PURE__*/jsx(Button, {
+      size: "x-small",
+      svgOnly: true,
+      variant: "outline",
+      children: /*#__PURE__*/jsx(CloseIcon, {
+        size: 14
+      })
+    }),
+    ...props,
+    children: children
+  });
+}
+function DialogTitle({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Dialog$1.Title, {
+    className: cn(styles.title, className),
+    render: /*#__PURE__*/jsx(Typography, {
+      size: 20,
+      type: "custom",
+      weight: "bold"
+    }),
+    ...props,
+    children: children
+  });
+}
+function DialogDescription({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Dialog$1.Description, {
+    className: cn(styles.description, className),
+    render: /*#__PURE__*/jsx(Typography, {
+      color: colors.textSecondary,
+      size: 14,
+      type: "custom",
+      weight: "medium"
+    }),
+    ...props,
+    children: children
+  });
+}
+
+/**
+ * Modal dialog. Compose with `Dialog.Trigger`, `Dialog.Content`, `Dialog.Title`,
+ * `Dialog.Description`, and `Dialog.Close`.
+ */
+const Dialog = Object.assign(Dialog$1.Root, {
+  displayName: "Dialog",
+  Trigger: Dialog$1.Trigger,
+  Content: DialogContent,
+  Close: DialogClose,
+  Title: DialogTitle,
+  Description: DialogDescription
+});
+
+export { Dialog };

package/dist/esm/components/dialog/dialog.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"overlay":"dialog-module_overlay__aJLpW","overlay-show":"dialog-module_overlay-show__gzSZE","panel":"dialog-module_panel__5XCTU","content-show":"dialog-module_content-show__rVhLI","small":"dialog-module_small__JObfk","medium":"dialog-module_medium__Xxtor","large":"dialog-module_large__O71LV","close":"dialog-module_close__cuRe9","title":"dialog-module_title__E36pq","description":"dialog-module_description__DNssa"};
+
+export { styles as default };

package/dist/esm/components/dropdown/dropdown.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+import { Menu } from '@base-ui/react/menu';
+
+declare function DropdownContent({ className, side, sideOffset, align, alignOffset, arrowPadding, ...props }: ComponentProps<typeof Menu.Popup> & Pick<ComponentProps<typeof Menu.Positioner>, "side" | "sideOffset" | "align" | "alignOffset" | "arrowPadding">): react_jsx_runtime.JSX.Element;
+declare function DropdownItem({ className, prefix, children, ...props }: Omit<ComponentProps<typeof Menu.Item>, "prefix"> & {
+    prefix?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare const Dropdown: (<Payload>(props: Menu.Root.Props<Payload>) => react_jsx_runtime.JSX.Element) & {
+    displayName: "Dropdown";
+    Trigger: Menu.Trigger;
+    Content: typeof DropdownContent;
+    Item: typeof DropdownItem;
+};
+
+export { Dropdown };

package/dist/esm/components/dropdown/dropdown.mjs

@@ -0,0 +1,54 @@
+import { cn } from '../../cn.mjs';
+import styles from './dropdown.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Menu } from '@base-ui/react/menu';
+
+function DropdownContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Menu.Portal, {
+    children: /*#__PURE__*/jsx(Menu.Positioner, {
+      align: align,
+      alignOffset: alignOffset,
+      arrowPadding: arrowPadding,
+      className: styles.positioner,
+      side: side,
+      sideOffset: sideOffset,
+      children: /*#__PURE__*/jsx(Menu.Popup, {
+        className: cn(styles.content, className),
+        "data-cocso-component": "dropdown-content",
+        ...props
+      })
+    })
+  });
+}
+function DropdownItem({
+  className,
+  prefix,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs(Menu.Item, {
+    className: cn(styles.item, className),
+    "data-cocso-component": "dropdown-item",
+    ...props,
+    children: [prefix && /*#__PURE__*/jsx("span", {
+      className: styles.prefix,
+      children: prefix
+    }), children]
+  });
+}
+const Dropdown = Object.assign(Menu.Root, {
+  displayName: "Dropdown",
+  Trigger: Menu.Trigger,
+  Content: DropdownContent,
+  Item: DropdownItem
+});
+
+export { Dropdown };

package/dist/esm/components/dropdown/dropdown.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"content":"dropdown-module_content__nf11j","item":"dropdown-module_item__BvWCj","positioner":"dropdown-module_positioner__mGdXB","prefix":"dropdown-module_prefix__oBteB"};
+
+export { styles as default };

package/dist/esm/components/field/field.d.mts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FieldContextValue {
+    descriptionId?: string;
+    errorId?: string;
+}
+declare const useField: () => FieldContextValue;
+interface FieldProps {
+    children: ReactNode;
+    description?: string;
+    error?: string;
+    htmlFor?: string;
+    label: string;
+    optionalLabel?: string;
+    /**
+     * `true` = required field (no indicator shown).
+     * `false` = explicitly optional — shows "(Optional)" indicator.
+     * `undefined` = no indicator shown.
+     */
+    required?: boolean;
+}
+declare function Field({ children, label, htmlFor, required, optionalLabel, error, description, }: FieldProps): react_jsx_runtime.JSX.Element;
+
+export { Field, useField };
+export type { FieldProps };