@dimasbaguspm/versaur 0.0.7 → 0.0.9

package/dist/drawer-Cn7sreJG.js

@@ -0,0 +1,221 @@
+import { c as i, j as n, a as l } from "./index-DOdDlCoL.js";
+import d, { createContext as p, useContext as h, useCallback as y, useEffect as j } from "react";
+const v = p(null);
+function c() {
+  const t = h(v);
+  if (!t)
+    throw new Error(
+      "Drawer components must be used within a DrawerRoot component"
+    );
+  return t;
+}
+const k = i(
+  "fixed inset-0 z-50 transition-opacity duration-300 bg-black/30 backdrop-blur-md",
+  {
+    variants: {
+      state: {
+        open: "opacity-100",
+        closed: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      state: "closed"
+    }
+  }
+), D = i("fixed z-50 shadow-xl flex flex-col", {
+  variants: {
+    position: {
+      left: "left-0 top-0 bottom-0 border-r",
+      right: "right-0 top-0 bottom-0 border-l"
+    },
+    size: {
+      sm: "w-80",
+      md: "w-96",
+      lg: "w-[28rem]",
+      xl: "w-[32rem]",
+      "3/4": "w-[75vw]",
+      full: "w-full"
+    },
+    variant: {
+      default: "bg-white border-gray-200",
+      glass: "bg-white/10 backdrop-blur-lg border-white/20"
+    },
+    transitionType: {
+      slide: "transition-transform duration-300 ease-in-out",
+      fade: "transition-opacity duration-300 ease-in-out"
+    }
+  },
+  defaultVariants: {
+    position: "right",
+    size: "md",
+    variant: "default",
+    transitionType: "slide"
+  }
+}), V = i("flex-shrink-0 px-6 py-4 border-b", {
+  variants: {
+    variant: {
+      default: "bg-white border-gray-200",
+      glass: "bg-transparent border-white/10"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), C = i("flex-1 overflow-y-auto px-6 py-4", {
+  variants: {
+    variant: {
+      default: "bg-white",
+      glass: "bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), R = i("flex-shrink-0 px-6 py-4 border-t", {
+  variants: {
+    variant: {
+      default: "bg-white border-gray-200",
+      glass: "bg-transparent border-white/10"
+    },
+    responsiveFlex: {
+      true: "flex flex-row gap-3 sm:justify-end [&>*]:sm:flex-grow-0 [&>*]:flex-grow",
+      false: "flex gap-2"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    responsiveFlex: !0
+  }
+}), E = d.forwardRef(({ className: t, ...e }, a) => {
+  const { isOpen: r, onClose: o } = c(), s = () => {
+    o();
+  };
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      ref: a,
+      onClick: s,
+      className: l(
+        k({
+          state: r ? "open" : "closed"
+        }),
+        t
+      ),
+      ...e
+    }
+  );
+}), N = d.forwardRef(
+  ({ children: t, className: e, ...a }, r) => {
+    const { variant: o } = c();
+    return /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        ref: r,
+        className: l(V({ variant: o }), e),
+        ...a,
+        children: t
+      }
+    );
+  }
+), F = d.forwardRef(
+  ({ children: t, className: e, ...a }, r) => {
+    const { variant: o } = c();
+    return /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        ref: r,
+        className: l(C({ variant: o }), e),
+        ...a,
+        children: t
+      }
+    );
+  }
+), z = d.forwardRef(
+  ({ children: t, className: e, responsiveFlex: a = !0, ...r }, o) => {
+    const { variant: s } = c();
+    return /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        ref: o,
+        className: l(
+          R({ variant: s, responsiveFlex: a }),
+          e
+        ),
+        ...r,
+        children: t
+      }
+    );
+  }
+), B = ({
+  children: t,
+  isOpen: e,
+  onClose: a,
+  position: r = "right",
+  size: o = "md",
+  variant: s = "default",
+  transitionType: f = "slide",
+  className: x,
+  ...b
+}) => {
+  const u = y(() => {
+    a(!1);
+  }, [a]), m = {
+    isOpen: e,
+    onClose: u,
+    position: r,
+    size: o,
+    variant: s,
+    transitionType: f
+  };
+  return j(() => {
+    const w = (g) => {
+      g.key === "Escape" && e && u();
+    };
+    return e && (document.addEventListener("keydown", w), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", w), document.body.style.overflow = "unset";
+    };
+  }, [e, u]), /* @__PURE__ */ n.jsx(v.Provider, { value: m, children: /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: l(
+        "fixed z-50 inset-0 pointer-events-none",
+        e && "pointer-events-auto"
+      ),
+      children: [
+        /* @__PURE__ */ n.jsx(E, {}),
+        /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            role: e ? "dialog" : void 0,
+            "aria-modal": e ? "true" : void 0,
+            className: l(
+              D({
+                position: r,
+                size: o,
+                variant: s,
+                transitionType: f
+              }),
+              f === "slide" ? [
+                !e && r === "left" && "-translate-x-full",
+                !e && r === "right" && "translate-x-full"
+              ] : [
+                "left-0 right-0 top-0 bottom-0",
+                e ? "opacity-100" : "opacity-0 pointer-events-none"
+              ],
+              x
+            ),
+            ...b,
+            children: e && t
+          }
+        )
+      ]
+    }
+  ) });
+}, _ = Object.assign(B, {
+  Header: N,
+  Body: F,
+  Footer: z
+});
+export {
+  _ as D
+};

