@senestia/ui 0.1.0-beta.0190ae9

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/dist/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { Badge } from './stories/Badge';
+export { InputField } from './stories/InputField';
+export type { BadgeProps, BadgeColor, BadgeSize, BadgeType } from './stories/Badge';
+export type { InputFieldProps, InputFieldState, InputFieldSize, InputFieldTrailingIcon, InputFieldCounter, } from './stories/InputField';
+export { grayNeutral, status, ciPrimary, oePrimary, interactive, padding, radius, font, } from './stories/tokens';
+import * as _tokens from './stories/tokens';
+export declare const tokens: typeof _tokens;

package/dist/senestia-ui.es.js

@@ -0,0 +1,681 @@
+import e from "react";
+import { Circle as t, Eye as n, Info as r, Search as i, X as a, XCircle as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region \0rolldown/runtime.js
+var l = Object.defineProperty, u = (e, t) => {
+	let n = {};
+	for (var r in e) l(n, r, {
+		get: e[r],
+		enumerable: !0
+	});
+	return t || l(n, Symbol.toStringTag, { value: "Module" }), n;
+}, d = "Sarabun, sans-serif", f = {
+	Gray: {
+		bg: "#f9fafb",
+		border: "#eaecf0",
+		text: "#06080b",
+		dot: "#667085"
+	},
+	Primary: {
+		bg: "#f4f6f9",
+		border: "#e6ebf2",
+		text: "#1e2b3b",
+		dot: "#6c8fbe"
+	},
+	Error: {
+		bg: "#fef0ef",
+		border: "#fbd2d0",
+		text: "#cc1a11",
+		dot: "#f04438"
+	},
+	Warning: {
+		bg: "#fff9ee",
+		border: "#ffedcc",
+		text: "#db8f02",
+		dot: "#f79009"
+	},
+	Success: {
+		bg: "#f0fdfa",
+		border: "#d2f9f1",
+		text: "#15a686",
+		dot: "#12b76a"
+	},
+	"Blue light": {
+		bg: "#f0f9ff",
+		border: "#b9e6fe",
+		text: "#026aa2",
+		dot: "#0ba5ec"
+	},
+	Blue: {
+		bg: "#eff8ff",
+		border: "#b2ddff",
+		text: "#175cd3",
+		dot: "#2e90fa"
+	},
+	Indigo: {
+		bg: "#eef4ff",
+		border: "#c7d7fe",
+		text: "#3538cd",
+		dot: "#6172f3"
+	},
+	Purple: {
+		bg: "#f4f3ff",
+		border: "#d9d6fe",
+		text: "#5925dc",
+		dot: "#7a5af8"
+	},
+	Pink: {
+		bg: "#fef6fb",
+		border: "#fce7f6",
+		text: "#c11574",
+		dot: "#ee46bc"
+	},
+	Orange: {
+		bg: "#fef6ee",
+		border: "#ffd6ae",
+		text: "#b93815",
+		dot: "#ef6820"
+	},
+	"Gray blue": {
+		bg: "#f8f9fc",
+		border: "#d5d9eb",
+		text: "#363f72",
+		dot: "#717bbc"
+	}
+}, p = {
+	sm: {
+		paddingX: 8,
+		paddingY: 2,
+		paddingXClose: {
+			left: 8,
+			right: 4
+		},
+		paddingXDot: {
+			left: 6,
+			right: 8
+		},
+		paddingPill: 5,
+		fontSize: 12,
+		lineHeight: 18,
+		dotSize: 6,
+		iconSize: 12,
+		closeSize: 12
+	},
+	md: {
+		paddingX: 8,
+		paddingY: 2,
+		paddingXClose: {
+			left: 8,
+			right: 4
+		},
+		paddingXDot: {
+			left: 6,
+			right: 8
+		},
+		paddingPill: 6,
+		fontSize: 14,
+		lineHeight: 20,
+		dotSize: 6,
+		iconSize: 14,
+		closeSize: 14
+	},
+	lg: {
+		paddingX: 12,
+		paddingY: 4,
+		paddingXClose: {
+			left: 12,
+			right: 6
+		},
+		paddingXDot: {
+			left: 8,
+			right: 12
+		},
+		paddingPill: 8,
+		fontSize: 14,
+		lineHeight: 20,
+		dotSize: 8,
+		iconSize: 16,
+		closeSize: 16
+	}
+}, m = ({ label: e = "Label", color: t = "Gray", size: n = "sm", type: r = "Idle", icon: i, onClose: o }) => {
+	let l = f[t], u = p[n], m = {
+		display: "inline-flex",
+		alignItems: "center",
+		backgroundColor: l.bg,
+		border: `1px solid ${l.border}`,
+		borderRadius: 16,
+		boxSizing: "border-box",
+		width: "fit-content",
+		fontFamily: d
+	}, h = {
+		fontSize: u.fontSize,
+		lineHeight: `${u.lineHeight}px`,
+		fontWeight: 500,
+		color: l.text,
+		whiteSpace: "nowrap",
+		fontFamily: d,
+		margin: 0
+	};
+	if (r === "Idle") return /* @__PURE__ */ s("span", {
+		style: {
+			...m,
+			padding: `${u.paddingY}px ${u.paddingX}px`
+		},
+		children: /* @__PURE__ */ s("span", {
+			style: h,
+			children: e
+		})
+	});
+	if (r === "Status Dot") return /* @__PURE__ */ c("span", {
+		style: {
+			...m,
+			gap: 4,
+			paddingTop: u.paddingY,
+			paddingBottom: u.paddingY,
+			paddingLeft: u.paddingXDot.left,
+			paddingRight: u.paddingXDot.right
+		},
+		children: [/* @__PURE__ */ s("span", { style: {
+			display: "inline-block",
+			width: u.dotSize,
+			height: u.dotSize,
+			borderRadius: "50%",
+			backgroundColor: l.dot,
+			flexShrink: 0
+		} }), /* @__PURE__ */ s("span", {
+			style: h,
+			children: e
+		})]
+	});
+	if (r === "Closable") return /* @__PURE__ */ c("span", {
+		style: {
+			...m,
+			gap: 2,
+			paddingTop: u.paddingY,
+			paddingBottom: u.paddingY,
+			paddingLeft: u.paddingXClose.left,
+			paddingRight: u.paddingXClose.right
+		},
+		children: [/* @__PURE__ */ s("span", {
+			style: h,
+			children: e
+		}), /* @__PURE__ */ s("button", {
+			onClick: o,
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				background: "none",
+				border: "none",
+				padding: 2,
+				borderRadius: 3,
+				cursor: "pointer",
+				color: l.text,
+				flexShrink: 0,
+				lineHeight: 1
+			},
+			"aria-label": "Remove",
+			children: /* @__PURE__ */ s(a, {
+				size: u.closeSize,
+				strokeWidth: 2.5
+			})
+		})]
+	});
+	if (r === "Pill color") {
+		let e = i;
+		return /* @__PURE__ */ s("span", {
+			style: {
+				...m,
+				padding: u.paddingPill
+			},
+			children: e ? /* @__PURE__ */ s(e, {
+				size: u.iconSize,
+				color: l.dot,
+				strokeWidth: 2
+			}) : /* @__PURE__ */ s("span", { style: {
+				display: "inline-block",
+				width: u.iconSize,
+				height: u.iconSize,
+				borderRadius: "50%",
+				backgroundColor: l.dot
+			} })
+		});
+	}
+	return null;
+}, h = /* @__PURE__ */ u({
+	ciPrimary: () => v,
+	font: () => C,
+	grayNeutral: () => g,
+	interactive: () => b,
+	oePrimary: () => y,
+	padding: () => x,
+	radius: () => S,
+	status: () => _
+}), g = {
+	fgHigh: "#1B1D22",
+	fgMid: "#6A6E83",
+	fgLow: "#9A9DAD",
+	bgWhite: "#FFFFFF",
+	bgLightgray: "#F8F8F9",
+	bgDisabled: "#F3F4F6",
+	borderMidgray: "#CFD1D9",
+	borderLight: "#EBECEF",
+	borderDisabled: "#E5EAF1",
+	gray300: "#D0D5DD",
+	bgSkeleton: "#EEF0F3",
+	bgDisabledStrong: "#EBECEF"
+}, _ = {
+	error: "#DB1439",
+	warning: "#DB8F02",
+	success: "#15A686"
+}, v = {
+	fgLow: "#C4B3F6",
+	fgHigh: "#802CEB",
+	bgLow: "#D4C9F6",
+	bgMid: "#802CEB",
+	bgHigh: "#5A1DA9",
+	borderMid: "#996CF3",
+	borderHigh: "#802CEB"
+}, y = {
+	fgLow: "#5273A1",
+	fgHigh: "#3A5274",
+	bgLowest: "#EFF2F6",
+	bgLow: "#6E90BF",
+	bgMid: "#5273A1",
+	bgHigh: "#3A5274",
+	borderLowest: "#C6D2E3",
+	borderLow: "#9CB3D2",
+	borderMid: "#5273A1",
+	p300: "#809BBF",
+	linkBlue: "#3C5BD5"
+}, b = {
+	activeBorder: y.fgLow,
+	hoverBorder: "#3B82F6",
+	focusRing: "#D7DFEA",
+	invalidBorder: _.error
+}, x = {
+	"PD-0": 0,
+	"PD-1": 1,
+	"PD-2": 2,
+	"PD-3": 4,
+	"PD-4": 6,
+	"PD-5": 8,
+	"PD-6": 12,
+	"PD-7": 16,
+	"PD-8": 24,
+	"PD-9": 32,
+	"PD-10": 40,
+	"PD-11": 48,
+	"PD-12": 56,
+	"PD-13": 64,
+	"PD-14": 72,
+	"PD-15": 80
+}, S = {
+	"CR-0": 0,
+	"CR-1": 2,
+	"CR-2": 4,
+	"CR-3": 8,
+	"CR-4": 12,
+	"CR-5": 16,
+	"CR-6": 20,
+	"CR-7": 24,
+	"CR-8": 32,
+	"CR-9": 48,
+	"CR-10": 100
+}, C = "Sarabun, sans-serif", w = {
+	sm: {
+		inputHeight: 32,
+		labelFontSize: 12,
+		labelLineHeight: 18,
+		inputFontSize: 14,
+		inputLineHeight: 20,
+		helperFontSize: 12,
+		helperLineHeight: 18,
+		paddingX: 12,
+		iconSize: 16,
+		labelIconSize: 12,
+		labelGap: 4,
+		helperGap: 4,
+		leadingPl: 8,
+		leadingPr: 4,
+		leadingPy: 6,
+		chevronSize: 14,
+		counterPadding: "1px 4px",
+		counterRadius: 4,
+		counterFontSize: 12,
+		counterLineHeight: 18,
+		skeletonLabelH: 18,
+		skeletonInputH: 32
+	},
+	md: {
+		inputHeight: 40,
+		labelFontSize: 14,
+		labelLineHeight: 20,
+		inputFontSize: 16,
+		inputLineHeight: 24,
+		helperFontSize: 14,
+		helperLineHeight: 20,
+		paddingX: 16,
+		iconSize: 20,
+		labelIconSize: 14,
+		labelGap: 6,
+		helperGap: 4,
+		leadingPl: 12,
+		leadingPr: 8,
+		leadingPy: 8,
+		chevronSize: 16,
+		counterPadding: "2px 8px",
+		counterRadius: 8,
+		counterFontSize: 14,
+		counterLineHeight: 20,
+		skeletonLabelH: 20,
+		skeletonInputH: 40
+	},
+	lg: {
+		inputHeight: 48,
+		labelFontSize: 16,
+		labelLineHeight: 24,
+		inputFontSize: 16,
+		inputLineHeight: 24,
+		helperFontSize: 14,
+		helperLineHeight: 20,
+		paddingX: 16,
+		iconSize: 20,
+		labelIconSize: 16,
+		labelGap: 8,
+		helperGap: 6,
+		leadingPl: 16,
+		leadingPr: 8,
+		leadingPy: 12,
+		chevronSize: 16,
+		counterPadding: "2px 8px",
+		counterRadius: 8,
+		counterFontSize: 14,
+		counterLineHeight: 20,
+		skeletonLabelH: 24,
+		skeletonInputH: 48
+	}
+}, T = `0 0 0 2px ${b.focusRing}`, E = (e) => {
+	let t = e ?? "Idle";
+	return {
+		s: t,
+		isInvalid: t.includes("invalid"),
+		isHover: t.includes("hover"),
+		isActive: t === "Active" || t === "Keyboard focus" || t.endsWith("active"),
+		isDisabled: t === "Disable",
+		isSkeleton: t === "Skeleton",
+		isFilled: t.includes("Filled"),
+		isKeyboardFocus: t === "Keyboard focus"
+	};
+}, D = {
+	clear: o,
+	search: i,
+	password: n
+}, O = ({ label: n, required: i = !1, labelRemark: a, placeholder: o = "Placeholder", value: l, onChange: u, helperText: d, errorText: f, state: p = "Idle", size: m = "md", leadingDropdownText: h, leadingIcon: v, counter: y, unit: x, trailingIcon: S, trailingIcons: O, trailingIconSeparator: k = !1 }) => {
+	let { isInvalid: A, isHover: j, isActive: M, isDisabled: N, isSkeleton: P, isKeyboardFocus: F } = E(p), I = w[m], L = A ? b.invalidBorder : M || F ? b.activeBorder : j ? b.hoverBorder : g.borderMidgray, R = N ? g.bgDisabled : j ? g.bgLightgray : g.bgWhite, z = N ? g.fgLow : g.fgMid, B = g.fgLow, V = N ? g.fgLow : g.fgHigh, H = N ? g.fgLow : g.fgHigh, U = N ? g.fgLow : g.fgMid, W = A ? _.error : g.fgMid;
+	if (P) return /* @__PURE__ */ c("div", {
+		style: {
+			width: 320,
+			display: "flex",
+			flexDirection: "column",
+			gap: I.labelGap
+		},
+		children: [/* @__PURE__ */ s("div", { style: {
+			height: I.skeletonLabelH,
+			background: g.bgSkeleton,
+			borderRadius: 6
+		} }), /* @__PURE__ */ s("div", { style: {
+			height: I.skeletonInputH,
+			background: g.bgSkeleton,
+			border: `1px solid ${g.bgSkeleton}`,
+			borderRadius: 24
+		} })]
+	});
+	let G = v === !0 ? t : v || null, K = O?.length ? O : S ? [S] : [], q = A ? f : d, J = {
+		fontFamily: C,
+		fontWeight: 500
+	};
+	return /* @__PURE__ */ c("div", {
+		style: {
+			width: 320,
+			display: "flex",
+			flexDirection: "column",
+			gap: I.helperGap
+		},
+		children: [/* @__PURE__ */ c("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: I.labelGap,
+				width: "100%"
+			},
+			children: [/* @__PURE__ */ c("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 4,
+					width: "100%"
+				},
+				children: [
+					/* @__PURE__ */ c("div", {
+						style: {
+							display: "flex",
+							flex: "1 0 0",
+							alignItems: "center",
+							gap: I.labelIconSize === 12 ? 4 : 6,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ s("span", {
+							style: {
+								...J,
+								fontSize: I.labelFontSize,
+								lineHeight: `${I.labelLineHeight}px`,
+								color: z,
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis"
+							},
+							children: n
+						}), /* @__PURE__ */ s(r, {
+							size: I.labelIconSize,
+							color: U,
+							strokeWidth: 1.8,
+							style: { flexShrink: 0 }
+						})]
+					}),
+					a && /* @__PURE__ */ s("span", {
+						style: {
+							...J,
+							fontSize: I.labelFontSize,
+							lineHeight: `${I.labelLineHeight}px`,
+							color: z,
+							whiteSpace: "nowrap",
+							flexShrink: 0
+						},
+						children: a
+					}),
+					i && /* @__PURE__ */ s("span", {
+						style: {
+							color: _.error,
+							fontWeight: 800,
+							flexShrink: 0
+						},
+						children: "*"
+					})
+				]
+			}), /* @__PURE__ */ c("div", {
+				style: {
+					background: R,
+					border: `1px solid ${L}`,
+					height: I.inputHeight,
+					width: "100%",
+					borderRadius: 24,
+					display: "flex",
+					alignItems: h ? "stretch" : "center",
+					...h ? {} : {
+						gap: 8,
+						padding: `0 ${I.paddingX}px`
+					},
+					overflow: "hidden",
+					boxShadow: M || F ? T : "none",
+					opacity: N ? .7 : 1,
+					boxSizing: "border-box"
+				},
+				children: [h ? /* @__PURE__ */ c("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 4,
+						background: g.bgWhite,
+						padding: `${I.leadingPy}px ${I.leadingPr}px ${I.leadingPy}px ${I.leadingPl}px`,
+						flexShrink: 0
+					},
+					children: [/* @__PURE__ */ s("span", {
+						style: {
+							...J,
+							fontSize: I.inputFontSize,
+							lineHeight: `${I.inputLineHeight}px`,
+							color: g.fgHigh,
+							whiteSpace: "nowrap"
+						},
+						children: h
+					}), /* @__PURE__ */ s("svg", {
+						width: I.chevronSize,
+						height: I.chevronSize,
+						viewBox: "0 0 16 16",
+						fill: "none",
+						children: /* @__PURE__ */ s("path", {
+							d: "M4 6L8 10L12 6",
+							stroke: g.fgHigh,
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})]
+				}) : G ? /* @__PURE__ */ s(G, {
+					size: I.iconSize,
+					color: H,
+					strokeWidth: 1.6,
+					style: { flexShrink: 0 }
+				}) : null, /* @__PURE__ */ c("div", {
+					style: {
+						flex: "1 0 0",
+						display: "flex",
+						alignItems: "center",
+						gap: 8,
+						height: "100%",
+						minWidth: 0,
+						...h ? {
+							borderLeft: `1px solid ${g.borderLight}`,
+							padding: "0 12px"
+						} : {}
+					},
+					children: [
+						/* @__PURE__ */ s("div", {
+							style: {
+								flex: "1 0 0",
+								overflow: "hidden",
+								display: "flex",
+								alignItems: "center"
+							},
+							children: /* @__PURE__ */ s("span", {
+								style: {
+									...J,
+									fontSize: I.inputFontSize,
+									lineHeight: `${I.inputLineHeight}px`,
+									color: l ? V : B,
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap",
+									display: "block",
+									width: "100%"
+								},
+								children: l || o
+							})
+						}),
+						y && /* @__PURE__ */ c("div", {
+							style: {
+								background: g.bgLightgray,
+								display: "flex",
+								gap: 2,
+								alignItems: "center",
+								justifyContent: "center",
+								padding: I.counterPadding,
+								borderRadius: I.counterRadius,
+								flexShrink: 0,
+								opacity: N ? .7 : 1
+							},
+							children: [/* @__PURE__ */ s("span", {
+								style: {
+									...J,
+									fontSize: I.counterFontSize,
+									lineHeight: `${I.counterLineHeight}px`,
+									color: g.fgHigh
+								},
+								children: y.value
+							}), /* @__PURE__ */ c("span", {
+								style: {
+									...J,
+									fontSize: I.counterFontSize,
+									lineHeight: `${I.counterLineHeight}px`,
+									color: g.fgMid
+								},
+								children: ["/ ", y.max]
+							})]
+						}),
+						x && /* @__PURE__ */ s("span", {
+							style: {
+								...J,
+								fontSize: I.inputFontSize,
+								lineHeight: `${I.inputLineHeight}px`,
+								color: g.fgHigh,
+								whiteSpace: "nowrap",
+								flexShrink: 0,
+								maxWidth: 64,
+								overflow: "hidden"
+							},
+							children: x
+						}),
+						K.length > 0 && /* @__PURE__ */ s("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 4,
+								flexShrink: 0
+							},
+							children: K.map((t, n) => {
+								let r = D[t];
+								return /* @__PURE__ */ c(e.Fragment, { children: [k && n > 0 && /* @__PURE__ */ s("div", { style: {
+									width: 1,
+									height: I.iconSize,
+									background: g.gray300,
+									flexShrink: 0,
+									alignSelf: "center"
+								} }), /* @__PURE__ */ s(r, {
+									size: I.iconSize,
+									color: H,
+									strokeWidth: 1.6,
+									style: { flexShrink: 0 }
+								})] }, `${t}-${n}`);
+							})
+						})
+					]
+				})]
+			})]
+		}), q && /* @__PURE__ */ s("p", {
+			style: {
+				...J,
+				margin: 0,
+				fontSize: I.helperFontSize,
+				lineHeight: `${I.helperLineHeight}px`,
+				color: W,
+				width: "100%"
+			},
+			children: q
+		})]
+	});
+}, k = h;
+//#endregion
+export { m as Badge, O as InputField, v as ciPrimary, C as font, g as grayNeutral, b as interactive, y as oePrimary, x as padding, S as radius, _ as status, k as tokens };
+
+//# sourceMappingURL=senestia-ui.es.js.map

