system-one-design 1.0.0 → 1.0.4

package/README.md

@@ -15,14 +15,14 @@ npm install system-one-design
 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 { Button, Input } from 'system-one-design';
 import 'system-one-design/style.css';
 
 function App() {
   return (
     <div>
       <Button>Click me</Button>
-      <Button onClick={() => alert('Hi')}>Alert</Button>
+      <Input placeholder="Text label" />
     </div>
   );
 }
@@ -33,6 +33,7 @@ function App() {
 ## Components
 
 - **Button** – Primary button (blue, rounded). Supports `children`, `onClick`, `type`, `disabled`, `className`, and other native `button` props.
+- **Input** – Text input with rounded corners and light gray border. Supports `placeholder`, `value`, `onChange`, `type`, `disabled`, `className`, `id`, `name`, and other native `input` props.
 
 ## Development
 

package/dist/system-one-design.cjs

@@ -1,2 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("react"),H=({children:s="Button",onClick:t,type:n="button",disabled:l=!1,className:e="",...o})=>a.jsx("button",{type:n,onClick:t,disabled:l,className:`figma-button ${e}`,...o,children:s}),O=({children:s="Button",onClick:t,type:n="button",disabled:l=!1,className:e="",...o})=>a.jsx("button",{type:n,onClick:t,disabled:l,className:`figma-primary-button ${e}`,...o,children:s}),k=({children:s="Button",onClick:t,type:n="button",disabled:l=!1,className:e="",...o})=>a.jsx("button",{type:n,onClick:t,disabled:l,className:`figma-secondary-button ${e}`,...o,children:s}),v=({children:s="Button",onClick:t,type:n="button",disabled:l=!1,className:e="",...o})=>a.jsx("button",{type:n,onClick:t,disabled:l,className:`figma-tertiary-button ${e}`,...o,children:s}),w=({placeholder:s="Text label",value:t,onChange:n,type:l="text",disabled:e=!1,className:o="",id:c,name:f,...i})=>a.jsx("input",{type:l,placeholder:s,value:t,onChange:n,disabled:e,id:c,name:f,className:`figma-input ${o}`,...i}),z=({label:s="Text label",value:t="",onChange:n,type:l="text",disabled:e=!1,required:o=!1,error:c=!1,errorMessage:f="",helperText:i="",suffix:b="",maxLength:r,showCharacterCount:g=!1,placeholder:h="",className:F="",id:d,name:S,onFocus:p,onBlur:j,...I})=>{const[N,x]=m.useState(!1),[q,P]=m.useState(!1),R=m.useRef(null);m.useEffect(()=>{P(t!==""&&t!=null)},[t]);const T=u=>{x(!0),p&&p(u)},E=u=>{x(!1),j&&j(u)},V=u=>{n&&n(u)},B=N||q,y=c&&f,$=t?t.length:0;return a.jsxs("div",{className:`figma-floating-label-input-wrapper ${F}`,children:[a.jsx("div",{className:`figma-floating-label-input-container ${e?"disabled":""} ${c?"error":""} ${N?"focused":""}`,children:a.jsxs("div",{className:"figma-floating-label-input-inner",children:[a.jsx("input",{ref:R,type:l,value:t,onChange:V,onFocus:T,onBlur:E,disabled:e,id:d,name:S,maxLength:r,placeholder:B?h:"",className:"figma-floating-label-input",...I}),a.jsx("label",{className:`figma-floating-label ${B?"floating":""} ${o?"required":""}`,htmlFor:d,children:s}),b&&a.jsx("span",{className:"figma-floating-label-suffix",children:b})]})}),(y||i||g&&r)&&a.jsxs("div",{className:"figma-floating-label-footer",children:[y?a.jsx("span",{className:"figma-floating-label-error",children:f}):i&&a.jsx("span",{className:"figma-floating-label-helper",children:i}),g&&r&&a.jsxs("span",{className:`figma-floating-label-counter ${$>r?"error":""}`,children:[$,"/",r]})]})]})};exports.Button=H;exports.FloatingLabelInput=z;exports.Input=w;exports.PrimaryButton=O;exports.SecondaryButton=k;exports.TertiaryButton=v;
 //# sourceMappingURL=system-one-design.cjs.map

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

@@ -1 +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"}
+{"version":3,"file":"system-one-design.cjs","sources":["../src/components/Button.jsx","../src/components/PrimaryButton.jsx","../src/components/SecondaryButton.jsx","../src/components/TertiaryButton.jsx","../src/components/Input.jsx","../src/components/FloatingLabelInput.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","/**\n * PrimaryButton component – from Figma System One Token Demo (Flowbite)\n * Node: 11039-574 (Primary button variants)\n * Design: Filled blue button with white text\n */\nimport './PrimaryButton.css';\n\nconst PrimaryButton = ({\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-primary-button ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default PrimaryButton;\n","/**\n * SecondaryButton component – from Figma System One Token Demo (Flowbite)\n * Node: 11039-574 (Secondary/Outline button variants)\n * Design: White button with blue border and text\n */\nimport './SecondaryButton.css';\n\nconst SecondaryButton = ({\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-secondary-button ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default SecondaryButton;\n","/**\n * TertiaryButton component – from Figma System One Token Demo (Flowbite)\n * Node: 11039-574 (Tertiary/Ghost button variants)\n * Design: White button with blue text, no border\n */\nimport './TertiaryButton.css';\n\nconst TertiaryButton = ({\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-tertiary-button ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default TertiaryButton;\n","/**\n * Input component – from Figma System One Token Demo (Flowbite)\n * Node: 11387-4346\n * Design: Text input with rounded corners, white background, light gray border\n */\nimport './Input.css';\n\nconst Input = ({\n  placeholder = 'Text label',\n  value,\n  onChange,\n  type = 'text',\n  disabled = false,\n  className = '',\n  id,\n  name,\n  ...props\n}) => {\n  return (\n    <input\n      type={type}\n      placeholder={placeholder}\n      value={value}\n      onChange={onChange}\n      disabled={disabled}\n      id={id}\n      name={name}\n      className={`figma-input ${className}`}\n      {...props}\n    />\n  );\n};\n\nexport default Input;\n","/**\n * FloatingLabelInput component – from Figma System One Token Demo (Flowbite)\n * Node: 869-35287\n * Design: Input field with floating label that moves above when focused/filled\n * Features: Floating label, helper text, error messages, suffixes, character counters\n */\nimport { useState, useRef, useEffect } from 'react';\nimport './FloatingLabelInput.css';\n\nconst FloatingLabelInput = ({\n  label = 'Text label',\n  value = '',\n  onChange,\n  type = 'text',\n  disabled = false,\n  required = false,\n  error = false,\n  errorMessage = '',\n  helperText = '',\n  suffix = '',\n  maxLength,\n  showCharacterCount = false,\n  placeholder = '',\n  className = '',\n  id,\n  name,\n  onFocus,\n  onBlur,\n  ...props\n}) => {\n  const [isFocused, setIsFocused] = useState(false);\n  const [hasValue, setHasValue] = useState(false);\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    setHasValue(value !== '' && value != null);\n  }, [value]);\n\n  const handleFocus = (e) => {\n    setIsFocused(true);\n    if (onFocus) onFocus(e);\n  };\n\n  const handleBlur = (e) => {\n    setIsFocused(false);\n    if (onBlur) onBlur(e);\n  };\n\n  const handleChange = (e) => {\n    if (onChange) onChange(e);\n  };\n\n  const isLabelFloating = isFocused || hasValue;\n  const displayError = error && errorMessage;\n  const characterCount = value ? value.length : 0;\n\n  return (\n    <div className={`figma-floating-label-input-wrapper ${className}`}>\n      <div className={`figma-floating-label-input-container ${disabled ? 'disabled' : ''} ${error ? 'error' : ''} ${isFocused ? 'focused' : ''}`}>\n        <div className=\"figma-floating-label-input-inner\">\n          <input\n            ref={inputRef}\n            type={type}\n            value={value}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            disabled={disabled}\n            id={id}\n            name={name}\n            maxLength={maxLength}\n            placeholder={isLabelFloating ? placeholder : ''}\n            className=\"figma-floating-label-input\"\n            {...props}\n          />\n          \n          <label\n            className={`figma-floating-label ${isLabelFloating ? 'floating' : ''} ${required ? 'required' : ''}`}\n            htmlFor={id}\n          >\n            {label}\n          </label>\n\n          {suffix && (\n            <span className=\"figma-floating-label-suffix\">{suffix}</span>\n          )}\n        </div>\n      </div>\n\n      {(displayError || helperText || (showCharacterCount && maxLength)) && (\n        <div className=\"figma-floating-label-footer\">\n          {displayError ? (\n            <span className=\"figma-floating-label-error\">{errorMessage}</span>\n          ) : (\n            helperText && (\n              <span className=\"figma-floating-label-helper\">{helperText}</span>\n            )\n          )}\n          \n          {showCharacterCount && maxLength && (\n            <span className={`figma-floating-label-counter ${characterCount > maxLength ? 'error' : ''}`}>\n              {characterCount}/{maxLength}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default FloatingLabelInput;\n"],"names":["Button","children","onClick","type","disabled","className","props","jsx","PrimaryButton","SecondaryButton","TertiaryButton","Input","placeholder","value","onChange","id","name","FloatingLabelInput","label","required","error","errorMessage","helperText","suffix","maxLength","showCharacterCount","onFocus","onBlur","isFocused","setIsFocused","useState","hasValue","setHasValue","inputRef","useRef","useEffect","handleFocus","e","handleBlur","handleChange","isLabelFloating","displayError","characterCount","jsxs"],"mappings":"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"}

package/dist/system-one-design.css

@@ -1 +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}
+.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}.figma-primary-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:#fff;background-color:#1976d2;border:none;border-radius:.5rem;padding:.5rem 1rem;cursor:pointer;transition:background-color .15s ease}.figma-primary-button:hover:not(:disabled){background-color:#1565c0}.figma-primary-button:active:not(:disabled){background-color:#0d47a1}.figma-primary-button:disabled{background-color:#e0e0e0;color:#9e9e9e;cursor:not-allowed}.figma-primary-button:focus-visible{outline:2px solid #1976D2;outline-offset:2px}.figma-secondary-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:#1976d2;background-color:#fff;border:1px solid #1976D2;border-radius:.5rem;padding:.5rem 1rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.figma-secondary-button:hover:not(:disabled){background-color:#f5f5f5}.figma-secondary-button:active:not(:disabled){background-color:#e0e0e0}.figma-secondary-button:disabled{background-color:#e0e0e0;color:#9e9e9e;border-color:#9e9e9e;cursor:not-allowed}.figma-secondary-button:focus-visible{outline:2px solid #1976D2;outline-offset:2px}.figma-tertiary-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:#1976d2;background-color:#fff;border:none;border-radius:.5rem;padding:.5rem 1rem;cursor:pointer;transition:background-color .15s ease}.figma-tertiary-button:hover:not(:disabled){background-color:#f5f5f5}.figma-tertiary-button:active:not(:disabled){background-color:#e0e0e0}.figma-tertiary-button:disabled{background-color:#e0e0e0;color:#9e9e9e;cursor:not-allowed}.figma-tertiary-button:focus-visible{outline:2px solid #1976D2;outline-offset:2px}.figma-input{display:block;width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.875rem;line-height:1.25rem;color:#111827;background-color:#fff;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem .75rem;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.figma-input::placeholder{color:#9ca3af}.figma-input:hover:not(:disabled):not(:focus){border-color:#9ca3af}.figma-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.figma-input:disabled{opacity:.6;cursor:not-allowed;background-color:#f9fafb}.figma-input:focus-visible{outline:none}.figma-floating-label-input-wrapper{display:flex;flex-direction:column;width:100%;position:relative}.figma-floating-label-input-container{position:relative;display:flex;flex-direction:column;width:100%}.figma-floating-label-input-inner{position:relative;display:flex;align-items:center;width:100%}.figma-floating-label-input{width:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.875rem;line-height:1.25rem;color:#111827;background-color:#1425dc;border:1px solid #d1d5db;border-radius:.5rem;padding:1.25rem .75rem .5rem;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease;outline:none}.figma-floating-label-input::placeholder{color:transparent}.figma-floating-label-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.figma-floating-label-input-container.error .figma-floating-label-input{border-color:#ef4444}.figma-floating-label-input-container.error .figma-floating-label-input:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef444426}.figma-floating-label-input:disabled{opacity:.6;cursor:not-allowed;background-color:#005cbf}.figma-floating-label-input-container.disabled .figma-floating-label-input{background-color:#0400db;color:#363636}.figma-floating-label{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.875rem;line-height:1.25rem;color:#9ca3af;pointer-events:none;transition:all .2s ease;background-color:#003b8d;padding:0 .25rem;z-index:1}.figma-floating-label.floating{top:0;transform:translateY(0);font-size:.75rem;line-height:1rem;color:#6b7280}.figma-floating-label-input-container.focused .figma-floating-label.floating{color:#3b82f6}.figma-floating-label-input-container.error .figma-floating-label.floating{color:#ef4444}.figma-floating-label-input-container.disabled .figma-floating-label{color:#9ca3af}.figma-floating-label.required:after{content:"*";color:#ef4444;margin-left:.125rem}.figma-floating-label-suffix{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.875rem;line-height:1.25rem;color:#6b7280;pointer-events:none;z-index:1}.figma-floating-label-input-container.disabled .figma-floating-label-suffix{color:#9ca3af}.figma-floating-label-footer{display:flex;justify-content:space-between;align-items:flex-start;margin-top:.5rem;min-height:1.25rem}.figma-floating-label-helper{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.75rem;line-height:1rem;color:#6b7280}.figma-floating-label-error{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.75rem;line-height:1rem;color:#ef4444}.figma-floating-label-counter{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.75rem;line-height:1rem;color:#6b7280;margin-left:auto}.figma-floating-label-counter.error{color:#ef4444}

