@plyaz/ui 0.1.4

package/README.md

@@ -0,0 +1,77 @@
+# ui
+
+A reusable, accessible, and themeable component library powering the Plyaz Web App interface. Built with performance and consistency in mind, @plyaz/ui delivers modular React components aligned with the Plyaz design system — enabling seamless development across fan-facing features, quests, NFTs, and loyalty flows in the Web3 ecosystem.
+
+## Project Structure
+
+```text
+src/              # source code
+src/components     # component source code
+tests/            # Unit tests
+.storybook/       # Storybook configuration
+dist/             # Build output
+package.json
+tsconfig.json
+vite.config.ts
+tailwind.config.js
+```
+
+## Installation
+
+```bash
+npm install @plyaz/ui
+```
+
+or
+
+```bash
+yarn add @plyaz/ui
+```
+
+or
+
+```bash
+pnpm add @plyaz/ui
+```
+
+## Storybook
+
+```bash
+pnpm run storybook
+```
+
+## Plop Utility for Auto-Generating Storybook Stories
+
+### Requirement
+
+Manually creating Storybook story files for each component can be repetitive. So we needed a way to automatically generate story files with consistent structure and boilerplate.
+
+### Solution
+
+We integrated the **Plop** library, a micro-generator framework that automates file creation using custom templates (in our case, a story template). With Plop, we can generate story files for components quickly and consistently.
+
+### How It Works
+
+Plop takes three inputs and generates a story file based on a defined template:
+
+- **Path to the component:** The target path where the file should be generated (relative to src/)
+- **Component directory name (PascalCase):** The component directory name (e.g., Button)
+- **Component name (PascalCase):** The component name in PascalCase format based on these inputs, Plop processes a predefined template plop-templates/Component.stories.tsx.hbs file and generates the corresponding story file in the specified location.
+
+**Plop** then executes a custom template file and generates the new story file at the target path with the provided name.
+
+### Folder Structure
+
+```
+plopfile.js
+/plop-templates
+└── Component.stories.tsx.hbs # template for story file
+```
+
+### Usage
+
+To generate a new story file:
+
+```bash
+pnpm run generate
+```

package/dist/types/App.d.ts

