@plastic-js/tsumiki 0.1.22 → 0.1.24

package/src/styles/sizing.css

@@ -0,0 +1,59 @@
+:root {
+  --tsu-level-primary-xs: 32px;
+  --tsu-level-primary-sm: 36px;
+  --tsu-level-primary-md: 40px;
+  --tsu-level-primary-lg: 44px;
+  --tsu-level-primary-xl: 48px;
+  --tsu-level-primary-xxl: 64px;
+
+  --tsu-level-secondary-xs: 16px;
+  --tsu-level-secondary-sm: 18px;
+  --tsu-level-secondary-md: 20px;
+  --tsu-level-secondary-lg: 22px;
+  --tsu-level-secondary-xl: 24px;
+  --tsu-level-secondary-xxl: 32px;
+}
+
+:root {
+  --tsu-comp-height-xs: var(--tsu-level-primary-xs);
+  --tsu-comp-height-sm: var(--tsu-level-primary-sm);
+  --tsu-comp-height-md: var(--tsu-level-primary-md);
+  --tsu-comp-height-lg: var(--tsu-level-primary-lg);
+  --tsu-comp-height-xl: var(--tsu-level-primary-xl);
+  --tsu-comp-height-xxl: var(--tsu-level-primary-xxl);
+
+  --tsu-comp-font-size-xs: 12px;
+  --tsu-comp-font-size-sm: 14px;
+  --tsu-comp-font-size-md: 14px;
+  --tsu-comp-font-size-lg: 16px;
+  --tsu-comp-font-size-xl: 18px;
+  --tsu-comp-font-size-xxl: 20px;
+
+  --tsu-comp-line-height-xs: 16px;
+  --tsu-comp-line-height-sm: 20px;
+  --tsu-comp-line-height-md: 20px;
+  --tsu-comp-line-height-lg: 24px;
+  --tsu-comp-line-height-xl: 28px;
+  --tsu-comp-line-height-xxl: 30px;
+
+  --tsu-comp-padding-y-xs: 7px;
+  --tsu-comp-padding-y-sm: 7px;
+  --tsu-comp-padding-y-md: 9px;
+  --tsu-comp-padding-y-lg: 9px;
+  --tsu-comp-padding-y-xl: 9px;
+  --tsu-comp-padding-y-xxl: 16px;
+
+  --tsu-comp-padding-x-xs: 8px;
+  --tsu-comp-padding-x-sm: 12px;
+  --tsu-comp-padding-x-md: 16px;
+  --tsu-comp-padding-x-lg: 20px;
+  --tsu-comp-padding-x-xl: 24px;
+  --tsu-comp-padding-x-xxl: 32px;
+
+  --tsu-comp-secondary-height-xs: var(--tsu-level-secondary-xs);
+  --tsu-comp-secondary-height-sm: var(--tsu-level-secondary-sm);
+  --tsu-comp-secondary-height-md: var(--tsu-level-secondary-md);
+  --tsu-comp-secondary-height-lg: var(--tsu-level-secondary-lg);
+  --tsu-comp-secondary-height-xl: var(--tsu-level-secondary-xl);
+  --tsu-comp-secondary-height-xxl: var(--tsu-level-secondary-xxl);
+}

package/src/styles/spacing.css

@@ -0,0 +1,9 @@
+:root {
+  --tsu-spacing-xxs: 2px;
+  --tsu-spacing-xs: 4px;
+  --tsu-spacing-sm: 8px;
+  --tsu-spacing-md: 12px;
+  --tsu-spacing-lg: 16px;
+  --tsu-spacing-xl: 24px;
+  --tsu-spacing-xxl: 32px;
+}

package/src/styles/theme.css

