@causw/core 0.0.6 → 0.0.9

package/dist/index.mjs

@@ -1 +1,659 @@
+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-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 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@causw/core",
-  "version": "0.0.6",
-  "description": "Core utilities and logging for CAUSW Design System - CAU Software Community Service",
+  "version": "0.0.9",
+  "description": "Core components and utilities for CAUSW Design System - CAU Software Community Service",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -10,11 +10,27 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
+    },
+    "./styles": {
+      "import": "./src/styles/global.css",
+      "require": "./src/styles/global.css"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles"
   ],
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0",
+    "@causw/icons": "0.0.8",
+    "@causw/tokens": "0.0.10"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/CAUCSE/CAUSW-frontend-design-system",
@@ -26,8 +42,8 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --treeshake",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react --treeshake",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --external react --watch",
     "lint": "eslint src"
   }
 }