package/dist/senestia-ui.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"senestia-ui.es.js","names":[],"sources":["../src/stories/Badge.tsx","../src/stories/tokens.ts","../src/stories/InputField.tsx","../src/index.ts"],"sourcesContent":["import React from 'react';\nimport { X } from 'lucide-react';\n\n// ─── Design System Font ──────────────────────────────────────────────────────\nconst font = 'Sarabun, sans-serif';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type BadgeColor =\n  | 'Gray'\n  | 'Primary'\n  | 'Error'\n  | 'Warning'\n  | 'Success'\n  | 'Blue light'\n  | 'Blue'\n  | 'Indigo'\n  | 'Purple'\n  | 'Pink'\n  | 'Orange'\n  | 'Gray blue';\n\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\nexport type BadgeType = 'Idle' | 'Status Dot' | 'Closable' | 'Pill color';\n\nexport interface BadgeProps {\n  /** Badge label text */\n  label?: string;\n  /** Color variant */\n  color?: BadgeColor;\n  /** Size variant */\n  size?: BadgeSize;\n  /** Type / style variant */\n  type?: BadgeType;\n  /** Icon to render inside Pill color type (Lucide icon component) */\n  icon?: React.ElementType;\n  /** Called when close button is clicked (Closable type) */\n  onClose?: () => void;\n}\n\n// ─── Color Tokens ────────────────────────────────────────────────────────────\n\nconst COLOR_TOKENS: Record<\n  BadgeColor,\n  { bg: string; border: string; text: string; dot: string }\n> = {\n  Gray:       { bg: '#f9fafb', border: '#eaecf0', text: '#06080b', dot: '#667085' },\n  Primary:    { bg: '#f4f6f9', border: '#e6ebf2', text: '#1e2b3b', dot: '#6c8fbe' },\n  Error:      { bg: '#fef0ef', border: '#fbd2d0', text: '#cc1a11', dot: '#f04438' },\n  Warning:    { bg: '#fff9ee', border: '#ffedcc', text: '#db8f02', dot: '#f79009' },\n  Success:    { bg: '#f0fdfa', border: '#d2f9f1', text: '#15a686', dot: '#12b76a' },\n  'Blue light': { bg: '#f0f9ff', border: '#b9e6fe', text: '#026aa2', dot: '#0ba5ec' },\n  Blue:       { bg: '#eff8ff', border: '#b2ddff', text: '#175cd3', dot: '#2e90fa' },\n  Indigo:     { bg: '#eef4ff', border: '#c7d7fe', text: '#3538cd', dot: '#6172f3' },\n  Purple:     { bg: '#f4f3ff', border: '#d9d6fe', text: '#5925dc', dot: '#7a5af8' },\n  Pink:       { bg: '#fef6fb', border: '#fce7f6', text: '#c11574', dot: '#ee46bc' },\n  Orange:     { bg: '#fef6ee', border: '#ffd6ae', text: '#b93815', dot: '#ef6820' },\n  'Gray blue':{ bg: '#f8f9fc', border: '#d5d9eb', text: '#363f72', dot: '#717bbc' },\n};\n\n// ─── Size Tokens ─────────────────────────────────────────────────────────────\n\nconst SIZE_TOKENS: Record<\n  BadgeSize,\n  {\n    paddingX: number;\n    paddingY: number;\n    paddingXClose: { left: number; right: number };\n    paddingXDot: { left: number; right: number };\n    paddingPill: number;\n    fontSize: number;\n    lineHeight: number;\n    dotSize: number;\n    iconSize: number;\n    closeSize: number;\n  }\n> = {\n  sm: {\n    paddingX: 8, paddingY: 2,\n    paddingXClose: { left: 8, right: 4 },\n    paddingXDot: { left: 6, right: 8 },\n    paddingPill: 5,\n    fontSize: 12, lineHeight: 18,\n    dotSize: 6, iconSize: 12, closeSize: 12,\n  },\n  md: {\n    paddingX: 8, paddingY: 2,\n    paddingXClose: { left: 8, right: 4 },\n    paddingXDot: { left: 6, right: 8 },\n    paddingPill: 6,\n    fontSize: 14, lineHeight: 20,\n    dotSize: 6, iconSize: 14, closeSize: 14,\n  },\n  lg: {\n    paddingX: 12, paddingY: 4,\n    paddingXClose: { left: 12, right: 6 },\n    paddingXDot: { left: 8, right: 12 },\n    paddingPill: 8,\n    fontSize: 14, lineHeight: 20,\n    dotSize: 8, iconSize: 16, closeSize: 16,\n  },\n};\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const Badge: React.FC<BadgeProps> = ({\n  label = 'Label',\n  color = 'Gray',\n  size = 'sm',\n  type = 'Idle',\n  icon: IconComponent,\n  onClose,\n}) => {\n  const c = COLOR_TOKENS[color];\n  const s = SIZE_TOKENS[size];\n\n  // ── Shared wrapper style ──────────────────────────────────────────────────\n  const baseWrapper: React.CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    backgroundColor: c.bg,\n    border: `1px solid ${c.border}`,\n    borderRadius: 16,\n    boxSizing: 'border-box',\n    width: 'fit-content',\n    fontFamily: font,\n  };\n\n  // ── Text style ────────────────────────────────────────────────────────────\n  const textStyle: React.CSSProperties = {\n    fontSize: s.fontSize,\n    lineHeight: `${s.lineHeight}px`,\n    fontWeight: 500,\n    color: c.text,\n    whiteSpace: 'nowrap',\n    fontFamily: font,\n    margin: 0,\n  };\n\n  // ── Idle ─────────────────────────────────────────────────────────────────\n  if (type === 'Idle') {\n    return (\n      <span\n        style={{\n          ...baseWrapper,\n          padding: `${s.paddingY}px ${s.paddingX}px`,\n        }}\n      >\n        <span style={textStyle}>{label}</span>\n      </span>\n    );\n  }\n\n  // ── Status Dot ────────────────────────────────────────────────────────────\n  if (type === 'Status Dot') {\n    return (\n      <span\n        style={{\n          ...baseWrapper,\n          gap: 4,\n          paddingTop: s.paddingY,\n          paddingBottom: s.paddingY,\n          paddingLeft: s.paddingXDot.left,\n          paddingRight: s.paddingXDot.right,\n        }}\n      >\n        {/* Dot */}\n        <span\n          style={{\n            display: 'inline-block',\n            width: s.dotSize,\n            height: s.dotSize,\n            borderRadius: '50%',\n            backgroundColor: c.dot,\n            flexShrink: 0,\n          }}\n        />\n        <span style={textStyle}>{label}</span>\n      </span>\n    );\n  }\n\n  // ── Closable ──────────────────────────────────────────────────────────────\n  if (type === 'Closable') {\n    return (\n      <span\n        style={{\n          ...baseWrapper,\n          gap: 2,\n          paddingTop: s.paddingY,\n          paddingBottom: s.paddingY,\n          paddingLeft: s.paddingXClose.left,\n          paddingRight: s.paddingXClose.right,\n        }}\n      >\n        <span style={textStyle}>{label}</span>\n        <button\n          onClick={onClose}\n          style={{\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            background: 'none',\n            border: 'none',\n            padding: 2,\n            borderRadius: 3,\n            cursor: 'pointer',\n            color: c.text,\n            flexShrink: 0,\n            lineHeight: 1,\n          }}\n          aria-label=\"Remove\"\n        >\n          <X size={s.closeSize} strokeWidth={2.5} />\n        </button>\n      </span>\n    );\n  }\n\n  // ── Pill color (icon only) ────────────────────────────────────────────────\n  if (type === 'Pill color') {\n    const PillIcon = IconComponent;\n    return (\n      <span\n        style={{\n          ...baseWrapper,\n          padding: s.paddingPill,\n        }}\n      >\n        {PillIcon ? (\n          <PillIcon size={s.iconSize} color={c.dot} strokeWidth={2} />\n        ) : (\n          // Default: colored circle dot\n          <span\n            style={{\n              display: 'inline-block',\n              width: s.iconSize,\n              height: s.iconSize,\n              borderRadius: '50%',\n              backgroundColor: c.dot,\n            }}\n          />\n        )}\n      </span>\n    );\n  }\n\n  return null;\n};\n","/**\n * Senestia Design System — Semantic Color Tokens\n *\n * ┌─────────────────────────────────────────────────────────────┐\n * │  Source: Figma DS-01 · Foundation → Semantic Color          │\n * │  Use these tokens in components instead of raw hex values.   │\n * └─────────────────────────────────────────────────────────────┘\n */\n\n// ─── Gray-Neutral ─────────────────────────────────────────────────────────────\n\nexport const grayNeutral = {\n  /** Semantic/Gray-Neutral/fg/high — primary text, dark icons */\n  fgHigh: '#1B1D22',\n  /** Semantic/Gray-Neutral/fg/mid-on-white — label text, helper text, secondary icons */\n  fgMid: '#6A6E83',\n  /** Semantic/Gray-Neutral/fg/low-on-white — placeholder, disabled text */\n  fgLow: '#9A9DAD',\n\n  /** Semantic/Gray-Neutral/bg/white */\n  bgWhite: '#FFFFFF',\n  /** Semantic/Gray-Neutral/bg/lightgray — counter pill, subtle backgrounds */\n  bgLightgray: '#F8F8F9',\n  /** Semantic/Gray-Neutral/bg/disabled */\n  bgDisabled: '#F3F4F6',\n\n  /** Semantic/Gray-Neutral/border/midgray — default input border */\n  borderMidgray: '#CFD1D9',\n  /** Semantic/Gray-Neutral/border/light — dividers, card borders */\n  borderLight: '#EBECEF',\n  /** Disabled border (checkbox, input) */\n  borderDisabled: '#E5EAF1',\n\n  /** Gray/300 — icon separators */\n  gray300: '#D0D5DD',\n  /** Skeleton loading shimmer */\n  bgSkeleton: '#EEF0F3',\n  /** Strong disabled background (checkbox) */\n  bgDisabledStrong: '#EBECEF',\n} as const;\n\n// ─── Status ───────────────────────────────────────────────────────────────────\n\nexport const status = {\n  /** Error / invalid state */\n  error: '#DB1439',\n  /** Warning */\n  warning: '#DB8F02',\n  /** Success */\n  success: '#15A686',\n} as const;\n\n// ─── CI Primary (Senestia brand purple) ───────────────────────────────────────\n\nexport const ciPrimary = {\n  fgLow:       '#C4B3F6',\n  fgHigh:      '#802CEB',\n  bgLow:       '#D4C9F6',\n  bgMid:       '#802CEB',\n  bgHigh:      '#5A1DA9',\n  borderMid:   '#996CF3',\n  borderHigh:  '#802CEB',\n} as const;\n\n// ─── OE Theme (OE brand blue) ─────────────────────────────────────────────────\n\nexport const oePrimary = {\n  fgLow:       '#5273A1',\n  fgHigh:      '#3A5274',\n  bgLowest:    '#EFF2F6',  // selected item background in pickers\n  bgLow:       '#6E90BF',\n  bgMid:       '#5273A1',\n  bgHigh:      '#3A5274',\n  borderLowest:'#C6D2E3',  // focused item border\n  borderLow:   '#9CB3D2',\n  borderMid:   '#5273A1',\n  /** Primary/300 — supporting/helper text on blue-tinted UI */\n  p300:        '#809BBF',\n  /** Indigo/300 — \"Set to now\" link color */\n  linkBlue:    '#3C5BD5',\n} as const;\n\n// ─── Interactive states ───────────────────────────────────────────────────────\n\nexport const interactive = {\n  /** Active / focused border */\n  activeBorder:   oePrimary.fgLow,   // #5273A1\n  /** Hover border */\n  hoverBorder:    '#3B82F6',\n  /** Focus ring shadow */\n  focusRing:      '#D7DFEA',\n  /** Invalid border */\n  invalidBorder:  status.error,\n} as const;\n\n// ─── Padding tokens (PD) ─────────────────────────────────────────────────────\n\nexport const padding = {\n  'PD-0':  0,\n  'PD-1':  1,\n  'PD-2':  2,\n  'PD-3':  4,\n  'PD-4':  6,\n  'PD-5':  8,\n  'PD-6':  12,\n  'PD-7':  16,\n  'PD-8':  24,\n  'PD-9':  32,\n  'PD-10': 40,\n  'PD-11': 48,\n  'PD-12': 56,\n  'PD-13': 64,\n  'PD-14': 72,\n  'PD-15': 80,\n} as const;\n\n// ─── Corner Radius tokens (CR) ───────────────────────────────────────────────\n\nexport const radius = {\n  'CR-0':  0,\n  'CR-1':  2,\n  'CR-2':  4,\n  'CR-3':  8,\n  'CR-4':  12,\n  'CR-5':  16,\n  'CR-6':  20,\n  'CR-7':  24,\n  'CR-8':  32,\n  'CR-9':  48,\n  'CR-10': 100,\n} as const;\n\n// ─── Typography ───────────────────────────────────────────────────────────────\n\nexport const font = 'Sarabun, sans-serif';\n","import React from 'react';\nimport { Circle, Info, XCircle, Search, Eye } from 'lucide-react';\nimport { grayNeutral, status, interactive, font } from './tokens';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type InputFieldState =\n  | 'Idle'\n  | 'Idle hover'\n  | 'Active'\n  | 'Idle invalid'\n  | 'Idle invalid hover'\n  | 'Idle invalid active'\n  | 'Filled'\n  | 'Filled hover'\n  | 'Filled active'\n  | 'Filled invalid'\n  | 'Filled invalid hover'\n  | 'Filled invalid active'\n  | 'Disable'\n  | 'Keyboard focus'\n  | 'Skeleton';\n\nexport type InputFieldSize = 'sm' | 'md' | 'lg';\n\nexport type InputFieldTrailingIcon = 'clear' | 'password' | 'search';\n\nexport type InputFieldCounter = {\n  value: number;\n  max: number;\n};\n\nexport interface InputFieldProps {\n  /** Label text displayed above the input */\n  label: string;\n  /** Show required asterisk (*) */\n  required?: boolean;\n  /** Remark text next to label e.g. \"(optional)\" */\n  labelRemark?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Current value */\n  value?: string;\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n  /** Helper text below the input (hidden when invalid) */\n  helperText?: string;\n  /** Error message below the input (shown when invalid state) */\n  errorText?: string;\n  /** Visual state from Figma */\n  state?: InputFieldState;\n  /** Input size — affects height, font, and padding */\n  size?: InputFieldSize;\n  /** Leading dropdown prefix text */\n  leadingDropdownText?: string;\n  /**\n   * Leading icon inside the input (left side).\n   * - `true` → default Circle icon\n   * - `React.ElementType` → custom Lucide icon\n   * - `false/undefined` → no icon\n   */\n  leadingIcon?: React.ElementType | boolean;\n  /** Counter pill e.g. `{ value: 0, max: 20 }` */\n  counter?: InputFieldCounter;\n  /** Unit text inside the input */\n  unit?: string;\n  /** Single trailing icon */\n  trailingIcon?: InputFieldTrailingIcon;\n  /** Multiple trailing icons (overrides trailingIcon) */\n  trailingIcons?: InputFieldTrailingIcon[];\n  /** Show separator between trailing icons */\n  trailingIconSeparator?: boolean;\n}\n\n// ─── Design tokens (from Figma) ──────────────────────────────────────────────\n\n/**\n * Size tokens — matched to Figma nodes:\n *   sm (Sm-32):  label C5 12/18  · input C4 14/20  · helper C5 12/18\n *   md (Md-40):  label C4 14/20  · input C3 16/24  · helper C4 14/20\n *   lg (Lg-48):  label C3 16/24  · input C3 16/24  · helper C4 14/20\n *\n * Spacing (per Figma sm node — gap-4 between all elements):\n *   labelGap  = gap between label row and input box\n *   helperGap = gap between input box and helper/error text\n */\nconst sizeTokens = {\n  sm: {\n    inputHeight: 32,\n    labelFontSize: 12, labelLineHeight: 18,\n    inputFontSize: 14, inputLineHeight: 20,\n    helperFontSize: 12, helperLineHeight: 18,\n    paddingX: 12,\n    iconSize: 16,\n    labelIconSize: 12,\n    labelGap: 4,    // label row → input\n    helperGap: 4,   // input → helper text\n    leadingPl: 8, leadingPr: 4, leadingPy: 6,\n    chevronSize: 14,\n    counterPadding: '1px 4px',\n    counterRadius: 4,\n    counterFontSize: 12, counterLineHeight: 18,\n    skeletonLabelH: 18, skeletonInputH: 32,\n  },\n  md: {\n    inputHeight: 40,\n    labelFontSize: 14, labelLineHeight: 20,\n    inputFontSize: 16, inputLineHeight: 24,\n    helperFontSize: 14, helperLineHeight: 20,\n    paddingX: 16,\n    iconSize: 20,\n    labelIconSize: 14,\n    labelGap: 6,    // label row → input\n    helperGap: 4,   // input → helper text\n    leadingPl: 12, leadingPr: 8, leadingPy: 8,\n    chevronSize: 16,\n    counterPadding: '2px 8px',\n    counterRadius: 8,\n    counterFontSize: 14, counterLineHeight: 20,\n    skeletonLabelH: 20, skeletonInputH: 40,\n  },\n  lg: {\n    inputHeight: 48,\n    labelFontSize: 16, labelLineHeight: 24,\n    inputFontSize: 16, inputLineHeight: 24,\n    helperFontSize: 14, helperLineHeight: 20,\n    paddingX: 16,\n    iconSize: 20,\n    labelIconSize: 16,\n    labelGap: 8,    // label row → input\n    helperGap: 6,   // input → helper text\n    leadingPl: 16, leadingPr: 8, leadingPy: 12,\n    chevronSize: 16,\n    counterPadding: '2px 8px',\n    counterRadius: 8,\n    counterFontSize: 14, counterLineHeight: 20,\n    skeletonLabelH: 24, skeletonInputH: 48,\n  },\n} as const;\n\n// ─── State helpers ────────────────────────────────────────────────────────────\n\nconst focusRingStyle = `0 0 0 2px ${interactive.focusRing}`;\n\nconst getStateFlags = (state: InputFieldState | undefined) => {\n  const s = state ?? 'Idle';\n  const isInvalid  = s.includes('invalid');\n  const isHover    = s.includes('hover');\n  const isActive   = s === 'Active' || s === 'Keyboard focus' || s.endsWith('active');\n  const isDisabled = s === 'Disable';\n  const isSkeleton = s === 'Skeleton';\n  const isFilled   = s.includes('Filled');\n  const isKeyboardFocus = s === 'Keyboard focus';\n  return { s, isInvalid, isHover, isActive, isDisabled, isSkeleton, isFilled, isKeyboardFocus };\n};\n\n// ─── Trailing icon map → Lucide ───────────────────────────────────────────────\n\nconst TRAILING_ICON_MAP = {\n  clear:    XCircle,\n  search:   Search,\n  password: Eye,\n} as const;\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const InputField = ({\n  label,\n  required = false,\n  labelRemark,\n  placeholder = 'Placeholder',\n  value,\n  onChange: _onChange,\n  helperText,\n  errorText,\n  state = 'Idle',\n  size = 'md',\n  leadingDropdownText,\n  leadingIcon,\n  counter,\n  unit,\n  trailingIcon,\n  trailingIcons,\n  trailingIconSeparator = false,\n}: InputFieldProps) => {\n  const { isInvalid, isHover, isActive, isDisabled, isSkeleton, isKeyboardFocus } =\n    getStateFlags(state);\n\n  const t = sizeTokens[size];\n\n  // ── Colors — mapped to Semantic/Gray-Neutral tokens ─────────────────────\n  const borderColor = isInvalid\n    ? interactive.invalidBorder             // status.error  #DB1439\n    : isActive || isKeyboardFocus\n      ? interactive.activeBorder            // oePrimary.fgLow  #5273A1\n      : isHover\n        ? interactive.hoverBorder           // #3B82F6\n        : grayNeutral.borderMidgray;        // #CFD1D9\n\n  const background = isDisabled\n    ? grayNeutral.bgDisabled                // #F3F4F6\n    : isHover\n      ? grayNeutral.bgLightgray             // #F8F8F9\n      : grayNeutral.bgWhite;               // #FFFFFF\n\n  // Label text  →  fg/mid-on-white  (disabled → fg/low)\n  const labelColor = isDisabled ? grayNeutral.fgLow : grayNeutral.fgMid;\n\n  // Placeholder  →  fg/low-on-white  (same whether disabled or not)\n  const placeholderColor = grayNeutral.fgLow;                              // #9A9DAD\n\n  // Typed value  →  fg/high  (disabled → fg/low)\n  const valueColor = isDisabled ? grayNeutral.fgLow : grayNeutral.fgHigh; // #1B1D22\n\n  // ── Icon colors (Figma: Semantic/Gray-Neutral/fg/high for input icons) ───\n  // Input leading/trailing icons  →  fg/high  (#1B1D22)\n  const inputIconColor = isDisabled ? grayNeutral.fgLow : grayNeutral.fgHigh;\n  // Label info icon  →  fg/mid  (same as label text, #6A6E83)\n  const labelIconColor = isDisabled ? grayNeutral.fgLow : grayNeutral.fgMid;\n\n  const helperColor = isInvalid ? status.error : grayNeutral.fgMid;       // #6A6E83\n\n  // ── Skeleton ─────────────────────────────────────────────────────────────\n  if (isSkeleton) {\n    return (\n      <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: t.labelGap }}>\n        <div style={{ height: t.skeletonLabelH, background: grayNeutral.bgSkeleton, borderRadius: 6 }} />\n        <div style={{ height: t.skeletonInputH, background: grayNeutral.bgSkeleton, border: `1px solid ${grayNeutral.bgSkeleton}`, borderRadius: 24 }} />\n      </div>\n    );\n  }\n\n  // ── Leading icon resolve ──────────────────────────────────────────────────\n  // true → Circle (Figma default \"Icon/circle\"), component → custom, false → none\n  const LeadingIconComponent: React.ElementType | null =\n    leadingIcon === true\n      ? Circle\n      : leadingIcon\n        ? (leadingIcon as React.ElementType)\n        : null;\n\n  // ── Trailing icons ────────────────────────────────────────────────────────\n  const iconsToRender: InputFieldTrailingIcon[] =\n    trailingIcons?.length ? trailingIcons : trailingIcon ? [trailingIcon] : [];\n\n  // ── Text below input ──────────────────────────────────────────────────────\n  const showText = isInvalid ? errorText : helperText;\n\n  // ── Shared font style ─────────────────────────────────────────────────────\n  const baseFont: React.CSSProperties = { fontFamily: font, fontWeight: 500 };\n\n  return (\n    /*\n     * Outer wrapper — two-level gap structure matching Figma:\n     *   Level 1 (helperGap): separates [label + input block] from [helper text]\n     *   Level 2 (labelGap):  separates [label row] from [input box]\n     */\n    <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: t.helperGap }}>\n\n      {/* ── Level 1: label + input block ────────────────────────────────── */}\n      <div style={{ display: 'flex', flexDirection: 'column', gap: t.labelGap, width: '100%' }}>\n\n        {/* Label row */}\n        <div style={{ display: 'flex', alignItems: 'center', gap: 4, width: '100%' }}>\n          {/* Left: label text + info icon */}\n          <div style={{ display: 'flex', flex: '1 0 0', alignItems: 'center', gap: t.labelIconSize === 12 ? 4 : 6, minWidth: 0 }}>\n            <span\n              style={{\n                ...baseFont,\n                fontSize: t.labelFontSize,\n                lineHeight: `${t.labelLineHeight}px`,\n                color: labelColor,\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n              }}\n            >\n              {label}\n            </span>\n            {/* Info icon — fg/mid-on-white (same shade as label text) */}\n            <Info\n              size={t.labelIconSize}\n              color={labelIconColor}\n              strokeWidth={1.8}\n              style={{ flexShrink: 0 }}\n            />\n          </div>\n\n          {/* Right: remark or required marker */}\n          {labelRemark && (\n            <span\n              style={{\n                ...baseFont,\n                fontSize: t.labelFontSize,\n                lineHeight: `${t.labelLineHeight}px`,\n                color: labelColor,\n                whiteSpace: 'nowrap',\n                flexShrink: 0,\n              }}\n            >\n              {labelRemark}\n            </span>\n          )}\n          {required && (\n            <span style={{ color: status.error, fontWeight: 800, flexShrink: 0 }}>*</span>\n          )}\n        </div>\n\n        {/* Input box */}\n        <div\n          style={{\n            background,\n            border: `1px solid ${borderColor}`,\n            height: t.inputHeight,\n            width: '100%',\n            borderRadius: 24,\n            display: 'flex',\n            alignItems: leadingDropdownText ? 'stretch' : 'center',\n            ...(leadingDropdownText ? {} : { gap: 8, padding: `0 ${t.paddingX}px` }),\n            overflow: 'hidden',\n            boxShadow: isActive || isKeyboardFocus ? focusRingStyle : 'none',\n            opacity: isDisabled ? 0.7 : 1,\n            boxSizing: 'border-box',\n          }}\n        >\n          {/* Leading: dropdown prefix OR icon */}\n          {leadingDropdownText ? (\n            <div\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 4,\n                background: grayNeutral.bgWhite,\n                padding: `${t.leadingPy}px ${t.leadingPr}px ${t.leadingPy}px ${t.leadingPl}px`,\n                flexShrink: 0,\n              }}\n            >\n              <span\n                style={{\n                  ...baseFont,\n                  fontSize: t.inputFontSize,\n                  lineHeight: `${t.inputLineHeight}px`,\n                  color: grayNeutral.fgHigh,\n                  whiteSpace: 'nowrap',\n                }}\n              >\n                {leadingDropdownText}\n              </span>\n              <svg width={t.chevronSize} height={t.chevronSize} viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M4 6L8 10L12 6\" stroke={grayNeutral.fgHigh} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </div>\n          ) : LeadingIconComponent ? (\n            /* Leading icon in input → fg/high (#1B1D22) per Figma */\n            <LeadingIconComponent\n              size={t.iconSize}\n              color={inputIconColor}\n              strokeWidth={1.6}\n              style={{ flexShrink: 0 }}\n            />\n          ) : null}\n\n          {/* Text + accessories area */}\n          <div\n            style={{\n              flex: '1 0 0',\n              display: 'flex',\n              alignItems: 'center',\n              gap: 8,\n              height: '100%',\n              minWidth: 0,\n              ...(leadingDropdownText\n                ? { borderLeft: `1px solid ${grayNeutral.borderLight}`, padding: `0 12px` }\n                : {}),\n            }}\n          >\n            {/* Placeholder / Value text */}\n            <div\n              style={{\n                flex: '1 0 0',\n                overflow: 'hidden',\n                display: 'flex',\n                alignItems: 'center',\n              }}\n            >\n              <span\n                style={{\n                  ...baseFont,\n                  fontSize: t.inputFontSize,\n                  lineHeight: `${t.inputLineHeight}px`,\n                  color: value ? valueColor : placeholderColor,\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  display: 'block',\n                  width: '100%',\n                }}\n              >\n                {value || placeholder}\n              </span>\n            </div>\n\n            {/* Counter pill */}\n            {counter && (\n              <div\n                style={{\n                  background: grayNeutral.bgLightgray,\n                  display: 'flex',\n                  gap: 2,\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  padding: t.counterPadding,\n                  borderRadius: t.counterRadius,\n                  flexShrink: 0,\n                  opacity: isDisabled ? 0.7 : 1,\n                }}\n              >\n                <span\n                  style={{\n                    ...baseFont,\n                    fontSize: t.counterFontSize,\n                    lineHeight: `${t.counterLineHeight}px`,\n                    color: grayNeutral.fgHigh,\n                  }}\n                >\n                  {counter.value}\n                </span>\n                <span\n                  style={{\n                    ...baseFont,\n                    fontSize: t.counterFontSize,\n                    lineHeight: `${t.counterLineHeight}px`,\n                    color: grayNeutral.fgMid,\n                  }}\n                >\n                  / {counter.max}\n                </span>\n              </div>\n            )}\n\n            {/* Unit text */}\n            {unit && (\n              <span\n                style={{\n                  ...baseFont,\n                  fontSize: t.inputFontSize,\n                  lineHeight: `${t.inputLineHeight}px`,\n                  color: grayNeutral.fgHigh,\n                  whiteSpace: 'nowrap',\n                  flexShrink: 0,\n                  maxWidth: 64,\n                  overflow: 'hidden',\n                }}\n              >\n                {unit}\n              </span>\n            )}\n\n            {/* Trailing icons */}\n            {iconsToRender.length > 0 && (\n              <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>\n                {iconsToRender.map((ic, idx) => {\n                  const TrailingIcon = TRAILING_ICON_MAP[ic];\n                  return (\n                    <React.Fragment key={`${ic}-${idx}`}>\n                      {trailingIconSeparator && idx > 0 && (\n                        <div\n                          style={{\n                            width: 1,\n                            height: t.iconSize,\n                            background: grayNeutral.gray300,\n                            flexShrink: 0,\n                            alignSelf: 'center',\n                          }}\n                        />\n                      )}\n                      {/* Trailing icon → fg/high (#1B1D22) per Figma */}\n                      <TrailingIcon\n                        size={t.iconSize}\n                        color={inputIconColor}\n                        strokeWidth={1.6}\n                        style={{ flexShrink: 0 }}\n                      />\n                    </React.Fragment>\n                  );\n                })}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* ── Level 1: helper / error text ────────────────────────────────── */}\n      {/*\n       * No extra margin here — the outer helperGap (4px sm / 4px md / 6px lg)\n       * from the flex container already provides the correct spacing from Figma.\n       */}\n      {showText && (\n        <p\n          style={{\n            ...baseFont,\n            margin: 0,\n            fontSize: t.helperFontSize,\n            lineHeight: `${t.helperLineHeight}px`,\n            color: helperColor,\n            width: '100%',\n          }}\n        >\n          {showText}\n        </p>\n      )}\n    </div>\n  );\n};\n","// ─── Senestia Design System — Public API ─────────────────────────────────────\n//\n//  import { Badge, InputField, tokens } from '@senestia/ui'\n//\n// ─────────────────────────────────────────────────────────────────────────────\n\n// ── Components ────────────────────────────────────────────────────────────────\nexport { Badge } from './stories/Badge';\nexport { InputField } from './stories/InputField';\n\n// ── Component types ───────────────────────────────────────────────────────────\nexport type { BadgeProps, BadgeColor, BadgeSize, BadgeType } from './stories/Badge';\nexport type {\n  InputFieldProps,\n  InputFieldState,\n  InputFieldSize,\n  InputFieldTrailingIcon,\n  InputFieldCounter,\n} from './stories/InputField';\n\n// ── Design Tokens ─────────────────────────────────────────────────────────────\nexport {\n  // Colors\n  grayNeutral,\n  status,\n  ciPrimary,\n  oePrimary,\n  interactive,\n  // Spacing\n  padding,\n  radius,\n  // Typography\n  font,\n} from './stories/tokens';\n\n// ── Tokens namespace (for tree-shaking friendly usage) ────────────────────────\nimport * as _tokens from './stories/tokens';\nexport const tokens = _tokens;\n"],"mappings":"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"}

