@saurabh05/nexo-ui 2.0.0 → 4.0.0

package/README.md

@@ -1,26 +1,104 @@
-# Nexo UI
-
-A modern React component library for building scalable, accessible interfaces.
-
-## Installation
-
-npm install @nexo-ui/react
-
-## Usage
-
-import { Button } from "@nexo-ui/react";
-
-## Documentation
-
-https://nexo-ui.netlify.app
-
-## Components
-
-- Button
-- Input
-- Modal
-- Typography
-
-## License
-
-MIT
+# Nexo UI
+
+A modern, flexible design system built with React, Vite, and Storybook.
+
+![NPM Version](https://img.shields.io/npm/v/@saurabh05/nexo-ui)
+![License](https://img.shields.io/npm/l/@saurabh05/nexo-ui)
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install @saurabh05/nexo-ui
+```
+
+## Setup
+
+Start by importing the global CSS file in your application's entry point (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import '@saurabh05/nexo-ui/dist/project-sb.css';
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants and states.
+
+```tsx
+import { Button } from '@saurabh05/nexo-ui';
+import { FaArrowRight } from 'react-icons/fa';
+
+function App() {
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <Button variant="primary">Primary Button</Button>
+      <Button variant="secondary" size="lg">
+        Secondary Large
+      </Button>
+      <Button variant="outline" icon={<FaArrowRight />} iconPosition="right">
+        Next Step
+      </Button>
+      <Button isLoading>Processing</Button>
+    </div>
+  );
+}
+```
+
+**Props:**
+
+- `variant`: `primary` | `secondary` | `outline` | `text` | `danger`
+- `size`: `sm` | `md` | `lg`
+- `isLoading`: `boolean`
+- `disabled`: `boolean`
+- `customColor`: `string`
+- `icon`: `ReactNode`
+- `iconPosition`: `left` | `right`
+
+### Loading
+
+A comprehensive loading component with spinners, dots, and overlays.
+
+```tsx
+import { Loading } from '@saurabh05/nexo-ui';
+
+function App() {
+  return (
+    <>
+      {/* Default Spinner */}
+      <Loading />
+
+      {/* Dots Variant */}
+      <Loading variant="dots" color="#ff5722" />
+
+      {/* Full Screen Overlay with Message */}
+      <Loading fullScreen blur message="Loading application..." />
+    </>
+  );
+}
+```
+
+**Props:**
+
+- `variant`: `spinner` | `dots` | `custom`
+- `size`: `sm` | `md` | `lg`
+- `color`: `string`
+- `message`: `string`
+- `src`: `string` (for custom image/gif)
+- `overlay`: `boolean`
+- `fullScreen`: `boolean`
+- `blur`: `boolean`
+
+## Development
+
+To run the Storybook environment locally:
+
+1.  Clone the repository.
+2.  Install dependencies: `npm install`
+3.  Start Storybook: `npm run storybook`
+
+## License
+
+MIT

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/feedback/Loading/Loading.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+export type LoadingVariant = 'spinner' | 'dots' | 'custom';
+export type LoadingSize = 'sm' | 'md' | 'lg';
+export interface LoadingProps {
+    /**
+     * The visual style of the loader
+     * @default 'spinner'
+     */
+    variant?: LoadingVariant;
+    /**
+     * The size of the loader
+     * @default 'md'
+     */
+    size?: LoadingSize;
+    /**
+     * Custom color for the spinner or dots
+     * @default 'inherit'
+     */
+    color?: string;
+    /**
+     * Optional loading message to display below/beside the loader
+     */
+    message?: string;
+    /**
+     * URL for a custom image/gif. Required if variant is 'custom'
+     */
+    src?: string;
+    /**
+     * If true, the loader covers the parent container (parent must be relative)
+     * @default false
+     */
+    overlay?: boolean;
+    /**
+     * If true, the loader covers the entire viewport
+     * @default false
+     */
+    fullScreen?: boolean;
+    /**
+     * Adds a blur effect to the background when using overlay or fullScreen
+     * @default false
+     */
+    blur?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+export declare const Loading: React.FC<LoadingProps>;

package/dist/components/feedback/Loading/Loading.stories.d.ts

@@ -0,0 +1,41 @@
+import { StoryObj } from '@storybook/react';
+import { LoadingProps } from './Loading';
+declare const meta: {
+    title: string;
+    component: import('react').FC<LoadingProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "radio";
+            options: string[];
+        };
+        color: {
+            control: "color";
+        };
+        overlay: {
+            control: "boolean";
+        };
+        fullScreen: {
+            control: "boolean";
+        };
+        blur: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Spinner: Story;
+export declare const Dots: Story;
+export declare const WithMessage: Story;
+export declare const CustomColor: Story;
+export declare const CustomImage: Story;
+export declare const Overlay: Story;
+export declare const FullScreen: Story;

package/dist/components/feedback/Loading/index.d.ts

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

package/dist/components/form-component/Button/Button.d.ts

@@ -0,0 +1,42 @@
+import { default as React, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The visual style of the button
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * If true, shows a loading spinner and disables the button
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Icon to display before the label
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon to display after the label
+     */
+    endIcon?: ReactNode;
+    /**
+     * Icon to display (shorthand for startIcon/endIcon)
+     */
+    icon?: ReactNode;
+    /**
+     * Position of the icon relative to the text
+     * @default 'left'
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Custom background color (overrides variant styles)
+     */
+    customColor?: string;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/form-component/Button/Button.stories.d.ts

@@ -0,0 +1,45 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Button').ButtonProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "radio";
+            options: string[];
+        };
+        isLoading: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        customColor: {
+            control: "color";
+        };
+        iconPosition: {
+            control: "radio";
+            options: string[];
+        };
+        onClick: {
+            action: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const WithLeftIcon: Story;
+export declare const WithRightIcon: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyDanger: Story;
+export declare const IconOnlyLarge: Story;
+export declare const Loading: Story;
+export declare const CustomColor: Story;

package/dist/components/form-component/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/form-component/Button/index.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/form-component/Button';
+export * from './components/feedback/Loading';

package/dist/index.es.js

@@ -0,0 +1,353 @@
+import B from "react";
+function ae(s) {
+  return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
+}
+var N = { exports: {} }, k = {};
+var L;
+function le() {
+  if (L) return k;
+  L = 1;
+  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), b = /* @__PURE__ */ Symbol.for("react.fragment");
+  function c(i, a, n) {
+    var t = null;
+    if (n !== void 0 && (t = "" + n), a.key !== void 0 && (t = "" + a.key), "key" in a) {
+      n = {};
+      for (var _ in a)
+        _ !== "key" && (n[_] = a[_]);
+    } else n = a;
+    return a = n.ref, {
+      $$typeof: s,
+      type: i,
+      key: t,
+      ref: a !== void 0 ? a : null,
+      props: n
+    };
+  }
+  return k.Fragment = b, k.jsx = c, k.jsxs = c, k;
+}
+var S = {};
+var G;
+function ue() {
+  return G || (G = 1, process.env.NODE_ENV !== "production" && (function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === te ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case j:
+          return "Fragment";
+        case P:
+          return "Profiler";
+        case w:
+          return "StrictMode";
+        case K:
+          return "Suspense";
+        case ee:
+          return "SuspenseList";
+        case re:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case x:
+            return "Portal";
+          case Z:
+            return e.displayName || "Context";
+          case H:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case Q:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ne:
+            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
+          case C:
+            r = e._payload, e = e._init;
+            try {
+              return s(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function b(e) {
+      return "" + e;
+    }
+    function c(e) {
+      try {
+        b(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var o = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          l
+        ), b(e);
+      }
+    }
+    function i(e) {
+      if (e === j) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === C)
+        return "<...>";
+      try {
+        var r = s(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = $.A;
+      return e === null ? null : e.getOwner();
+    }
+    function n() {
+      return Error("react-stack-top-frame");
+    }
+    function t(e) {
+      if (M.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function _(e, r) {
+      function o() {
+        W || (W = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
+        configurable: !0
+      });
+    }
+    function E() {
+      var e = s(this.type);
+      return q[e] || (q[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function R(e, r, o, l, A, F) {
+      var u = o.ref;
+      return e = {
+        $$typeof: p,
+        type: e,
+        key: r,
+        props: o,
+        _owner: l
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: E
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: A
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: F
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function y(e, r, o, l, A, F) {
+      var u = r.children;
+      if (u !== void 0)
+        if (l)
+          if (se(u)) {
+            for (l = 0; l < u.length; l++)
+              v(u[l]);
+            Object.freeze && Object.freeze(u);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else v(u);
+      if (M.call(r, "key")) {
+        u = s(e);
+        var h = Object.keys(r).filter(function(oe) {
+          return oe !== "key";
+        });
+        l = 0 < h.length ? "{key: someKey, " + h.join(": ..., ") + ": ...}" : "{key: someKey}", J[u + l] || (h = 0 < h.length ? "{" + h.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          l,
+          u,
+          h,
+          u
+        ), J[u + l] = !0);
+      }
+      if (u = null, o !== void 0 && (c(o), u = "" + o), t(r) && (c(r.key), u = "" + r.key), "key" in r) {
+        o = {};
+        for (var D in r)
+          D !== "key" && (o[D] = r[D]);
+      } else o = r;
+      return u && _(
+        o,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), R(
+        e,
+        u,
+        o,
+        a(),
+        A,
+        F
+      );
+    }
+    function v(e) {
+      T(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === C && (e._payload.status === "fulfilled" ? T(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function T(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === p;
+    }
+    var m = B, p = /* @__PURE__ */ Symbol.for("react.transitional.element"), x = /* @__PURE__ */ Symbol.for("react.portal"), j = /* @__PURE__ */ Symbol.for("react.fragment"), w = /* @__PURE__ */ Symbol.for("react.strict_mode"), P = /* @__PURE__ */ Symbol.for("react.profiler"), H = /* @__PURE__ */ Symbol.for("react.consumer"), Z = /* @__PURE__ */ Symbol.for("react.context"), Q = /* @__PURE__ */ Symbol.for("react.forward_ref"), K = /* @__PURE__ */ Symbol.for("react.suspense"), ee = /* @__PURE__ */ Symbol.for("react.suspense_list"), ne = /* @__PURE__ */ Symbol.for("react.memo"), C = /* @__PURE__ */ Symbol.for("react.lazy"), re = /* @__PURE__ */ Symbol.for("react.activity"), te = /* @__PURE__ */ Symbol.for("react.client.reference"), $ = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, se = Array.isArray, Y = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    m = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var W, q = {}, U = m.react_stack_bottom_frame.bind(
+      m,
+      n
+    )(), V = Y(i(n)), J = {};
+    S.Fragment = j, S.jsx = function(e, r, o) {
+      var l = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        r,
+        o,
+        !1,
+        l ? Error("react-stack-top-frame") : U,
+        l ? Y(i(e)) : V
+      );
+    }, S.jsxs = function(e, r, o) {
+      var l = 1e4 > $.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        r,
+        o,
+        !0,
+        l ? Error("react-stack-top-frame") : U,
+        l ? Y(i(e)) : V
+      );
+    };
+  })()), S;
+}
+var X;
+function ie() {
+  return X || (X = 1, process.env.NODE_ENV === "production" ? N.exports = le() : N.exports = ue()), N.exports;
+}
+var f = ie(), I = { exports: {} };
+var z;
+function _e() {
+  return z || (z = 1, (function(s) {
+    (function() {
+      var b = {}.hasOwnProperty;
+      function c() {
+        for (var n = "", t = 0; t < arguments.length; t++) {
+          var _ = arguments[t];
+          _ && (n = a(n, i(_)));
+        }
+        return n;
+      }
+      function i(n) {
+        if (typeof n == "string" || typeof n == "number")
+          return n;
+        if (typeof n != "object")
+          return "";
+        if (Array.isArray(n))
+          return c.apply(null, n);
+        if (n.toString !== Object.prototype.toString && !n.toString.toString().includes("[native code]"))
+          return n.toString();
+        var t = "";
+        for (var _ in n)
+          b.call(n, _) && n[_] && (t = a(t, _));
+        return t;
+      }
+      function a(n, t) {
+        return t ? n ? n + " " + t : n + t : n;
+      }
+      s.exports ? (c.default = c, s.exports = c) : window.classNames = c;
+    })();
+  })(I)), I.exports;
+}
+var ce = _e();
+const O = /* @__PURE__ */ ae(ce), be = "_spin_1n4i9_1", g = {
+  "sb-button-component": "_sb-button-component_1n4i9_1",
+  "sb-button": "_sb-button_1n4i9_1",
+  "sb-button--loading": "_sb-button--loading_1n4i9_16",
+  "sb-button--sm": "_sb-button--sm_1n4i9_20",
+  "sb-button--md": "_sb-button--md_1n4i9_25",
+  "sb-button--lg": "_sb-button--lg_1n4i9_30",
+  "sb-button--icon-only": "_sb-button--icon-only_1n4i9_35",
+  "sb-button--primary": "_sb-button--primary_1n4i9_47",
+  "sb-button--secondary": "_sb-button--secondary_1n4i9_56",
+  "sb-button--outline": "_sb-button--outline_1n4i9_65",
+  "sb-button--text": "_sb-button--text_1n4i9_73",
+  "sb-button--danger": "_sb-button--danger_1n4i9_81",
+  "sb-button__spinner": "_sb-button__spinner_1n4i9_89",
+  spin: be
+}, pe = ({ children: s, variant: b = "primary", size: c = "md", isLoading: i = !1, startIcon: a, endIcon: n, icon: t, iconPosition: _ = "left", customColor: E, className: R, disabled: y, style: v, ...T }) => {
+  const m = B.Children.count(s) > 0, p = !m && !!(t || a || n), x = a || (t && _ === "left" ? t : null), j = n || (t && _ === "right" ? t : null), w = O(g["sb-button-component"], g["sb-button"], g[`sb-button--${b}`], g[`sb-button--${c}`], {
+    [g["sb-button--loading"]]: i,
+    [g["sb-button--icon-only"]]: p
+  }, R), P = E ? { ...v, backgroundColor: E, borderColor: E, color: "#fff" } : v;
+  return f.jsxs("button", { className: w, disabled: y || i, style: P, ...T, children: [i && f.jsx("span", { className: g["sb-button__spinner"], "aria-hidden": "true" }), !i && !p && x && f.jsx("span", { className: g.icon, children: x }), m && f.jsx("span", { children: s }), !i && !p && j && f.jsx("span", { className: g.icon, children: j }), !i && p && (t || a || n)] });
+}, de = "_spin_1433u_1", fe = "_bounce_1433u_1", d = {
+  "sb-loading-component": "_sb-loading-component_1433u_1",
+  "sb-loading": "_sb-loading_1433u_1",
+  "sb-loading--overlay": "_sb-loading--overlay_1433u_10",
+  "sb-loading--fullscreen": "_sb-loading--fullscreen_1433u_19",
+  "sb-loading--blur": "_sb-loading--blur_1433u_28",
+  "sb-loading__spinner": "_sb-loading__spinner_1433u_31",
+  spin: de,
+  "sb-loading__spinner--sm": "_sb-loading__spinner--sm_1433u_39",
+  "sb-loading__spinner--md": "_sb-loading__spinner--md_1433u_44",
+  "sb-loading__spinner--lg": "_sb-loading__spinner--lg_1433u_49",
+  "sb-loading__dots": "_sb-loading__dots_1433u_54",
+  bounce: fe,
+  "sb-loading__dots--sm": "_sb-loading__dots--sm_1433u_70",
+  "sb-loading__dots--md": "_sb-loading__dots--md_1433u_74",
+  "sb-loading__dots--lg": "_sb-loading__dots--lg_1433u_78",
+  "sb-loading__custom--sm": "_sb-loading__custom--sm_1433u_82",
+  "sb-loading__custom--md": "_sb-loading__custom--md_1433u_85",
+  "sb-loading__custom--lg": "_sb-loading__custom--lg_1433u_88",
+  "sb-loading__message": "_sb-loading__message_1433u_91",
+  "sb-loading__message--sm": "_sb-loading__message--sm_1433u_95",
+  "sb-loading__message--lg": "_sb-loading__message--lg_1433u_98"
+}, ge = ({ variant: s = "spinner", size: b = "md", color: c, message: i, src: a, overlay: n = !1, fullScreen: t = !1, blur: _ = !1, className: E, style: R }) => {
+  const y = O(d["sb-loading-component"], d["sb-loading"], {
+    [d["sb-loading--overlay"]]: n && !t,
+    [d["sb-loading--fullscreen"]]: t,
+    [d["sb-loading--blur"]]: _ && (n || t)
+  }, E), v = O(d["sb-loading__spinner"], d[`sb-loading__spinner--${b}`]), T = O(d["sb-loading__dots"], d[`sb-loading__dots--${b}`]), m = O(d["sb-loading__custom"], d[`sb-loading__custom--${b}`]), p = O(d["sb-loading__message"], d[`sb-loading__message--${b}`]), x = c ? { ...R, color: c } : R;
+  return f.jsxs("div", { className: y, style: x, role: "status", "aria-busy": "true", children: [s === "spinner" && f.jsx("div", { className: v, "aria-hidden": "true" }), s === "dots" && f.jsxs("div", { className: T, children: [f.jsx("span", {}), f.jsx("span", {}), f.jsx("span", {})] }), s === "custom" && a && f.jsx("img", { src: a, alt: "Loading...", className: m }), i && f.jsx("span", { className: p, children: i })] });
+};
+export {
+  pe as Button,
+  ge as Loading
+};