jongsultest 0.1.1 → 0.1.3

package/README.md

@@ -0,0 +1,67 @@
+# Imform Design System
+
+Mantine 기반의 공유 UI 컴포넌트 라이브러리입니다.
+
+## 프로젝트 구조
+
+```
+src/
+├── atoms/       # 기본 UI 컴포넌트 (Button, Badge, Input 등)
+├── blocks/      # 복합 UI 컴포넌트 (Modal, DataTable, Panel 등)
+├── utils/       # 유틸리티 함수
+└── index.ts     # 엔트리포인트
+playground/      # Next.js 기반 로컬 테스트 앱
+```
+
+## 기술 스택
+
+- **React 19** + **TypeScript**
+- **Mantine 8** (Core, Dates, Hooks, Notifications)
+- **tsup** (빌드)
+- **Storybook 10** (컴포넌트 문서)
+- **Vitest** + **Playwright** (테스트)
+
+## 시작하기
+
+```bash
+# 의존성 설치
+yarn install
+
+# 개발 모드 (watch)
+yarn dev
+
+# 빌드
+yarn build
+
+# Storybook
+yarn storybook
+```
+
+## Playground
+
+로컬에서 컴포넌트를 직접 테스트할 수 있는 Next.js 앱입니다.
+
+```bash
+cd playground
+yarn install
+yarn dev        # http://localhost:3001
+```
+
+## 패키지 사용법
+
+```bash
+# 설치
+yarn add jongsultest
+
+# peer dependencies 설치
+yarn add @mantine/core @mantine/hooks @mantine/dates @mantine/notifications @tabler/icons-react @hello-pangea/dnd dayjs
+```
+
+```tsx
+import { Button, InputText, Modal } from "jongsultest";
+import "jongsultest/styles.css";
+```
+
+## 라이선스
+
+MIT

package/dist/atoms.d.mts

