@xuefx/ui 1.0.2 → 1.0.4

package/README.md

@@ -0,0 +1,70 @@
+# @xuefx/ui
+
+React UI component library. Powered by [Tailwind CSS](https://tailwindcss.com) + [CVA](https://cva.style).
+
+## Install
+
+```bash
+npm install @xuefx/ui @xuefx/ui-theme
+```
+
+## Usage
+
+```js
+import '@xuefx/ui-theme/styles.css';  // design tokens
+import '@xuefx/ui/style.css';         // component styles
+import { Button, Alert, AlertTitle, AlertDescription } from '@xuefx/ui';
+```
+
+## Components
+
+### Button
+
+```jsx
+import { Button } from '@xuefx/ui';
+
+<Button>Default</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+<Button size="icon">★</Button>
+```
+
+### Alert
+
+```jsx
+import { Alert, AlertTitle, AlertDescription } from '@xuefx/ui';
+
+<Alert>
+  <AlertTitle>Info</AlertTitle>
+  <AlertDescription>This is a message.</AlertDescription>
+</Alert>
+
+<Alert variant="destructive">
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Something went wrong.</AlertDescription>
+</Alert>
+```
+
+### Styling
+
+All components render semantic CSS classes (`fx-btn`, `fx-btn-primary`, `fx-alert`, etc.) — override them with plain CSS:
+
+```css
+.fx-btn { border-radius: 12px; }
+```
+
+### Theming
+
+```js
+import { ThemeProvider, createTheme, themes } from '@xuefx/ui-theme';
+
+<ThemeProvider theme={themes.green}>
+  <App />
+</ThemeProvider>
+```

package/dist/index.es.js

@@ -1,4 +1,3 @@
-import "@xuefx/ui-theme/styles.css";
 import { jsx as n } from "react/jsx-runtime";
 import i from "react";
 import { cva as f } from "class-variance-authority";
@@ -29,12 +28,12 @@ const m = f("fx-btn", {
     size: "default"
   }
 }), x = i.forwardRef(
-  ({ className: t, variant: r, size: e, type: a = "button", children: s, ...o }, d) => /* @__PURE__ */ n(
+  ({ className: t, variant: e, size: r, type: a = "button", children: s, ...o }, d) => /* @__PURE__ */ n(
     "button",
     {
       ref: d,
       type: a,
-      className: l(m({ variant: r, size: e, className: t })),
+      className: l(m({ variant: e, size: r, className: t })),
       ...o,
       children: s
     }
@@ -51,34 +50,34 @@ const b = f("fx-alert", {
   defaultVariants: {
     variant: "default"
   }
-}), p = i.forwardRef(({ className: t, variant: r, children: e, ...a }, s) => /* @__PURE__ */ n(
+}), p = i.forwardRef(({ className: t, variant: e, children: r, ...a }, s) => /* @__PURE__ */ n(
   "div",
   {
     ref: s,
     role: "alert",
-    className: l(b({ variant: r, className: t })),
+    className: l(b({ variant: e, className: t })),
     ...a,
-    children: e
+    children: r
   }
 ));
 p.displayName = "Alert";
-const v = i.forwardRef(({ className: t, children: r, ...e }, a) => /* @__PURE__ */ n(
+const v = i.forwardRef(({ className: t, children: e, ...r }, a) => /* @__PURE__ */ n(
   "h5",
   {
     ref: a,
     className: l("fx-alert-title", t),
-    ...e,
-    children: r
+    ...r,
+    children: e
   }
 ));
 v.displayName = "AlertTitle";
-const N = i.forwardRef(({ className: t, children: r, ...e }, a) => /* @__PURE__ */ n(
+const N = i.forwardRef(({ className: t, children: e, ...r }, a) => /* @__PURE__ */ n(
   "div",
   {
     ref: a,
     className: l("fx-alert-desc", t),
-    ...e,
-    children: r
+    ...r,
+    children: e
   }
 ));
 N.displayName = "AlertDescription";

package/dist/index.umd.js

@@ -1 +1 @@
-(function(e,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@xuefx/ui-theme/styles.css"),require("react/jsx-runtime"),require("react"),require("class-variance-authority"),require("clsx"),require("tailwind-merge")):typeof define=="function"&&define.amd?define(["exports","@xuefx/ui-theme/styles.css","react/jsx-runtime","react","class-variance-authority","clsx","tailwind-merge"],s):(e=typeof globalThis<"u"?globalThis:e||self,s(e.ImxUI={},null,e.jsxRuntime,e.React,e.classVarianceAuthority,e.clsx,e.tailwindMerge))})(this,function(e,s,l,u,c,v,y){"use strict";function a(...t){return y.twMerge(v.clsx(t))}const b=c.cva("fx-btn",{variants:{variant:{default:"fx-btn-primary",destructive:"fx-btn-destructive",outline:"fx-btn-outline",secondary:"fx-btn-secondary",ghost:"fx-btn-ghost",link:"fx-btn-link"},size:{default:"fx-btn-md",sm:"fx-btn-sm",lg:"fx-btn-lg",icon:"fx-btn-icon"}},defaultVariants:{variant:"default",size:"default"}}),d=u.forwardRef(({className:t,variant:r,size:n,type:i="button",children:f,...h},A)=>l.jsx("button",{ref:A,type:i,className:a(b({variant:r,size:n,className:t})),...h,children:f}));d.displayName="Button";const p=c.cva("fx-alert",{variants:{variant:{default:"fx-alert-default",destructive:"fx-alert-destructive"}},defaultVariants:{variant:"default"}}),o=u.forwardRef(({className:t,variant:r,children:n,...i},f)=>l.jsx("div",{ref:f,role:"alert",className:a(p({variant:r,className:t})),...i,children:n}));o.displayName="Alert";const x=u.forwardRef(({className:t,children:r,...n},i)=>l.jsx("h5",{ref:i,className:a("fx-alert-title",t),...n,children:r}));x.displayName="AlertTitle";const m=u.forwardRef(({className:t,children:r,...n},i)=>l.jsx("div",{ref:i,className:a("fx-alert-desc",t),...n,children:r}));m.displayName="AlertDescription",e.Alert=o,e.AlertDescription=m,e.AlertTitle=x,e.Button=d,e.cn=a,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+(function(t,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("react/jsx-runtime"),require("react"),require("class-variance-authority"),require("clsx"),require("tailwind-merge")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","class-variance-authority","clsx","tailwind-merge"],r):(t=typeof globalThis<"u"?globalThis:t||self,r(t.ImxUI={},t.jsxRuntime,t.React,t.classVarianceAuthority,t.clsx,t.tailwindMerge))})(this,function(t,r,l,u,m,v){"use strict";function s(...e){return v.twMerge(m.clsx(e))}const y=u.cva("fx-btn",{variants:{variant:{default:"fx-btn-primary",destructive:"fx-btn-destructive",outline:"fx-btn-outline",secondary:"fx-btn-secondary",ghost:"fx-btn-ghost",link:"fx-btn-link"},size:{default:"fx-btn-md",sm:"fx-btn-sm",lg:"fx-btn-lg",icon:"fx-btn-icon"}},defaultVariants:{variant:"default",size:"default"}}),c=l.forwardRef(({className:e,variant:n,size:a,type:i="button",children:f,...p},A)=>r.jsx("button",{ref:A,type:i,className:s(y({variant:n,size:a,className:e})),...p,children:f}));c.displayName="Button";const b=u.cva("fx-alert",{variants:{variant:{default:"fx-alert-default",destructive:"fx-alert-destructive"}},defaultVariants:{variant:"default"}}),d=l.forwardRef(({className:e,variant:n,children:a,...i},f)=>r.jsx("div",{ref:f,role:"alert",className:s(b({variant:n,className:e})),...i,children:a}));d.displayName="Alert";const o=l.forwardRef(({className:e,children:n,...a},i)=>r.jsx("h5",{ref:i,className:s("fx-alert-title",e),...a,children:n}));o.displayName="AlertTitle";const x=l.forwardRef(({className:e,children:n,...a},i)=>r.jsx("div",{ref:i,className:s("fx-alert-desc",e),...a,children:n}));x.displayName="AlertDescription",t.Alert=d,t.AlertDescription=x,t.AlertTitle=o,t.Button=c,t.cn=s,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuefx/ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "React UI component library",
   "type": "module",
   "main": "dist/index.es.js",
@@ -22,7 +22,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.6.0",
-    "@xuefx/ui-theme": "^1.0.1"
+    "@xuefx/ui-theme": "^1.0.3"
   },
   "devDependencies": {
     "tailwindcss": "^3.4.17"