@@ -0,0 +1,38 @@
+@import '@radix-ui/colors/indigo.css';
+@import '@radix-ui/colors/indigo-alpha.css';
+@import '@radix-ui/colors/olive.css';
+@import '@radix-ui/colors/olive-alpha.css';
+@import '@radix-ui/colors/indigo-dark.css';
+@import '@radix-ui/colors/indigo-dark-alpha.css';
+@import '@radix-ui/colors/olive-dark.css';
+@import '@radix-ui/colors/olive-dark-alpha.css';
+
+:root {
+  /* Accent (indigo) */
+  --tsu-accent-1: var(--indigo-1);
+  --tsu-accent-2: var(--indigo-2);
+  --tsu-accent-3: var(--indigo-3);
+  --tsu-accent-4: var(--indigo-4);
+  --tsu-accent-5: var(--indigo-5);
+  --tsu-accent-6: var(--indigo-6);
+  --tsu-accent-7: var(--indigo-7);
+  --tsu-accent-8: var(--indigo-8);
+  --tsu-accent-9: var(--indigo-9);
+  --tsu-accent-10: var(--indigo-10);
+  --tsu-accent-11: var(--indigo-11);
+  --tsu-accent-12: var(--indigo-12);
+
+  /* Neutral (olive) */
+  --tsu-neutral-1: var(--olive-1);
+  --tsu-neutral-2: var(--olive-2);
+  --tsu-neutral-3: var(--olive-3);
+  --tsu-neutral-4: var(--olive-4);
+  --tsu-neutral-5: var(--olive-5);
+  --tsu-neutral-6: var(--olive-6);
+  --tsu-neutral-7: var(--olive-7);
+  --tsu-neutral-8: var(--olive-8);
+  --tsu-neutral-9: var(--olive-9);
+  --tsu-neutral-10: var(--olive-10);
+  --tsu-neutral-11: var(--olive-11);
+  --tsu-neutral-12: var(--olive-12);
+}

package/src/styles/tokens.css

@@ -0,0 +1,22 @@
+@import './color.css';
+@import './radius.css';
+@import './sizing.css';
+@import './typography.css';
+@import './spacing.css';
+@import './transition.css';
+@import './shadow.css';
+
+:root {
+  --tsu-font-family: system-ui, -apple-system, sans-serif;
+  --tsu-line-height: 1.5;
+
+  --tsu-container-padding-sm: 12px;
+  --tsu-container-padding-md: 16px;
+  --tsu-container-padding-lg: 24px;
+  --tsu-container-padding-xl: 32px;
+
+  --tsu-z-base: 0;
+  --tsu-z-dropdown: 100;
+  --tsu-z-modal: 200;
+  --tsu-z-toast: 300;
+}

package/src/styles/transition.css

@@ -0,0 +1,5 @@
+:root {
+  --tsu-transition-fast: 0.15s ease;
+  --tsu-transition-normal: 0.3s ease;
+  --tsu-transition-overlay: 0.3s ease;
+}

package/src/styles/typography.css

@@ -0,0 +1,8 @@
+:root {
+  --tsu-font-size-xs: 10px;
+  --tsu-font-size-sm: 12px;
+  --tsu-font-size-md: 14px;
+  --tsu-font-size-lg: 16px;
+  --tsu-font-size-xl: 20px;
+  --tsu-font-size-xxl: 24px;
+}

package/dist/components/Accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Accordion.js","names":["Accordion"],"sources":["../../src/components/Accordion.jsx"],"sourcesContent":["import { Accordion } from '@plastic-js/ark'\n\nexport default Accordion\n"],"mappings":";;AAEA,IAAA,oBAAeA"}

package/dist/components/Avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.js","names":["Avatar"],"sources":["../../src/components/Avatar.jsx"],"sourcesContent":["import { Avatar } from '@plastic-js/ark'\n\nexport default Avatar\n"],"mappings":";;AAEA,IAAA,iBAAeA"}