@@ -0,0 +1,92 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps, TextInputProps, PasswordInputProps, NumberInputProps, ColorInputProps, FileInputProps, FileInput, TextareaProps, RadioProps, RadioGroupProps, SwitchProps as SwitchProps$1, SegmentedControlProps, SelectProps, AutocompleteProps, BadgeProps, ActionIconProps } from '@mantine/core';
+import React, { ComponentPropsWithoutRef, ComponentType, ReactNode } from 'react';
+import { DatePickerInputProps, DateTimePickerProps } from '@mantine/dates';
+
+type Props$1 = ButtonProps & ComponentPropsWithoutRef<"button">;
+declare const Button: ({ style, ...props }: Props$1) => react_jsx_runtime.JSX.Element;
+
+declare const InputText: (props: TextInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputPassword: (props: PasswordInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputNumber: (props: NumberInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputColor: (props: ColorInputProps) => react_jsx_runtime.JSX.Element;
+
+type FileInputComponentProps<Multiple extends boolean = false> = Omit<FileInputProps<Multiple>, "translate"> & {
+    translate?: string;
+};
+type FileInputComponent = (<Multiple extends boolean = false>(props: FileInputComponentProps<Multiple>) => React.JSX.Element) & {
+    extend: typeof FileInput.extend;
+};
+declare const InputFile: FileInputComponent;
+
+declare const InputDatePicker: (props: DatePickerInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputTextarea: (props: TextareaProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputRadio: ((props: RadioProps) => react_jsx_runtime.JSX.Element) & {
+    Group: (props: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+};
+
+type SwitchProps = SwitchProps$1;
+declare const InputSwitch: ({ checked, style, classNames, ...props }: SwitchProps) => react_jsx_runtime.JSX.Element;
+
+interface SwitchInTableProps<T extends string> {
+    status: T;
+    onStatusChange: (id: number, status: T) => void;
+    id: number;
+    activeValue?: T;
+    inactiveValue?: T;
+    activeLabel?: string;
+    inactiveLabel?: string;
+}
+declare const InputSwitchInTable: <T extends string>({ status, onStatusChange, id, activeValue, inactiveValue, activeLabel, inactiveLabel, }: SwitchInTableProps<T>) => react_jsx_runtime.JSX.Element;
+
+declare const InputSegmentedControl: (props: SegmentedControlProps) => react_jsx_runtime.JSX.Element;
+
+declare const ComboboxSelect: (props: SelectProps) => react_jsx_runtime.JSX.Element;
+
+declare const ComboboxAutocomplete: (props: AutocompleteProps) => react_jsx_runtime.JSX.Element;
+
+declare const DateTimePicker: (props: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare const Badge: ({ className, classNames, isRemoveAble, onRemove, ...props }: BadgeProps & {
+    isRemoveAble?: boolean;
+    onRemove?: () => void;
+}) => react_jsx_runtime.JSX.Element;
+
+interface IconSvgProps {
+    size?: number;
+    /** 프리셋("red", "white", "gray", "disabled") 또는 hex 값 */
+    color?: string;
+    disabled?: boolean;
+}
+/** 원형 배경 + 십자 아이콘 (활성: #666666 / 비활성: #DDDDDD) */
+declare const PlusIcon: ({ size, color, disabled }: IconSvgProps) => react_jsx_runtime.JSX.Element;
+/** 휴지통 아이콘 (기본: "gray" / 삭제: "red" / 흰색: "white") */
+declare const TrashIcon: ({ size, color }: IconSvgProps) => react_jsx_runtime.JSX.Element;
+/** 드래그 핸들 아이콘 (6점 그리드) */
+declare const GripVerticalIcon: ({ size, color }: IconSvgProps) => react_jsx_runtime.JSX.Element;
+/** 하단 화살표 아이콘 */
+declare const ChevronDownIcon: ({ size, color }: IconSvgProps) => react_jsx_runtime.JSX.Element;
+
+type Props = ActionIconProps & ComponentPropsWithoutRef<"button"> & {
+    icon?: ComponentType<IconSvgProps>;
+    iconSize?: number;
+    iconColor?: string;
+    children?: ReactNode;
+};
+declare const IconButton: ({ icon: Icon, iconSize, iconColor, disabled, children, ...props }: Props) => react_jsx_runtime.JSX.Element;
+
+declare const inputClassNames: {
+    input: string;
+    label: string;
+    placeholder: string;
+    error: string;
+    description: string;
+    root: string;
+};
+
+export { Badge, Button, ChevronDownIcon, ComboboxAutocomplete, ComboboxSelect, DateTimePicker, GripVerticalIcon, IconButton, type IconSvgProps, InputColor, InputDatePicker, InputFile, InputNumber, InputPassword, InputRadio, InputSegmentedControl, InputSwitch, InputSwitchInTable, InputText, InputTextarea, PlusIcon, TrashIcon, inputClassNames };

package/dist/atoms.d.ts

@@ -0,0 +1,92 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps, TextInputProps, PasswordInputProps, NumberInputProps, ColorInputProps, FileInputProps, FileInput, TextareaProps, RadioProps, RadioGroupProps, SwitchProps as SwitchProps$1, SegmentedControlProps, SelectProps, AutocompleteProps, BadgeProps, ActionIconProps } from '@mantine/core';
+import React, { ComponentPropsWithoutRef, ComponentType, ReactNode } from 'react';
+import { DatePickerInputProps, DateTimePickerProps } from '@mantine/dates';
+
+type Props$1 = ButtonProps & ComponentPropsWithoutRef<"button">;
+declare const Button: ({ style, ...props }: Props$1) => react_jsx_runtime.JSX.Element;
+
+declare const InputText: (props: TextInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputPassword: (props: PasswordInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputNumber: (props: NumberInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputColor: (props: ColorInputProps) => react_jsx_runtime.JSX.Element;
+
+type FileInputComponentProps<Multiple extends boolean = false> = Omit<FileInputProps<Multiple>, "translate"> & {
+    translate?: string;
+};
+type FileInputComponent = (<Multiple extends boolean = false>(props: FileInputComponentProps<Multiple>) => React.JSX.Element) & {
+    extend: typeof FileInput.extend;
+};
+declare const InputFile: FileInputComponent;
+
+declare const InputDatePicker: (props: DatePickerInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputTextarea: (props: TextareaProps) => react_jsx_runtime.JSX.Element;
+
+declare const InputRadio: ((props: RadioProps) => react_jsx_runtime.JSX.Element) & {
+    Group: (props: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+};
+
+type SwitchProps = SwitchProps$1;
+declare const InputSwitch: ({ checked, style, classNames, ...props }: SwitchProps) => react_jsx_runtime.JSX.Element;
+
+interface SwitchInTableProps<T extends string> {
+    status: T;
+    onStatusChange: (id: number, status: T) => void;
+    id: number;
+    activeValue?: T;
+    inactiveValue?: T;
+    activeLabel?: string;
+    inactiveLabel?: string;
+}
+declare const InputSwitchInTable: <T extends string>({ status, onStatusChange, id, activeValue, inactiveValue, activeLabel, inactiveLabel, }: SwitchInTableProps<T>) => react_jsx_runtime.JSX.Element;
+
+declare const InputSegmentedControl: (props: SegmentedControlProps) => react_jsx_runtime.JSX.Element;
+
+declare const ComboboxSelect: (props: SelectProps) => react_jsx_runtime.JSX.Element;
+
+declare const ComboboxAutocomplete: (props: AutocompleteProps) => react_jsx_runtime.JSX.Element;
+
+declare const DateTimePicker: (props: DateTimePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare const Badge: ({ className, classNames, isRemoveAble, onRemove, ...props }: BadgeProps & {
+    isRemoveAble?: boolean;
+    onRemove?: () => void;
+}) => react_jsx_runtime.JSX.Element;
+
+interface IconSvgProps {
+    size?: number;
+    /** 프리셋("red", "white", "gray", "disabled") 또는 hex 값 */
+    color?: string;
+    disabled?: boolean;
+}
+/** 원형 배경 + 십자 아이콘 (활성: #666666 / 비활성: #DDDDDD) */
+declare const PlusIcon: ({ size, color, disabled }: IconSvgProps) => react_jsx_runtime.JSX.Element;
+/** 휴지통 아이콘 (기본: "gray" / 삭제: "red" / 흰색: "white") */
+declare const TrashIcon: ({ size, color }: IconSvgProps) => react_jsx_runtime.JSX.Element;
+/** 드래그 핸들 아이콘 (6점 그리드) */
+declare const GripVerticalIcon: ({ size, color }: IconSvgProps) => react_jsx_runtime.JSX.Element;
+/** 하단 화살표 아이콘 */
+declare const ChevronDownIcon: ({ size, color }: IconSvgProps) => react_jsx_runtime.JSX.Element;
+
+type Props = ActionIconProps & ComponentPropsWithoutRef<"button"> & {
+    icon?: ComponentType<IconSvgProps>;
+    iconSize?: number;
+    iconColor?: string;
+    children?: ReactNode;
+};
+declare const IconButton: ({ icon: Icon, iconSize, iconColor, disabled, children, ...props }: Props) => react_jsx_runtime.JSX.Element;
+
+declare const inputClassNames: {
+    input: string;
+    label: string;
+    placeholder: string;
+    error: string;
+    description: string;
+    root: string;
+};
+
+export { Badge, Button, ChevronDownIcon, ComboboxAutocomplete, ComboboxSelect, DateTimePicker, GripVerticalIcon, IconButton, type IconSvgProps, InputColor, InputDatePicker, InputFile, InputNumber, InputPassword, InputRadio, InputSegmentedControl, InputSwitch, InputSwitchInTable, InputText, InputTextarea, PlusIcon, TrashIcon, inputClassNames };

package/dist/atoms.js

@@ -0,0 +1,363 @@
+"use client";
+'use strict';
+
+var core = require('@mantine/core');
+var jsxRuntime = require('react/jsx-runtime');
+var iconsReact = require('@tabler/icons-react');
+var dates = require('@mantine/dates');
+var clsx = require('clsx');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var COMMON_STYLES = {
+  "--button-fz": "14px",
+  "--button-radius": "6px"
+};
+var SIZE_STYLES = {
+  xs: {
+    "--button-height": "24px",
+    "--button-padding-x": "6px"
+  },
+  sm: {
+    "--button-height": "38px",
+    "--button-padding-x": "16px"
+  },
+  md: {
+    "--button-height": "40px",
+    "--button-padding-x": "24px"
+  }
+};
+var getVariantStyles = (variant, color) => {
+  if (variant === "outline" && color === "gray") {
+    return { color: "var(--color-body)", borderColor: "var(--color-gray-3)" };
+  }
+  if (variant === "default") {
+    return { backgroundColor: "var(--mantine-color-blue-6)", color: "#FFFFFF", border: "none" };
+  }
+  if (variant === "light" && !color) {
+    return { backgroundColor: "var(--color-button-light)", color: "var(--color-body)", border: "none" };
+  }
+  return {};
+};
+var Button = (_a) => {
+  var _b = _a, { style } = _b, props = __objRest(_b, ["style"]);
+  var _a2;
+  const sizeVars = (_a2 = SIZE_STYLES[props.size]) != null ? _a2 : SIZE_STYLES.md;
+  const variantStyles = getVariantStyles(props.variant, props.color);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Button,
+    __spreadProps(__spreadValues({}, props), {
+      classNames: { label: "!font-bold" },
+      style: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, COMMON_STYLES), sizeVars), variantStyles), style)
+    })
+  );
+};
+
+// src/atoms/inputClassNames.ts
+var inputClassNames = {
+  input: `!rounded-[8px] !border-input
+    !text-sm !h-12
+
+    data-[error=true]:!border-error-line
+    data-[error=true]:!border-2
+    data-[error=true]:!bg-error-fill
+    data-[error=true]:!text-body
+
+    data-[disabled=true]:!text-body
+    data-[disabled=true]:!bg-disabled-input
+    data-[disabled=true]:!opacity-100
+    data-[disabled=true]:!border-default
+    `,
+  label: "!text-sm !text-[#999] !font-bold !tracking-tight !mb-2",
+  placeholder: "!text-sm !tracking-normal",
+  error: "!mt-2 !ml-2",
+  description: "!-mt-[.5px] !mb-2",
+  root: "!leading-0"
+};
+var InputText = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.TextInput, __spreadValues({ classNames: inputClassNames }, props));
+};
+var InputPassword = (props) => {
+  const { error } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.PasswordInput,
+    __spreadValues({
+      classNames: inputClassNames,
+      error: typeof error === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertCircle, { size: 16, className: "mt-[2px] shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
+      ] }) : error
+    }, props)
+  );
+};
+var InputNumber = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.NumberInput,
+    __spreadValues({
+      classNames: __spreadProps(__spreadValues({}, inputClassNames), {
+        controls: "!h-8 !border-input",
+        control: "!border-input"
+      })
+    }, props)
+  );
+};
+var InputColor = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.ColorInput, __spreadValues({ classNames: inputClassNames }, props));
+};
+var InputFile = ((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.FileInput, __spreadValues({ classNames: inputClassNames }, props));
+});
+var InputDatePicker = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(dates.DatePickerInput, __spreadProps(__spreadValues({ classNames: inputClassNames }, props), { valueFormat: "YYYY-MM-DD" }));
+};
+var InputTextarea = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Textarea, __spreadValues({ classNames: __spreadProps(__spreadValues({}, inputClassNames), { input: `${inputClassNames.input} !py-3` }) }, props));
+};
+var RadioBase = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Radio, __spreadValues({}, props));
+};
+var RadioGroup = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Radio.Group, __spreadValues({ classNames: { label: inputClassNames.label } }, props));
+};
+var InputRadio = Object.assign(RadioBase, {
+  Group: RadioGroup
+});
+var InputSwitch = (_a) => {
+  var _b = _a, { checked, style, classNames } = _b, props = __objRest(_b, ["checked", "style", "classNames"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Switch,
+    __spreadProps(__spreadValues({
+      checked,
+      thumbIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCheck, { size: 10, color: "white", stroke: 3 })
+    }, props), {
+      style: __spreadValues(__spreadValues({}, typeof style === "object" && style || {}), !checked && { "--switch-thumb-start": "6px" }),
+      classNames: __spreadValues({
+        thumb: "!w-[10px] !h-[10px] text-white",
+        label: "!text-gray-6 !font-medium"
+      }, classNames)
+    })
+  );
+};
+var InputSwitchInTable = ({
+  status,
+  onStatusChange,
+  id,
+  activeValue = "ACTIVE",
+  inactiveValue = "HIDDEN",
+  activeLabel = "\uD65C\uC131",
+  inactiveLabel = "\uC228\uAE40"
+}) => {
+  const isActive = status === activeValue;
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Box, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+    InputSwitch,
+    {
+      checked: isActive,
+      onChange: () => onStatusChange(id, isActive ? inactiveValue : activeValue),
+      size: "sm",
+      classNames: { label: "!font-semibold" }
+    }
+  ) });
+};
+var InputSegmentedControl = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.SegmentedControl,
+    __spreadValues({
+      classNames: {
+        root: "p-2! rounded-md!",
+        // 루트
+        control: "",
+        // 버튼
+        label: "h-10 px-4 text-sm",
+        // 텍스트 패딩/타이포
+        innerLabel: "leading-9 color-white"
+        // 선택 인디케이터 높이도 같이
+      }
+    }, props)
+  );
+};
+var ComboboxSelect = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Select, __spreadValues({ classNames: inputClassNames }, props));
+};
+var ComboboxAutocomplete = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Autocomplete, __spreadValues({ classNames: inputClassNames }, props));
+};
+var DateTimePicker = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(dates.DateTimePicker, __spreadValues({ classNames: inputClassNames }, props));
+};
+var REMOVE_ABLE_BADGE_STYLES = {
+  light: "gray",
+  blue: "gray"
+  //  blue 임시 작업 blue 인 경우 생기면 컬러 변경 하셔도 됩니다.
+};
+var Badge = (_a) => {
+  var _b = _a, {
+    className,
+    classNames,
+    isRemoveAble = false,
+    onRemove
+  } = _b, props = __objRest(_b, [
+    "className",
+    "classNames",
+    "isRemoveAble",
+    "onRemove"
+  ]);
+  var _a2;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Badge,
+    __spreadProps(__spreadValues({}, props), {
+      className,
+      classNames: __spreadProps(__spreadValues({}, classNames), {
+        label: clsx__default.default("!text-xs !font-semibold", classNames == null ? void 0 : classNames.label)
+      }),
+      rightSection: props.rightSection || (isRemoveAble ? /* @__PURE__ */ jsxRuntime.jsx(
+        core.ActionIcon,
+        {
+          size: "xs",
+          variant: "transparent",
+          color: REMOVE_ABLE_BADGE_STYLES[(_a2 = props.variant) != null ? _a2 : "blue"],
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { size: 12 })
+        }
+      ) : void 0),
+      styles: {
+        root: {
+          "--mantine-color-gray-light-color": "var(--color-body)",
+          "--mantine-color-green-light-color": "#166534"
+        }
+      }
+    })
+  );
+};
+var IconButton = (_a) => {
+  var _b = _a, { icon: Icon, iconSize, iconColor, disabled, children } = _b, props = __objRest(_b, ["icon", "iconSize", "iconColor", "disabled", "children"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(core.ActionIcon, __spreadProps(__spreadValues({ variant: "subtle", color: "gray", disabled }, props), { children: Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize, color: iconColor, disabled }) : children }));
+};
+var colorPreset = {
+  red: "#FF4242",
+  white: "#FFFFFF",
+  gray: "#666666",
+  disabled: "#DDDDDD"
+};
+var resolveColor = (color) => {
+  var _a;
+  return (_a = colorPreset[color]) != null ? _a : color;
+};
+var PlusIcon = ({ size = 20, color = "gray", disabled }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "10", fill: disabled ? resolveColor("disabled") : resolveColor(color) }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 5.5V14.5M14.5 10L5.5 10", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round" })
+] });
+var TrashIcon = ({ size = 20, color = "gray" }) => {
+  const c = resolveColor(color);
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M14 4.5V2C14 1.72386 13.7761 1.5 13.5 1.5H6.5C6.22386 1.5 6 1.72386 6 2V4.5",
+        stroke: c,
+        strokeWidth: "1.2"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 4H18", stroke: c, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M4 7.00028V17C4 17.5523 4.44772 18 5 18H15C15.5523 18 16 17.5523 16 17V7",
+        stroke: c,
+        strokeWidth: "1.2",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 7V13", stroke: c, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7V13", stroke: c, strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+};
+var GripVerticalIcon = ({ size = 20, color = "gray" }) => {
+  const c = resolveColor(color);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      className: "cursor-grab",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6.5", y: "3.5", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6.5", y: "9.39844", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6.5", y: "15.3008", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "12.3008", y: "3.5", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "12.3008", y: "9.39844", width: "1.2", height: "1.2", rx: "0.6", stroke: c }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "12.3008", y: "15.3008", width: "1.2", height: "1.2", rx: "0.6", stroke: c })
+      ]
+    }
+  );
+};
+var ChevronDownIcon = ({ size = 20, color = "#191919" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M16 7L10.0007 13L4 7",
+    stroke: resolveColor(color),
+    strokeWidth: "1.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.ChevronDownIcon = ChevronDownIcon;
+exports.ComboboxAutocomplete = ComboboxAutocomplete;
+exports.ComboboxSelect = ComboboxSelect;
+exports.DateTimePicker = DateTimePicker;
+exports.GripVerticalIcon = GripVerticalIcon;
+exports.IconButton = IconButton;
+exports.InputColor = InputColor;
+exports.InputDatePicker = InputDatePicker;
+exports.InputFile = InputFile;
+exports.InputNumber = InputNumber;
+exports.InputPassword = InputPassword;
+exports.InputRadio = InputRadio;
+exports.InputSegmentedControl = InputSegmentedControl;
+exports.InputSwitch = InputSwitch;
+exports.InputSwitchInTable = InputSwitchInTable;
+exports.InputText = InputText;
+exports.InputTextarea = InputTextarea;
+exports.PlusIcon = PlusIcon;
+exports.TrashIcon = TrashIcon;
+exports.inputClassNames = inputClassNames;
+//# sourceMappingURL=atoms.js.map
+//# sourceMappingURL=atoms.js.map