@cocso-ui/react 0.2.21 → 1.0.0

package/dist/esm/components/link/link.mjs

@@ -0,0 +1,61 @@
+import { link } from '../../ecosystem/codegen/generated/link.mjs';
+import { ExternalLinkIcon } from '@cocso-ui/react-icons';
+import { cn } from '../../cn.mjs';
+import styles from './link.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Typography } from '../typography/typography.mjs';
+
+function LinkComponent({
+  ref,
+  render: renderProp,
+  className,
+  style: _style,
+  size,
+  type = "body",
+  weight,
+  lineHeight,
+  variant = "inline",
+  indicator,
+  ...props
+}) {
+  const showIndicator = indicator ?? variant !== "plain";
+  const style = {
+    ..._style
+  };
+  const mergedClassName = cn(link({
+    variant
+  }), styles.link, variant === "current" && styles.current, showIndicator && styles.indicator, className);
+  const typographyProps = {
+    className: mergedClassName,
+    lineHeight,
+    ref,
+    render: renderProp ?? (renderProps => /*#__PURE__*/jsx("a", {
+      ...renderProps
+    })),
+    size,
+    style,
+    type,
+    weight,
+    ...props
+  };
+  return /*#__PURE__*/jsx(Typography, {
+    ...typographyProps
+  });
+}
+function ExternalIcon({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(ExternalLinkIcon, {
+    className: cn(styles.externalIcon, className),
+    ...props
+  });
+}
+
+/** Styled anchor/link component with inline, current, and plain variants. */
+const Link = Object.assign(LinkComponent, {
+  displayName: "Link",
+  ExternalIcon
+});
+
+export { Link };

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

@@ -0,0 +1,3 @@
+var styles = {"link":"link-module_link__RLpbr","current":"link-module_current__RgEV9","indicator":"link-module_indicator__73GYU","externalIcon":"link-module_externalIcon__3okjy"};
+
+export { styles as default };

package/dist/esm/components/month-picker/month-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 MonthPickerProps 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 MonthPicker({ ref, className, value, onValueChange, trigger, locale, dateFormat, minDate, maxDate, disabled, ...props }: MonthPickerProps): react_jsx_runtime.JSX.Element;
+
+export { MonthPicker };
+export type { MonthPickerProps };

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

@@ -0,0 +1,106 @@
+"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 './month-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 MonthPicker({
+  ref,
+  className,
+  value,
+  onValueChange,
+  trigger,
+  locale = ko,
+  dateFormat = "yyyy년 MM월",
+  minDate,
+  maxDate,
+  disabled,
+  ...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 month"
+        })
+      }), /*#__PURE__*/jsx(Dropdown.Content, {
+        "aria-label": "Select month",
+        className: styles.content,
+        children: /*#__PURE__*/jsx(DatePicker, {
+          dateFormat: dateFormat,
+          disabled: disabled,
+          inline: true,
+          locale: locale,
+          maxDate: maxDate,
+          minDate: minDate,
+          onChange: handleChange,
+          renderCustomHeader: ({
+            date,
+            decreaseYear,
+            increaseYear,
+            prevYearButtonDisabled,
+            nextYearButtonDisabled
+          }) => /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(Typography, {
+              size: "small",
+              type: "body",
+              weight: "semibold",
+              children: date.toLocaleDateString(locale.code ?? "ko-KR", {
+                year: "numeric"
+              })
+            }), /*#__PURE__*/jsxs("div", {
+              className: styles.menu,
+              children: [/*#__PURE__*/jsx(Button, {
+                className: styles.arrow,
+                disabled: prevYearButtonDisabled,
+                onClick: decreaseYear,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsx(ArrowIOSBackwardIcon, {})
+              }), /*#__PURE__*/jsx(Button, {
+                className: styles.arrow,
+                disabled: nextYearButtonDisabled,
+                onClick: increaseYear,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
+              })]
+            })]
+          }),
+          selected: value,
+          showFourColumnMonthYearPicker: true,
+          showMonthYearPicker: true,
+          showPopperArrow: false
+        })
+      })]
+    })
+  });
+}
+
+export { MonthPicker };

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

@@ -0,0 +1,3 @@
+var styles = {"root":"month-picker-module_root__iHMl-","content":"month-picker-module_content__vb64G","menu":"month-picker-module_menu__V8bwo","arrow":"month-picker-module_arrow__eD5-G"};
+
+export { styles as default };

