@cocso-ui/react 0.2.20 → 1.0.0

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,101 @@
+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
+    }), /*#__PURE__*/jsx(Dialog$1.Popup, {
+      className: cn(styles.panel, styles[size], className),
+      ...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, ...props }: ComponentProps<typeof Menu.Popup>): 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,41 @@
+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,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Menu.Portal, {
+    children: /*#__PURE__*/jsx(Menu.Positioner, {
+      children: /*#__PURE__*/jsx(Menu.Popup, {
+        className: cn(styles.content, className),
+        ...props
+      })
+    })
+  });
+}
+function DropdownItem({
+  className,
+  prefix,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs(Menu.Item, {
+    className: cn(styles.item, className),
+    ...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","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 };

package/dist/esm/components/field/field.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { useId, useContext, createContext } from 'react';
+import styles from './field.module.css.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const FieldContext = /*#__PURE__*/createContext({});
+const useField = () => useContext(FieldContext);
+function Field({
+  children,
+  label,
+  htmlFor,
+  required,
+  optionalLabel,
+  error,
+  description
+}) {
+  const descriptionId = useId();
+  const errorId = useId();
+  return /*#__PURE__*/jsx(FieldContext.Provider, {
+    value: {
+      descriptionId: !error && description ? descriptionId : undefined,
+      errorId: error ? errorId : undefined
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/jsxs("label", {
+        className: styles.label,
+        htmlFor: htmlFor,
+        children: [label, required === false && /*#__PURE__*/jsx("span", {
+          className: styles.optional,
+          children: optionalLabel ?? "(Optional)"
+        })]
+      }), children, error && /*#__PURE__*/jsx("p", {
+        className: styles.errorMessage,
+        id: errorId,
+        children: error
+      }), !error && description && /*#__PURE__*/jsx("p", {
+        className: styles.description,
+        id: descriptionId,
+        children: description
+      })]
+    })
+  });
+}
+
+export { Field, useField };

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

@@ -0,0 +1,3 @@
+var styles = {"root":"field-module_root__m2CZV","label":"field-module_label__LbITU","optional":"field-module_optional__NE5TC","description":"field-module_description__qiTfj","errorMessage":"field-module_errorMessage__HWoWa"};
+
+export { styles as default };

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type InputSize = "large" | "medium" | "small" | "x-small";
+interface InputProps extends Omit<ComponentProps<"input">, "size"> {
+    description?: string;
+    disabled?: boolean;
+    error?: boolean | string;
+    label?: string;
+    size?: InputSize;
+    stretch?: boolean;
+}
+/** Text input component with size and variant options. */
+declare function Input({ ref, className, style: _style, size, disabled, error, stretch, label, description, id: _id, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+export { Input };
+export type { InputProps, InputSize };

package/dist/esm/components/input/input.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { input } from '../../ecosystem/codegen/generated/input.mjs';
+import { useId } from 'react';
+import { cn } from '../../cn.mjs';
+import styles from './input.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Field, useField } from '../field/field.mjs';
+
+/** Text input component with size and variant options. */
+function Input({
+  ref,
+  className,
+  style: _style,
+  size = "medium",
+  disabled = false,
+  error = false,
+  stretch = false,
+  label,
+  description,
+  id: _id,
+  ...props
+}) {
+  const generatedId = useId();
+  const id = _id ?? generatedId;
+  const hasError = !!error;
+  const errorMessage = typeof error === "string" ? error : undefined;
+  const style = {
+    ..._style
+  };
+  const inputEl = /*#__PURE__*/jsx(FieldAwareInput, {
+    "aria-invalid": hasError || undefined,
+    className: cn(input({
+      size
+    }), styles.input, stretch && styles.stretch, hasError && styles.error, className),
+    disabled: disabled,
+    id: id,
+    ref: ref,
+    style: style,
+    ...props
+  });
+  if (label) {
+    return /*#__PURE__*/jsx(Field, {
+      description: description,
+      error: errorMessage,
+      htmlFor: id,
+      label: label,
+      required: props.required,
+      children: inputEl
+    });
+  }
+  return inputEl;
+}
+function FieldAwareInput({
+  "aria-describedby": callerDescribedBy,
+  ...props
+}) {
+  const field = useField();
+  const fieldDescribedBy = field.errorId ?? field.descriptionId;
+  const describedBy = [fieldDescribedBy, callerDescribedBy].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/jsx("input", {
+    "aria-describedby": describedBy,
+    ...props
+  });
+}
+
+export { Input };

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

@@ -0,0 +1,3 @@
+var styles = {"input":"input-module_input__-ipHD","stretch":"input-module_stretch__1zxJA","error":"input-module_error__8P-i-"};
+
+export { styles as default };

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

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ExternalLinkIcon } from '@cocso-ui/react-icons';
+import { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { LineHeight, FontWeight } from '../../token/typography.mjs';
+import { TypographyProps } from '../typography/typography.mjs';
+
+type LinkSize = "large" | "medium" | "small" | "x-small";
+type LinkVariant = "inline" | "current" | "plain";
+interface LinkProps extends ComponentProps<"a"> {
+    indicator?: boolean;
+    lineHeight?: LineHeight;
+    render?: useRender.RenderProp;
+    size?: TypographyProps["size"];
+    type?: TypographyProps["type"];
+    variant?: LinkVariant;
+    weight?: FontWeight;
+}
+declare function LinkComponent({ ref, render: renderProp, className, style: _style, size, type, weight, lineHeight, variant, indicator, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+declare function ExternalIcon({ className, ...props }: ComponentProps<typeof ExternalLinkIcon>): react_jsx_runtime.JSX.Element;
+/** Styled anchor/link component with inline, current, and plain variants. */
+declare const Link: typeof LinkComponent & {
+    displayName: "Link";
+    ExternalIcon: typeof ExternalIcon;
+};
+
+export { Link };
+export type { LinkProps, LinkSize, LinkVariant };