dustyui 1.0.0 → 1.0.2

package/dist/Badge/Badge.cjs

@@ -0,0 +1,67 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Badge_exports = {};
+__export(Badge_exports, {
+  Badge: () => Badge
+});
+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 = (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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,33 @@
+import React from "react";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import styles from "./Badge.module.css";
+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

@@ -0,0 +1,26 @@
+.badge {
+  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

@@ -0,0 +1,74 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button
+});
+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 = (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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,42 @@
+import React, {
+  forwardRef
+} from "react";
+import clsx from "clsx";
+import styles from "./Button.module.css";
+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

@@ -0,0 +1,37 @@
+.button {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  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

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  Badge: () => import_Badge.Badge,
+  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:
+0 && (module.exports = {
+  Badge,
+  Button
+});

package/dist/index.d.ts

@@ -1,8 +1,3 @@
-import React from 'react';
-
-type Props = {
-    children: React.ReactNode;
-};
-declare const Button: ({ children }: Props) => React.JSX.Element;
-
-export { Button };
+import "./styles/tokens.css";
+export { Badge } from "./Badge/Badge";
+export { Button } from "./Button/Button";

package/dist/index.js

@@ -1,50 +1,7 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Button: () => Button
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/Button/Button.tsx
-var import_react = __toESM(require("react"));
-
-// src/Button/Button.module.css
-var Button_module_default = {};
-
-// src/Button/Button.tsx
-var Button = ({ children }) => {
-  return /* @__PURE__ */ import_react.default.createElement("button", { className: Button_module_default.button }, children);
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+import "./styles/tokens.css";
+import { Badge } from "./Badge/Badge";
+import { Button } from "./Button/Button";
+export {
+  Badge,
   Button
-});
+};

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,8 +1,15 @@
 {
   "name": "dustyui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A minimalist, neutral-toned React UI component library styled with CSS Modules.",
-  "keywords": ["react", "ui", "component-library", "design-system", "css-modules", "dustyui"],
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "component-library",
+    "css-modules",
+    "dustyui"
+  ],
   "author": "Wioletta Gluza <wiolagluza@gmail.com> (https://wiola.dev)",
   "license": "MIT",
   "repository": {
@@ -11,12 +18,22 @@
   },
   "homepage": "https://dustyui.com",
   "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "tsup"
+    "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 .",
+    "lint": "eslint .",
+    "lint:css": "stylelint 'src/**/*.css'"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
@@ -24,14 +41,28 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "typescript": "^5.0.0",
-    "tsup": "^7.0.0"
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "cpy-cli": "^6.0.0",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-config-turbo": "^2.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "prettier": "^3.6.2",
+    "stylelint": "^16.21.1",
+    "stylelint-config-css-modules": "^4.5.1",
+    "stylelint-config-standard": "^38.0.0",
+    "tsup": "^7.0.0",
+    "typescript": "^5.0.0"
   },
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
   }
 }

package/dist/index.css

@@ -1,9 +0,0 @@
-/* src/Button/Button.module.css */
-.button {
-  background-color: #caa892;
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border-radius: 1rem;
-  border: none;
-  font-size: 1rem;
-}

package/dist/index.d.mts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-type Props = {
-    children: React.ReactNode;
-};
-declare const Button: ({ children }: Props) => React.JSX.Element;
-
-export { Button };

package/dist/index.mjs

@@ -1,13 +0,0 @@
-// src/Button/Button.tsx
-import React from "react";
-
-// src/Button/Button.module.css
-var Button_module_default = {};
-
-// src/Button/Button.tsx
-var Button = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("button", { className: Button_module_default.button }, children);
-};
-export {
-  Button
-};