@causw/core 0.0.9 → 0.0.11

package/dist/index.js

@@ -1,674 +0,0 @@
-'use strict';
-
-var React4 = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
-var reactSlot = require('@radix-ui/react-slot');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React4__default = /*#__PURE__*/_interopDefault(React4);
-
-// src/components/Text/Text.tsx
-function mergeStyles(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-
-// src/components/Text/Text.styles.ts
-var colorClasses = {
-  "gray-50": "text-gray-50",
-  "gray-100": "text-gray-100",
-  "gray-200": "text-gray-200",
-  "gray-300": "text-gray-300",
-  "gray-400": "text-gray-400",
-  "gray-500": "text-gray-500",
-  "gray-600": "text-gray-600",
-  "gray-700": "text-gray-700",
-  "gray-800": "text-gray-800",
-  "gray-900": "text-gray-900",
-  "blue-50": "text-blue-50",
-  "blue-500": "text-blue-500",
-  "blue-700": "text-blue-700",
-  "red-100": "text-red-100",
-  "red-400": "text-red-400",
-  white: "text-white-main",
-  black: "text-black-main"
-};
-var alignClasses = {
-  left: "text-left",
-  center: "text-center",
-  right: "text-right",
-  justify: "text-justify"
-};
-var typographyStyles = {
-  // Caption variants
-  "caption-sm": "typo-caption-sm",
-  "caption-sm-point": "typo-caption-sm-point",
-  "caption-md": "typo-caption-md",
-  "caption-md-point": "typo-caption-md-point",
-  // Body2 variants
-  "body2-sm": "typo-body2-sm",
-  "body2-sm-point": "typo-body2-sm-point",
-  "body2-md": "typo-body2-md",
-  "body2-md-point": "typo-body2-md-point",
-  // Body variants
-  "body-sm": "typo-body-sm",
-  "body-sm-point": "typo-body-sm-point",
-  "body-md": "typo-body-md",
-  "body-md-point": "typo-body-md-point",
-  // Subtitle variants
-  "subtitle-sm": "typo-subtitle-sm",
-  "subtitle-sm-point": "typo-subtitle-sm-point",
-  "subtitle-md": "typo-subtitle-md",
-  "subtitle-md-point": "typo-subtitle-md-point",
-  // Title variants (always bold)
-  "title-sm": "typo-title-sm",
-  "title-md": "typo-title-md",
-  // Head variants (always bold)
-  "head-sm": "typo-head-sm",
-  "head-md": "typo-head-md",
-  // Fixed size variants
-  "fixed-12": "typo-fixed-12",
-  "fixed-14": "typo-fixed-14",
-  "fixed-15": "typo-fixed-15",
-  "fixed-16": "typo-fixed-16",
-  "fixed-18": "typo-fixed-18",
-  "fixed-20": "typo-fixed-20",
-  "fixed-24": "typo-fixed-24"
-};
-function textStyles({
-  typography,
-  textColor,
-  align
-}) {
-  const baseStyles = "font-sans";
-  const colorClass = colorClasses[textColor];
-  const typographyClass = typographyStyles[typography];
-  const alignClass = align ? alignClasses[align] : "";
-  return mergeStyles([baseStyles, colorClass, typographyClass, alignClass]);
-}
-
-// src/components/Text/Text.tsx
-var Text = ({
-  typography = "body-sm",
-  textColor = "gray-700",
-  align,
-  as,
-  children,
-  className = "",
-  ...props
-}) => {
-  const Component = as || "span";
-  const classes = textStyles({ typography, textColor, align });
-  return React4__default.default.createElement(
-    Component,
-    {
-      className: mergeStyles(classes, className),
-      ...props
-    },
-    children
-  );
-};
-Text.displayName = "Text";
-var FieldContext = React4.createContext(null);
-var useFieldContext = () => {
-  const context = React4.useContext(FieldContext);
-  if (!context) {
-    return null;
-  }
-  return context;
-};
-var FieldRoot = ({
-  children,
-  disabled = false,
-  error = false,
-  className,
-  ...props
-}) => {
-  const id = React4.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(FieldContext.Provider, { value: { id, disabled, error }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: mergeStyles("flex flex-col gap-2", className), ...props, children }) });
-};
-var FieldLabel = ({
-  children,
-  className,
-  typography = "body-sm-point",
-  textColor = "gray-700",
-  ...labelProps
-}) => {
-  const fieldContext = useFieldContext();
-  const id = fieldContext?.id;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Text,
-    {
-      typography,
-      textColor,
-      htmlFor: id,
-      className: mergeStyles("px-1", className),
-      ...labelProps,
-      children
-    }
-  );
-};
-var FieldDescription = ({
-  children,
-  className,
-  ...props
-}) => {
-  const fieldContext = useFieldContext();
-  const id = fieldContext?.id;
-  const error = fieldContext?.error;
-  if (error) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Text,
-    {
-      typography: "body2-sm",
-      textColor: "gray-400",
-      id: id ? `${id}-description` : void 0,
-      className,
-      ...props,
-      children
-    }
-  );
-};
-var FieldErrorDescription = ({
-  children,
-  className,
-  ...props
-}) => {
-  const fieldContext = useFieldContext();
-  const id = fieldContext?.id;
-  const error = fieldContext?.error;
-  if (!error) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Text,
-    {
-      typography: "body2-sm",
-      textColor: "red-400",
-      id: id ? `${id}-error` : void 0,
-      className,
-      ...props,
-      children
-    }
-  );
-};
-FieldRoot.displayName = "Field";
-FieldLabel.displayName = "Field.Label";
-FieldDescription.displayName = "Field.Description";
-FieldErrorDescription.displayName = "Field.ErrorDescription";
-var Field = Object.assign(FieldRoot, {
-  Label: FieldLabel,
-  Description: FieldDescription,
-  ErrorDescription: FieldErrorDescription
-});
-var TextInput = ({
-  id: idProp,
-  disabled: disabledProp,
-  error: errorProp,
-  className,
-  leftIcon,
-  rightIcon,
-  variant = "default",
-  typography = "body2-sm",
-  textColor = "gray-700",
-  ...props
-}) => {
-  const field = useFieldContext();
-  const id = idProp ?? field?.id;
-  const disabled = disabledProp ?? field?.disabled ?? false;
-  const error = errorProp ?? field?.error ?? false;
-  const classes = textStyles({ typography, textColor });
-  const inputStyles = mergeStyles(
-    "w-full bg-transparent outline-none",
-    "placeholder:text-gray-400",
-    "caret-gray-600"
-  );
-  const variantStyles = {
-    default: mergeStyles(
-      "rounded-md p-4",
-      "bg-white",
-      "focus-within:ring-2 focus-within:ring-gray-600"
-    ),
-    underline: mergeStyles(
-      "py-2 px-0",
-      "border-b border-gray-400",
-      "bg-transparent",
-      "focus-within:border-gray-600"
-    )
-  };
-  const wrapperStyles = mergeStyles(
-    "flex items-center gap-2 self-stretch",
-    variantStyles[variant],
-    disabled && "cursor-not-allowed opacity-50",
-    error && variant === "default" && "ring-2 ring-red-400 focus-within:ring-red-400",
-    error && variant === "underline" && "border-red-400 focus-within:border-red-400",
-    className
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperStyles, children: [
-    leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-gray-400", children: leftIcon }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        id,
-        disabled,
-        className: mergeStyles(inputStyles, classes),
-        ...props
-      }
-    ),
-    rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-gray-400", children: rightIcon })
-  ] });
-};
-TextInput.displayName = "TextInput";
-function createPrimitive(node) {
-  const Node = (props) => {
-    const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? reactSlot.Slot : node;
-    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps });
-  };
-  Node.displayName = `Primitive.${node}`;
-  return Node;
-}
-var Primitive = {
-  div: createPrimitive("div"),
-  span: createPrimitive("span"),
-  img: createPrimitive("img"),
-  button: createPrimitive("button"),
-  label: createPrimitive("label"),
-  input: createPrimitive("input"),
-  textarea: createPrimitive("textarea"),
-  a: createPrimitive("a"),
-  p: createPrimitive("p"),
-  h2: createPrimitive("h2"),
-  ul: createPrimitive("ul"),
-  li: createPrimitive("li"),
-  svg: createPrimitive("svg"),
-  circle: createPrimitive("circle")
-};
-var TextAreaRoot = ({ className, children, ...props }) => {
-  const field = useFieldContext();
-  const wrapperStyles = mergeStyles(
-    "rounded-md p-4",
-    "bg-white",
-    "focus-within:ring-2 focus-within:ring-gray-600",
-    field?.disabled && "cursor-not-allowed opacity-50",
-    field?.error && "ring-2 ring-red-400 focus-within:ring-red-400",
-    className
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(Primitive.div, { className: wrapperStyles, ...props, children });
-};
-var TextAreaInput = ({
-  resize = true,
-  disabled: disabledProp,
-  className,
-  ...props
-}) => {
-  const field = useFieldContext();
-  const disabled = disabledProp ?? field?.disabled ?? false;
-  const textareaStyles = mergeStyles(
-    "w-full min-w-0 min-h-10 bg-transparent outline-none",
-    "typo-body-sm",
-    "text-gray-700 placeholder:text-gray-400",
-    "caret-gray-600",
-    resize ? "resize-y" : "resize-none",
-    disabled && "cursor-not-allowed",
-    className
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx("textarea", { className: textareaStyles, disabled, ...props });
-};
-var TextAreaFooter = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Primitive.div, { className: mergeStyles("mt-2", className), ...props, children });
-};
-TextAreaRoot.displayName = "TextArea";
-TextAreaInput.displayName = "TextArea.Input";
-TextAreaFooter.displayName = "TextArea.Footer";
-var TextArea = Object.assign(TextAreaRoot, {
-  Input: TextAreaInput,
-  Footer: TextAreaFooter
-});
-var RadioGroupContext = React4.createContext(null);
-var useRadioGroupContext = () => {
-  return React4.useContext(RadioGroupContext);
-};
-var RadioGroup = ({
-  name,
-  value,
-  defaultValue,
-  onValueChange,
-  className,
-  children,
-  ...props
-}) => {
-  const [internalValue, setInternalValue] = React4__default.default.useState(defaultValue);
-  const currentValue = value ?? internalValue;
-  const handleChange = (newValue) => {
-    if (value === void 0) {
-      setInternalValue(newValue);
-    }
-    onValueChange?.(newValue);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadioGroupContext.Provider,
-    {
-      value: { name, value: currentValue, onChange: handleChange },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Primitive.div,
-        {
-          role: "radiogroup",
-          className: mergeStyles("flex flex-col gap-5", className),
-          ...props,
-          children
-        }
-      )
-    }
-  );
-};
-var RadioIcon = ({ checked }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    className: "transition-all duration-150 ease-in-out",
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "circle",
-      {
-        cx: "10",
-        cy: "10",
-        r: checked ? 7 : 7.5,
-        stroke: "currentColor",
-        strokeWidth: checked ? 6 : 5,
-        className: "transition-all duration-150 ease-in-out"
-      }
-    )
-  }
-);
-var Radio = ({
-  value,
-  children,
-  className,
-  checked: checkedProp,
-  onChange,
-  ...props
-}) => {
-  const group = useRadioGroupContext();
-  const isChecked = group ? group.value === value : checkedProp;
-  const name = group?.name ?? props.name;
-  const handleChange = (e) => {
-    group?.onChange?.(value);
-    onChange?.(e);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      className: mergeStyles(
-        "flex cursor-pointer items-center gap-2",
-        "transition-opacity duration-150 hover:opacity-80",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "radio",
-            name,
-            value,
-            checked: isChecked,
-            onChange: handleChange,
-            className: "sr-only",
-            ...props
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: mergeStyles(
-              "flex-shrink-0 transition-colors duration-150",
-              isChecked ? "text-gray-800 hover:text-gray-800" : "text-gray-200 hover:text-gray-400"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon, { checked: !!isChecked })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(Text, { typography: "body-sm", textColor: "gray-800", children })
-      ]
-    }
-  );
-};
-RadioGroup.displayName = "RadioGroup";
-Radio.displayName = "Radio";
-var ToggleContext = React4__default.default.createContext(null);
-var useToggleContext = () => {
-  const context = React4__default.default.useContext(ToggleContext);
-  if (!context) {
-    throw new Error(
-      "Toggle \uC11C\uBE0C \uCEF4\uD3EC\uB10C\uD2B8\uB294 <Toggle> \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4. ex) <Toggle><Toggle.Switch /></Toggle>"
-    );
-  }
-  return context;
-};
-var ToggleRoot = ({
-  checked: checkedProp,
-  defaultChecked = false,
-  onCheckedChange,
-  disabled,
-  children,
-  className,
-  ...props
-}) => {
-  const [internalChecked, setInternalChecked] = React4.useState(defaultChecked);
-  const isChecked = checkedProp !== void 0 ? checkedProp : internalChecked;
-  const handleChange = () => {
-    if (disabled) return;
-    const newChecked = !isChecked;
-    if (checkedProp === void 0) {
-      setInternalChecked(newChecked);
-    }
-    onCheckedChange?.(newChecked);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(ToggleContext.Provider, { value: { checked: isChecked, disabled }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      className: mergeStyles(
-        "inline-flex cursor-pointer items-center gap-2",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: isChecked,
-            onChange: handleChange,
-            disabled,
-            className: "sr-only"
-          }
-        ),
-        children
-      ]
-    }
-  ) });
-};
-var ToggleSwitch = () => {
-  const { checked } = useToggleContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: mergeStyles(
-        "relative inline-flex items-center rounded-full p-1 transition-colors duration-200 ease-in-out",
-        "h-7 w-12",
-        // 48px x 28px
-        checked ? "bg-gray-600" : "bg-gray-200"
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: mergeStyles(
-            "pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out",
-            "h-5 w-5",
-            // 20px
-            checked ? "translate-x-5" : "translate-x-0"
-          )
-        }
-      )
-    }
-  );
-};
-var ToggleLabel = ({
-  children,
-  typography = "fixed-16",
-  textColor = "gray-700",
-  ...props
-}) => {
-  const { disabled } = useToggleContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Text,
-    {
-      typography,
-      textColor: disabled ? "gray-400" : textColor,
-      ...props,
-      children
-    }
-  );
-};
-ToggleRoot.displayName = "Toggle";
-ToggleSwitch.displayName = "Toggle.Switch";
-ToggleLabel.displayName = "Toggle.Label";
-var Toggle = Object.assign(ToggleRoot, {
-  Switch: ToggleSwitch,
-  Label: ToggleLabel
-});
-var CheckboxContext = React4__default.default.createContext(null);
-var useCheckboxContext = () => {
-  const context = React4__default.default.useContext(CheckboxContext);
-  if (!context) {
-    throw new Error(
-      "Checkbox \uC11C\uBE0C \uCEF4\uD3EC\uB10C\uD2B8\uB294 <Checkbox> \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4. ex) <Checkbox><Checkbox.Indicator /></Checkbox>"
-    );
-  }
-  return context;
-};
-var CheckboxRoot = ({
-  checked: checkedProp,
-  defaultChecked = false,
-  onCheckedChange,
-  disabled,
-  children,
-  className,
-  ...props
-}) => {
-  const [internalChecked, setInternalChecked] = React4.useState(defaultChecked);
-  const isChecked = checkedProp !== void 0 ? checkedProp : internalChecked;
-  const handleChange = () => {
-    if (disabled) return;
-    const newChecked = !isChecked;
-    if (checkedProp === void 0) {
-      setInternalChecked(newChecked);
-    }
-    onCheckedChange?.(newChecked);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(CheckboxContext.Provider, { value: { checked: isChecked, disabled }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      className: mergeStyles(
-        "inline-flex cursor-pointer items-center gap-2",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: isChecked,
-            onChange: handleChange,
-            disabled,
-            className: "sr-only"
-          }
-        ),
-        children
-      ]
-    }
-  ) });
-};
-var CheckboxIndicator = () => {
-  const { checked } = useCheckboxContext();
-  if (checked) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "18",
-        height: "18",
-        viewBox: "0 0 18 18",
-        fill: "none",
-        className: "flex-shrink-0",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", rx: "4", fill: "#1E2939" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: "M5 9.08333L7.94737 12L13 7",
-              stroke: "white",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: mergeStyles(
-        "flex-shrink-0",
-        "aspect-square h-[18px] w-[18px]",
-        "rounded border-2 border-gray-200 bg-white"
-      )
-    }
-  );
-};
-var CheckboxLabel = ({
-  children,
-  typography = "body-sm",
-  textColor = "gray-600",
-  ...props
-}) => {
-  const { disabled } = useCheckboxContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Text,
-    {
-      typography,
-      textColor: disabled ? "gray-400" : textColor,
-      ...props,
-      children
-    }
-  );
-};
-CheckboxRoot.displayName = "Checkbox";
-CheckboxIndicator.displayName = "Checkbox.Indicator";
-CheckboxLabel.displayName = "Checkbox.Label";
-var Checkbox = Object.assign(CheckboxRoot, {
-  Indicator: CheckboxIndicator,
-  Label: CheckboxLabel
-});
-
-exports.Checkbox = Checkbox;
-exports.Field = Field;
-exports.Radio = Radio;
-exports.RadioGroup = RadioGroup;
-exports.Text = Text;
-exports.TextArea = TextArea;
-exports.TextInput = TextInput;
-exports.Toggle = Toggle;
-exports.mergeStyles = mergeStyles;
-exports.useRadioGroupContext = useRadioGroupContext;