@causw/core 0.0.10 → 0.0.12

package/dist/index.mjs

@@ -1,1220 +1,36 @@
-import React4, { createContext, useId, useState, useContext } from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
-
-// src/components/Text/Text.tsx
-function mergeStyles(...inputs) {
-  return twMerge(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-100": "text-blue-100",
-  "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 baseStyles4 = "font-sans";
-  const colorClass = colorClasses[textColor];
-  const typographyClass = typographyStyles[typography];
-  const alignClass = align ? alignClasses[align] : "";
-  return mergeStyles([baseStyles4, 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.createElement(
-    Component,
-    {
-      className: mergeStyles(classes, className),
-      ...props
-    },
-    children
-  );
-};
-Text.displayName = "Text";
-var FieldContext = createContext(null);
-var useFieldContext = () => {
-  const context = useContext(FieldContext);
-  if (!context) {
-    return null;
-  }
-  return context;
-};
-var FieldRoot = ({
-  children,
-  disabled = false,
-  error = false,
-  className,
-  ...props
-}) => {
-  const id = useId();
-  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id, disabled, error }, children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: wrapperStyles, children: [
-    leftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-gray-400", children: leftIcon }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        id,
-        disabled,
-        className: mergeStyles(inputStyles, classes),
-        ...props
-      }
-    ),
-    rightIcon && /* @__PURE__ */ 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 ? Slot : node;
-    return /* @__PURE__ */ 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__ */ 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__ */ jsx("textarea", { className: textareaStyles, disabled, ...props });
-};
-var TextAreaFooter = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ 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 = createContext(null);
-var useRadioGroupContext = () => {
-  return useContext(RadioGroupContext);
-};
-var RadioGroup = ({
-  name,
-  value,
-  defaultValue,
-  onValueChange,
-  className,
-  children,
-  ...props
-}) => {
-  const [internalValue, setInternalValue] = React4.useState(defaultValue);
-  const currentValue = value ?? internalValue;
-  const handleChange = (newValue) => {
-    if (value === void 0) {
-      setInternalValue(newValue);
-    }
-    onValueChange?.(newValue);
-  };
-  return /* @__PURE__ */ jsx(
-    RadioGroupContext.Provider,
-    {
-      value: { name, value: currentValue, onChange: handleChange },
-      children: /* @__PURE__ */ jsx(
-        Primitive.div,
-        {
-          role: "radiogroup",
-          className: mergeStyles("flex flex-col gap-5", className),
-          ...props,
-          children
-        }
-      )
-    }
-  );
-};
-var RadioIcon = ({ checked }) => /* @__PURE__ */ 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__ */ 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__ */ jsxs(
-    "label",
-    {
-      className: mergeStyles(
-        "flex cursor-pointer items-center gap-2",
-        "transition-opacity duration-150 hover:opacity-80",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "radio",
-            name,
-            value,
-            checked: isChecked,
-            onChange: handleChange,
-            className: "sr-only",
-            ...props
-          }
-        ),
-        /* @__PURE__ */ 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__ */ jsx(RadioIcon, { checked: !!isChecked })
-          }
-        ),
-        /* @__PURE__ */ jsx(Text, { typography: "body-sm", textColor: "gray-800", children })
-      ]
-    }
-  );
-};
-RadioGroup.displayName = "RadioGroup";
-Radio.displayName = "Radio";
-var ToggleContext = React4.createContext(null);
-var useToggleContext = () => {
-  const context = React4.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] = 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__ */ jsx(ToggleContext.Provider, { value: { checked: isChecked, disabled }, children: /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: mergeStyles(
-        "inline-flex cursor-pointer items-center gap-2",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: isChecked,
-            onChange: handleChange,
-            disabled,
-            className: "sr-only"
-          }
-        ),
-        children
-      ]
-    }
-  ) });
-};
-var ToggleSwitch = () => {
-  const { checked } = useToggleContext();
-  return /* @__PURE__ */ 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__ */ 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__ */ 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.createContext(null);
-var useCheckboxContext = () => {
-  const context = React4.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] = 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__ */ jsx(CheckboxContext.Provider, { value: { checked: isChecked, disabled }, children: /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: mergeStyles(
-        "inline-flex cursor-pointer items-center gap-2",
-        disabled && "cursor-not-allowed opacity-50",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: isChecked,
-            onChange: handleChange,
-            disabled,
-            className: "sr-only"
-          }
-        ),
-        children
-      ]
-    }
-  ) });
-};
-var CheckboxIndicator = () => {
-  const { checked } = useCheckboxContext();
-  if (checked) {
-    return /* @__PURE__ */ 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__ */ jsx("rect", { width: "18", height: "18", rx: "4", fill: "#1E2939" }),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: "M5 9.08333L7.94737 12L13 7",
-              stroke: "white",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            }
-          )
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ 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__ */ 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
-});
-
-// src/components/Button/Button.styles.ts
-var baseStyles = "inline-flex items-center justify-center gap-[0.375rem] whitespace-nowrap rounded-[0.5rem] transition-colors duration-150 disabled:opacity-50 disabled:pointer-events-none";
-var sizeStyles = {
-  sm: "min-w-[3rem] h-[1.875rem] px-[0.5rem] typo-body2-sm-point",
-  md: "h-[2.375rem] px-[0.75rem] typo-body2-sm-point"
-};
-var colorStyles = {
-  // base와 active에 대한 설정이 아직 정해지지 않음
-  white: {
-    base: "bg-white text-gray-400",
-    active: "bg-white text-gray-400"
-  },
-  gray: {
-    base: "bg-gray-100 text-gray-400",
-    active: "bg-gray-100 text-gray-400"
-  },
-  red: {
-    base: "bg-red-100 text-red-400",
-    active: "bg-red-100 text-red-400"
-  }
-};
-function buttonStyles({
-  size,
-  color,
-  active = false,
-  disabled = false,
-  fullWidth = false
-}) {
-  return mergeStyles(
-    baseStyles,
-    disabled ? "cursor-not-allowed pointer-events-none" : "cursor-pointer",
-    sizeStyles[size],
-    active ? colorStyles[color].active : colorStyles[color].base,
-    fullWidth && "w-full"
-  );
-}
-function Button({
-  size = "md",
-  color = "gray",
-  active = false,
-  fullWidth = false,
-  disabled = false,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      className: buttonStyles({
-        size,
-        color,
-        active,
-        disabled,
-        fullWidth
-      }),
-      disabled,
-      ...props,
-      children
-    }
-  );
-}
-
-// src/components/CTAButton/CTAButton.styles.ts
-var baseStyles2 = "inline-flex items-center justify-center h-[3.375rem] px-[0.5rem] rounded-[0.75rem] typo-fixed-15 whitespace-nowrap select-none transition-colors";
-var widthStyles = {
-  default: "w-[18rem]",
-  full: "w-full"
-};
-var colorStyles2 = {
-  blue: "bg-blue-100 text-blue-700",
-  red: "bg-red-400 text-white",
-  dark: "bg-gray-700 text-white",
-  light: "bg-gray-100 text-gray-500",
-  white: "bg-white text-gray-500",
-  disabled: "bg-gray-200 text-gray-300"
-};
-function ctaButtonStyles({
-  color,
-  fullWidth = false,
-  disabled = false
-}) {
-  return mergeStyles(
-    baseStyles2,
-    fullWidth ? widthStyles.full : widthStyles.default,
-    colorStyles2[disabled ? "disabled" : color],
-    disabled ? "pointer-events-none" : "cursor-pointer"
-  );
-}
-function CTAButton({
-  color = "light",
-  fullWidth = false,
-  disabled = false,
-  asChild = false,
-  className,
-  children,
-  ...props
-}) {
-  const Component = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      type: asChild ? void 0 : "button",
-      disabled,
-      className: mergeStyles(
-        ctaButtonStyles({ color, fullWidth, disabled }),
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-
-// src/components/FloatingActionButton/FloatingActionButton.styles.ts
-var baseStyles3 = "inline-flex items-center justify-center bg-gray-100 border border-gray-200 text-gray-500 typo-body-sm-point h-[2.875rem] rounded-[6.1875rem] select-none whitespace-nowrap transition-colors";
-var paddingStyles = "px-[1rem] py-[0.625rem]";
-var iconGapStyles = {
-  left: "gap-[0.25rem]",
-  right: "gap-[0.625rem]",
-  none: ""
-};
-function floatingActionButtonStyles({
-  iconPosition = "none",
-  disabled = false
-}) {
-  return mergeStyles(
-    baseStyles3,
-    paddingStyles,
-    iconGapStyles[iconPosition],
-    disabled ? "opacity-50 pointer-events-none" : "cursor-pointer"
-  );
-}
-function FloatingActionButton({
-  leftIcon,
-  rightIcon,
-  disabled = false,
-  asChild = false,
-  children,
-  className,
-  ...props
-}) {
-  const iconPosition = leftIcon ? "left" : rightIcon ? "right" : "none";
-  const Component = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsxs(
-    Component,
-    {
-      type: asChild ? void 0 : "button",
-      disabled,
-      className: mergeStyles(
-        floatingActionButtonStyles({ iconPosition, disabled }),
-        className
-      ),
-      ...props,
-      children: [
-        leftIcon && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: leftIcon }),
-        children && /* @__PURE__ */ jsx("span", { children }),
-        rightIcon && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: rightIcon })
-      ]
-    }
-  );
-}
-
-// src/components/Box/Box.styles.ts
-var paddingClasses = {
-  none: "p-0",
-  xs: "p-1",
-  // 4px
-  sm: "p-2",
-  // 8px
-  md: "p-4",
-  // 16px
-  lg: "p-6"
-  // 24px
-};
-var radiusClasses = {
-  none: "rounded-none",
-  xs: "rounded-sm",
-  sm: "rounded",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  "2xl": "rounded-2xl",
-  "3xl": "rounded-3xl"
-};
-var displayClasses = {
-  block: "block",
-  flex: "flex",
-  grid: "grid",
-  "inline-block": "inline-block",
-  "inline-flex": "inline-flex",
-  none: "hidden"
-};
-var backgroundClasses = {
-  default: "",
-  subtle: "bg-gray-50",
-  inverse: "bg-gray-900 text-white",
-  transparent: "bg-transparent"
-};
-function boxStyles({
-  padding = "none",
-  radius = "none",
-  display = "block",
-  background = "default"
-}) {
-  return mergeStyles([
-    paddingClasses[padding],
-    radiusClasses[radius],
-    displayClasses[display],
-    backgroundClasses[background]
-  ]);
-}
-
-// src/components/Box/Box.tsx
-var Box = ({
-  as,
-  padding,
-  radius,
-  display,
-  background,
-  className = "",
-  children,
-  ...props
-}) => {
-  const Component = as || "div";
-  const classes = boxStyles({ padding, radius, display, background });
-  return React4.createElement(
-    Component,
-    {
-      className: mergeStyles(classes, className),
-      ...props
-    },
-    children
-  );
-};
-Box.displayName = "Box";
-
-// src/components/Stack/Stack.styles.ts
-var directionClasses = {
-  horizontal: "flex-row",
-  vertical: "flex-col"
-};
-var gapClasses = {
-  none: "gap-0",
-  xs: "gap-1",
-  // 4px
-  sm: "gap-2",
-  // 8px
-  md: "gap-4",
-  // 16px
-  lg: "gap-6",
-  // 24px
-  xl: "gap-8"
-  // 32px
-};
-var alignClasses2 = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch"
-};
-var justifyClasses = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between"
-};
-function stackStyles({
-  direction = "vertical",
-  gap = "md",
-  align = "stretch",
-  justify = "start"
-}) {
-  return mergeStyles([
-    "flex",
-    // Base style
-    directionClasses[direction],
-    gapClasses[gap],
-    alignClasses2[align],
-    justifyClasses[justify]
-  ]);
-}
-
-// src/components/Stack/Stack.tsx
-var Stack = ({
-  as,
-  direction,
-  gap,
-  align,
-  justify,
-  className = "",
-  children,
-  ...props
-}) => {
-  const Component = as || "div";
-  const classes = stackStyles({ direction, gap, align, justify });
-  return React4.createElement(
-    Component,
-    {
-      className: mergeStyles(classes, className),
-      ...props
-    },
-    children
-  );
-};
-Stack.displayName = "Stack";
-var VStack = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(Stack, { direction: "vertical", ...props });
-};
-VStack.displayName = "VStack";
-var HStack = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
-};
-HStack.displayName = "HStack";
-
-// src/components/Flex/Flex.styles.ts
-var directionClasses2 = {
-  row: "flex-row",
-  "row-reverse": "flex-row-reverse",
-  column: "flex-col",
-  "column-reverse": "flex-col-reverse"
-};
-var gapClasses2 = {
-  none: "gap-0",
-  xs: "gap-1",
-  // 4px
-  sm: "gap-2",
-  // 8px
-  md: "gap-4",
-  // 16px
-  lg: "gap-6",
-  // 24px
-  xl: "gap-8"
-  // 32px
-};
-var alignClasses3 = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-var justifyClasses2 = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
-};
-var wrapClasses = {
-  nowrap: "flex-nowrap",
-  wrap: "flex-wrap",
-  "wrap-reverse": "flex-wrap-reverse"
-};
-function flexStyles({
-  direction = "row",
-  gap = "md",
-  align = "stretch",
-  justify = "start",
-  wrap = "nowrap"
-}) {
-  return mergeStyles([
-    "flex",
-    // Base style
-    directionClasses2[direction],
-    gapClasses2[gap],
-    alignClasses3[align],
-    justifyClasses2[justify],
-    wrapClasses[wrap]
-  ]);
-}
-
-// src/components/Flex/Flex.tsx
-var Flex = ({
-  as,
-  direction,
-  gap,
-  align,
-  justify,
-  wrap,
-  className = "",
-  children,
-  ...props
-}) => {
-  const Component = as || "div";
-  const classes = flexStyles({ direction, gap, align, justify, wrap });
-  return React4.createElement(
-    Component,
-    {
-      className: mergeStyles(classes, className),
-      ...props
-    },
-    children
-  );
-};
-Flex.displayName = "Flex";
-
-// src/components/Grid/Grid.styles.ts
-var columnsClasses = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6",
-  7: "grid-cols-7",
-  8: "grid-cols-8",
-  9: "grid-cols-9",
-  10: "grid-cols-10",
-  11: "grid-cols-11",
-  12: "grid-cols-12",
-  none: "grid-cols-none"
-};
-var rowsClasses = {
-  1: "grid-rows-1",
-  2: "grid-rows-2",
-  3: "grid-rows-3",
-  4: "grid-rows-4",
-  5: "grid-rows-5",
-  6: "grid-rows-6",
-  none: "grid-rows-none"
-};
-var gapClasses3 = {
-  none: "gap-0",
-  xs: "gap-1",
-  // 4px
-  sm: "gap-2",
-  // 8px
-  md: "gap-4",
-  // 16px
-  lg: "gap-6",
-  // 24px
-  xl: "gap-8"
-  // 32px
-};
-var flowClasses = {
-  row: "grid-flow-row",
-  col: "grid-flow-col",
-  "row-dense": "grid-flow-row-dense",
-  "col-dense": "grid-flow-col-dense"
-};
-function gridStyles({
-  columns = "none",
-  rows = "none",
-  gap = "md",
-  flow = "row"
-}) {
-  return mergeStyles([
-    "grid",
-    columnsClasses[columns],
-    rowsClasses[rows],
-    gapClasses3[gap],
-    flowClasses[flow]
-  ]);
-}
-
-// src/components/Grid/Grid.tsx
-var Grid = ({
-  as,
-  columns,
-  rows,
-  gap,
-  flow,
-  className = "",
-  children,
-  ...props
-}) => {
-  const Component = as || "div";
-  const classes = gridStyles({ columns, rows, gap, flow });
-  return React4.createElement(
-    Component,
-    {
-      className: mergeStyles(classes, className),
-      ...props
-    },
-    children
-  );
-};
-Grid.displayName = "Grid";
-
-// src/components/Separator/Separator.styles.ts
-var orientationClasses = {
-  horizontal: "h-px w-full my-2",
-  vertical: "h-full w-px mx-2 self-stretch"
-};
-var colorClasses2 = "bg-gray-200";
-function separatorStyles({
-  orientation = "horizontal"
-}) {
-  return mergeStyles([colorClasses2, orientationClasses[orientation]]);
-}
-
-// src/components/Separator/Separator.tsx
-var Separator = ({
-  as,
-  orientation = "horizontal",
-  className = "",
-  ...props
-}) => {
-  const Component = as || "div";
-  const classes = separatorStyles({ orientation });
-  return React4.createElement(Component, {
-    role: "separator",
-    "aria-orientation": orientation,
-    className: mergeStyles(classes, className),
-    ...props
-  });
-};
-Separator.displayName = "Separator";
-
-// src/components/Spacer/Spacer.styles.ts
-var sizeClasses = {
-  1: "w-1 h-1",
-  // 4px
-  2: "w-2 h-2",
-  // 8px
-  4: "w-4 h-4",
-  // 16px
-  6: "w-6 h-6",
-  // 24px
-  8: "w-8 h-8",
-  // 32px
-  10: "w-10 h-10",
-  // 40px
-  12: "w-12 h-12",
-  // 48px
-  16: "w-16 h-16",
-  // 64px
-  20: "w-20 h-20",
-  // 80px
-  24: "w-24 h-24"
-  // 96px
-};
-function spacerStyles({ size = "auto" }) {
-  if (size === "auto") {
-    return "flex-1";
-  }
-  return mergeStyles(["flex-none", sizeClasses[size]]);
-}
-
-// src/components/Spacer/Spacer.tsx
-var Spacer = ({
-  as,
-  size,
-  className = "",
-  ...props
-}) => {
-  const Component = as || "div";
-  const classes = spacerStyles({ size });
-  return React4.createElement(Component, {
-    "aria-hidden": "true",
-    className: mergeStyles(classes, className),
-    ...props
-  });
-};
-Spacer.displayName = "Spacer";
-
-export { Box, Button, CTAButton, Checkbox, Field, Flex, FloatingActionButton, Grid, HStack, Radio, RadioGroup, Separator, Spacer, Stack, Text, TextArea, TextInput, Toggle, VStack, mergeStyles, useRadioGroupContext };
+import { Text } from "./components/Text/Text.mjs";
+import { Field } from "./components/Field/Field.mjs";
+import { TextInput } from "./components/TextInput/TextInput.mjs";
+import { Primitive } from "./components/Primitive/Primitive.mjs";
+import { TextArea } from "./components/TextArea/TextArea.mjs";
+import { Radio, RadioGroup, useRadioGroupContext } from "./components/Radio/Radio.mjs";
+import { Toggle } from "./components/Toggle/Toggle.mjs";
+import { Checkbox } from "./components/Checkbox/Checkbox.mjs";
+import { mergeStyles } from "./utils/mergeStyles/mergeStyles.mjs";
+import { convertPxToRem } from "./utils/converter/converter.mjs";
+import { splitVariantProps } from "./utils/splitter/splitter.mjs";
+import { Button } from "./components/Button/Button.mjs";
+import { CTAButton } from "./components/CTAButton/CTAButton.mjs";
+import { FloatingActionButton } from "./components/FloatingActionButton/FloatingActionButton.mjs";
+import { box } from "./components/Box/Box.styles.mjs";
+import { Box } from "./components/Box/Box.mjs";
+import { Stack } from "./components/Stack/Stack.mjs";
+import { VStack } from "./components/VStack/VStack.mjs";
+import { HStack } from "./components/HStack/HStack.mjs";
+import { Flex } from "./components/Flex/Flex.mjs";
+import { Grid } from "./components/Grid/Grid.mjs";
+import { Separator } from "./components/Separator/Separator.mjs";
+import { Spacer } from "./components/Spacer/Spacer.mjs";
+import { RatioChart } from "./components/RatioChart/RatioChart.mjs";
+import { RatioChartEditor } from "./components/RatioChart/RatioChartEditor.mjs";
+import { Select } from "./components/Select/Select.mjs";
+import { Dialog } from "./components/Dialog/Dialog.mjs";
+import { Dropdown } from "./components/Dropdown/Dropdown.mjs";
+import { Float } from "./components/Float/Float.mjs";
+import { Chip } from "./components/Chip/Chip.mjs";
+import { Avatar } from "./components/Avatar/Avatar.mjs";
+import { Tab } from "./components/Tab/Tab.mjs";
+import { Toast, ToastProvider, ToastViewport } from "./components/Toast/Toast.mjs";
+import { Modal } from "./components/Modal/Modal.mjs";
+
+export { Avatar, Box, Button, CTAButton, Checkbox, Chip, Dialog, Dropdown, Field, Flex, Float, FloatingActionButton, Grid, HStack, Modal, Primitive, Radio, RadioGroup, RatioChart, RatioChartEditor, Select, Separator, Spacer, Stack, Tab, Text, TextArea, TextInput, Toast, ToastProvider, ToastViewport, Toggle, VStack, box, convertPxToRem, mergeStyles, splitVariantProps, useRadioGroupContext };