@dimasbaguspm/versaur 0.0.0

package/README.md

@@ -0,0 +1,81 @@
+# Versaur UI Library
+
+A modern React UI library built with TypeScript and Tailwind CSS, featuring tree-shakable
+components, comprehensive testing, and Storybook documentation.
+
+## Features
+
+- 🎨 **Tailwind CSS 4** - Modern styling with CSS-in-JS
+- 📦 **Tree Shakable** - Subpath exports for optimal bundle size
+- 🔧 **TypeScript** - Full type safety and IntelliSense
+- 📚 **Storybook** - Interactive component documentation
+- 🧪 **Vitest** - Fast unit testing with React Testing Library
+- ⚡ **Vite** - Lightning-fast development and build
+- 🎯 **Modern React** - Built with React 19 and hooks
+- 🎨 **Design Tokens** - Consistent color palette and spacing
+
+
+## Installation
+
+```bash
+yarn install versaur
+```
+
+## Usage
+
+### Import all components
+
+```tsx
+import { Button, Input, Card } from 'versaur'
+```
+
+### Tree-shakable imports
+
+```tsx
+// Import only what you need
+import { Button } from 'versaur/components'
+import Button from 'versaur/components/button'
+```
+
+## Testing
+
+The library includes comprehensive testing setup:
+
+- **Vitest** - Fast unit testing
+- **React Testing Library** - Component testing utilities
+- **jsdom** - DOM environment for testing
+
+```bash
+# Run all tests
+yarn test
+
+# Run tests with coverage
+yarn test:coverage
+
+# Run tests with UI
+yarn test:ui
+```
+
+## Storybook
+
+Interactive component documentation and testing:
+
+```bash
+# Start Storybook development server
+yarn storybook
+
+# Build Storybook for production
+yarn build-storybook
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+MIT © [Dimas Bagus Prayogo Mukti]

package/dist/alert-DzSPXqwS.js

@@ -0,0 +1,167 @@
+import { c as o, j as a } from "./index-DU1SCUkk.js";
+import { forwardRef as n } from "react";
+import { c as l } from "./cn-Ca4KprQ1.js";
+const g = o(
+  "relative flex items-center gap-1 rounded-md p-2 text-sm transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border"
+      },
+      color: {
+        // Core colors
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: "",
+        // Semantic colors
+        success: "",
+        info: "",
+        warning: "",
+        danger: ""
+      }
+    },
+    compoundVariants: [
+      // Default variant styles (soft backgrounds)
+      {
+        variant: "default",
+        color: "primary",
+        class: "bg-coral/10 text-coral border border-coral/20"
+      },
+      {
+        variant: "default",
+        color: "secondary",
+        class: "bg-sage/10 text-sage border border-sage/20"
+      },
+      {
+        variant: "default",
+        color: "tertiary",
+        class: "bg-mist/10 text-mist border border-mist/20"
+      },
+      {
+        variant: "default",
+        color: "ghost",
+        class: "bg-slate/10 text-slate border border-slate/20"
+      },
+      {
+        variant: "default",
+        color: "neutral",
+        class: "bg-neutral/50 text-foreground border border-border"
+      },
+      {
+        variant: "default",
+        color: "success",
+        class: "bg-success/10 text-success border border-success/20"
+      },
+      {
+        variant: "default",
+        color: "info",
+        class: "bg-info/10 text-info border border-info/20"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        class: "bg-warning/10 text-warning border border-warning/20"
+      },
+      {
+        variant: "default",
+        color: "danger",
+        class: "bg-danger/10 text-danger border border-danger/20"
+      },
+      // Outline variant styles
+      {
+        variant: "outline",
+        color: "primary",
+        class: "bg-transparent text-coral border-coral"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        class: "bg-transparent text-sage border-sage"
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        class: "bg-transparent text-mist border-mist"
+      },
+      {
+        variant: "outline",
+        color: "ghost",
+        class: "bg-transparent text-slate border-slate"
+      },
+      {
+        variant: "outline",
+        color: "neutral",
+        class: "bg-transparent text-foreground border-border"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        class: "bg-transparent text-success border-success"
+      },
+      {
+        variant: "outline",
+        color: "info",
+        class: "bg-transparent text-info border-info"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        class: "bg-transparent text-warning border-warning"
+      },
+      {
+        variant: "outline",
+        color: "danger",
+        class: "bg-transparent text-danger border-danger"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "neutral"
+    }
+  }
+), u = o(
+  "flex-shrink-0 flex justify-center items-center ",
+  {
+    variants: {
+      size: {
+        sm: "w-4 h-4",
+        md: "w-5 h-5",
+        lg: "w-6 h-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), c = n(
+  ({ className: t, children: e, ...r }, s) => /* @__PURE__ */ a.jsx("div", { ref: s, className: l(u(), t), ...r, children: e })
+), f = n(
+  ({
+    variant: t = "default",
+    color: e = "neutral",
+    icon: r,
+    className: s,
+    children: i,
+    ...d
+  }, b) => /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      ref: b,
+      role: "alert",
+      className: l(g({ variant: t, color: e }), s),
+      ...d,
+      children: [
+        r && /* @__PURE__ */ a.jsx(c, { children: r }),
+        /* @__PURE__ */ a.jsx("div", { className: "flex-1", children: i })
+      ]
+    }
+  )
+), p = Object.assign(f, {
+  Icon: c
+});
+export {
+  p as A
+};

package/dist/app-bar-B4nQkgdL.js

@@ -0,0 +1,92 @@
+import { c as i, j as r } from "./index-DU1SCUkk.js";
+import { c as s } from "./cn-Ca4KprQ1.js";
+import { forwardRef as n } from "react";
+const l = i(
+  "w-full flex items-center px-4 py-3 gap-2 bg-white",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+), p = i(
+  "flex flex-col justify-center w-full min-w-0 ",
+  {
+    variants: {
+      placement: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end"
+      }
+    },
+    defaultVariants: {
+      placement: "start"
+    }
+  }
+), m = n(
+  ({ children: t, className: a }, e) => /* @__PURE__ */ r.jsx("div", { ref: e, className: s("flex items-center", a), children: t })
+), o = n(
+  ({ children: t, className: a }, e) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: e,
+      className: s("font-semibold text-lg truncate min-w-0", a),
+      children: t
+    }
+  )
+), x = n(
+  ({ children: t, className: a }, e) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: e,
+      className: s("text-xs text-slate-400 truncate min-w-0", a),
+      children: t
+    }
+  )
+), d = n(
+  ({ children: t, className: a }, e) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: e,
+      className: s("flex items-center flex-grow justify-end gap-2", a),
+      children: t
+    }
+  )
+), f = n(
+  ({ children: t, className: a, placement: e }, c) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: c,
+      className: s(p({ placement: e }), a),
+      children: t
+    }
+  )
+), u = ({
+  children: t,
+  className: a,
+  variant: e = "primary"
+}) => /* @__PURE__ */ r.jsx(
+  "header",
+  {
+    className: s(l({ variant: e }), a),
+    role: "banner",
+    children: t
+  }
+), B = Object.assign(u, {
+  Leading: m,
+  Headline: o,
+  Subtitle: x,
+  Trailing: d,
+  Center: f
+});
+export {
+  B as A
+};

package/dist/avatar-Bsn24V6g.js

@@ -0,0 +1,91 @@
+import { c as l, j as c } from "./index-DU1SCUkk.js";
+import { forwardRef as d, useState as g, useEffect as f, useCallback as h } from "react";
+import { c as u } from "./cn-Ca4KprQ1.js";
+const w = l(
+  "inline-flex items-center justify-center font-medium text-white overflow-hidden transition-all duration-200 select-none relative",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "bg-coral text-white",
+        secondary: "bg-sage text-white",
+        tertiary: "bg-mist text-white",
+        ghost: "bg-slate text-white",
+        neutral: "bg-neutral text-foreground border border-border",
+        // Semantic variants
+        success: "bg-success text-white",
+        info: "bg-info text-white",
+        warning: "bg-warning text-white",
+        danger: "bg-danger text-white"
+      },
+      size: {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-8 w-8 text-sm",
+        md: "h-10 w-10 text-base",
+        lg: "h-12 w-12 text-lg",
+        xl: "h-16 w-16 text-xl"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-none",
+        rounded: "rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      shape: "circle"
+    }
+  }
+), b = l(
+  "absolute inset-0 h-full w-full object-cover"
+), v = d(
+  ({
+    variant: e = "primary",
+    size: r = "md",
+    shape: a = "circle",
+    className: t,
+    children: s,
+    ...n
+  }, i) => /* @__PURE__ */ c.jsx(
+    "div",
+    {
+      ref: i,
+      className: u(w({ variant: e, size: r, shape: a }), t),
+      ...n,
+      children: s
+    }
+  )
+), p = d(
+  ({ src: e, alt: r, className: a, onError: t, ...s }, n) => {
+    const [i, o] = g(!1);
+    f(() => {
+      o(!1);
+    }, [e]);
+    const m = h(
+      (x) => {
+        o(!0), t?.(x);
+      },
+      [t]
+    );
+    return i ? null : /* @__PURE__ */ c.jsx(
+      "img",
+      {
+        ref: n,
+        src: e,
+        alt: r,
+        className: u(b(), a),
+        onError: m,
+        ...s
+      }
+    );
+  }
+), A = Object.assign(v, {
+  /**
+   * AvatarImage sub-component for displaying images with fallback behavior
+   */
+  Image: p
+});
+export {
+  A
+};

package/dist/badge-DqLCHm9q.js

@@ -0,0 +1,184 @@
+import { c as d, j as t } from "./index-DU1SCUkk.js";
+import { forwardRef as m } from "react";
+import { c as g } from "./cn-Ca4KprQ1.js";
+const f = d(
+  "inline-flex items-center justify-center font-medium transition-all duration-200 select-none text-xs px-2 py-0.5 gap-1 min-h-[1.25rem]",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border bg-transparent"
+      },
+      color: {
+        // Core colors
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: "",
+        // Semantic colors
+        success: "",
+        info: "",
+        warning: "",
+        danger: ""
+      },
+      shape: {
+        rounded: "rounded-full",
+        square: "rounded-md"
+      },
+      iconOnly: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Default variant color combinations - using light/soft backgrounds
+      {
+        variant: "default",
+        color: "primary",
+        className: "bg-coral/15 text-coral"
+      },
+      {
+        variant: "default",
+        color: "secondary",
+        className: "bg-sage/15 text-sage"
+      },
+      {
+        variant: "default",
+        color: "tertiary",
+        className: "bg-mist/15 text-mist"
+      },
+      {
+        variant: "default",
+        color: "ghost",
+        className: "bg-slate/15 text-slate"
+      },
+      {
+        variant: "default",
+        color: "neutral",
+        className: "bg-neutral text-foreground"
+      },
+      {
+        variant: "default",
+        color: "success",
+        className: "bg-success/15 text-success"
+      },
+      {
+        variant: "default",
+        color: "info",
+        className: "bg-info/15 text-info"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        className: "bg-warning/15 text-warning"
+      },
+      {
+        variant: "default",
+        color: "danger",
+        className: "bg-danger/15 text-danger"
+      },
+      // Outline variant color combinations
+      {
+        variant: "outline",
+        color: "primary",
+        className: "border-coral text-coral"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        className: "border-sage text-sage"
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        className: "border-mist text-mist"
+      },
+      {
+        variant: "outline",
+        color: "ghost",
+        className: "border-slate text-slate"
+      },
+      {
+        variant: "outline",
+        color: "neutral",
+        className: "border-neutral text-foreground"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        className: "border-success text-success"
+      },
+      {
+        variant: "outline",
+        color: "info",
+        className: "border-info text-info"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        className: "border-warning text-warning"
+      },
+      {
+        variant: "outline",
+        color: "danger",
+        className: "border-danger text-danger"
+      },
+      // Icon-only size adjustments
+      {
+        iconOnly: !0,
+        className: "px-1 py-1 w-5 h-5"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary",
+      shape: "square",
+      iconOnly: !1
+    }
+  }
+), x = m(
+  ({
+    variant: n = "default",
+    shape: o = "square",
+    color: l = "primary",
+    iconLeft: e,
+    iconRight: r,
+    className: c,
+    children: a,
+    ...i
+  }, u) => {
+    const s = !(a != null && a !== "") && !!(e || r);
+    return /* @__PURE__ */ t.jsx(
+      "span",
+      {
+        ref: u,
+        className: g(
+          f({
+            variant: n,
+            color: l,
+            shape: o,
+            iconOnly: s
+          }),
+          c
+        ),
+        ...i,
+        children: s ? (
+          // Icon-only mode: display only the icon
+          e || r
+        ) : (
+          // Normal mode: display icon(s) and text
+          /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+            e,
+            a,
+            r
+          ] })
+        )
+      }
+    );
+  }
+);
+x.displayName = "Badge";
+export {
+  x as B
+};

package/dist/bottom-bar-DOQ3gVwW.js

@@ -0,0 +1,73 @@
+import { c as i, j as s } from "./index-DU1SCUkk.js";
+import { forwardRef as m } from "react";
+const l = i(
+  "absolute bottom-0 left-0 w-full flex justify-between items-center bg-white border-t border-coral/10 z-40 safe-bottom px-6 py-1",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        ghost: "",
+        neutral: "",
+        tertiary: ""
+      },
+      size: {
+        sm: "h-12 text-sm",
+        md: "h-16 text-base",
+        lg: "h-20 text-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), c = i(
+  "flex flex-col items-center justify-center gap-1 px-2 py-1 rounded transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+  {
+    variants: {
+      active: {
+        true: "font-semibold text-coral",
+        false: "text-slate"
+      }
+    },
+    defaultVariants: {
+      active: !1
+    }
+  }
+), f = m(
+  ({ icon: e, label: t, active: a = !1, className: o, ...r }, n) => /* @__PURE__ */ s.jsxs(
+    "button",
+    {
+      ref: n,
+      type: "button",
+      "aria-current": a ? "page" : void 0,
+      className: c({ active: a, className: o }),
+      ...r,
+      children: [
+        e,
+        t && /* @__PURE__ */ s.jsx("span", { className: "text-xs mt-0.5", children: t })
+      ]
+    }
+  )
+), x = ({
+  children: e,
+  variant: t = "primary",
+  size: a = "md",
+  className: o,
+  ...r
+}) => /* @__PURE__ */ s.jsx(
+  "nav",
+  {
+    role: "navigation",
+    "aria-label": "Bottom navigation",
+    className: l({ variant: t, size: a, className: o }),
+    ...r,
+    children: e
+  }
+), p = Object.assign(x, {
+  Item: f
+});
+export {
+  p as B
+};