package/dist/esm/components/one-time-password-field/one-time-password-field.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OTPInput } from 'input-otp';
+import { ComponentProps } from 'react';
+
+interface OneTimePasswordFieldProps extends Omit<ComponentProps<typeof OTPInput>, "onChange" | "render" | "children"> {
+    className?: string;
+    onValueChange?: (value: string) => void;
+    slotClassName?: string;
+}
+declare function OneTimePasswordField({ className, slotClassName, onValueChange, ref, ...props }: OneTimePasswordFieldProps): react_jsx_runtime.JSX.Element;
+
+export { OneTimePasswordField };
+export type { OneTimePasswordFieldProps };

package/dist/esm/components/one-time-password-field/one-time-password-field.mjs

@@ -0,0 +1,42 @@
+import { OTPInput } from 'input-otp';
+import { cn } from '../../cn.mjs';
+import styles from './one-time-password-field.module.css.mjs';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+const Slot = ({
+  char,
+  className,
+  hasFakeCaret,
+  isActive,
+  placeholderChar
+}) => /*#__PURE__*/jsxs("div", {
+  className: cn(styles.slot, isActive && styles.slotActive, className),
+  "data-active": isActive || undefined,
+  children: [char ?? placeholderChar, hasFakeCaret && /*#__PURE__*/jsx("div", {
+    className: styles.caret
+  })]
+});
+function OneTimePasswordField({
+  className,
+  slotClassName,
+  onValueChange,
+  ref,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(OTPInput, {
+    containerClassName: cn(styles.otp, className),
+    onChange: onValueChange,
+    ref: ref,
+    render: ({
+      slots
+    }) => /*#__PURE__*/jsx(Fragment, {
+      children: [...slots.entries()].map(([i, slot]) => /*#__PURE__*/jsx(Slot, {
+        ...slot,
+        className: slotClassName
+      }, `otp-slot-${i}`))
+    }),
+    ...props
+  });
+}
+
+export { OneTimePasswordField };

package/dist/esm/components/one-time-password-field/one-time-password-field.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"otp":"one-time-password-field-module_otp__6eiAN","slot":"one-time-password-field-module_slot__tFGbq","slotActive":"one-time-password-field-module_slotActive__iT0ud","caret":"one-time-password-field-module_caret__X9T-B"};
+
+export { styles as default };

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

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+interface PaginationLabels {
+    navigation?: string;
+    next?: string;
+    page?: (n: number) => string;
+    previous?: string;
+}
+interface PaginationProps extends Omit<ComponentProps<"nav">, "onChange"> {
+    labels?: PaginationLabels;
+    maxVisible?: number;
+    onChange: (pageNumber: number) => void;
+    page: number;
+    totalPages: number;
+}
+/** Page navigation component with previous/next controls and truncated page range. */
+declare function Pagination({ ref, className, page, totalPages, maxVisible, onChange, labels, ...props }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+export { Pagination };
+export type { PaginationLabels, PaginationProps };

package/dist/esm/{pagination/Pagination.mjs → components/pagination/pagination.mjs}

@@ -1,54 +1,69 @@
 import { ArrowIOSBackwardIcon, MoreHorizIcon, ArrowIOSForwardIcon } from '@cocso-ui/react-icons';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import styles from './Pagination.module.css.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './pagination.module.css.mjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-const Pagination = /*#__PURE__*/forwardRef(({
+/** Page navigation component with previous/next controls and truncated page range. */
+function Pagination({
+  ref,
   className,
   page,
   totalPages,
   maxVisible = 5,
   onChange,
+  labels,
   ...props
-}, ref) => {
+}) {
   const halfVisible = Math.ceil(maxVisible / 2);
+  const navigationLabel = labels?.navigation ?? "Page navigation";
+  const previousLabel = labels?.previous ?? "Previous page";
+  const nextLabel = labels?.next ?? "Next page";
+  const pageLabel = labels?.page ?? (n => `Page ${n}`);
   const renderPageButton = pageNumber => /*#__PURE__*/jsx("button", {
-    type: "button",
+    "aria-current": page === pageNumber ? "page" : undefined,
+    "aria-label": pageLabel(pageNumber),
     className: styles.item,
-    onClick: () => onChange(pageNumber),
     "data-active": page === pageNumber,
+    onClick: () => onChange(pageNumber),
+    type: "button",
     children: pageNumber
   }, pageNumber);
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsxs("nav", {
+    "aria-label": navigationLabel,
+    className: cn(styles.pagination, className),
     ref: ref,
-    className: clsx(styles.pagination, className),
     ...props,
     children: [totalPages > 1 && /*#__PURE__*/jsx("button", {
+      "aria-label": previousLabel,
       className: styles.arrow,
-      type: "button",
       disabled: page === 1,
       onClick: () => page > 1 && onChange(page - 1),
+      type: "button",
       children: /*#__PURE__*/jsx(ArrowIOSBackwardIcon, {})
-    }), totalPages <= maxVisible + 2 ? Array(totalPages).fill(0).map((_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxs(Fragment, {
+    }), totalPages <= maxVisible + 2 ? Array.from({
+      length: totalPages
+    }, (_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxs(Fragment, {
       children: [renderPageButton(1), page > 1 + halfVisible && /*#__PURE__*/jsx("span", {
         className: styles.trunc,
         children: /*#__PURE__*/jsx(MoreHorizIcon, {})
-      }), Array(maxVisible).fill(0).map((_, index) => {
+      }), Array.from({
+        length: maxVisible
+      }, (_, index) => {
         const pageNumber = page - halfVisible + index + 1;
-        return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : '';
+        return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : null;
       }), page < totalPages - halfVisible && /*#__PURE__*/jsx("span", {
         className: styles.trunc,
         children: /*#__PURE__*/jsx(MoreHorizIcon, {})
       }), renderPageButton(totalPages)]
     }), totalPages > 1 && /*#__PURE__*/jsx("button", {
+      "aria-label": nextLabel,
       className: styles.arrow,
-      type: "button",
       disabled: page === totalPages,
       onClick: () => page < totalPages && onChange(page + 1),
+      type: "button",
       children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
     })]
   });
-});
+}
 
 export { Pagination };

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

@@ -0,0 +1,3 @@
+var styles = {"pagination":"pagination-module_pagination__XjBXK","arrow":"pagination-module_arrow__q388S","item":"pagination-module_item__9Vttf","trunc":"pagination-module_trunc__neqoN"};
+
+export { styles as default };

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+
+declare function PopoverArrow({ className, ...props }: ComponentProps<typeof Popover$1.Arrow>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, side, sideOffset, align, alignOffset, arrowPadding, ...props }: ComponentProps<typeof Popover$1.Popup> & Pick<ComponentProps<typeof Popover$1.Positioner>, "side" | "sideOffset" | "align" | "alignOffset" | "arrowPadding">): react_jsx_runtime.JSX.Element;
+declare const Popover: typeof Popover$1.Root & {
+    displayName: "Popover";
+    Trigger: Popover$1.Trigger;
+    Content: typeof PopoverContent;
+    Arrow: typeof PopoverArrow;
+};
+
+export { Popover };

package/dist/esm/components/popover/popover.mjs

@@ -0,0 +1,45 @@
+import { cn } from '../../cn.mjs';
+import styles from './popover.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+
+function PopoverArrow({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Popover$1.Arrow, {
+    className: cn(styles.arrow, className),
+    ...props
+  });
+}
+function PopoverContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Popover$1.Portal, {
+    children: /*#__PURE__*/jsx(Popover$1.Positioner, {
+      align: align,
+      alignOffset: alignOffset,
+      arrowPadding: arrowPadding,
+      side: side,
+      sideOffset: sideOffset,
+      children: /*#__PURE__*/jsx(Popover$1.Popup, {
+        className: cn(styles.content, className),
+        ...props
+      })
+    })
+  });
+}
+const Popover = Object.assign(Popover$1.Root, {
+  displayName: "Popover",
+  Trigger: Popover$1.Trigger,
+  Content: PopoverContent,
+  Arrow: PopoverArrow
+});
+
+export { Popover };

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

@@ -0,0 +1,3 @@
+var styles = {"content":"popover-module_content__TwOg0","arrow":"popover-module_arrow__zZuHF"};
+
+export { styles as default };

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+/** Inline type aliases — codegen is a devDependency and must not leak into published .d.ts */
+type ProgressVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends ComponentProps<"div"> {
+    max?: number;
+    size?: ProgressSize;
+    value: number;
+    variant?: ProgressVariant;
+}
+/** Determinate progress indicator showing completion percentage. */
+declare function Progress({ ref, className, style, variant, size, value, max, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+export { Progress };
+export type { ProgressProps, ProgressSize, ProgressVariant };

package/dist/esm/components/progress/progress.mjs

@@ -0,0 +1,40 @@
+import { progress } from '../../ecosystem/codegen/generated/progress.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './progress.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+/** Determinate progress indicator showing completion percentage. */
+function Progress({
+  ref,
+  className,
+  style,
+  variant = "primary",
+  size = "md",
+  value,
+  max = 100,
+  ...props
+}) {
+  const safeMax = max > 0 ? max : 100;
+  const percentage = Math.min(100, Math.max(0, value / safeMax * 100));
+  return /*#__PURE__*/jsx("div", {
+    "aria-valuemax": safeMax,
+    "aria-valuemin": 0,
+    "aria-valuenow": Math.min(Math.max(0, value), safeMax),
+    className: cn(progress({
+      variant,
+      size
+    }), styles.track, className),
+    ref: ref,
+    role: "progressbar",
+    style: style,
+    ...props,
+    children: /*#__PURE__*/jsx("div", {
+      className: styles.fill,
+      style: {
+        width: `${percentage}%`
+      }
+    })
+  });
+}
+
+export { Progress };

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

@@ -0,0 +1,3 @@
+var styles = {"track":"progress-module_track__gM0oV","fill":"progress-module_fill__aLAbp"};
+
+export { styles as default };

package/dist/esm/components/radio-group/radio-group.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+
+/** Inline type alias — codegen is a devDependency and must not leak into published .d.ts */
+type RadioSize = "large" | "medium" | "small";
+declare function RadioGroupRoot({ className, ...props }: ComponentProps<typeof RadioGroup$1>): react_jsx_runtime.JSX.Element;
+declare function RadioGroupItem({ className, size, style, ...props }: ComponentProps<typeof Radio.Root> & {
+    size?: RadioSize;
+}): react_jsx_runtime.JSX.Element;
+declare function RadioGroupIndicator({ className, ...props }: ComponentProps<typeof Radio.Indicator>): react_jsx_runtime.JSX.Element;
+/**
+ * Single-selection radio group. Compose with `RadioGroup.Item` and `RadioGroup.Indicator`.
+ */
+declare const RadioGroup: typeof RadioGroupRoot & {
+    displayName: "RadioGroup";
+    Item: typeof RadioGroupItem;
+    Indicator: typeof RadioGroupIndicator;
+};
+
+export { RadioGroup };
+export type { RadioSize };

package/dist/esm/components/radio-group/radio-group.mjs

@@ -0,0 +1,50 @@
+import { radio } from '../../ecosystem/codegen/generated/radio.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './radio-group.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+
+function RadioGroupRoot({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(RadioGroup$1, {
+    className: cn(styles.root, className),
+    ...props
+  });
+}
+function RadioGroupItem({
+  className,
+  size = "medium",
+  style,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Radio.Root, {
+    className: cn(radio({
+      size
+    }), styles.item, className),
+    style: style,
+    ...props
+  });
+}
+function RadioGroupIndicator({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Radio.Indicator, {
+    className: cn(styles.indicator, className),
+    ...props
+  });
+}
+
+/**
+ * Single-selection radio group. Compose with `RadioGroup.Item` and `RadioGroup.Indicator`.
+ */
+const RadioGroup = Object.assign(RadioGroupRoot, {
+  displayName: "RadioGroup",
+  Item: RadioGroupItem,
+  Indicator: RadioGroupIndicator
+});
+
+export { RadioGroup };

package/dist/esm/components/radio-group/radio-group.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"root":"radio-group-module_root__b8W35","item":"radio-group-module_item__QAyhl","indicator":"radio-group-module_indicator__I0Col"};
+
+export { styles as default };

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type SelectSize = "large" | "medium" | "small" | "x-small";
+interface SelectProps extends Omit<ComponentProps<"select">, "size"> {
+    description?: string;
+    disabled?: boolean;
+    error?: boolean | string;
+    label?: string;
+    size?: SelectSize;
+    stretch?: boolean;
+}
+/** Dropdown select component wrapping native select. */
+declare function Select({ ref, className, style: _style, size, disabled, error, stretch, label, description, id: _id, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+
+export { Select };
+export type { SelectProps, SelectSize };