package/dist/system-one-design.js

@@ -1,23 +1,174 @@
-import { jsx as a } from "react/jsx-runtime";
-const m = ({
-  children: t = "Button",
-  onClick: o,
-  type: n = "button",
-  disabled: u = !1,
-  className: r = "",
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { useState as I, useRef as k, useEffect as w } from "react";
+const C = ({
+  children: l = "Button",
+  onClick: t,
+  type: a = "button",
+  disabled: e = !1,
+  className: n = "",
   ...s
-}) => /* @__PURE__ */ a(
+}) => /* @__PURE__ */ o(
   "button",
   {
-    type: n,
-    onClick: o,
-    disabled: u,
-    className: `figma-button ${r}`,
+    type: a,
+    onClick: t,
+    disabled: e,
+    className: `figma-button ${n}`,
     ...s,
-    children: t
+    children: l
   }
-);
+), D = ({
+  children: l = "Button",
+  onClick: t,
+  type: a = "button",
+  disabled: e = !1,
+  className: n = "",
+  ...s
+}) => /* @__PURE__ */ o(
+  "button",
+  {
+    type: a,
+    onClick: t,
+    disabled: e,
+    className: `figma-primary-button ${n}`,
+    ...s,
+    children: l
+  }
+), G = ({
+  children: l = "Button",
+  onClick: t,
+  type: a = "button",
+  disabled: e = !1,
+  className: n = "",
+  ...s
+}) => /* @__PURE__ */ o(
+  "button",
+  {
+    type: a,
+    onClick: t,
+    disabled: e,
+    className: `figma-secondary-button ${n}`,
+    ...s,
+    children: l
+  }
+), J = ({
+  children: l = "Button",
+  onClick: t,
+  type: a = "button",
+  disabled: e = !1,
+  className: n = "",
+  ...s
+}) => /* @__PURE__ */ o(
+  "button",
+  {
+    type: a,
+    onClick: t,
+    disabled: e,
+    className: `figma-tertiary-button ${n}`,
+    ...s,
+    children: l
+  }
+), K = ({
+  placeholder: l = "Text label",
+  value: t,
+  onChange: a,
+  type: e = "text",
+  disabled: n = !1,
+  className: s = "",
+  id: f,
+  name: u,
+  ...i
+}) => /* @__PURE__ */ o(
+  "input",
+  {
+    type: e,
+    placeholder: l,
+    value: t,
+    onChange: a,
+    disabled: n,
+    id: f,
+    name: u,
+    className: `figma-input ${s}`,
+    ...i
+  }
+), O = ({
+  label: l = "Text label",
+  value: t = "",
+  onChange: a,
+  type: e = "text",
+  disabled: n = !1,
+  required: s = !1,
+  error: f = !1,
+  errorMessage: u = "",
+  helperText: i = "",
+  suffix: b = "",
+  maxLength: r,
+  showCharacterCount: g = !1,
+  placeholder: j = "",
+  className: E = "",
+  id: d,
+  name: R,
+  onFocus: p,
+  onBlur: N,
+  ...S
+}) => {
+  const [$, h] = I(!1), [V, q] = I(!1), x = k(null);
+  w(() => {
+    q(t !== "" && t != null);
+  }, [t]);
+  const H = (c) => {
+    h(!0), p && p(c);
+  }, P = (c) => {
+    h(!1), N && N(c);
+  }, T = (c) => {
+    a && a(c);
+  }, B = $ || V, y = f && u, F = t ? t.length : 0;
+  return /* @__PURE__ */ m("div", { className: `figma-floating-label-input-wrapper ${E}`, children: [
+    /* @__PURE__ */ o("div", { className: `figma-floating-label-input-container ${n ? "disabled" : ""} ${f ? "error" : ""} ${$ ? "focused" : ""}`, children: /* @__PURE__ */ m("div", { className: "figma-floating-label-input-inner", children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          ref: x,
+          type: e,
+          value: t,
+          onChange: T,
+          onFocus: H,
+          onBlur: P,
+          disabled: n,
+          id: d,
+          name: R,
+          maxLength: r,
+          placeholder: B ? j : "",
+          className: "figma-floating-label-input",
+          ...S
+        }
+      ),
+      /* @__PURE__ */ o(
+        "label",
+        {
+          className: `figma-floating-label ${B ? "floating" : ""} ${s ? "required" : ""}`,
+          htmlFor: d,
+          children: l
+        }
+      ),
+      b && /* @__PURE__ */ o("span", { className: "figma-floating-label-suffix", children: b })
+    ] }) }),
+    (y || i || g && r) && /* @__PURE__ */ m("div", { className: "figma-floating-label-footer", children: [
+      y ? /* @__PURE__ */ o("span", { className: "figma-floating-label-error", children: u }) : i && /* @__PURE__ */ o("span", { className: "figma-floating-label-helper", children: i }),
+      g && r && /* @__PURE__ */ m("span", { className: `figma-floating-label-counter ${F > r ? "error" : ""}`, children: [
+        F,
+        "/",
+        r
+      ] })
+    ] })
+  ] });
+};
 export {
-  m as Button
+  C as Button,
+  O as FloatingLabelInput,
+  K as Input,
+  D as PrimaryButton,
+  G as SecondaryButton,
+  J as TertiaryButton
 };
 //# sourceMappingURL=system-one-design.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"system-one-design.js","sources":["../src/components/Button.jsx","../src/components/PrimaryButton.jsx","../src/components/SecondaryButton.jsx","../src/components/TertiaryButton.jsx","../src/components/Input.jsx","../src/components/FloatingLabelInput.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","/**\n * PrimaryButton component – from Figma System One Token Demo (Flowbite)\n * Node: 11039-574 (Primary button variants)\n * Design: Filled blue button with white text\n */\nimport './PrimaryButton.css';\n\nconst PrimaryButton = ({\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-primary-button ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default PrimaryButton;\n","/**\n * SecondaryButton component – from Figma System One Token Demo (Flowbite)\n * Node: 11039-574 (Secondary/Outline button variants)\n * Design: White button with blue border and text\n */\nimport './SecondaryButton.css';\n\nconst SecondaryButton = ({\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-secondary-button ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default SecondaryButton;\n","/**\n * TertiaryButton component – from Figma System One Token Demo (Flowbite)\n * Node: 11039-574 (Tertiary/Ghost button variants)\n * Design: White button with blue text, no border\n */\nimport './TertiaryButton.css';\n\nconst TertiaryButton = ({\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-tertiary-button ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default TertiaryButton;\n","/**\n * Input component – from Figma System One Token Demo (Flowbite)\n * Node: 11387-4346\n * Design: Text input with rounded corners, white background, light gray border\n */\nimport './Input.css';\n\nconst Input = ({\n  placeholder = 'Text label',\n  value,\n  onChange,\n  type = 'text',\n  disabled = false,\n  className = '',\n  id,\n  name,\n  ...props\n}) => {\n  return (\n    <input\n      type={type}\n      placeholder={placeholder}\n      value={value}\n      onChange={onChange}\n      disabled={disabled}\n      id={id}\n      name={name}\n      className={`figma-input ${className}`}\n      {...props}\n    />\n  );\n};\n\nexport default Input;\n","/**\n * FloatingLabelInput component – from Figma System One Token Demo (Flowbite)\n * Node: 869-35287\n * Design: Input field with floating label that moves above when focused/filled\n * Features: Floating label, helper text, error messages, suffixes, character counters\n */\nimport { useState, useRef, useEffect } from 'react';\nimport './FloatingLabelInput.css';\n\nconst FloatingLabelInput = ({\n  label = 'Text label',\n  value = '',\n  onChange,\n  type = 'text',\n  disabled = false,\n  required = false,\n  error = false,\n  errorMessage = '',\n  helperText = '',\n  suffix = '',\n  maxLength,\n  showCharacterCount = false,\n  placeholder = '',\n  className = '',\n  id,\n  name,\n  onFocus,\n  onBlur,\n  ...props\n}) => {\n  const [isFocused, setIsFocused] = useState(false);\n  const [hasValue, setHasValue] = useState(false);\n  const inputRef = useRef(null);\n\n  useEffect(() => {\n    setHasValue(value !== '' && value != null);\n  }, [value]);\n\n  const handleFocus = (e) => {\n    setIsFocused(true);\n    if (onFocus) onFocus(e);\n  };\n\n  const handleBlur = (e) => {\n    setIsFocused(false);\n    if (onBlur) onBlur(e);\n  };\n\n  const handleChange = (e) => {\n    if (onChange) onChange(e);\n  };\n\n  const isLabelFloating = isFocused || hasValue;\n  const displayError = error && errorMessage;\n  const characterCount = value ? value.length : 0;\n\n  return (\n    <div className={`figma-floating-label-input-wrapper ${className}`}>\n      <div className={`figma-floating-label-input-container ${disabled ? 'disabled' : ''} ${error ? 'error' : ''} ${isFocused ? 'focused' : ''}`}>\n        <div className=\"figma-floating-label-input-inner\">\n          <input\n            ref={inputRef}\n            type={type}\n            value={value}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            disabled={disabled}\n            id={id}\n            name={name}\n            maxLength={maxLength}\n            placeholder={isLabelFloating ? placeholder : ''}\n            className=\"figma-floating-label-input\"\n            {...props}\n          />\n          \n          <label\n            className={`figma-floating-label ${isLabelFloating ? 'floating' : ''} ${required ? 'required' : ''}`}\n            htmlFor={id}\n          >\n            {label}\n          </label>\n\n          {suffix && (\n            <span className=\"figma-floating-label-suffix\">{suffix}</span>\n          )}\n        </div>\n      </div>\n\n      {(displayError || helperText || (showCharacterCount && maxLength)) && (\n        <div className=\"figma-floating-label-footer\">\n          {displayError ? (\n            <span className=\"figma-floating-label-error\">{errorMessage}</span>\n          ) : (\n            helperText && (\n              <span className=\"figma-floating-label-helper\">{helperText}</span>\n            )\n          )}\n          \n          {showCharacterCount && maxLength && (\n            <span className={`figma-floating-label-counter ${characterCount > maxLength ? 'error' : ''}`}>\n              {characterCount}/{maxLength}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default FloatingLabelInput;\n"],"names":["Button","children","onClick","type","disabled","className","props","jsx","PrimaryButton","SecondaryButton","TertiaryButton","Input","placeholder","value","onChange","id","name","FloatingLabelInput","label","required","error","errorMessage","helperText","suffix","maxLength","showCharacterCount","onFocus","onBlur","isFocused","setIsFocused","useState","hasValue","setHasValue","inputRef","useRef","useEffect","handleFocus","e","handleBlur","handleChange","isLabelFloating","displayError","characterCount","jsxs"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "system-one-design",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "React design system components built from Figma System One Token Demo (Flowbite)",
   "type": "module",
   "main": "./dist/system-one-design.cjs",