@@ -0,0 +1,5 @@
+export type AppProps = {
+    children?: React.ReactNode;
+};
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/types/components/Box/Box.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ElementType } from '../../types/type';
+interface BoxProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    element?: ElementType;
+    className?: string;
+}
+export declare const Box: ({ children, element, className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Box/Box.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Box } from './Box';
+type Story = StoryObj<typeof Box>;
+declare const meta: Meta<typeof Box>;
+export default meta;
+export declare const Default: Story;
+export declare const Section: Story;
+export declare const Article: Story;
+export declare const Aside: Story;
+export declare const Nav: Story;
+export declare const Header: Story;
+export declare const Footer: Story;

package/dist/types/components/Container/Container.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ElementType } from '../../types/type';
+interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    children?: React.ReactNode;
+    element?: ElementType;
+}
+export declare const Container: ({ className, children, element, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Container/Container.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './Container';
+declare const meta: Meta<typeof Container>;
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const Default: Story;

package/dist/types/components/Flex/Flex.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { ALIGN_MAPPER, JUASTIFY_MAPPER } from '../Grid/Grid';
+import { ElementType } from '../../types/type';
+declare const DIRECTION_MAPPER: {
+    row: string;
+    col: string;
+    "row-reverse": string;
+    "col-reverse": string;
+};
+declare const WRAP_MAPPER: {
+    wrap: string;
+    nowrap: string;
+    "wrap-reverse": string;
+};
+interface FlexProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    gap?: string;
+    direction?: keyof typeof DIRECTION_MAPPER;
+    justify?: keyof typeof JUASTIFY_MAPPER;
+    align?: keyof typeof ALIGN_MAPPER;
+    wrap?: keyof typeof WRAP_MAPPER;
+    className?: string;
+    element?: ElementType;
+}
+export declare const Flex: ({ children, gap, direction, justify, align, wrap, className, element, ...props }: FlexProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Flex/Flex.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Flex } from './Flex';
+declare const meta: Meta<typeof Flex>;
+export default meta;
+type Story = StoryObj<typeof Flex>;
+export declare const Default: Story;
+export declare const ColumnCentered: Story;

package/dist/types/components/Grid/Grid.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { ElementType } from '../../types/type';
+export declare const JUASTIFY_MAPPER: {
+    start: string;
+    end: string;
+    center: string;
+    between: string;
+    around: string;
+    evenly: string;
+    stretch: string;
+};
+export declare const ALIGN_MAPPER: {
+    start: string;
+    end: string;
+    center: string;
+    baseline: string;
+    stretch: string;
+};
+interface GridProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    className?: string;
+    cols?: string;
+    rows?: string;
+    gap?: string;
+    justify?: keyof typeof JUASTIFY_MAPPER;
+    align?: keyof typeof ALIGN_MAPPER;
+    element?: ElementType;
+}
+export declare const Grid: ({ children, className, cols, rows, gap, justify, align, element, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Grid/Grid.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Grid } from './Grid';
+declare const meta: Meta<typeof Grid>;
+export default meta;
+type Story = StoryObj<typeof Grid>;
+export declare const Default: Story;
+export declare const Justified: Story;

package/dist/types/components/Heading/Heading.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+declare const SIZE_MAP: {
+    readonly xs: "xs";
+    readonly sm: "sm";
+    readonly base: "base";
+    readonly lg: "lg";
+    readonly xl: "xl";
+    readonly "2xl": "2xl";
+    readonly "3xl": "3xl";
+    readonly "4xl": "4xl";
+};
+interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    className?: string;
+    element: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    size: keyof typeof SIZE_MAP;
+}
+export declare const Heading: ({ children, element, className, size, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Heading/Heading.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Heading } from './Heading';
+declare const meta: Meta<typeof Heading>;
+export default meta;
+type Story = StoryObj<typeof Heading>;
+export declare const H1: Story;
+export declare const H2: Story;
+export declare const H3: Story;
+export declare const H4: Story;
+export declare const H5: Story;
+export declare const H6: Story;

package/dist/types/components/Link/Link.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
+    children: React.ReactNode;
+    className?: string;
+    href?: string;
+}
+export declare const Link: ({ children, className, href, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Link/Link.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Link } from './Link';
+declare const meta: Meta<typeof Link>;
+export default meta;
+type Story = StoryObj<typeof Link>;
+export declare const Default: Story;
+export declare const CustomClass: Story;

package/dist/types/components/Paragraph/Paragraph.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+declare const SIZE_MAP: {
+    readonly xs: "xs";
+    readonly sm: "sm";
+    readonly base: "base";
+    readonly lg: "lg";
+};
+interface ParagraphProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    className?: string;
+    size: keyof typeof SIZE_MAP;
+}
+export declare const Paragraph: ({ children, className, size, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Paragraph/Paragraph.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Paragraph } from './Paragraph';
+declare const meta: Meta<typeof Paragraph>;
+export default meta;
+type Story = StoryObj<typeof Paragraph>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const ExtraSmall: Story;
+export declare const Large: Story;

package/dist/types/components/Section/Section.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Section: ({ className, children, ...props }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Section/Section.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Section } from './Section';
+declare const meta: Meta<typeof Section>;
+export default meta;
+type Story = StoryObj<typeof Section>;
+export declare const Default: Story;

package/dist/types/components/Stack/Stack.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ElementType } from '../../types/type';
+interface StackProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    className?: string;
+    direction?: "vertical" | "horizontal";
+    spacing?: string;
+    element?: ElementType;
+}
+export declare const Stack: ({ children, direction, spacing, element, className, ...props }: StackProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Stack/Stack.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Stack } from './Stack';
+declare const meta: Meta<typeof Stack>;
+export default meta;
+type Story = StoryObj<typeof Stack>;
+export declare const Default: Story;
+export declare const Vertical: Story;