package/dist/enforce-subpath-import.js

@@ -0,0 +1,106 @@
+/**
+ * ESLint plugin for Versaur: prefer sub-path imports for optimal tree-shaking
+ */
+
+module.exports = {
+  rules: {
+    'versaur-enforce-subpath-import': {
+      meta: {
+        type: 'suggestion',
+        docs: {
+          description: 'Prefer sub-path imports for @dimasbaguspm/versaur',
+        },
+        fixable: 'code',
+      },
+      create(context) {
+        return {
+          ImportDeclaration(node) {
+            if (node.source.value === '@dimasbaguspm/versaur') {
+              const importSpecifiers = node.specifiers
+                .filter(s => s.type === 'ImportSpecifier')
+                .map(s => s.imported.name)
+
+              // Map symbol to sub-path
+              // Clean, maintainable mapping from symbol to sub-path
+              const symbolToSubpath = {
+                // primitive
+                Button: 'primitive',
+                ButtonFloat: 'primitive',
+                ButtonIcon: 'primitive',
+                Avatar: 'primitive',
+                Badge: 'primitive',
+                Brand: 'primitive',
+                Calculator: 'primitive',
+                Calendar: 'primitive',
+                Icon: 'primitive',
+                Snackbar: 'primitive',
+                Table: 'primitive',
+                Text: 'primitive',
+                Tile: 'primitive',
+                Alert: 'primitive',
+                // overlays
+                Drawer: 'overlays',
+                Modal: 'overlays',
+                Menu: 'overlays',
+                // navigation
+                Tabs: 'navigation',
+                Breadcrumbs: 'navigation',
+                // layouts
+                AppBar: 'layouts',
+                BottomBar: 'layouts',
+                FormLayout: 'layouts',
+                PageLayout: 'layouts',
+                TopBar: 'layouts',
+                // feedbacks
+                LoadingIndicator: 'feedbacks',
+                ProgressIndicator: 'feedbacks',
+                Skeleton: 'feedbacks',
+                // forms
+                CalculatorInput: 'forms',
+                CheckboxInput: 'forms',
+                ChipInput: 'forms',
+                DateSinglePickerInput: 'forms',
+                RadioInput: 'forms',
+                SegmentMultipleInput: 'forms',
+                SegmentSingleInput: 'forms',
+                SelectInput: 'forms',
+                SwitchInput: 'forms',
+                TextInput: 'forms',
+                TextareaInput: 'forms',
+                TimePickerInput: 'forms',
+              }
+
+              // Find first known symbol
+              const known = importSpecifiers.find(name => symbolToSubpath[name])
+              const subpath = known ? symbolToSubpath[known] : null
+
+              let message =
+                'Use sub-path import for better tree-shaking (e.g., @dimasbaguspm/versaur/primitive)'
+              if (subpath) {
+                message = `Import { ${known} } from '@dimasbaguspm/versaur/${subpath}' instead.`
+              }
+
+              context.report({
+                node,
+                message,
+                suggest: subpath
+                  ? [
+                      {
+                        desc: `Change to import { ${known} } from '@dimasbaguspm/versaur/${subpath}'`,
+                        fix(fixer) {
+                          return fixer.replaceText(
+                            node.source,
+                            `'@dimasbaguspm/versaur/${subpath}'`
+                          )
+                        },
+                      },
+                    ]
+                  : [],
+              })
+            }
+          },
+        }
+      },
+    },
+  },
+}

package/dist/feedbacks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './loading-indicator';
+export * from './progress-indicator';
+export * from './skeleton';

package/dist/feedbacks/index.js

@@ -0,0 +1,6 @@
+import { L as r, P as s, S as e } from "../skeleton-DwqjRsF-.js";
+export {
+  r as LoadingIndicator,
+  s as ProgressIndicator,
+  e as Skeleton
+};