package/dist/senestia-ui.umd.js

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`lucide-react`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`lucide-react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.SenestiaUI={},e.React,e.LucideReact,e.react_jsx_runtime))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t)=>{let n={};for(var r in e)a(n,r,{get:e[r],enumerable:!0});return t||a(n,Symbol.toStringTag,{value:`Module`}),n},d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:i(c(e)),d(t||!e||!e.__esModule?a(n,`default`,{value:e,enumerable:!0}):n,e)))(t);var f=`Sarabun, sans-serif`,p={Gray:{bg:`#f9fafb`,border:`#eaecf0`,text:`#06080b`,dot:`#667085`},Primary:{bg:`#f4f6f9`,border:`#e6ebf2`,text:`#1e2b3b`,dot:`#6c8fbe`},Error:{bg:`#fef0ef`,border:`#fbd2d0`,text:`#cc1a11`,dot:`#f04438`},Warning:{bg:`#fff9ee`,border:`#ffedcc`,text:`#db8f02`,dot:`#f79009`},Success:{bg:`#f0fdfa`,border:`#d2f9f1`,text:`#15a686`,dot:`#12b76a`},"Blue light":{bg:`#f0f9ff`,border:`#b9e6fe`,text:`#026aa2`,dot:`#0ba5ec`},Blue:{bg:`#eff8ff`,border:`#b2ddff`,text:`#175cd3`,dot:`#2e90fa`},Indigo:{bg:`#eef4ff`,border:`#c7d7fe`,text:`#3538cd`,dot:`#6172f3`},Purple:{bg:`#f4f3ff`,border:`#d9d6fe`,text:`#5925dc`,dot:`#7a5af8`},Pink:{bg:`#fef6fb`,border:`#fce7f6`,text:`#c11574`,dot:`#ee46bc`},Orange:{bg:`#fef6ee`,border:`#ffd6ae`,text:`#b93815`,dot:`#ef6820`},"Gray blue":{bg:`#f8f9fc`,border:`#d5d9eb`,text:`#363f72`,dot:`#717bbc`}},m={sm:{paddingX:8,paddingY:2,paddingXClose:{left:8,right:4},paddingXDot:{left:6,right:8},paddingPill:5,fontSize:12,lineHeight:18,dotSize:6,iconSize:12,closeSize:12},md:{paddingX:8,paddingY:2,paddingXClose:{left:8,right:4},paddingXDot:{left:6,right:8},paddingPill:6,fontSize:14,lineHeight:20,dotSize:6,iconSize:14,closeSize:14},lg:{paddingX:12,paddingY:4,paddingXClose:{left:12,right:6},paddingXDot:{left:8,right:12},paddingPill:8,fontSize:14,lineHeight:20,dotSize:8,iconSize:16,closeSize:16}},h=({label:e=`Label`,color:t=`Gray`,size:i=`sm`,type:a=`Idle`,icon:o,onClose:s})=>{let c=p[t],l=m[i],u={display:`inline-flex`,alignItems:`center`,backgroundColor:c.bg,border:`1px solid ${c.border}`,borderRadius:16,boxSizing:`border-box`,width:`fit-content`,fontFamily:f},d={fontSize:l.fontSize,lineHeight:`${l.lineHeight}px`,fontWeight:500,color:c.text,whiteSpace:`nowrap`,fontFamily:f,margin:0};if(a===`Idle`)return(0,r.jsx)(`span`,{style:{...u,padding:`${l.paddingY}px ${l.paddingX}px`},children:(0,r.jsx)(`span`,{style:d,children:e})});if(a===`Status Dot`)return(0,r.jsxs)(`span`,{style:{...u,gap:4,paddingTop:l.paddingY,paddingBottom:l.paddingY,paddingLeft:l.paddingXDot.left,paddingRight:l.paddingXDot.right},children:[(0,r.jsx)(`span`,{style:{display:`inline-block`,width:l.dotSize,height:l.dotSize,borderRadius:`50%`,backgroundColor:c.dot,flexShrink:0}}),(0,r.jsx)(`span`,{style:d,children:e})]});if(a===`Closable`)return(0,r.jsxs)(`span`,{style:{...u,gap:2,paddingTop:l.paddingY,paddingBottom:l.paddingY,paddingLeft:l.paddingXClose.left,paddingRight:l.paddingXClose.right},children:[(0,r.jsx)(`span`,{style:d,children:e}),(0,r.jsx)(`button`,{onClick:s,style:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,background:`none`,border:`none`,padding:2,borderRadius:3,cursor:`pointer`,color:c.text,flexShrink:0,lineHeight:1},"aria-label":`Remove`,children:(0,r.jsx)(n.X,{size:l.closeSize,strokeWidth:2.5})})]});if(a===`Pill color`){let e=o;return(0,r.jsx)(`span`,{style:{...u,padding:l.paddingPill},children:e?(0,r.jsx)(e,{size:l.iconSize,color:c.dot,strokeWidth:2}):(0,r.jsx)(`span`,{style:{display:`inline-block`,width:l.iconSize,height:l.iconSize,borderRadius:`50%`,backgroundColor:c.dot}})})}return null},g=u({ciPrimary:()=>y,font:()=>w,grayNeutral:()=>_,interactive:()=>x,oePrimary:()=>b,padding:()=>S,radius:()=>C,status:()=>v}),_={fgHigh:`#1B1D22`,fgMid:`#6A6E83`,fgLow:`#9A9DAD`,bgWhite:`#FFFFFF`,bgLightgray:`#F8F8F9`,bgDisabled:`#F3F4F6`,borderMidgray:`#CFD1D9`,borderLight:`#EBECEF`,borderDisabled:`#E5EAF1`,gray300:`#D0D5DD`,bgSkeleton:`#EEF0F3`,bgDisabledStrong:`#EBECEF`},v={error:`#DB1439`,warning:`#DB8F02`,success:`#15A686`},y={fgLow:`#C4B3F6`,fgHigh:`#802CEB`,bgLow:`#D4C9F6`,bgMid:`#802CEB`,bgHigh:`#5A1DA9`,borderMid:`#996CF3`,borderHigh:`#802CEB`},b={fgLow:`#5273A1`,fgHigh:`#3A5274`,bgLowest:`#EFF2F6`,bgLow:`#6E90BF`,bgMid:`#5273A1`,bgHigh:`#3A5274`,borderLowest:`#C6D2E3`,borderLow:`#9CB3D2`,borderMid:`#5273A1`,p300:`#809BBF`,linkBlue:`#3C5BD5`},x={activeBorder:b.fgLow,hoverBorder:`#3B82F6`,focusRing:`#D7DFEA`,invalidBorder:v.error},S={"PD-0":0,"PD-1":1,"PD-2":2,"PD-3":4,"PD-4":6,"PD-5":8,"PD-6":12,"PD-7":16,"PD-8":24,"PD-9":32,"PD-10":40,"PD-11":48,"PD-12":56,"PD-13":64,"PD-14":72,"PD-15":80},C={"CR-0":0,"CR-1":2,"CR-2":4,"CR-3":8,"CR-4":12,"CR-5":16,"CR-6":20,"CR-7":24,"CR-8":32,"CR-9":48,"CR-10":100},w=`Sarabun, sans-serif`,T={sm:{inputHeight:32,labelFontSize:12,labelLineHeight:18,inputFontSize:14,inputLineHeight:20,helperFontSize:12,helperLineHeight:18,paddingX:12,iconSize:16,labelIconSize:12,labelGap:4,helperGap:4,leadingPl:8,leadingPr:4,leadingPy:6,chevronSize:14,counterPadding:`1px 4px`,counterRadius:4,counterFontSize:12,counterLineHeight:18,skeletonLabelH:18,skeletonInputH:32},md:{inputHeight:40,labelFontSize:14,labelLineHeight:20,inputFontSize:16,inputLineHeight:24,helperFontSize:14,helperLineHeight:20,paddingX:16,iconSize:20,labelIconSize:14,labelGap:6,helperGap:4,leadingPl:12,leadingPr:8,leadingPy:8,chevronSize:16,counterPadding:`2px 8px`,counterRadius:8,counterFontSize:14,counterLineHeight:20,skeletonLabelH:20,skeletonInputH:40},lg:{inputHeight:48,labelFontSize:16,labelLineHeight:24,inputFontSize:16,inputLineHeight:24,helperFontSize:14,helperLineHeight:20,paddingX:16,iconSize:20,labelIconSize:16,labelGap:8,helperGap:6,leadingPl:16,leadingPr:8,leadingPy:12,chevronSize:16,counterPadding:`2px 8px`,counterRadius:8,counterFontSize:14,counterLineHeight:20,skeletonLabelH:24,skeletonInputH:48}},E=`0 0 0 2px ${x.focusRing}`,D=e=>{let t=e??`Idle`;return{s:t,isInvalid:t.includes(`invalid`),isHover:t.includes(`hover`),isActive:t===`Active`||t===`Keyboard focus`||t.endsWith(`active`),isDisabled:t===`Disable`,isSkeleton:t===`Skeleton`,isFilled:t.includes(`Filled`),isKeyboardFocus:t===`Keyboard focus`}},O={clear:n.XCircle,search:n.Search,password:n.Eye},k=({label:e,required:i=!1,labelRemark:a,placeholder:o=`Placeholder`,value:s,onChange:c,helperText:l,errorText:u,state:d=`Idle`,size:f=`md`,leadingDropdownText:p,leadingIcon:m,counter:h,unit:g,trailingIcon:y,trailingIcons:b,trailingIconSeparator:S=!1})=>{let{isInvalid:C,isHover:k,isActive:A,isDisabled:j,isSkeleton:M,isKeyboardFocus:N}=D(d),P=T[f],F=C?x.invalidBorder:A||N?x.activeBorder:k?x.hoverBorder:_.borderMidgray,I=j?_.bgDisabled:k?_.bgLightgray:_.bgWhite,L=j?_.fgLow:_.fgMid,R=_.fgLow,z=j?_.fgLow:_.fgHigh,B=j?_.fgLow:_.fgHigh,V=j?_.fgLow:_.fgMid,H=C?v.error:_.fgMid;if(M)return(0,r.jsxs)(`div`,{style:{width:320,display:`flex`,flexDirection:`column`,gap:P.labelGap},children:[(0,r.jsx)(`div`,{style:{height:P.skeletonLabelH,background:_.bgSkeleton,borderRadius:6}}),(0,r.jsx)(`div`,{style:{height:P.skeletonInputH,background:_.bgSkeleton,border:`1px solid ${_.bgSkeleton}`,borderRadius:24}})]});let U=m===!0?n.Circle:m||null,W=b?.length?b:y?[y]:[],G=C?u:l,K={fontFamily:w,fontWeight:500};return(0,r.jsxs)(`div`,{style:{width:320,display:`flex`,flexDirection:`column`,gap:P.helperGap},children:[(0,r.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:P.labelGap,width:`100%`},children:[(0,r.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:4,width:`100%`},children:[(0,r.jsxs)(`div`,{style:{display:`flex`,flex:`1 0 0`,alignItems:`center`,gap:P.labelIconSize===12?4:6,minWidth:0},children:[(0,r.jsx)(`span`,{style:{...K,fontSize:P.labelFontSize,lineHeight:`${P.labelLineHeight}px`,color:L,whiteSpace:`nowrap`,overflow:`hidden`,textOverflow:`ellipsis`},children:e}),(0,r.jsx)(n.Info,{size:P.labelIconSize,color:V,strokeWidth:1.8,style:{flexShrink:0}})]}),a&&(0,r.jsx)(`span`,{style:{...K,fontSize:P.labelFontSize,lineHeight:`${P.labelLineHeight}px`,color:L,whiteSpace:`nowrap`,flexShrink:0},children:a}),i&&(0,r.jsx)(`span`,{style:{color:v.error,fontWeight:800,flexShrink:0},children:`*`})]}),(0,r.jsxs)(`div`,{style:{background:I,border:`1px solid ${F}`,height:P.inputHeight,width:`100%`,borderRadius:24,display:`flex`,alignItems:p?`stretch`:`center`,...p?{}:{gap:8,padding:`0 ${P.paddingX}px`},overflow:`hidden`,boxShadow:A||N?E:`none`,opacity:j?.7:1,boxSizing:`border-box`},children:[p?(0,r.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:4,background:_.bgWhite,padding:`${P.leadingPy}px ${P.leadingPr}px ${P.leadingPy}px ${P.leadingPl}px`,flexShrink:0},children:[(0,r.jsx)(`span`,{style:{...K,fontSize:P.inputFontSize,lineHeight:`${P.inputLineHeight}px`,color:_.fgHigh,whiteSpace:`nowrap`},children:p}),(0,r.jsx)(`svg`,{width:P.chevronSize,height:P.chevronSize,viewBox:`0 0 16 16`,fill:`none`,children:(0,r.jsx)(`path`,{d:`M4 6L8 10L12 6`,stroke:_.fgHigh,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})]}):U?(0,r.jsx)(U,{size:P.iconSize,color:B,strokeWidth:1.6,style:{flexShrink:0}}):null,(0,r.jsxs)(`div`,{style:{flex:`1 0 0`,display:`flex`,alignItems:`center`,gap:8,height:`100%`,minWidth:0,...p?{borderLeft:`1px solid ${_.borderLight}`,padding:`0 12px`}:{}},children:[(0,r.jsx)(`div`,{style:{flex:`1 0 0`,overflow:`hidden`,display:`flex`,alignItems:`center`},children:(0,r.jsx)(`span`,{style:{...K,fontSize:P.inputFontSize,lineHeight:`${P.inputLineHeight}px`,color:s?z:R,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,display:`block`,width:`100%`},children:s||o})}),h&&(0,r.jsxs)(`div`,{style:{background:_.bgLightgray,display:`flex`,gap:2,alignItems:`center`,justifyContent:`center`,padding:P.counterPadding,borderRadius:P.counterRadius,flexShrink:0,opacity:j?.7:1},children:[(0,r.jsx)(`span`,{style:{...K,fontSize:P.counterFontSize,lineHeight:`${P.counterLineHeight}px`,color:_.fgHigh},children:h.value}),(0,r.jsxs)(`span`,{style:{...K,fontSize:P.counterFontSize,lineHeight:`${P.counterLineHeight}px`,color:_.fgMid},children:[`/ `,h.max]})]}),g&&(0,r.jsx)(`span`,{style:{...K,fontSize:P.inputFontSize,lineHeight:`${P.inputLineHeight}px`,color:_.fgHigh,whiteSpace:`nowrap`,flexShrink:0,maxWidth:64,overflow:`hidden`},children:g}),W.length>0&&(0,r.jsx)(`div`,{style:{display:`flex`,alignItems:`center`,gap:4,flexShrink:0},children:W.map((e,n)=>{let i=O[e];return(0,r.jsxs)(t.default.Fragment,{children:[S&&n>0&&(0,r.jsx)(`div`,{style:{width:1,height:P.iconSize,background:_.gray300,flexShrink:0,alignSelf:`center`}}),(0,r.jsx)(i,{size:P.iconSize,color:B,strokeWidth:1.6,style:{flexShrink:0}})]},`${e}-${n}`)})})]})]})]}),G&&(0,r.jsx)(`p`,{style:{...K,margin:0,fontSize:P.helperFontSize,lineHeight:`${P.helperLineHeight}px`,color:H,width:`100%`},children:G})]})},A=g;e.Badge=h,e.InputField=k,e.ciPrimary=y,e.font=w,e.grayNeutral=_,e.interactive=x,e.oePrimary=b,e.padding=S,e.radius=C,e.status=v,e.tokens=A});
+//# sourceMappingURL=senestia-ui.umd.js.map

