@dataimago/ui 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,31 @@
+# @dataimago/ui
+
+React components for the dataimago ethical AI design system.
+
+> **Registry:** published to **public npm** (`registry.npmjs.org`) under the `@dataimago` scope alongside `@dataimago/tokens` and `@dataimago/css`. No scoped `.npmrc` or `GITHUB_PACKAGES_TOKEN` is required — a plain `pnpm install @dataimago/ui` works.
+
+## Peer dependencies
+
+- `react` ≥ 18
+- `react-dom` ≥ 18
+- `@dataimago/tokens` ≥ 0.1.0-alpha.0
+- `@dataimago/css` ≥ 0.1.0-alpha.0 (visual styling is delegated to `.btn-*` classes emitted by this package)
+
+## Alpha scope
+
+Just one smoke component for now:
+
+```tsx
+import { Button } from '@dataimago/ui';
+
+<Button variant="primary">Generate</Button>
+<Button variant="secondary" size="sm">Cancel</Button>
+```
+
+Additional components get harvested from consumer prototypes (`dataimago-ai`, `dissertation.ai`, etc.) via the prototype-in-consumer workflow.
+
+## Building
+
+```bash
+pnpm --filter @dataimago/ui build
+```

package/dist/index.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);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Button.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var variantClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  ghost: "btn-ghost"
+};
+var sizeClasses = {
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg"
+};
+var Button = React.forwardRef(
+  function Button2({ variant = "primary", size = "md", className = "", type, children, ...rest }, ref) {
+    const classes = [
+      "btn",
+      variantClasses[variant],
+      sizeClasses[size],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        className: classes,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Button.tsx"],"sourcesContent":["export { Button } from './Button.js';\nexport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';\n","import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary:   'btn-primary',\n  secondary: 'btn-secondary',\n  ghost:     'btn-ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: 'btn-sm',\n  md: 'btn-md',\n  lg: 'btn-lg',\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to the CSS classes `.btn`, `.btn-<variant>`, `.btn-<size>`\n * published by @dataimago/css so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { variant = 'primary', size = 'md', className = '', type, children, ...rest },\n    ref,\n  ) {\n    const classes = [\n      'btn',\n      variantClasses[variant],\n      sizeClasses[size],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type ?? 'button'}\n        className={classes}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AA6CjB;AAlCN,IAAM,iBAAgD;AAAA,EACpD,SAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAW;AACb;AAEA,IAAM,cAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AASO,IAAM,SAAe;AAAA,EAC1B,SAASA,QACP,EAAE,UAAU,WAAW,OAAO,MAAM,YAAY,IAAI,MAAM,UAAU,GAAG,KAAK,GAC5E,KACA;AACA,UAAM,UAAU;AAAA,MACd;AAAA,MACA,eAAe,OAAO;AAAA,MACtB,YAAY,IAAI;AAAA,MAChB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["Button"]}

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+/**
+ * Smoke-level `<Button>` for the alpha release of @dataimago/ui.
+ *
+ * Styling is delegated to the CSS classes `.btn`, `.btn-<variant>`, `.btn-<size>`
+ * published by @dataimago/css so that the component stays small and theme-aware.
+ * Consumers that want to override visuals can pass their own className.
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+/**
+ * Smoke-level `<Button>` for the alpha release of @dataimago/ui.
+ *
+ * Styling is delegated to the CSS classes `.btn`, `.btn-<variant>`, `.btn-<size>`
+ * published by @dataimago/css so that the component stays small and theme-aware.
+ * Consumers that want to override visuals can pass their own className.
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/index.js

@@ -0,0 +1,37 @@
+// src/Button.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var variantClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  ghost: "btn-ghost"
+};
+var sizeClasses = {
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg"
+};
+var Button = React.forwardRef(
+  function Button2({ variant = "primary", size = "md", className = "", type, children, ...rest }, ref) {
+    const classes = [
+      "btn",
+      variantClasses[variant],
+      sizeClasses[size],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        className: classes,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+export {
+  Button
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary:   'btn-primary',\n  secondary: 'btn-secondary',\n  ghost:     'btn-ghost',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: 'btn-sm',\n  md: 'btn-md',\n  lg: 'btn-lg',\n};\n\n/**\n * Smoke-level `<Button>` for the alpha release of @dataimago/ui.\n *\n * Styling is delegated to the CSS classes `.btn`, `.btn-<variant>`, `.btn-<size>`\n * published by @dataimago/css so that the component stays small and theme-aware.\n * Consumers that want to override visuals can pass their own className.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    { variant = 'primary', size = 'md', className = '', type, children, ...rest },\n    ref,\n  ) {\n    const classes = [\n      'btn',\n      variantClasses[variant],\n      sizeClasses[size],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type ?? 'button'}\n        className={classes}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"mappings":";AAAA,YAAY,WAAW;AA6CjB;AAlCN,IAAM,iBAAgD;AAAA,EACpD,SAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAW;AACb;AAEA,IAAM,cAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AASO,IAAM,SAAe;AAAA,EAC1B,SAASA,QACP,EAAE,UAAU,WAAW,OAAO,MAAM,YAAY,IAAI,MAAM,UAAU,GAAG,KAAK,GAC5E,KACA;AACA,UAAM,UAAU;AAAA,MACd;AAAA,MACA,eAAe,OAAO;AAAA,MACtB,YAAY,IAAI;AAAA,MAChB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;","names":["Button"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@dataimago/ui",
+  "version": "0.1.0-alpha.1",
+  "description": "React components for the dataimago ethical AI design system",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dataimago/dataimago-design.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@dataimago/tokens": "^0.1.0-alpha.0",
+    "@dataimago/css": "^0.1.0-alpha.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "@dataimago/tokens": "^0.1.0-alpha.1",
+    "@dataimago/css": "^0.1.0-alpha.1"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "dataimago"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}