dustyui 1.0.1 → 1.0.2

package/dist/Badge/Badge.cjs

@@ -32,10 +32,35 @@ __export(Badge_exports, {
 });
 module.exports = __toCommonJS(Badge_exports);
 var import_react = __toESM(require("react"));
+var import_react2 = require("react");
+var import_clsx = __toESM(require("clsx"));
 var import_Badge_module = __toESM(require("./Badge.module.css"));
-const Badge = ({ children }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: import_Badge_module.default.badge }, children);
-};
+const Badge = (0, import_react2.forwardRef)(
+  ({
+    label,
+    icon,
+    iconPosition = "left",
+    announce = false,
+    dataTestId,
+    className
+  }, ref) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        ref,
+        className: (0, import_clsx.default)(import_Badge_module.default.badge, className),
+        "data-testid": dataTestId,
+        "data-icon-position": iconPosition,
+        role: announce ? "status" : void 0,
+        "aria-live": announce ? "polite" : void 0
+      },
+      icon && iconPosition === "left" && /* @__PURE__ */ import_react.default.createElement("span", { className: import_Badge_module.default.icon, "aria-hidden": "true" }, icon),
+      /* @__PURE__ */ import_react.default.createElement("span", { className: import_Badge_module.default.label }, label),
+      icon && iconPosition === "right" && /* @__PURE__ */ import_react.default.createElement("span", { className: import_Badge_module.default.icon, "aria-hidden": "true" }, icon)
+    );
+  }
+);
+Badge.displayName = "Badge";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge

package/dist/Badge/Badge.d.ts

@@ -1,6 +1,17 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-};
-export declare const Badge: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+import React, { type ReactNode } from "react";
+interface BadgeProps {
+    /** Visible text inside the badge. */
+    label: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Where to place the icon relative to the label. */
+    iconPosition?: "left" | "right";
+    /** If true, announces updates to assistive tech (use when value changes dynamically). */
+    announce?: boolean;
+    /** Test hook. */
+    dataTestId?: string;
+    /** Extra class on the root element. */
+    className?: string;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/dist/Badge/Badge.js

@@ -1,8 +1,33 @@
 import React from "react";
+import { forwardRef } from "react";
+import clsx from "clsx";
 import styles from "./Badge.module.css";
-const Badge = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: styles.badge }, children);
-};
+const Badge = forwardRef(
+  ({
+    label,
+    icon,
+    iconPosition = "left",
+    announce = false,
+    dataTestId,
+    className
+  }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref,
+        className: clsx(styles.badge, className),
+        "data-testid": dataTestId,
+        "data-icon-position": iconPosition,
+        role: announce ? "status" : void 0,
+        "aria-live": announce ? "polite" : void 0
+      },
+      icon && iconPosition === "left" && /* @__PURE__ */ React.createElement("span", { className: styles.icon, "aria-hidden": "true" }, icon),
+      /* @__PURE__ */ React.createElement("span", { className: styles.label }, label),
+      icon && iconPosition === "right" && /* @__PURE__ */ React.createElement("span", { className: styles.icon, "aria-hidden": "true" }, icon)
+    );
+  }
+);
+Badge.displayName = "Badge";
 export {
   Badge
 };

package/dist/Badge/Badge.module.css

@@ -1,4 +1,26 @@
 .badge {
-  background-color: red;
-  color: blue;
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  padding: 0.125rem 0.625rem;
+  font-weight: 600;
+  border: 1px solid var(--color-gray-300);
+  width: max-content;
+  border-radius: 12px;
+  align-items: center;
+  gap: 4px;
+}
+
+.icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.label {
+  white-space: nowrap;
 }

package/dist/Button/Button.cjs

@@ -32,10 +32,42 @@ __export(Button_exports, {
 });
 module.exports = __toCommonJS(Button_exports);
 var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
 var import_Button_module = __toESM(require("./Button.module.css"));
-const Button = ({ children }) => {
-  return /* @__PURE__ */ import_react.default.createElement("button", { className: import_Button_module.default.button }, children);
-};
+const Button = (0, import_react.forwardRef)(
+  ({
+    children,
+    variant = "primary",
+    loading = false,
+    dataTestId,
+    className,
+    disabled,
+    type = "button",
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        ref,
+        type,
+        className: (0, import_clsx.default)(
+          import_Button_module.default.button,
+          import_Button_module.default[variant],
+          isDisabled && import_Button_module.default.disabled,
+          className
+        ),
+        "data-testid": dataTestId,
+        "data-variant": variant,
+        "aria-busy": loading || void 0,
+        disabled: isDisabled,
+        ...props
+      },
+      children
+    );
+  }
+);
+Button.displayName = "Button";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button

