@causw/core 0.0.9 → 0.0.11

package/dist/index.mjs

@@ -1,659 +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';
+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";
 
-// 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-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.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
-});
-
-export { Checkbox, Field, Radio, RadioGroup, Text, TextArea, TextInput, Toggle, mergeStyles, useRadioGroupContext };
+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 };

package/dist/utils/converter/converter.cjs

@@ -0,0 +1,9 @@
+
+//#region src/utils/converter/converter.ts
+const convertPxToRem = (value) => {
+	if (value == null) return;
+	return `${value / 16}rem`;
+};
+
+//#endregion
+exports.convertPxToRem = convertPxToRem;

package/dist/utils/converter/converter.d.cts

@@ -0,0 +1,5 @@
+//#region src/utils/converter/converter.d.ts
+declare const convertPxToRem: (value?: number) => string | undefined;
+//#endregion
+export { convertPxToRem };
+//# sourceMappingURL=converter.d.cts.map