package/dist/senestia-ui.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"senestia-ui.umd.js","names":[],"sources":["../src/stories/Badge.tsx","../src/stories/tokens.ts","../src/stories/InputField.tsx","../src/index.ts"],"sourcesContent":["import React from 'react';\nimport { X } from 'lucide-react';\n\n// ─── Design System Font ──────────────────────────────────────────────────────\nconst font = 'Sarabun, sans-serif';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type BadgeColor =\n  | 'Gray'\n  | 'Primary'\n  | 'Error'\n  | 'Warning'\n  | 'Success'\n  | 'Blue light'\n  | 'Blue'\n  | 'Indigo'\n  | 'Purple'\n  | 'Pink'\n  | 'Orange'\n  | 'Gray blue';\n\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\nexport type BadgeType = 'Idle' | 'Status Dot' | 'Closable' | 'Pill color';\n\nexport interface BadgeProps {\n  /** Badge label text */\n  label?: string;\n  /** Color variant */\n  color?: BadgeColor;\n  /** Size variant */\n  size?: BadgeSize;\n  /** Type / style variant */\n  type?: BadgeType;\n  /** Icon to render inside Pill color type (Lucide icon component) */\n  icon?: React.ElementType;\n  /** Called when close button is clicked (Closable type) */\n  onClose?: () => void;\n}\n\n// ─── Color Tokens ────────────────────────────────────────────────────────────\n\nconst COLOR_TOKENS: Record<\n  BadgeColor,\n  { bg: string; border: string; text: string; dot: string }\n> = {\n  Gray:       { bg: '#f9fafb', border: '#eaecf0', text: '#06080b', dot: '#667085' },\n  Primary:    { bg: '#f4f6f9', border: '#e6ebf2', text: '#1e2b3b', dot: '#6c8fbe' },\n  Error:      { bg: '#fef0ef', border: '#fbd2d0', text: '#cc1a11', dot: '#f04438' },\n  Warning:    { bg: '#fff9ee', border: '#ffedcc', text: '#db8f02', dot: '#f79009' },\n  Success:    { bg: '#f0fdfa', border: '#d2f9f1', text: '#15a686', dot: '#12b76a' },\n  'Blue light': { bg: '#f0f9ff', border: '#b9e6fe', text: '#026aa2', dot: '#0ba5ec' },\n  Blue:       { bg: '#eff8ff', border: '#b2ddff', text: '#175cd3', dot: '#2e90fa' },\n  Indigo:     { bg: '#eef4ff', border: '#c7d7fe', text: '#3538cd', dot: '#6172f3' },\n  Purple:     { bg: '#f4f3ff', border: '#d9d6fe', text: '#5925dc', dot: '#7a5af8' },\n  Pink:       { bg: '#fef6fb', border: '#fce7f6', text: '#c11574', dot: '#ee46bc' },\n  Orange:     { bg: '#fef6ee', border: '#ffd6ae', text: '#b93815', dot: '#ef6820' },\n  'Gray blue':{ bg: '#f8f9fc', border: '#d5d9eb', text: '#363f72', dot: '#717bbc' },\n};\n\n// ─── Size Tokens ─────────────────────────────────────────────────────────────\n\nconst SIZE_TOKENS: Record<\n  BadgeSize,\n  {\n    paddingX: number;\n    paddingY: number;\n    paddingXClose: { left: number; right: number };\n    paddingXDot: { left: number; right: number };\n    paddingPill: number;\n    fontSize: number;\n    lineHeight: number;\n    dotSize: number;\n    iconSize: number;\n    closeSize: number;\n  }\n> = {\n  sm: {\n    paddingX: 8, paddingY: 2,\n    paddingXClose: { left: 8, right: 4 },\n    paddingXDot: { left: 6, right: 8 },\n    paddingPill: 5,\n    fontSize: 12, lineHeight: 18,\n    dotSize: 6, iconSize: 12, closeSize: 12,\n  },\n  md: {\n    paddingX: 8, paddingY: 2,\n    paddingXClose: { left: 8, right: 4 },\n    paddingXDot: { left: 6, right: 8 },\n    paddingPill: 6,\n    fontSize: 14, lineHeight: 20,\n    dotSize: 6, iconSize: 14, closeSize: 14,\n  },\n  lg: {\n    paddingX: 12, paddingY: 4,\n    paddingXClose: { left: 12, right: 6 },\n    paddingXDot: { left: 8, right: 12 },\n    paddingPill: 8,\n    fontSize: 14, lineHeight: 20,\n    dotSize: 8, iconSize: 16, closeSize: 16,\n  },\n};\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const Badge: React.FC<BadgeProps> = ({\n  label = 'Label',\n  color = 'Gray',\n  size = 'sm',\n  type = 'Idle',\n  icon: IconComponent,\n  onClose,\n}) => {\n  const c = COLOR_TOKENS[color];\n  const s = SIZE_TOKENS[size];\n\n  // ── Shared wrapper style ──────────────────────────────────────────────────\n  const baseWrapper: React.CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    backgroundColor: c.bg,\n    border: `1px solid ${c.border}`,\n    borderRadius: 16,\n    boxSizing: 'border-box',\n    width: 'fit-content',\n    fontFamily: font,\n  };\n\n  // ── Text style ────────────────────────────────────────────────────────────\n  const textStyle: React.CSSProperties = {\n    fontSize: s.fontSize,\n    lineHeight: `${s.lineHeight}px`,\n    fontWeight: 500,\n    color: c.text,\n    whiteSpace: 'nowrap',\n    fontFamily: font,\n    margin: 0,\n  };\n\n  // ── Idle ─────────────────────────────────────────────────────────────────\n  if (type === 'Idle') {\n    return (\n      <span\n        style={{\n          ...baseWrapper,\n          padding: `${s.paddingY}px ${s.paddingX}px`,\n        }}\n      >\n        <span style={textStyle}>{label}</span>\n      </span>\n    );\n  }\n\n  // ── Status Dot ────────────────────────────────────────────────────────────\n  if (type === 'Status Dot') {\n    return (\n      <span\n        style={{\n          ...baseWrapper,\n          gap: 4,\n          paddingTop: s.paddingY,\n          paddingBottom: s.paddingY,\n          paddingLeft: s.paddingXDot.left,\n          paddingRight: s.paddingXDot.right,\n        }}\n      >\n        {/* Dot */}\n        <span\n          style={{\n            display: 'inline-block',\n            width: s.dotSize,\n            height: s.dotSize,\n            borderRadius: '50%',\n            backgroundColor: c.dot,\n            flexShrink: 0,\n          }}\n        />\n        <span style={textStyle}>{label}</span>\n      </span>\n    );\n  }\n\n  // ── Closable ──────────────────────────────────────────────────────────────\n  if (type === 'Closable') {\n    return (\n      <span\n        style={{\n          ...baseWrapper,\n          gap: 2,\n          paddingTop: s.paddingY,\n          paddingBottom: s.paddingY,\n          paddingLeft: s.paddingXClose.left,\n          paddingRight: s.paddingXClose.right,\n        }}\n      >\n        <span style={textStyle}>{label}</span>\n        <button\n          onClick={onClose}\n          style={{\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            background: 'none',\n            border: 'none',\n            padding: 2,\n            borderRadius: 3,\n            cursor: 'pointer',\n            color: c.text,\n            flexShrink: 0,\n            lineHeight: 1,\n          }}\n          aria-label=\"Remove\"\n        >\n          <X size={s.closeSize} strokeWidth={2.5} />\n        </button>\n      </span>\n    );\n  }\n\n  // ── Pill color (icon only) ────────────────────────────────────────────────\n  if (type === 'Pill color') {\n    const PillIcon = IconComponent;\n    return (\n      <span\n        style={{\n          ...baseWrapper,\n          padding: s.paddingPill,\n        }}\n      >\n        {PillIcon ? (\n          <PillIcon size={s.iconSize} color={c.dot} strokeWidth={2} />\n        ) : (\n          // Default: colored circle dot\n          <span\n            style={{\n              display: 'inline-block',\n              width: s.iconSize,\n              height: s.iconSize,\n              borderRadius: '50%',\n              backgroundColor: c.dot,\n            }}\n          />\n        )}\n      </span>\n    );\n  }\n\n  return null;\n};\n","/**\n * Senestia Design System — Semantic Color Tokens\n *\n * ┌─────────────────────────────────────────────────────────────┐\n * │  Source: Figma DS-01 · Foundation → Semantic Color          │\n * │  Use these tokens in components instead of raw hex values.   │\n * └─────────────────────────────────────────────────────────────┘\n */\n\n// ─── Gray-Neutral ─────────────────────────────────────────────────────────────\n\nexport const grayNeutral = {\n  /** Semantic/Gray-Neutral/fg/high — primary text, dark icons */\n  fgHigh: '#1B1D22',\n  /** Semantic/Gray-Neutral/fg/mid-on-white — label text, helper text, secondary icons */\n  fgMid: '#6A6E83',\n  /** Semantic/Gray-Neutral/fg/low-on-white — placeholder, disabled text */\n  fgLow: '#9A9DAD',\n\n  /** Semantic/Gray-Neutral/bg/white */\n  bgWhite: '#FFFFFF',\n  /** Semantic/Gray-Neutral/bg/lightgray — counter pill, subtle backgrounds */\n  bgLightgray: '#F8F8F9',\n  /** Semantic/Gray-Neutral/bg/disabled */\n  bgDisabled: '#F3F4F6',\n\n  /** Semantic/Gray-Neutral/border/midgray — default input border */\n  borderMidgray: '#CFD1D9',\n  /** Semantic/Gray-Neutral/border/light — dividers, card borders */\n  borderLight: '#EBECEF',\n  /** Disabled border (checkbox, input) */\n  borderDisabled: '#E5EAF1',\n\n  /** Gray/300 — icon separators */\n  gray300: '#D0D5DD',\n  /** Skeleton loading shimmer */\n  bgSkeleton: '#EEF0F3',\n  /** Strong disabled background (checkbox) */\n  bgDisabledStrong: '#EBECEF',\n} as const;\n\n// ─── Status ───────────────────────────────────────────────────────────────────\n\nexport const status = {\n  /** Error / invalid state */\n  error: '#DB1439',\n  /** Warning */\n  warning: '#DB8F02',\n  /** Success */\n  success: '#15A686',\n} as const;\n\n// ─── CI Primary (Senestia brand purple) ───────────────────────────────────────\n\nexport const ciPrimary = {\n  fgLow:       '#C4B3F6',\n  fgHigh:      '#802CEB',\n  bgLow:       '#D4C9F6',\n  bgMid:       '#802CEB',\n  bgHigh:      '#5A1DA9',\n  borderMid:   '#996CF3',\n  borderHigh:  '#802CEB',\n} as const;\n\n// ─── OE Theme (OE brand blue) ─────────────────────────────────────────────────\n\nexport const oePrimary = {\n  fgLow:       '#5273A1',\n  fgHigh:      '#3A5274',\n  bgLowest:    '#EFF2F6',  // selected item background in pickers\n  bgLow:       '#6E90BF',\n  bgMid:       '#5273A1',\n  bgHigh:      '#3A5274',\n  borderLowest:'#C6D2E3',  // focused item border\n  borderLow:   '#9CB3D2',\n  borderMid:   '#5273A1',\n  /** Primary/300 — supporting/helper text on blue-tinted UI */\n  p300:        '#809BBF',\n  /** Indigo/300 — \"Set to now\" link color */\n  linkBlue:    '#3C5BD5',\n} as const;\n\n// ─── Interactive states ───────────────────────────────────────────────────────\n\nexport const interactive = {\n  /** Active / focused border */\n  activeBorder:   oePrimary.fgLow,   // #5273A1\n  /** Hover border */\n  hoverBorder:    '#3B82F6',\n  /** Focus ring shadow */\n  focusRing:      '#D7DFEA',\n  /** Invalid border */\n  invalidBorder:  status.error,\n} as const;\n\n// ─── Padding tokens (PD) ─────────────────────────────────────────────────────\n\nexport const padding = {\n  'PD-0':  0,\n  'PD-1':  1,\n  'PD-2':  2,\n  'PD-3':  4,\n  'PD-4':  6,\n  'PD-5':  8,\n  'PD-6':  12,\n  'PD-7':  16,\n  'PD-8':  24,\n  'PD-9':  32,\n  'PD-10': 40,\n  'PD-11': 48,\n  'PD-12': 56,\n  'PD-13': 64,\n  'PD-14': 72,\n  'PD-15': 80,\n} as const;\n\n// ─── Corner Radius tokens (CR) ───────────────────────────────────────────────\n\nexport const radius = {\n  'CR-0':  0,\n  'CR-1':  2,\n  'CR-2':  4,\n  'CR-3':  8,\n  'CR-4':  12,\n  'CR-5':  16,\n  'CR-6':  20,\n  'CR-7':  24,\n  'CR-8':  32,\n  'CR-9':  48,\n  'CR-10': 100,\n} as const;\n\n// ─── Typography ───────────────────────────────────────────────────────────────\n\nexport const font = 'Sarabun, sans-serif';\n","import React from 'react';\nimport { Circle, Info, XCircle, Search, Eye } from 'lucide-react';\nimport { grayNeutral, status, interactive, font } from './tokens';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type InputFieldState =\n  | 'Idle'\n  | 'Idle hover'\n  | 'Active'\n  | 'Idle invalid'\n  | 'Idle invalid hover'\n  | 'Idle invalid active'\n  | 'Filled'\n  | 'Filled hover'\n  | 'Filled active'\n  | 'Filled invalid'\n  | 'Filled invalid hover'\n  | 'Filled invalid active'\n  | 'Disable'\n  | 'Keyboard focus'\n  | 'Skeleton';\n\nexport type InputFieldSize = 'sm' | 'md' | 'lg';\n\nexport type InputFieldTrailingIcon = 'clear' | 'password' | 'search';\n\nexport type InputFieldCounter = {\n  value: number;\n  max: number;\n};\n\nexport interface InputFieldProps {\n  /** Label text displayed above the input */\n  label: string;\n  /** Show required asterisk (*) */\n  required?: boolean;\n  /** Remark text next to label e.g. \"(optional)\" */\n  labelRemark?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Current value */\n  value?: string;\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n  /** Helper text below the input (hidden when invalid) */\n  helperText?: string;\n  /** Error message below the input (shown when invalid state) */\n  errorText?: string;\n  /** Visual state from Figma */\n  state?: InputFieldState;\n  /** Input size — affects height, font, and padding */\n  size?: InputFieldSize;\n  /** Leading dropdown prefix text */\n  leadingDropdownText?: string;\n  /**\n   * Leading icon inside the input (left side).\n   * - `true` → default Circle icon\n   * - `React.ElementType` → custom Lucide icon\n   * - `false/undefined` → no icon\n   */\n  leadingIcon?: React.ElementType | boolean;\n  /** Counter pill e.g. `{ value: 0, max: 20 }` */\n  counter?: InputFieldCounter;\n  /** Unit text inside the input */\n  unit?: string;\n  /** Single trailing icon */\n  trailingIcon?: InputFieldTrailingIcon;\n  /** Multiple trailing icons (overrides trailingIcon) */\n  trailingIcons?: InputFieldTrailingIcon[];\n  /** Show separator between trailing icons */\n  trailingIconSeparator?: boolean;\n}\n\n// ─── Design tokens (from Figma) ──────────────────────────────────────────────\n\n/**\n * Size tokens — matched to Figma nodes:\n *   sm (Sm-32):  label C5 12/18  · input C4 14/20  · helper C5 12/18\n *   md (Md-40):  label C4 14/20  · input C3 16/24  · helper C4 14/20\n *   lg (Lg-48):  label C3 16/24  · input C3 16/24  · helper C4 14/20\n *\n * Spacing (per Figma sm node — gap-4 between all elements):\n *   labelGap  = gap between label row and input box\n *   helperGap = gap between input box and helper/error text\n */\nconst sizeTokens = {\n  sm: {\n    inputHeight: 32,\n    labelFontSize: 12, labelLineHeight: 18,\n    inputFontSize: 14, inputLineHeight: 20,\n    helperFontSize: 12, helperLineHeight: 18,\n    paddingX: 12,\n    iconSize: 16,\n    labelIconSize: 12,\n    labelGap: 4,    // label row → input\n    helperGap: 4,   // input → helper text\n    leadingPl: 8, leadingPr: 4, leadingPy: 6,\n    chevronSize: 14,\n    counterPadding: '1px 4px',\n    counterRadius: 4,\n    counterFontSize: 12, counterLineHeight: 18,\n    skeletonLabelH: 18, skeletonInputH: 32,\n  },\n  md: {\n    inputHeight: 40,\n    labelFontSize: 14, labelLineHeight: 20,\n    inputFontSize: 16, inputLineHeight: 24,\n    helperFontSize: 14, helperLineHeight: 20,\n    paddingX: 16,\n    iconSize: 20,\n    labelIconSize: 14,\n    labelGap: 6,    // label row → input\n    helperGap: 4,   // input → helper text\n    leadingPl: 12, leadingPr: 8, leadingPy: 8,\n    chevronSize: 16,\n    counterPadding: '2px 8px',\n    counterRadius: 8,\n    counterFontSize: 14, counterLineHeight: 20,\n    skeletonLabelH: 20, skeletonInputH: 40,\n  },\n  lg: {\n    inputHeight: 48,\n    labelFontSize: 16, labelLineHeight: 24,\n    inputFontSize: 16, inputLineHeight: 24,\n    helperFontSize: 14, helperLineHeight: 20,\n    paddingX: 16,\n    iconSize: 20,\n    labelIconSize: 16,\n    labelGap: 8,    // label row → input\n    helperGap: 6,   // input → helper text\n    leadingPl: 16, leadingPr: 8, leadingPy: 12,\n    chevronSize: 16,\n    counterPadding: '2px 8px',\n    counterRadius: 8,\n    counterFontSize: 14, counterLineHeight: 20,\n    skeletonLabelH: 24, skeletonInputH: 48,\n  },\n} as const;\n\n// ─── State helpers ────────────────────────────────────────────────────────────\n\nconst focusRingStyle = `0 0 0 2px ${interactive.focusRing}`;\n\nconst getStateFlags = (state: InputFieldState | undefined) => {\n  const s = state ?? 'Idle';\n  const isInvalid  = s.includes('invalid');\n  const isHover    = s.includes('hover');\n  const isActive   = s === 'Active' || s === 'Keyboard focus' || s.endsWith('active');\n  const isDisabled = s === 'Disable';\n  const isSkeleton = s === 'Skeleton';\n  const isFilled   = s.includes('Filled');\n  const isKeyboardFocus = s === 'Keyboard focus';\n  return { s, isInvalid, isHover, isActive, isDisabled, isSkeleton, isFilled, isKeyboardFocus };\n};\n\n// ─── Trailing icon map → Lucide ───────────────────────────────────────────────\n\nconst TRAILING_ICON_MAP = {\n  clear:    XCircle,\n  search:   Search,\n  password: Eye,\n} as const;\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const InputField = ({\n  label,\n  required = false,\n  labelRemark,\n  placeholder = 'Placeholder',\n  value,\n  onChange: _onChange,\n  helperText,\n  errorText,\n  state = 'Idle',\n  size = 'md',\n  leadingDropdownText,\n  leadingIcon,\n  counter,\n  unit,\n  trailingIcon,\n  trailingIcons,\n  trailingIconSeparator = false,\n}: InputFieldProps) => {\n  const { isInvalid, isHover, isActive, isDisabled, isSkeleton, isKeyboardFocus } =\n    getStateFlags(state);\n\n  const t = sizeTokens[size];\n\n  // ── Colors — mapped to Semantic/Gray-Neutral tokens ─────────────────────\n  const borderColor = isInvalid\n    ? interactive.invalidBorder             // status.error  #DB1439\n    : isActive || isKeyboardFocus\n      ? interactive.activeBorder            // oePrimary.fgLow  #5273A1\n      : isHover\n        ? interactive.hoverBorder           // #3B82F6\n        : grayNeutral.borderMidgray;        // #CFD1D9\n\n  const background = isDisabled\n    ? grayNeutral.bgDisabled                // #F3F4F6\n    : isHover\n      ? grayNeutral.bgLightgray             // #F8F8F9\n      : grayNeutral.bgWhite;               // #FFFFFF\n\n  // Label text  →  fg/mid-on-white  (disabled → fg/low)\n  const labelColor = isDisabled ? grayNeutral.fgLow : grayNeutral.fgMid;\n\n  // Placeholder  →  fg/low-on-white  (same whether disabled or not)\n  const placeholderColor = grayNeutral.fgLow;                              // #9A9DAD\n\n  // Typed value  →  fg/high  (disabled → fg/low)\n  const valueColor = isDisabled ? grayNeutral.fgLow : grayNeutral.fgHigh; // #1B1D22\n\n  // ── Icon colors (Figma: Semantic/Gray-Neutral/fg/high for input icons) ───\n  // Input leading/trailing icons  →  fg/high  (#1B1D22)\n  const inputIconColor = isDisabled ? grayNeutral.fgLow : grayNeutral.fgHigh;\n  // Label info icon  →  fg/mid  (same as label text, #6A6E83)\n  const labelIconColor = isDisabled ? grayNeutral.fgLow : grayNeutral.fgMid;\n\n  const helperColor = isInvalid ? status.error : grayNeutral.fgMid;       // #6A6E83\n\n  // ── Skeleton ─────────────────────────────────────────────────────────────\n  if (isSkeleton) {\n    return (\n      <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: t.labelGap }}>\n        <div style={{ height: t.skeletonLabelH, background: grayNeutral.bgSkeleton, borderRadius: 6 }} />\n        <div style={{ height: t.skeletonInputH, background: grayNeutral.bgSkeleton, border: `1px solid ${grayNeutral.bgSkeleton}`, borderRadius: 24 }} />\n      </div>\n    );\n  }\n\n  // ── Leading icon resolve ──────────────────────────────────────────────────\n  // true → Circle (Figma default \"Icon/circle\"), component → custom, false → none\n  const LeadingIconComponent: React.ElementType | null =\n    leadingIcon === true\n      ? Circle\n      : leadingIcon\n        ? (leadingIcon as React.ElementType)\n        : null;\n\n  // ── Trailing icons ────────────────────────────────────────────────────────\n  const iconsToRender: InputFieldTrailingIcon[] =\n    trailingIcons?.length ? trailingIcons : trailingIcon ? [trailingIcon] : [];\n\n  // ── Text below input ──────────────────────────────────────────────────────\n  const showText = isInvalid ? errorText : helperText;\n\n  // ── Shared font style ─────────────────────────────────────────────────────\n  const baseFont: React.CSSProperties = { fontFamily: font, fontWeight: 500 };\n\n  return (\n    /*\n     * Outer wrapper — two-level gap structure matching Figma:\n     *   Level 1 (helperGap): separates [label + input block] from [helper text]\n     *   Level 2 (labelGap):  separates [label row] from [input box]\n     */\n    <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: t.helperGap }}>\n\n      {/* ── Level 1: label + input block ────────────────────────────────── */}\n      <div style={{ display: 'flex', flexDirection: 'column', gap: t.labelGap, width: '100%' }}>\n\n        {/* Label row */}\n        <div style={{ display: 'flex', alignItems: 'center', gap: 4, width: '100%' }}>\n          {/* Left: label text + info icon */}\n          <div style={{ display: 'flex', flex: '1 0 0', alignItems: 'center', gap: t.labelIconSize === 12 ? 4 : 6, minWidth: 0 }}>\n            <span\n              style={{\n                ...baseFont,\n                fontSize: t.labelFontSize,\n                lineHeight: `${t.labelLineHeight}px`,\n                color: labelColor,\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n              }}\n            >\n              {label}\n            </span>\n            {/* Info icon — fg/mid-on-white (same shade as label text) */}\n            <Info\n              size={t.labelIconSize}\n              color={labelIconColor}\n              strokeWidth={1.8}\n              style={{ flexShrink: 0 }}\n            />\n          </div>\n\n          {/* Right: remark or required marker */}\n          {labelRemark && (\n            <span\n              style={{\n                ...baseFont,\n                fontSize: t.labelFontSize,\n                lineHeight: `${t.labelLineHeight}px`,\n                color: labelColor,\n                whiteSpace: 'nowrap',\n                flexShrink: 0,\n              }}\n            >\n              {labelRemark}\n            </span>\n          )}\n          {required && (\n            <span style={{ color: status.error, fontWeight: 800, flexShrink: 0 }}>*</span>\n          )}\n        </div>\n\n        {/* Input box */}\n        <div\n          style={{\n            background,\n            border: `1px solid ${borderColor}`,\n            height: t.inputHeight,\n            width: '100%',\n            borderRadius: 24,\n            display: 'flex',\n            alignItems: leadingDropdownText ? 'stretch' : 'center',\n            ...(leadingDropdownText ? {} : { gap: 8, padding: `0 ${t.paddingX}px` }),\n            overflow: 'hidden',\n            boxShadow: isActive || isKeyboardFocus ? focusRingStyle : 'none',\n            opacity: isDisabled ? 0.7 : 1,\n            boxSizing: 'border-box',\n          }}\n        >\n          {/* Leading: dropdown prefix OR icon */}\n          {leadingDropdownText ? (\n            <div\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                gap: 4,\n                background: grayNeutral.bgWhite,\n                padding: `${t.leadingPy}px ${t.leadingPr}px ${t.leadingPy}px ${t.leadingPl}px`,\n                flexShrink: 0,\n              }}\n            >\n              <span\n                style={{\n                  ...baseFont,\n                  fontSize: t.inputFontSize,\n                  lineHeight: `${t.inputLineHeight}px`,\n                  color: grayNeutral.fgHigh,\n                  whiteSpace: 'nowrap',\n                }}\n              >\n                {leadingDropdownText}\n              </span>\n              <svg width={t.chevronSize} height={t.chevronSize} viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M4 6L8 10L12 6\" stroke={grayNeutral.fgHigh} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            </div>\n          ) : LeadingIconComponent ? (\n            /* Leading icon in input → fg/high (#1B1D22) per Figma */\n            <LeadingIconComponent\n              size={t.iconSize}\n              color={inputIconColor}\n              strokeWidth={1.6}\n              style={{ flexShrink: 0 }}\n            />\n          ) : null}\n\n          {/* Text + accessories area */}\n          <div\n            style={{\n              flex: '1 0 0',\n              display: 'flex',\n              alignItems: 'center',\n              gap: 8,\n              height: '100%',\n              minWidth: 0,\n              ...(leadingDropdownText\n                ? { borderLeft: `1px solid ${grayNeutral.borderLight}`, padding: `0 12px` }\n                : {}),\n            }}\n          >\n            {/* Placeholder / Value text */}\n            <div\n              style={{\n                flex: '1 0 0',\n                overflow: 'hidden',\n                display: 'flex',\n                alignItems: 'center',\n              }}\n            >\n              <span\n                style={{\n                  ...baseFont,\n                  fontSize: t.inputFontSize,\n                  lineHeight: `${t.inputLineHeight}px`,\n                  color: value ? valueColor : placeholderColor,\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  display: 'block',\n                  width: '100%',\n                }}\n              >\n                {value || placeholder}\n              </span>\n            </div>\n\n            {/* Counter pill */}\n            {counter && (\n              <div\n                style={{\n                  background: grayNeutral.bgLightgray,\n                  display: 'flex',\n                  gap: 2,\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  padding: t.counterPadding,\n                  borderRadius: t.counterRadius,\n                  flexShrink: 0,\n                  opacity: isDisabled ? 0.7 : 1,\n                }}\n              >\n                <span\n                  style={{\n                    ...baseFont,\n                    fontSize: t.counterFontSize,\n                    lineHeight: `${t.counterLineHeight}px`,\n                    color: grayNeutral.fgHigh,\n                  }}\n                >\n                  {counter.value}\n                </span>\n                <span\n                  style={{\n                    ...baseFont,\n                    fontSize: t.counterFontSize,\n                    lineHeight: `${t.counterLineHeight}px`,\n                    color: grayNeutral.fgMid,\n                  }}\n                >\n                  / {counter.max}\n                </span>\n              </div>\n            )}\n\n            {/* Unit text */}\n            {unit && (\n              <span\n                style={{\n                  ...baseFont,\n                  fontSize: t.inputFontSize,\n                  lineHeight: `${t.inputLineHeight}px`,\n                  color: grayNeutral.fgHigh,\n                  whiteSpace: 'nowrap',\n                  flexShrink: 0,\n                  maxWidth: 64,\n                  overflow: 'hidden',\n                }}\n              >\n                {unit}\n              </span>\n            )}\n\n            {/* Trailing icons */}\n            {iconsToRender.length > 0 && (\n              <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>\n                {iconsToRender.map((ic, idx) => {\n                  const TrailingIcon = TRAILING_ICON_MAP[ic];\n                  return (\n                    <React.Fragment key={`${ic}-${idx}`}>\n                      {trailingIconSeparator && idx > 0 && (\n                        <div\n                          style={{\n                            width: 1,\n                            height: t.iconSize,\n                            background: grayNeutral.gray300,\n                            flexShrink: 0,\n                            alignSelf: 'center',\n                          }}\n                        />\n                      )}\n                      {/* Trailing icon → fg/high (#1B1D22) per Figma */}\n                      <TrailingIcon\n                        size={t.iconSize}\n                        color={inputIconColor}\n                        strokeWidth={1.6}\n                        style={{ flexShrink: 0 }}\n                      />\n                    </React.Fragment>\n                  );\n                })}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* ── Level 1: helper / error text ────────────────────────────────── */}\n      {/*\n       * No extra margin here — the outer helperGap (4px sm / 4px md / 6px lg)\n       * from the flex container already provides the correct spacing from Figma.\n       */}\n      {showText && (\n        <p\n          style={{\n            ...baseFont,\n            margin: 0,\n            fontSize: t.helperFontSize,\n            lineHeight: `${t.helperLineHeight}px`,\n            color: helperColor,\n            width: '100%',\n          }}\n        >\n          {showText}\n        </p>\n      )}\n    </div>\n  );\n};\n","// ─── Senestia Design System — Public API ─────────────────────────────────────\n//\n//  import { Badge, InputField, tokens } from '@senestia/ui'\n//\n// ─────────────────────────────────────────────────────────────────────────────\n\n// ── Components ────────────────────────────────────────────────────────────────\nexport { Badge } from './stories/Badge';\nexport { InputField } from './stories/InputField';\n\n// ── Component types ───────────────────────────────────────────────────────────\nexport type { BadgeProps, BadgeColor, BadgeSize, BadgeType } from './stories/Badge';\nexport type {\n  InputFieldProps,\n  InputFieldState,\n  InputFieldSize,\n  InputFieldTrailingIcon,\n  InputFieldCounter,\n} from './stories/InputField';\n\n// ── Design Tokens ─────────────────────────────────────────────────────────────\nexport {\n  // Colors\n  grayNeutral,\n  status,\n  ciPrimary,\n  oePrimary,\n  interactive,\n  // Spacing\n  padding,\n  radius,\n  // Typography\n  font,\n} from './stories/tokens';\n\n// ── Tokens namespace (for tree-shaking friendly usage) ────────────────────────\nimport * as _tokens from './stories/tokens';\nexport const tokens = _tokens;\n"],"mappings":"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"}

