@grupor5/raya 0.2.1 → 0.2.3

package/dist/molecules/stepper/index.mjs

@@ -0,0 +1,260 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var StepperContext = React.createContext(null);
+var useStepper = () => {
+  const context = React.useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a Stepper component");
+  }
+  return context;
+};
+var Stepper = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      initialStep = 0,
+      orientation = "horizontal",
+      steps,
+      onStepChange
+    } = _b, props = __objRest(_b, [
+      "className",
+      "initialStep",
+      "orientation",
+      "steps",
+      "onStepChange"
+    ]);
+    var _a2;
+    const [activeStep, setActiveStep] = React.useState(initialStep);
+    React.useImperativeHandle(ref, () => ({
+      goToNextStep: () => {
+        setActiveStep((prev) => {
+          const nextStep = prev < steps.length - 1 ? prev + 1 : prev;
+          onStepChange == null ? void 0 : onStepChange(nextStep);
+          return nextStep;
+        });
+      },
+      goToPrevStep: () => {
+        setActiveStep((prev) => {
+          const prevStep = prev > 0 ? prev - 1 : prev;
+          onStepChange == null ? void 0 : onStepChange(prevStep);
+          return prevStep;
+        });
+      },
+      activeStep
+    }));
+    const stepStatuses = React.useMemo(() => {
+      return steps.map((_, index) => {
+        if (index < activeStep) return { status: "completed" };
+        if (index === activeStep) return { status: "current" };
+        return { status: "upcoming" };
+      });
+    }, [activeStep, steps]);
+    const contextValue = React.useMemo(
+      () => ({
+        activeStep,
+        orientation,
+        steps: stepStatuses,
+        stepCount: steps.length
+      }),
+      [activeStep, orientation, stepStatuses, steps.length]
+    );
+    return /* @__PURE__ */ jsxs(StepperContext.Provider, { value: contextValue, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        __spreadProps(__spreadValues({
+          className: cn(
+            "flex w-full items-start font-sans",
+            orientation === "vertical" ? "flex-col" : "justify-between",
+            className
+          )
+        }, props), {
+          children: steps.map((step, index) => /* @__PURE__ */ jsx(Step, { index, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                orientation === "horizontal" ? "mt-2 text-center" : "ml-4 text-left"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(StepLabel, { children: step.label }),
+                step.description && /* @__PURE__ */ jsx(StepDescription, { children: step.description })
+              ]
+            }
+          ) }, index))
+        })
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-8 font-sans", children: ((_a2 = steps[activeStep]) == null ? void 0 : _a2.content) && /* @__PURE__ */ jsx(StepContent, { index: activeStep, children: steps[activeStep].content }) })
+    ] });
+  }
+);
+Stepper.displayName = "Stepper";
+var stepVariants = cva(
+  "relative flex flex-col items-center justify-start flex-1",
+  {
+    variants: {
+      status: {
+        completed: "",
+        current: "",
+        upcoming: ""
+      }
+    }
+  }
+);
+var connectorVariants = cva("", {
+  variants: {
+    status: {
+      completed: "bg-green-600",
+      current: "bg-secondary-600",
+      upcoming: "bg-neutral-300"
+    }
+  },
+  defaultVariants: {
+    status: "upcoming"
+  }
+});
+var Step = React.forwardRef(({ className, children, index }, ref) => {
+  const { steps, stepCount, orientation } = useStepper();
+  const status = steps[index].status;
+  const isFirst = index === 0;
+  const prevStatus = isFirst ? "upcoming" : steps[index - 1].status;
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-1 items-start gap-4", className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "h-2.5 w-0.5",
+                  connectorVariants({ status: prevStatus })
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 font-semibold shadow-[0_0_0_8px_white]",
+                  status === "completed" && "border-green-600 bg-white text-green-600",
+                  status === "current" && "border-secondary-600 bg-white text-secondary-600",
+                  status === "upcoming" && "border-neutral-300 bg-white text-neutral-400"
+                ),
+                children: /* @__PURE__ */ jsx("span", { children: String(index + 1).padStart(2, "0") })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "h-full min-h-12 w-0.5 grow",
+                  connectorVariants({ status })
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2.5", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn(stepVariants({ status }), className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute top-5 left-0 w-1/2 h-0.5",
+          connectorVariants({ status })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute top-5 right-0 w-1/2 h-0.5",
+          connectorVariants({ status })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 font-semibold shadow-[0_0_0_8px_white]",
+          status === "completed" && "border-green-600 bg-white text-green-600",
+          status === "current" && "border-secondary-600 bg-white text-secondary-600",
+          status === "upcoming" && "border-neutral-300 bg-white text-neutral-400"
+        ),
+        children: /* @__PURE__ */ jsx("span", { children: String(index + 1).padStart(2, "0") })
+      }
+    ),
+    children
+  ] });
+});
+Step.displayName = "Step";
+var StepLabel = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("p", __spreadValues({ ref, className: cn("text-lg font-normal", className) }, props));
+});
+StepLabel.displayName = "StepLabel";
+var StepDescription = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "p",
+    __spreadValues({
+      ref,
+      className: cn("text-sm font-normal text-primary-700", className)
+    }, props)
+  );
+});
+StepDescription.displayName = "StepDescription";
+var StepContent = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, index, children } = _b, props = __objRest(_b, ["className", "index", "children"]);
+  const { activeStep } = useStepper();
+  if (activeStep !== index) return null;
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className: cn("w-full", className) }, props), { children }));
+});
+StepContent.displayName = "StepContent";
+
+export { Step, StepContent, StepDescription, StepLabel, Stepper, useStepper };