package/dist/feedbacks/progress-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressIndicator } from './progress-indicator';
+export * from './types';

package/dist/feedbacks/progress-indicator/progress-indicator.d.ts

@@ -0,0 +1,7 @@
+import { ProgressIndicatorProps } from './types';
+/**
+ * ProgressIndicator — Versaur UI
+ *
+ * A linear progress indicator for loading states
+ */
+export declare const ProgressIndicator: import('react').ForwardRefExoticComponent<ProgressIndicatorProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/feedbacks/progress-indicator/types.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Props for ProgressIndicator component (determinate only)
+ */
+export interface ProgressIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Current progress value (0-max). Required for determinate mode
+     */
+    value: number;
+    /**
+     * Maximum value (default: 100)
+     */
+    max?: number;
+    /**
+     * Color role (uses Versaur design system CSS variable)
+     * @default 'primary'
+     */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+}

package/dist/form-layout-COQbtyW5.js

@@ -0,0 +1,302 @@
+import { c as i, j as o, a as l } from "./index-DOdDlCoL.js";
+import * as m from "react";
+import { forwardRef as n } from "react";
+const u = i(
+  "w-full flex flex-wrap items-center px-4 py-3 gap-2 bg-white [&>[data-versaur-appbar-bottom]]:basis-full [&>[data-versaur-appbar-bottom]]:w-full",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+), x = i(
+  "flex flex-col justify-center min-w-0 flex-grow",
+  {
+    variants: {
+      placement: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end"
+      }
+    },
+    defaultVariants: {
+      placement: "start"
+    }
+  }
+), d = n(
+  ({ children: e, className: a }, t) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: t,
+      "data-versaur-appbar-bottom": !0,
+      className: l("w-full flex items-center min-h-[2.5rem] mt-2", a),
+      children: e
+    }
+  )
+), f = n(
+  ({ children: e, className: a }, t) => /* @__PURE__ */ o.jsx("div", { ref: t, className: l("flex items-center", a), children: e })
+), v = n(
+  ({ children: e, className: a }, t) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: t,
+      className: l("font-semibold text-lg truncate min-w-0", a),
+      children: e
+    }
+  )
+), g = n(
+  ({ children: e, className: a }, t) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: t,
+      className: l("text-xs text-slate-400 truncate min-w-0", a),
+      children: e
+    }
+  )
+), y = n(
+  ({ children: e, className: a }, t) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: t,
+      className: l("flex items-center justify-end gap-2", a),
+      children: e
+    }
+  )
+), B = n(
+  ({ children: e, className: a, placement: t }, s) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: s,
+      className: l(x({ placement: t }), a),
+      children: e
+    }
+  )
+), b = ({
+  children: e,
+  className: a,
+  variant: t = "primary"
+}) => /* @__PURE__ */ o.jsx(
+  "header",
+  {
+    className: l(u({ variant: t }), a),
+    role: "banner",
+    children: e
+  }
+), G = Object.assign(b, {
+  Leading: f,
+  Headline: v,
+  Subtitle: g,
+  Trailing: y,
+  Center: B,
+  Bottom: d
+}), j = i(
+  "sticky bottom-0 left-0 w-full flex justify-between items-center bg-white border-t border-border shadow-xs z-40 safe-bottom px-8 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"
+    }
+  }
+), N = i(
+  "flex flex-col items-center justify-center gap-1 px-2 py-1",
+  {
+    variants: {
+      active: {
+        true: "font-semibold text-coral",
+        false: "text-slate"
+      }
+    },
+    defaultVariants: {
+      active: !1
+    }
+  }
+), w = n(
+  ({ icon: e, label: a, active: t = !1, className: s, ...r }, c) => /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      ref: c,
+      "aria-current": t ? "page" : void 0,
+      className: N({ active: t, className: s }),
+      ...r,
+      children: [
+        e,
+        a && /* @__PURE__ */ o.jsx("span", { className: "text-xs mt-0.5", children: a })
+      ]
+    }
+  )
+), h = ({
+  children: e,
+  variant: a = "primary",
+  size: t = "md",
+  className: s,
+  ...r
+}) => /* @__PURE__ */ o.jsx(
+  "nav",
+  {
+    role: "navigation",
+    "aria-label": "Bottom navigation",
+    className: j({ variant: a, size: t, className: s }),
+    ...r,
+    children: e
+  }
+), J = Object.assign(h, {
+  Item: w
+}), T = i(
+  "w-full flex items-center px-6 py-4 mb-6 border-b border-border shadow-xs bg-white",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+), L = i("flex items-center gap-3 min-w-0 flex-1"), V = i("flex items-center gap-2 ml-auto"), A = i(
+  "px-2.5 py-1.5 rounded-md text-sm cursor-pointer transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-coral/10 text-coral",
+        false: "hover:text-coral text-ghost"
+      }
+    },
+    defaultVariants: {
+      active: !1
+    }
+  }
+), R = i("flex items-center gap-2 ml-4"), S = i("flex items-center gap-2 mr-4"), C = n(
+  function({ children: a, className: t, ...s }, r) {
+    return /* @__PURE__ */ o.jsx("nav", { ref: r, className: R({ className: t }), ...s, children: a });
+  }
+), I = n(
+  function({ children: a, className: t, ...s }, r) {
+    return /* @__PURE__ */ o.jsx("div", { ref: r, className: S({ className: t }), ...s, children: a });
+  }
+), F = n(
+  function({ children: a, className: t, ...s }, r) {
+    return /* @__PURE__ */ o.jsx("div", { ref: r, className: L({ className: t }), ...s, children: a });
+  }
+), k = n(
+  function({ children: a, className: t, ...s }, r) {
+    return /* @__PURE__ */ o.jsx("div", { ref: r, className: V({ className: t }), ...s, children: a });
+  }
+), O = n(
+  function({ children: a, className: t, active: s, ...r }, c) {
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: c,
+        className: A({ active: s, className: t }),
+        "aria-current": s ? "page" : void 0,
+        ...r,
+        children: a
+      }
+    );
+  }
+), z = n(
+  ({ children: e, className: a, ...t }, s) => /* @__PURE__ */ o.jsx("header", { ref: s, className: T({ className: a }), ...t, children: e })
+), K = Object.assign(z, {
+  Leading: F,
+  Trailing: k,
+  NavItem: O,
+  Nav: C,
+  Actions: I
+}), P = i("w-full bg-white mx-aut relative", {
+  variants: {
+    type: {
+      desktop: "max-w-7xl px-6 py-10",
+      tablet: "max-w-3xl px-4 py-8",
+      mobile: "w-full px-2 py-4"
+    }
+  },
+  defaultVariants: {
+    type: "desktop"
+  }
+}), Q = m.forwardRef(
+  function({ type: a = "desktop", className: t, children: s, ...r }, c) {
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: c,
+        className: l(P({ type: a }), t),
+        ...r,
+        children: s
+      }
+    );
+  }
+), H = i("grid w-full gap-4 grid-cols-12"), M = i("", {
+  variants: {
+    span: {
+      1: "col-span-1",
+      2: "col-span-2",
+      3: "col-span-3",
+      4: "col-span-4",
+      5: "col-span-5",
+      6: "col-span-6",
+      7: "col-span-7",
+      8: "col-span-8",
+      9: "col-span-9",
+      10: "col-span-10",
+      11: "col-span-11",
+      12: "col-span-12"
+    }
+  },
+  defaultVariants: {
+    span: "4"
+  }
+}), E = n(
+  function({ className: a, children: t, ...s }, r) {
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: r,
+        className: l(H(), a),
+        ...s,
+        children: t
+      }
+    );
+  }
+), $ = n(
+  function({ span: a = 4, className: t, children: s, ...r }, c) {
+    const p = Math.min(12, Math.max(1, a));
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: c,
+        className: l(
+          M({ span: `${p}` }),
+          t
+        ),
+        ...r,
+        children: s
+      }
+    );
+  }
+), U = Object.assign(E, {
+  Column: $
+});
+export {
+  G as A,
+  J as B,
+  U as F,
+  Q as P,
+  K as T
+};

package/dist/forms/calculator-input/calculator-input.atoms.d.ts

@@ -0,0 +1,11 @@
+import { CalculatorInputProps } from './types';
+/**
+ * CalculatorInputField is the input field for CalculatorInput
+ */
+export interface CalculatorInputFieldProps extends Omit<CalculatorInputProps, 'onChange'> {
+    onChange: (value: number | '') => void;
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    readOnly?: boolean;
+}
+export declare const CalculatorInputField: import('react').ForwardRefExoticComponent<CalculatorInputFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/forms/calculator-input/calculator-input.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CalculatorInputProps } from './types';
+/**
+ * CalculatorInput is an input field with a modal calculator picker
+ */
+export declare const CalculatorInput: FC<CalculatorInputProps & {
+    headerLabel?: string;
+}>;

package/dist/forms/calculator-input/index.d.ts

@@ -0,0 +1 @@
+export * from './calculator-input';