system-one-design 1.0.0

package/README.md

@@ -0,0 +1,51 @@
+# system-one-design
+
+React design system components built from **Figma System One Token Demo (Flowbite)**. Use these components in your app for consistent, design-token–driven UI.
+
+## Install
+
+```bash
+npm install system-one-design
+```
+
+**Peer dependencies:** `react` and `react-dom` (v17+). Install them if your project doesn’t already have them.
+
+## Usage
+
+1. Import the component(s) and the package styles in your app (e.g. in your root layout or `main.jsx`):
+
+```jsx
+import { Button } from 'system-one-design';
+import 'system-one-design/style.css';
+
+function App() {
+  return (
+    <div>
+      <Button>Click me</Button>
+      <Button onClick={() => alert('Hi')}>Alert</Button>
+    </div>
+  );
+}
+```
+
+2. Use the stylesheet once per app (e.g. in your entry file or root layout). The CSS is required for components to look correct.
+
+## Components
+
+- **Button** – Primary button (blue, rounded). Supports `children`, `onClick`, `type`, `disabled`, `className`, and other native `button` props.
+
+## Development
+
+- `npm run build` – Build the library into `dist/`
+- `npm run dev` – Run the local demo app (Vite dev server)
+- `npm run preview` – Preview the demo app production build
+
+## Publishing
+
+Before publishing to npm:
+
+1. Set `name`, `version`, `description`, `author`, and optionally `repository` in `package.json`.
+2. Run `npm run build`. `prepublishOnly` runs this automatically on `npm publish`.
+3. Publish: `npm publish` (or `npm publish --access public` for a scoped package like `@yourscope/system-one-design`).
+
+Only the `dist` folder is included in the published package (`files` in `package.json`).

package/dist/system-one-design.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=({children:t="Button",onClick:e,type:n="button",disabled:o=!1,className:u="",...s})=>r.jsx("button",{type:n,onClick:e,disabled:o,className:`figma-button ${u}`,...s,children:t});exports.Button=a;
+//# sourceMappingURL=system-one-design.cjs.map

package/dist/system-one-design.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-one-design.cjs","sources":["../src/components/Button.jsx"],"sourcesContent":["/**\n * Button component – from Figma System One Token Demo (Flowbite)\n * Node: 11385-3248\n * Design: Primary blue rounded button with white text\n */\nimport './Button.css';\n\nconst Button = ({\n  children = 'Button',\n  onClick,\n  type = 'button',\n  disabled = false,\n  className = '',\n  ...props\n}) => {\n  return (\n    <button\n      type={type}\n      onClick={onClick}\n      disabled={disabled}\n      className={`figma-button ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n"],"names":["Button","children","onClick","type","disabled","className","props","jsx"],"mappings":"qHAOMA,EAAS,CAAC,CACd,SAAAC,EAAW,SACX,QAAAC,EACA,KAAAC,EAAO,SACP,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,GAAGC,CACL,IAEIC,EAAAA,IAAC,SAAA,CACC,KAAAJ,EACA,QAAAD,EACA,SAAAE,EACA,UAAW,gBAAgBC,CAAS,GACnC,GAAGC,EAEH,SAAAL,CAAA,CAAA"}

package/dist/system-one-design.css

@@ -0,0 +1 @@
+.figma-button{display:inline-flex;align-items:center;justify-content:center;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:500;line-height:1.25rem;color:red;background-color:purple;border:none;border-radius:.5rem;padding:.5rem 1rem;cursor:pointer;transition:background-color .15s ease}.figma-button:hover:not(:disabled){background-color:#2563eb}.figma-button:active:not(:disabled){background-color:#1d4ed8}.figma-button:disabled{opacity:.6;cursor:not-allowed}.figma-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}

package/dist/system-one-design.js

@@ -0,0 +1,23 @@
+import { jsx as a } from "react/jsx-runtime";
+const m = ({
+  children: t = "Button",
+  onClick: o,
+  type: n = "button",
+  disabled: u = !1,
+  className: r = "",
+  ...s
+}) => /* @__PURE__ */ a(
+  "button",
+  {
+    type: n,
+    onClick: o,
+    disabled: u,
+    className: `figma-button ${r}`,
+    ...s,
+    children: t
+  }
+);
+export {
+  m as Button
+};
+//# sourceMappingURL=system-one-design.js.map

package/dist/system-one-design.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-one-design.js","sources":["../src/components/Button.jsx"],"sourcesContent":["/**\n * Button component – from Figma System One Token Demo (Flowbite)\n * Node: 11385-3248\n * Design: Primary blue rounded button with white text\n */\nimport './Button.css';\n\nconst Button = ({\n  children = 'Button',\n  onClick,\n  type = 'button',\n  disabled = false,\n  className = '',\n  ...props\n}) => {\n  return (\n    <button\n      type={type}\n      onClick={onClick}\n      disabled={disabled}\n      className={`figma-button ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n"],"names":["Button","children","onClick","type","disabled","className","props","jsx"],"mappings":";AAOA,MAAMA,IAAS,CAAC;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAAJ;AAAA,IACA,SAAAD;AAAA,IACA,UAAAE;AAAA,IACA,WAAW,gBAAgBC,CAAS;AAAA,IACnC,GAAGC;AAAA,IAEH,UAAAL;AAAA,EAAA;AAAA;"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "system-one-design",
+  "version": "1.0.0",
+  "description": "React design system components built from Figma System One Token Demo (Flowbite)",
+  "type": "module",
+  "main": "./dist/system-one-design.cjs",
+  "module": "./dist/system-one-design.js",
+  "exports": {
+    ".": {
+      "import": "./dist/system-one-design.js",
+      "require": "./dist/system-one-design.cjs"
+    },
+    "./style.css": "./dist/system-one-design.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vite": "^6.0.3"
+  },
+  "keywords": [
+    "react",
+    "design-system",
+    "components",
+    "figma",
+    "flowbite",
+    "ui"
+  ],
+  "author": "",
+  "license": "ISC"
+}