@yuno-payments/dashboard-design-system 0.0.15 → 0.0.16

package/dist/components/atoms/index.d.ts

@@ -3,4 +3,5 @@ export { Badge, type BadgeProps } from './badge';
 export { Button, type ButtonProps } from './button';
 export { Checkbox, type CheckboxProps } from './checkbox';
 export { Icon, type IconProps } from './icon';
-export { Tooltip } from './tooltip';
+export { Tooltip, type TooltipProps } from './tooltip';
+export { Input, type InputProps } from './input';

package/dist/components/atoms/input/input.js

@@ -0,0 +1,70 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import { forwardRef as v, useId as h } from "react";
+import { cva as m } from "../../../node_modules/class-variance-authority/dist/index.js";
+import { Input as j } from "../../../vendor/shadcn/input.js";
+import { cn as e } from "../../../lib/utils.js";
+import { Label as I } from "../../../vendor/shadcn/label.js";
+import { Button as N } from "../button/button.js";
+const g = m("flex gap-2 w-full", {
+  variants: {
+    layout: {
+      vertical: "flex-col",
+      horizontal: "flex-row items-start gap-4"
+    }
+  },
+  defaultVariants: {
+    layout: "vertical"
+  }
+}), y = m("text-sm", {
+  variants: {
+    layout: {
+      vertical: "",
+      horizontal: "mt-2"
+    }
+  },
+  defaultVariants: {
+    layout: "vertical"
+  }
+}), b = v(
+  ({ className: d, layout: i, label: o, description: r, error: a, id: p, button: l, disabled: n, ...f }, u) => {
+    const x = h(), s = p || x, c = !!a;
+    return /* @__PURE__ */ t.jsxs("div", { className: e(g({ layout: i })), children: [
+      o && /* @__PURE__ */ t.jsx(I, { htmlFor: s, className: e(y({ layout: i })), children: o }),
+      /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ t.jsx(
+            j,
+            {
+              ref: u,
+              id: s,
+              disabled: n,
+              className: e(
+                c && "border-destructive focus-visible:border-destructive",
+                d
+              ),
+              "aria-invalid": c,
+              "aria-describedby": r || a ? `${s}-description` : void 0,
+              ...f
+            }
+          ),
+          l && /* @__PURE__ */ t.jsx(N, { disabled: n, ...l })
+        ] }),
+        (r || a) && /* @__PURE__ */ t.jsx(
+          "p",
+          {
+            id: `${s}-description`,
+            className: e(
+              "text-sm",
+              a ? "text-destructive" : "text-muted-foreground"
+            ),
+            children: a || r
+          }
+        )
+      ] })
+    ] });
+  }
+);
+b.displayName = "Input";
+export {
+  b as Input
+};

package/dist/index.js

@@ -1,19 +1,21 @@
 /* empty css           */
 import { Avatar as e } from "./components/atoms/avatar/avatar.js";
-import { Badge as p } from "./components/atoms/badge/badge.js";
+import { Badge as m } from "./components/atoms/badge/badge.js";
 import { Button as f } from "./components/atoms/button/button.js";
 import { Checkbox as c } from "./components/atoms/checkbox/checkbox.js";
-import { Icon as B } from "./components/atoms/icon/icon.js";
-import { Tooltip as d } from "./components/atoms/tooltip/tooltip.js";
+import { Icon as n } from "./components/atoms/icon/icon.js";
+import { Tooltip as B } from "./components/atoms/tooltip/tooltip.js";
+import { Input as d } from "./components/atoms/input/input.js";
 import { Breadcrumb as l } from "./components/molecules/breadcrumb/breadcrumb.js";
-import { Dialog as u } from "./components/organisms/dialog/dialog.js";
+import { Dialog as h } from "./components/organisms/dialog/dialog.js";
 export {
   e as Avatar,
-  p as Badge,
+  m as Badge,
   l as Breadcrumb,
   f as Button,
   c as Checkbox,
-  u as Dialog,
-  B as Icon,
-  d as Tooltip
+  h as Dialog,
+  n as Icon,
+  d as Input,
+  B as Tooltip
 };

package/dist/vendor/shadcn/input.js

@@ -0,0 +1,22 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import "react";
+import { cn as n } from "../../lib/utils.js";
+function s({ className: e, type: i, ...r }) {
+  return /* @__PURE__ */ t.jsx(
+    "input",
+    {
+      type: i,
+      "data-slot": "input",
+      className: n(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        e
+      ),
+      ...r
+    }
+  );
+}
+export {
+  s as Input
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",