package/dist/Button/Button.d.ts

@@ -1,6 +1,14 @@
-import React from "react";
-type Props = {
-    children: React.ReactNode;
-};
-export declare const Button: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+import React, { type ButtonHTMLAttributes, type ReactNode } from "react";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Content inside the button */
+    children: ReactNode;
+    /** Visual style variant */
+    variant?: "primary" | "secondary";
+    /** Show as busy (disables interaction + aria-busy) */
+    loading?: boolean;
+    /** Test hook. */
+    dataTestId?: string;
+    /** Additional CSS class names */
+    className?: string;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/Button/Button.js

@@ -1,8 +1,42 @@
-import React from "react";
+import React, {
+  forwardRef
+} from "react";
+import clsx from "clsx";
 import styles from "./Button.module.css";
-const Button = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("button", { className: styles.button }, children);
-};
+const Button = forwardRef(
+  ({
+    children,
+    variant = "primary",
+    loading = false,
+    dataTestId,
+    className,
+    disabled,
+    type = "button",
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        ref,
+        type,
+        className: clsx(
+          styles.button,
+          styles[variant],
+          isDisabled && styles.disabled,
+          className
+        ),
+        "data-testid": dataTestId,
+        "data-variant": variant,
+        "aria-busy": loading || void 0,
+        disabled: isDisabled,
+        ...props
+      },
+      children
+    );
+  }
+);
+Button.displayName = "Button";
 export {
   Button
 };

package/dist/Button/Button.module.css

@@ -1,8 +1,37 @@
 .button {
-  background-color: #caa892;
-  color: white;
+  display: inline-block;
   padding: 0.75rem 1.5rem;
-  border-radius: 1rem;
-  border: none;
-  font-size: 1rem;
+  border-radius: 8px;
+  font-weight: var(--weight-semibold);
+  text-decoration: none;
+  line-height: 1;
+}
+
+/* Primary: filled black */
+.primary {
+  background-color: var(--color-black);
+  color: var(--color-white);
+  border: 1px solid var(--color-black);
+}
+
+.primary:hover {
+  background-color: var(--color-black-700);
+}
+
+/* Secondary: outline black */
+.secondary {
+  background-color: transparent;
+  color: var(--color-black);
+  border: 1px solid var(--color-black);
+}
+
+.secondary:hover {
+  background-color: var(--color-gray-200);
+}
+
+/* Disabled state */
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
 }

package/dist/index.cjs

@@ -22,6 +22,7 @@ __export(src_exports, {
   Button: () => import_Button.Button
 });
 module.exports = __toCommonJS(src_exports);
+var import_tokens = require("./styles/tokens.css");
 var import_Badge = require("./Badge/Badge");
 var import_Button = require("./Button/Button");
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+import "./styles/tokens.css";
 export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";

package/dist/index.js

@@ -1,3 +1,4 @@
+import "./styles/tokens.css";
 import { Badge } from "./Badge/Badge";
 import { Button } from "./Button/Button";
 export {

package/dist/styles/tokens.css

@@ -0,0 +1,15 @@
+:root {
+  /* Color Variables */
+  --color-black: #222222;
+  --color-black-800: #2a2a2a;
+  --color-black-700: #2f2f2f;
+  --color-gray-700: #444444;
+  --color-gray-600: #666666;
+  --color-gray-500: #999999;
+  --color-gray-400: #bbbbbb;
+  --color-gray-300: #dddddd;
+  --color-gray-200: #eeeeee;
+  --color-gray-100: #f5f5f5;
+  --color-gray-50: #fcfcfc;
+  --color-white: #fafafa;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dustyui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A minimalist, neutral-toned React UI component library styled with CSS Modules.",
   "keywords": [
     "react",
@@ -24,7 +24,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && cpy \"src/**/*.module.css\" dist --parents",
+    "build": "rm -rf dist && tsup && tsc -p tsconfig.build.json && cpy \"src/**/*.css\" dist --parents",
     "typecheck": "tsc --noEmit",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
@@ -61,5 +61,8 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
   }
 }