package/dist/molecules/tabs/index.d.mts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/molecules/tabs/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/molecules/tabs/index.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var Tabs = TabsPrimitive__namespace.Root;
+var TabsList = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    __spreadValues({
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center border-b",
+        className
+      )
+    }, props)
+  );
+});
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+var TabsTrigger = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Trigger,
+    __spreadValues({
+      ref,
+      className: cn(
+        "group font-sans inline-flex items-center justify-center rounded-tl-lg rounded-tr-lg px-tab-x py-tab-y text-tab border-b-2 transition-colors gap-2",
+        "text-tab-text-default border-transparent",
+        "hover:bg-tab-background-hover hover:text-tab-text-hover hover:border-tab-border-selected",
+        "data-[state=active]:text-tab-text-selected data-[state=active]:border-tab-border-selected",
+        "disabled:text-tab-text-disabled disabled:cursor-not-allowed disabled:hover:bg-transparent",
+        className
+      )
+    }, props)
+  );
+});
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+var TabsContent = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    __spreadValues({
+      ref,
+      className: cn(
+        "mt-4 p-4",
+        className
+      )
+    }, props)
+  );
+});
+TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;

package/dist/molecules/tabs/index.mjs

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Tabs = TabsPrimitive.Root;
+var TabsList = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    __spreadValues({
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center border-b",
+        className
+      )
+    }, props)
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    __spreadValues({
+      ref,
+      className: cn(
+        "group font-sans inline-flex items-center justify-center rounded-tl-lg rounded-tr-lg px-tab-x py-tab-y text-tab border-b-2 transition-colors gap-2",
+        "text-tab-text-default border-transparent",
+        "hover:bg-tab-background-hover hover:text-tab-text-hover hover:border-tab-border-selected",
+        "data-[state=active]:text-tab-text-selected data-[state=active]:border-tab-border-selected",
+        "disabled:text-tab-text-disabled disabled:cursor-not-allowed disabled:hover:bg-transparent",
+        className
+      )
+    }, props)
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    __spreadValues({
+      ref,
+      className: cn(
+        "mt-4 p-4",
+        className
+      )
+    }, props)
+  );
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/tokens/badge.d.mts