package/dist/types/components/Text/Text.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+declare const VARIANT_MAPPER: {
+    body: string;
+    heading: string;
+    caption: string;
+};
+declare const SIZES_MAPPER: {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    '7xl': string;
+    '8xl': string;
+    '9xl': string;
+};
+declare const TEXT_WEIGHT_MAPPER: {
+    normal: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+    light: string;
+};
+type TextElement = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    children: React.ReactNode;
+    element: TextElement;
+    weight: keyof typeof TEXT_WEIGHT_MAPPER;
+    variant: keyof typeof VARIANT_MAPPER;
+    size?: keyof typeof SIZES_MAPPER;
+}
+export declare const Text: ({ className, children, element, weight, variant, size, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/Text/Text.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Text } from './Text';
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const Default: Story;
+export declare const Heading: Story;
+export declare const Caption: Story;

package/dist/types/docs/DocTemplate.d.ts

@@ -0,0 +1 @@
+export declare const autoDocsTemplate: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

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

package/dist/types/types/type.d.ts

@@ -0,0 +1 @@
+export type ElementType = "div" | "section" | "article" | "aside" | "nav" | "header" | "footer" | "main" | "span";

package/dist/types/ui.es.d.ts

@@ -0,0 +1,2 @@
+export * from './index'
+export {}

package/dist/ui.cjs.js

@@ -0,0 +1,22 @@
+"use strict";const ee=require("react");var T={exports:{}},R={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var $;function re(){if($)return R;$=1;var l=Symbol.for("react.transitional.element"),_=Symbol.for("react.fragment");function f(d,a,s){var m=null;if(s!==void 0&&(m=""+s),a.key!==void 0&&(m=""+a.key),"key"in a){s={};for(var E in a)E!=="key"&&(s[E]=a[E])}else s=a;return a=s.ref,{$$typeof:l,type:d,key:m,ref:a!==void 0?a:null,props:s}}return R.Fragment=_,R.jsx=f,R.jsxs=f,R}var b={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var F;function te(){return F||(F=1,process.env.NODE_ENV!=="production"&&function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case p:return"Fragment";case q:return"Profiler";case U:return"StrictMode";case G:return"Suspense";case X:return"SuspenseList";case H: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 W:return"Portal";case z:return(e.displayName||"Context")+".Provider";case J:return(e._context.displayName||"Context")+".Consumer";case V:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case B:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case h:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function _(e){return""+e}function f(e){try{_(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),_(e)}}function d(e){if(e===p)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===h)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=k.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function m(e){if(x.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function E(e,r){function t(){y||(y=!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))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function L(){var e=l(this.type);return N[e]||(N[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 M(e,r,t,n,c,u,A,S){return t=u.ref,e={$$typeof:g,type:e,key:r,props:u,_owner:c},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:L}):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:S}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,r,t,n,c,u,A,S){var o=r.children;if(o!==void 0)if(n)if(Q(o)){for(n=0;n<o.length;n++)j(o[n]);Object.freeze&&Object.freeze(o)}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 j(o);if(x.call(r,"key")){o=l(e);var i=Object.keys(r).filter(function(K){return K!=="key"});n=0<i.length?"{key: someKey, "+i.join(": ..., ")+": ...}":"{key: someKey}",I[o+n]||(i=0<i.length?"{"+i.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} />`,n,o,i,o),I[o+n]=!0)}if(o=null,t!==void 0&&(f(t),o=""+t),m(r)&&(f(r.key),o=""+r.key),"key"in r){t={};for(var P in r)P!=="key"&&(t[P]=r[P])}else t=r;return o&&E(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),M(e,o,u,c,a(),t,A,S)}function j(e){typeof e=="object"&&e!==null&&e.$$typeof===g&&e._store&&(e._store.validated=1)}var v=ee,g=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),U=Symbol.for("react.strict_mode"),q=Symbol.for("react.profiler"),J=Symbol.for("react.consumer"),z=Symbol.for("react.context"),V=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),X=Symbol.for("react.suspense_list"),B=Symbol.for("react.memo"),h=Symbol.for("react.lazy"),H=Symbol.for("react.activity"),Z=Symbol.for("react.client.reference"),k=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,x=Object.prototype.hasOwnProperty,Q=Array.isArray,O=console.createTask?console.createTask:function(){return null};v={"react-stack-bottom-frame":function(e){return e()}};var y,N={},C=v["react-stack-bottom-frame"].bind(v,s)(),Y=O(d(s)),I={};b.Fragment=p,b.jsx=function(e,r,t,n,c){var u=1e4>k.recentlyCreatedOwnerStacks++;return w(e,r,t,!1,n,c,u?Error("react-stack-top-frame"):C,u?O(d(e)):Y)},b.jsxs=function(e,r,t,n,c){var u=1e4>k.recentlyCreatedOwnerStacks++;return w(e,r,t,!0,n,c,u?Error("react-stack-top-frame"):C,u?O(d(e)):Y)}}()),b}var D;function ne(){return D||(D=1,process.env.NODE_ENV==="production"?T.exports=re():T.exports=te()),T.exports}ne();

package/dist/ui.css

@@ -0,0 +1 @@
+#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}

package/dist/ui.es.js

@@ -0,0 +1,281 @@
+import ee from "react";
+var T = { exports: {} }, R = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var $;
+function re() {
+  if ($) return R;
+  $ = 1;
+  var l = Symbol.for("react.transitional.element"), _ = Symbol.for("react.fragment");
+  function f(d, a, s) {
+    var m = null;
+    if (s !== void 0 && (m = "" + s), a.key !== void 0 && (m = "" + a.key), "key" in a) {
+      s = {};
+      for (var E in a)
+        E !== "key" && (s[E] = a[E]);
+    } else s = a;
+    return a = s.ref, {
+      $$typeof: l,
+      type: d,
+      key: m,
+      ref: a !== void 0 ? a : null,
+      props: s
+    };
+  }
+  return R.Fragment = _, R.jsx = f, R.jsxs = f, R;
+}
+var b = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var F;
+function te() {
+  return F || (F = 1, process.env.NODE_ENV !== "production" && function() {
+    function l(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case p:
+          return "Fragment";
+        case q:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case H:
+          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 W:
+            return "Portal";
+          case z:
+            return (e.displayName || "Context") + ".Provider";
+          case J:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case V:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case B:
+            return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
+          case h:
+            r = e._payload, e = e._init;
+            try {
+              return l(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function _(e) {
+      return "" + e;
+    }
+    function f(e) {
+      try {
+        _(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          n
+        ), _(e);
+      }
+    }
+    function d(e) {
+      if (e === p) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === h)
+        return "<...>";
+      try {
+        var r = l(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = k.A;
+      return e === null ? null : e.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (x.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function E(e, r) {
+      function t() {
+        y || (y = !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
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function L() {
+      var e = l(this.type);
+      return N[e] || (N[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 M(e, r, t, n, c, u, A, S) {
+      return t = u.ref, e = {
+        $$typeof: g,
+        type: e,
+        key: r,
+        props: u,
+        _owner: c
+      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: L
+      }) : 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: S
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function w(e, r, t, n, c, u, A, S) {
+      var o = r.children;
+      if (o !== void 0)
+        if (n)
+          if (Q(o)) {
+            for (n = 0; n < o.length; n++)
+              j(o[n]);
+            Object.freeze && Object.freeze(o);
+          } 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 j(o);
+      if (x.call(r, "key")) {
+        o = l(e);
+        var i = Object.keys(r).filter(function(K) {
+          return K !== "key";
+        });
+        n = 0 < i.length ? "{key: someKey, " + i.join(": ..., ") + ": ...}" : "{key: someKey}", I[o + n] || (i = 0 < i.length ? "{" + i.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} />`,
+          n,
+          o,
+          i,
+          o
+        ), I[o + n] = !0);
+      }
+      if (o = null, t !== void 0 && (f(t), o = "" + t), m(r) && (f(r.key), o = "" + r.key), "key" in r) {
+        t = {};
+        for (var P in r)
+          P !== "key" && (t[P] = r[P]);
+      } else t = r;
+      return o && E(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), M(
+        e,
+        o,
+        u,
+        c,
+        a(),
+        t,
+        A,
+        S
+      );
+    }
+    function j(e) {
+      typeof e == "object" && e !== null && e.$$typeof === g && e._store && (e._store.validated = 1);
+    }
+    var v = ee, g = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), p = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), q = Symbol.for("react.profiler"), J = Symbol.for("react.consumer"), z = Symbol.for("react.context"), V = Symbol.for("react.forward_ref"), G = Symbol.for("react.suspense"), X = Symbol.for("react.suspense_list"), B = Symbol.for("react.memo"), h = Symbol.for("react.lazy"), H = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), k = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, x = Object.prototype.hasOwnProperty, Q = Array.isArray, O = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    v = {
+      "react-stack-bottom-frame": function(e) {
+        return e();
+      }
+    };
+    var y, N = {}, C = v["react-stack-bottom-frame"].bind(
+      v,
+      s
+    )(), Y = O(d(s)), I = {};
+    b.Fragment = p, b.jsx = function(e, r, t, n, c) {
+      var u = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return w(
+        e,
+        r,
+        t,
+        !1,
+        n,
+        c,
+        u ? Error("react-stack-top-frame") : C,
+        u ? O(d(e)) : Y
+      );
+    }, b.jsxs = function(e, r, t, n, c) {
+      var u = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return w(
+        e,
+        r,
+        t,
+        !0,
+        n,
+        c,
+        u ? Error("react-stack-top-frame") : C,
+        u ? O(d(e)) : Y
+      );
+    };
+  }()), b;
+}
+var D;
+function ne() {
+  return D || (D = 1, process.env.NODE_ENV === "production" ? T.exports = re() : T.exports = te()), T.exports;
+}
+ne();

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@plyaz/ui",
+  "version": "0.1.4",
+  "description": "A reusable, accessible, and themeable component library powering the Plyaz Web App interface. Built with performance and consistency in mind, @plyaz/ui delivers modular React components aligned with the Plyaz design system — enabling seamless development across fan-facing features, quests, NFTs, and loyalty flows in the Web3 ecosystem.",
+  "main": "index.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/ui.es.js",
+      "require": "./dist/ui.cjs.js"
+    }
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.8",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "clsx": "^2.1.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.8"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-controls": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/addon-viewport": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/coverage-v8": "3.1.3",
+    "autoprefixer": "^10.4.21",
+    "chromatic": "^11.28.2",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^16.0.0",
+    "happy-dom": "^17.4.7",
+    "plop": "^4.0.1",
+    "postcss": "^8.5.3",
+    "standard-version": "^9.5.0",
+    "storybook": "^8.6.12",
+    "storybook-addon-tailwind-autodocs": "^1.0.8",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.1.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  },
+  "packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "generate": "plop",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "chromatic": "chromatic",
+    "release:publish": "pnpm publish --access public",
+    "publish:ci": "pnpm publish --access public --no-git-checks",
+    "release": "standard-version"
+  }
+}