@causw/core 0.0.9 → 0.0.10

package/dist/index.js

@@ -27,7 +27,7 @@ var colorClasses = {
   "gray-700": "text-gray-700",
   "gray-800": "text-gray-800",
   "gray-900": "text-gray-900",
-  "blue-50": "text-blue-50",
+  "blue-100": "text-blue-100",
   "blue-500": "text-blue-500",
   "blue-700": "text-blue-700",
   "red-100": "text-red-100",
@@ -82,11 +82,11 @@ function textStyles({
   textColor,
   align
 }) {
-  const baseStyles = "font-sans";
+  const baseStyles4 = "font-sans";
   const colorClass = colorClasses[textColor];
   const typographyClass = typographyStyles[typography];
   const alignClass = align ? alignClasses[align] : "";
-  return mergeStyles([baseStyles, colorClass, typographyClass, alignClass]);
+  return mergeStyles([baseStyles4, colorClass, typographyClass, alignClass]);
 }
 
 // src/components/Text/Text.tsx
@@ -662,13 +662,585 @@ var Checkbox = Object.assign(CheckboxRoot, {
   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__ */ jsxRuntime.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 ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.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 ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      type: asChild ? void 0 : "button",
+      disabled,
+      className: mergeStyles(
+        floatingActionButtonStyles({ iconPosition, disabled }),
+        className
+      ),
+      ...props,
+      children: [
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children: leftIcon }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        rightIcon && /* @__PURE__ */ jsxRuntime.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__default.default.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__default.default.createElement(
+    Component,
+    {
+      className: mergeStyles(classes, className),
+      ...props
+    },
+    children
+  );
+};
+Stack.displayName = "Stack";
+var VStack = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
+};
+VStack.displayName = "VStack";
+var HStack = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.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__default.default.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__default.default.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__default.default.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__default.default.createElement(Component, {
+    "aria-hidden": "true",
+    className: mergeStyles(classes, className),
+    ...props
+  });
+};
+Spacer.displayName = "Spacer";
+
+exports.Box = Box;
+exports.Button = Button;
+exports.CTAButton = CTAButton;
 exports.Checkbox = Checkbox;
 exports.Field = Field;
+exports.Flex = Flex;
+exports.FloatingActionButton = FloatingActionButton;
+exports.Grid = Grid;
+exports.HStack = HStack;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
+exports.Separator = Separator;
+exports.Spacer = Spacer;
+exports.Stack = Stack;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.Toggle = Toggle;
+exports.VStack = VStack;
 exports.mergeStyles = mergeStyles;
 exports.useRadioGroupContext = useRadioGroupContext;