@@ -0,0 +1,39 @@
+declare const badgeTokens: {
+    colors: {
+        inProgress: {
+            text: string;
+            background: string;
+        };
+        success: {
+            text: string;
+            background: string;
+        };
+        pending: {
+            text: string;
+            background: string;
+        };
+        danger: {
+            text: string;
+            background: string;
+        };
+        default: {
+            text: string;
+            background: string;
+            textOnSolid: string;
+        };
+    };
+    sizes: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    padding: {
+        vertical: string;
+        horizontal: string;
+    };
+    icon: {
+        size: string;
+    };
+};
+
+export { badgeTokens };

package/dist/tokens/badge.d.ts

@@ -0,0 +1,39 @@
+declare const badgeTokens: {
+    colors: {
+        inProgress: {
+            text: string;
+            background: string;
+        };
+        success: {
+            text: string;
+            background: string;
+        };
+        pending: {
+            text: string;
+            background: string;
+        };
+        danger: {
+            text: string;
+            background: string;
+        };
+        default: {
+            text: string;
+            background: string;
+            textOnSolid: string;
+        };
+    };
+    sizes: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    padding: {
+        vertical: string;
+        horizontal: string;
+    };
+    icon: {
+        size: string;
+    };
+};
+
+export { badgeTokens };

package/dist/tokens/badge.js

@@ -0,0 +1,61 @@
+'use strict';
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    200: "#eeedf1",
+    700: "#706984"},
+  secondary: {
+    200: "#f2e4f6",
+    600: "#ac50c7",
+    1e3: "#481b55",
+    1100: "#42194e"},
+  neutral: {
+    10: "#ffffff"},
+  red: {
+    400: "#e86e6e"},
+  green: {
+    600: "#096849",
+    100: "#D0FAE5"}
+};
+
+// src/tokens/badge.ts
+var badgeTokens = {
+  colors: {
+    inProgress: {
+      text: colors.secondary[600],
+      background: colors.secondary[200]
+    },
+    success: {
+      text: colors.green[600],
+      background: colors.green[100]
+    },
+    pending: {
+      text: colors.primary[700],
+      background: colors.primary[200]
+    },
+    danger: {
+      text: colors.neutral[10],
+      background: colors.red[400]
+    },
+    default: {
+      text: colors.secondary[1e3],
+      background: colors.secondary[1100],
+      textOnSolid: colors.secondary[200]
+    }
+  },
+  sizes: {
+    sm: "12px",
+    md: "14px",
+    lg: "16px"
+  },
+  padding: {
+    vertical: "4px",
+    horizontal: "12px"
+  },
+  icon: {
+    size: "16px"
+  }
+};
+
+exports.badgeTokens = badgeTokens;

package/dist/tokens/badge.mjs

@@ -0,0 +1,59 @@
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    200: "#eeedf1",
+    700: "#706984"},
+  secondary: {
+    200: "#f2e4f6",
+    600: "#ac50c7",
+    1e3: "#481b55",
+    1100: "#42194e"},
+  neutral: {
+    10: "#ffffff"},
+  red: {
+    400: "#e86e6e"},
+  green: {
+    600: "#096849",
+    100: "#D0FAE5"}
+};
+
+// src/tokens/badge.ts
+var badgeTokens = {
+  colors: {
+    inProgress: {
+      text: colors.secondary[600],
+      background: colors.secondary[200]
+    },
+    success: {
+      text: colors.green[600],
+      background: colors.green[100]
+    },
+    pending: {
+      text: colors.primary[700],
+      background: colors.primary[200]
+    },
+    danger: {
+      text: colors.neutral[10],
+      background: colors.red[400]
+    },
+    default: {
+      text: colors.secondary[1e3],
+      background: colors.secondary[1100],
+      textOnSolid: colors.secondary[200]
+    }
+  },
+  sizes: {
+    sm: "12px",
+    md: "14px",
+    lg: "16px"
+  },
+  padding: {
+    vertical: "4px",
+    horizontal: "12px"
+  },
+  icon: {
+    size: "16px"
+  }
+};
+
+export { badgeTokens };