package/dist/components/CardNumberInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardNumberInput.js","names":["css","splitProps","_tmpl","_template","wrapperClass","display","alignItems","width","boxSizing","height","background","border","borderRadius","padding","borderColor","errorClass","inputClass","flex","minWidth","color","fontSize","fontFamily","outline","letterSpacing","read","value","groupDigits","digits","replace","CardNumberInput","props","local","rest","_el0","cloneNode","_insert","_jsx","_mergeProps","className","inputMode","onInput","e","onValueChange","target","placeholder","_setProp","invalid"],"sources":["../../src/components/CardNumberInput.jsx"],"sourcesContent":["import { css } from '@emotion/css'\nimport { splitProps } from '@plastic-js/plastic'\n\nconst wrapperClass = css({\n\tdisplay: 'flex',\n\talignItems: 'center',\n\twidth: '100%',\n\tboxSizing: 'border-box',\n\theight: '44px',\n\tbackground: 'var(--bg, rgba(0,0,0,0.2))',\n\tborder: '1px solid var(--border)',\n\tborderRadius: '10px',\n\tpadding: '0 14px',\n\t'&:focus-within': { borderColor: 'var(--accent)' },\n})\n\nconst errorClass = css({\n\tborderColor: 'var(--danger) !important',\n})\n\nconst inputClass = css({\n\tflex: 1,\n\tminWidth: 0,\n\theight: '100%',\n\tbackground: 'transparent',\n\tborder: 'none',\n\tcolor: 'var(--ink)',\n\tfontSize: '15px',\n\tfontFamily: 'inherit',\n\toutline: 'none',\n\tletterSpacing: '1.5px',\n\t'&::placeholder': { color: 'var(--muted)', letterSpacing: 'normal' },\n})\n\nconst read = (value)=> {\n\treturn typeof value === 'function' ? value() : value\n}\n\nconst groupDigits = (digits)=> {\n\tif (!digits){ return '' }\n\treturn digits.replace(/(\\d{4})(?=\\d)/g, '$1-')\n}\n\nconst CardNumberInput = (props)=> {\n\tconst [local, rest] = splitProps(props, ['value', 'onValueChange', 'invalid', 'placeholder'])\n\treturn (\n\t\t<div className={()=> `${wrapperClass} ${read(local.invalid) ? errorClass : ''}`}>\n\t\t\t<input\n\t\t\t\tclassName={inputClass}\n\t\t\t\tinputMode='numeric'\n\t\t\t\tonInput={e=> local.onValueChange?.(e.target.value.replace(/\\D/g, ''))}\n\t\t\t\tplaceholder={local.placeholder ?? '0000-0000-0000-0000'}\n\t\t\t\tvalue={()=> groupDigits(read(local.value))}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\nexport default CardNumberInput\n"],"mappings":";;;;AACgD,IAAAE,QAAAC,SAAA,aAAA;AAEhD,IAAMC,eAAeJ,IAAI;CACxBK,SAAS;CACTC,YAAY;CACZC,OAAO;CACPC,WAAW;CACXC,QAAQ;CACRC,YAAY;CACZC,QAAQ;CACRC,cAAc;CACdC,SAAS;CACT,kBAAkB,EAAEC,aAAa,gBAAgB;AAClD,CAAC;AAED,IAAMC,aAAaf,IAAI,EACtBc,aAAa,2BACd,CAAC;AAED,IAAME,aAAahB,IAAI;CACtBiB,MAAM;CACNC,UAAU;CACVT,QAAQ;CACRC,YAAY;CACZC,QAAQ;CACRQ,OAAO;CACPC,UAAU;CACVC,YAAY;CACZC,SAAS;CACTC,eAAe;CACf,kBAAkB;EAAEJ,OAAO;EAAgBI,eAAe;CAAS;AACpE,CAAC;AAED,IAAMC,QAAQC,UAAS;CACtB,OAAO,OAAOA,UAAU,aAAaA,MAAM,IAAIA;AAChD;AAEA,IAAMC,eAAeC,WAAU;CAC9B,IAAI,CAACA,QAAS,OAAO;CACrB,OAAOA,OAAOC,QAAQ,kBAAkB,KAAK;AAC9C;AAEA,IAAMC,mBAAmBC,UAAS;CACjC,MAAM,CAACC,OAAOC,QAAQ/B,WAAW6B,OAAO;EAAC;EAAS;EAAiB;EAAW;CAAa,CAAC;CAC5F,cAAA;EAAA,MAAAG,OAAA/B,MAAAgC,UAAA,IAAA;EAAAC,OAAAF,YAAAG,IAAA,SAAAC,WAAA;GAAAC,WAGctB;GAAUuB,WACX;GAASC,UACVC,MAAIV,MAAMW,gBAAgBD,EAAEE,OAAOlB,MAAMG,QAAQ,OAAO,EAAE,CAAC;GAAC,IAAAgB,cAAA;IAAA,OACxDb,MAAMa,eAAe;GAAqB;GAAAnB,aAC3CC,YAAYF,KAAKO,MAAMN,KAAK,CAAC;EAAC,GACtCO,IAAI,CAAA,CAAA;EAAAa,QAAAZ,MAAA,mBAPW,GAAG7B,aAAY,GAAIoB,KAAKO,MAAMe,OAAO,IAAI/B,aAAa,IAAI;EAAA,OAAAkB;CAAA,GAAA;AAWjF"}

package/dist/components/Carousel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Carousel.js","names":["Carousel"],"sources":["../../src/components/Carousel.jsx"],"sourcesContent":["import { Carousel } from '@plastic-js/ark'\n\nexport default Carousel\n"],"mappings":";;AAEA,IAAA,mBAAeA"}

package/dist/components/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox"],"sources":["../../src/components/Checkbox.jsx"],"sourcesContent":["import { Checkbox } from '@plastic-js/ark'\n\nexport default Checkbox\n"],"mappings":";;AAEA,IAAA,mBAAeA"}

package/dist/components/Clipboard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Clipboard.js","names":["Clipboard"],"sources":["../../src/components/Clipboard.jsx"],"sourcesContent":["import { Clipboard } from '@plastic-js/ark'\n\nexport default Clipboard\n"],"mappings":";;AAEA,IAAA,oBAAeA"}

package/dist/components/Collapsible.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Collapsible.js","names":["Collapsible"],"sources":["../../src/components/Collapsible.jsx"],"sourcesContent":["import { Collapsible } from '@plastic-js/ark'\n\nexport default Collapsible\n"],"mappings":";;AAEA,IAAA,sBAAeA"}

package/dist/components/ColorPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.js","names":["ColorPicker"],"sources":["../../src/components/ColorPicker.jsx"],"sourcesContent":["import { ColorPicker } from '@plastic-js/ark'\n\nexport default ColorPicker\n"],"mappings":";;AAEA,IAAA,sBAAeA"}

package/dist/components/Combobox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Combobox.js","names":["Combobox","useComboboxContext","OriginalRoot","Root","props","_jsx","_mergeProps","Input","combobox","onInput","event","getInputProps","onChange","Object","assign"],"sources":["../../src/components/Combobox.jsx"],"sourcesContent":["import { Combobox, useComboboxContext } from '@plastic-js/ark'\n\nconst OriginalRoot = Combobox.Root\n\nconst Root = (props = {})=> <OriginalRoot {...props} />\n\nconst Input = (props = {})=> {\n\tconst combobox = useComboboxContext()\n\treturn (\n\t\t<Combobox.Input\n\t\t\t{...props}\n\t\t\tonInput={event=> combobox().getInputProps().onChange?.(event)}\n\t\t/>\n\t)\n}\n\nexport default Object.assign(Root, {\n\t...Combobox, OriginalRoot, Root, Input,\n})\n"],"mappings":";;;AAEA,IAAME,eAAeF,SAASG;AAE9B,IAAMA,QAAQC,QAAQ,CAAC,MAACC,IAAAH,cAAAI,WAAsBF,KAAK,CAAA;AAEnD,IAAMG,SAASH,QAAQ,CAAC,MAAK;CAC5B,MAAMI,WAAWP,mBAAmB;CACpC,OAAAI,IAAAL,SAAAO,OAAAD,WAEMF,OAAK,EAAAK,UACAC,UAAQF,SAAS,EAAEG,cAAc,EAAEC,WAAWF,KAAK,EAAC,CAAA,CAAA;AAGhE;AAEA,IAAA,mBAAeG,OAAOC,OAAOX,MAAM;CAClC,GAAGH;CAAUE;CAAcC;CAAMI;AAClC,CAAC"}

package/dist/components/ConfirmDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConfirmDialog.js","names":["css","Dialog","_tmpl","_template","messageClass","fontSize","lineHeight","color","textAlign","padding","ConfirmDialog","open","onOpenChange","onConfirm","loading","title","message","confirmText","cancelText","handleConfirm","_jsx","Root","_mergeProps","children","_el0","cloneNode","_insert","_setProp"],"sources":["../../src/components/ConfirmDialog.jsx"],"sourcesContent":["import { css } from '@emotion/css'\nimport Dialog from './Dialog.jsx'\n\nconst messageClass = css({\n\tfontSize: '15px',\n\tlineHeight: 1.5,\n\tcolor: 'var(--ink)',\n\ttextAlign: 'center',\n\tpadding: '8px 0',\n})\n\nconst ConfirmDialog = ({\n\topen, onOpenChange, onConfirm, loading, title, message, confirmText, cancelText,\n})=> {\n\tconst handleConfirm = ()=> {\n\t\tonConfirm?.()\n\t}\n\n\treturn (\n\t\t<Dialog.Root\n\t\t\tcancelText={cancelText ?? 'Cancel'}\n\t\t\tconfirmText={confirmText ?? 'Delete'}\n\t\t\tloading={loading}\n\t\t\tonConfirm={handleConfirm}\n\t\t\tonOpenChange={onOpenChange}\n\t\t\topen={open}\n\t\t\ttitle={title ?? 'Confirm'}\n\t\t>\n\t\t\t<p className={messageClass}>\n\t\t\t\t{message}\n\t\t\t</p>\n\t\t</Dialog.Root>\n\t)\n}\n\nexport default ConfirmDialog\n"],"mappings":";;;;AACiC,IAAAE,QAAAC,SAAA,SAAA;AAEjC,IAAMC,eAAeJ,IAAI;CACxBK,UAAU;CACVC,YAAY;CACZC,OAAO;CACPC,WAAW;CACXC,SAAS;AACV,CAAC;AAED,IAAMC,iBAAiB,EACtBC,MAAMC,cAAcC,WAAWC,SAASC,OAAOC,SAASC,aAAaC,iBACjE;CACJ,MAAMC,sBAAqB;EAC1BN,YAAY;CACb;CAEA,OAAAO,IAAAnB,eAAAoB,MAAAC,WAAA;EAAAJ,YAEcA,cAAc;EAAQD,aACrBA,eAAe;EACnBH;EAAOD,WACLM;EACGP;EACRD;EAAII,OACHA,SAAS;EAASQ,gBAAA;GAAA,MAAAC,OAAAtB,MAAAuB,UAAA,IAAA;GAAAC,OAAAF,YAGvBR,OAAO;GAAAW,QAAAH,MAAA,mBADKpB,YAAY;GAAA,OAAAoB;EAAA;CAAA,CAAA,CAAA;AAK7B"}

package/dist/components/DateInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateInput.js","names":["DateInput"],"sources":["../../src/components/DateInput.jsx"],"sourcesContent":["import { DateInput } from '@plastic-js/ark'\n\nexport default DateInput\n"],"mappings":";;AAEA,IAAA,oBAAeA"}

package/dist/components/DatePicker.js

@@ -1,7 +0,0 @@
-import { DatePicker } from "@plastic-js/ark";
-//#region src/components/DatePicker.jsx
-var DatePicker_default = DatePicker;
-//#endregion
-export { DatePicker_default as default };
-
-//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DatePicker.js","names":["DatePicker"],"sources":["../../src/components/DatePicker.jsx"],"sourcesContent":["import { DatePicker } from '@plastic-js/ark'\n\nexport default DatePicker\n"],"mappings":";;AAEA,IAAA,qBAAeA"}