package/dist/stories/Badge.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export type BadgeColor = 'Gray' | 'Primary' | 'Error' | 'Warning' | 'Success' | 'Blue light' | 'Blue' | 'Indigo' | 'Purple' | 'Pink' | 'Orange' | 'Gray blue';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeType = 'Idle' | 'Status Dot' | 'Closable' | 'Pill color';
+export interface BadgeProps {
+    /** Badge label text */
+    label?: string;
+    /** Color variant */
+    color?: BadgeColor;
+    /** Size variant */
+    size?: BadgeSize;
+    /** Type / style variant */
+    type?: BadgeType;
+    /** Icon to render inside Pill color type (Lucide icon component) */
+    icon?: React.ElementType;
+    /** Called when close button is clicked (Closable type) */
+    onClose?: () => void;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/stories/InputField.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export type InputFieldState = 'Idle' | 'Idle hover' | 'Active' | 'Idle invalid' | 'Idle invalid hover' | 'Idle invalid active' | 'Filled' | 'Filled hover' | 'Filled active' | 'Filled invalid' | 'Filled invalid hover' | 'Filled invalid active' | 'Disable' | 'Keyboard focus' | 'Skeleton';
+export type InputFieldSize = 'sm' | 'md' | 'lg';
+export type InputFieldTrailingIcon = 'clear' | 'password' | 'search';
+export type InputFieldCounter = {
+    value: number;
+    max: number;
+};
+export interface InputFieldProps {
+    /** Label text displayed above the input */
+    label: string;
+    /** Show required asterisk (*) */
+    required?: boolean;
+    /** Remark text next to label e.g. "(optional)" */
+    labelRemark?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Current value */
+    value?: string;
+    /** Called when value changes */
+    onChange?: (value: string) => void;
+    /** Helper text below the input (hidden when invalid) */
+    helperText?: string;
+    /** Error message below the input (shown when invalid state) */
+    errorText?: string;
+    /** Visual state from Figma */
+    state?: InputFieldState;
+    /** Input size — affects height, font, and padding */
+    size?: InputFieldSize;
+    /** Leading dropdown prefix text */
+    leadingDropdownText?: string;
+    /**
+     * Leading icon inside the input (left side).
+     * - `true` → default Circle icon
+     * - `React.ElementType` → custom Lucide icon
+     * - `false/undefined` → no icon
+     */
+    leadingIcon?: React.ElementType | boolean;
+    /** Counter pill e.g. `{ value: 0, max: 20 }` */
+    counter?: InputFieldCounter;
+    /** Unit text inside the input */
+    unit?: string;
+    /** Single trailing icon */
+    trailingIcon?: InputFieldTrailingIcon;
+    /** Multiple trailing icons (overrides trailingIcon) */
+    trailingIcons?: InputFieldTrailingIcon[];
+    /** Show separator between trailing icons */
+    trailingIconSeparator?: boolean;
+}
+export declare const InputField: ({ label, required, labelRemark, placeholder, value, onChange: _onChange, helperText, errorText, state, size, leadingDropdownText, leadingIcon, counter, unit, trailingIcon, trailingIcons, trailingIconSeparator, }: InputFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/tokens.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Senestia Design System — Semantic Color Tokens
+ *
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │  Source: Figma DS-01 · Foundation → Semantic Color          │
+ * │  Use these tokens in components instead of raw hex values.   │
+ * └─────────────────────────────────────────────────────────────┘
+ */
+export declare const grayNeutral: {
+    /** Semantic/Gray-Neutral/fg/high — primary text, dark icons */
+    readonly fgHigh: "#1B1D22";
+    /** Semantic/Gray-Neutral/fg/mid-on-white — label text, helper text, secondary icons */
+    readonly fgMid: "#6A6E83";
+    /** Semantic/Gray-Neutral/fg/low-on-white — placeholder, disabled text */
+    readonly fgLow: "#9A9DAD";
+    /** Semantic/Gray-Neutral/bg/white */
+    readonly bgWhite: "#FFFFFF";
+    /** Semantic/Gray-Neutral/bg/lightgray — counter pill, subtle backgrounds */
+    readonly bgLightgray: "#F8F8F9";
+    /** Semantic/Gray-Neutral/bg/disabled */
+    readonly bgDisabled: "#F3F4F6";
+    /** Semantic/Gray-Neutral/border/midgray — default input border */
+    readonly borderMidgray: "#CFD1D9";
+    /** Semantic/Gray-Neutral/border/light — dividers, card borders */
+    readonly borderLight: "#EBECEF";
+    /** Disabled border (checkbox, input) */
+    readonly borderDisabled: "#E5EAF1";
+    /** Gray/300 — icon separators */
+    readonly gray300: "#D0D5DD";
+    /** Skeleton loading shimmer */
+    readonly bgSkeleton: "#EEF0F3";
+    /** Strong disabled background (checkbox) */
+    readonly bgDisabledStrong: "#EBECEF";
+};
+export declare const status: {
+    /** Error / invalid state */
+    readonly error: "#DB1439";
+    /** Warning */
+    readonly warning: "#DB8F02";
+    /** Success */
+    readonly success: "#15A686";
+};
+export declare const ciPrimary: {
+    readonly fgLow: "#C4B3F6";
+    readonly fgHigh: "#802CEB";
+    readonly bgLow: "#D4C9F6";
+    readonly bgMid: "#802CEB";
+    readonly bgHigh: "#5A1DA9";
+    readonly borderMid: "#996CF3";
+    readonly borderHigh: "#802CEB";
+};
+export declare const oePrimary: {
+    readonly fgLow: "#5273A1";
+    readonly fgHigh: "#3A5274";
+    readonly bgLowest: "#EFF2F6";
+    readonly bgLow: "#6E90BF";
+    readonly bgMid: "#5273A1";
+    readonly bgHigh: "#3A5274";
+    readonly borderLowest: "#C6D2E3";
+    readonly borderLow: "#9CB3D2";
+    readonly borderMid: "#5273A1";
+    /** Primary/300 — supporting/helper text on blue-tinted UI */
+    readonly p300: "#809BBF";
+    /** Indigo/300 — "Set to now" link color */
+    readonly linkBlue: "#3C5BD5";
+};
+export declare const interactive: {
+    /** Active / focused border */
+    readonly activeBorder: "#5273A1";
+    /** Hover border */
+    readonly hoverBorder: "#3B82F6";
+    /** Focus ring shadow */
+    readonly focusRing: "#D7DFEA";
+    /** Invalid border */
+    readonly invalidBorder: "#DB1439";
+};
+export declare const padding: {
+    readonly 'PD-0': 0;
+    readonly 'PD-1': 1;
+    readonly 'PD-2': 2;
+    readonly 'PD-3': 4;
+    readonly 'PD-4': 6;
+    readonly 'PD-5': 8;
+    readonly 'PD-6': 12;
+    readonly 'PD-7': 16;
+    readonly 'PD-8': 24;
+    readonly 'PD-9': 32;
+    readonly 'PD-10': 40;
+    readonly 'PD-11': 48;
+    readonly 'PD-12': 56;
+    readonly 'PD-13': 64;
+    readonly 'PD-14': 72;
+    readonly 'PD-15': 80;
+};
+export declare const radius: {
+    readonly 'CR-0': 0;
+    readonly 'CR-1': 2;
+    readonly 'CR-2': 4;
+    readonly 'CR-3': 8;
+    readonly 'CR-4': 12;
+    readonly 'CR-5': 16;
+    readonly 'CR-6': 20;
+    readonly 'CR-7': 24;
+    readonly 'CR-8': 32;
+    readonly 'CR-9': 48;
+    readonly 'CR-10': 100;
+};
+export declare const font = "Sarabun, sans-serif";

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@senestia/ui",
+  "version": "0.1.0-beta.0190ae9",
+  "type": "module",
+  "description": "Senestia Design System — React component library",
+  "main": "./dist/senestia-ui.umd.js",
+  "module": "./dist/senestia-ui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/senestia-ui.es.js",
+      "require": "./dist/senestia-ui.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.config.lib.ts && tsc --emitDeclarationOnly --declaration --declarationDir dist --project tsconfig.lib.json",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_250b9f6bb9afaff"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@fluentui/web-components": "^2.6.1",
+    "@react-three/drei": "^10.7.7",
+    "lucide-react": ">=0.400.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@eslint/js": "^9.39.4",
+    "@storybook/addon-a11y": "^10.3.0",
+    "@storybook/addon-docs": "^10.3.0",
+    "@storybook/addon-onboarding": "^10.3.0",
+    "@storybook/addon-vitest": "^10.3.0",
+    "@storybook/react-vite": "^10.3.0",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "chromatic": "^15.3.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-storybook": "^10.3.0",
+    "globals": "^17.4.0",
+    "playwright": "^1.58.2",
+    "storybook": "^10.3.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.7",
+    "vitest": "^4.1.0"
+  }
+}