softable-pixels-web 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/{Button-FBwDmqJ7.js → Button-B9tDbn4Q.js} +9 -5
  2. package/dist/Button-B9tDbn4Q.js.map +1 -0
  3. package/dist/CheckItem-CBzbinCc.js +47 -0
  4. package/dist/CheckItem-CBzbinCc.js.map +1 -0
  5. package/dist/{Checkbox-D2dDt6Hp.js → Checkbox-l_SA4qUE.js} +23 -5
  6. package/dist/Checkbox-l_SA4qUE.js.map +1 -0
  7. package/dist/{Icon-CzUEwDPp.js → Icon-BrLGgg0w.js} +2 -2
  8. package/dist/{Icon-CzUEwDPp.js.map → Icon-BrLGgg0w.js.map} +1 -1
  9. package/dist/{InfoSummary-DSOwr7Q1.js → InfoSummary-CHRfCc3v.js} +2 -2
  10. package/dist/{InfoSummary-DSOwr7Q1.js.map → InfoSummary-CHRfCc3v.js.map} +1 -1
  11. package/dist/{Input-CTx0xk1z.js → Input-CUZNjGoG.js} +4 -76
  12. package/dist/Input-CUZNjGoG.js.map +1 -0
  13. package/dist/Label-BVteAeiK.js +78 -0
  14. package/dist/Label-BVteAeiK.js.map +1 -0
  15. package/dist/{TabSwitch-Bewsxeqz.js → TabSwitch-DRs6-76U.js} +2 -2
  16. package/dist/{TabSwitch-Bewsxeqz.js.map → TabSwitch-DRs6-76U.js.map} +1 -1
  17. package/dist/TextArea-ZKDCCx4I.js +113 -0
  18. package/dist/TextArea-ZKDCCx4I.js.map +1 -0
  19. package/dist/{ThemeContext-BAcoPRJ-.js → ThemeContext-BQQnMo5F.js} +2 -1
  20. package/dist/ThemeContext-BQQnMo5F.js.map +1 -0
  21. package/dist/{Typography-CTfrQCqI.js → Typography-BaE9Y1O8.js} +1 -1
  22. package/dist/{Typography-CTfrQCqI.js.map → Typography-BaE9Y1O8.js.map} +1 -1
  23. package/dist/button.d.ts +2 -2
  24. package/dist/button.js +2 -2
  25. package/dist/check-item.d.ts +2 -0
  26. package/dist/check-item.js +5 -0
  27. package/dist/checkbox.d.ts +2 -2
  28. package/dist/checkbox.js +3 -3
  29. package/dist/{index-CRdoo14l.d.ts → index-BvkboQOE.d.ts} +3 -3
  30. package/dist/index-CADs9cEh.d.ts +13 -0
  31. package/dist/index-CXR_rnK-.d.ts +48 -0
  32. package/dist/{index-DeyMp__h.d.ts → index-Cbt7nYQB.d.ts} +2 -2
  33. package/dist/{index-Y4JLziyn.d.ts → index-CqAWI5LI.d.ts} +2 -2
  34. package/dist/{index-BMSLSVxv.d.ts → index-H8VYQre4.d.ts} +1 -1
  35. package/dist/{index-BN9pjWqo.d.ts → index-x_PYKZgv.d.ts} +4 -3
  36. package/dist/index.d.ts +9 -7
  37. package/dist/index.js +12 -9
  38. package/dist/info-summary.js +2 -2
  39. package/dist/input.d.ts +2 -2
  40. package/dist/input.js +4 -3
  41. package/dist/tab-switch.d.ts +1 -1
  42. package/dist/tab-switch.js +2 -2
  43. package/dist/text-area.d.ts +3 -0
  44. package/dist/text-area.js +6 -0
  45. package/dist/theme-context.d.ts +1 -1
  46. package/dist/theme-context.js +1 -1
  47. package/dist/{types-CzIXNt_Y.d.ts → types-_ZbgGCjb.d.ts} +2 -2
  48. package/dist/typography.d.ts +1 -1
  49. package/dist/typography.js +1 -1
  50. package/dist/{useThemedStyles-t3wVpy-H.d.ts → useThemedStyles-_SsqjB7Q.d.ts} +2 -2
  51. package/package.json +12 -1
  52. package/dist/Button-FBwDmqJ7.js.map +0 -1
  53. package/dist/Checkbox-D2dDt6Hp.js.map +0 -1
  54. package/dist/Input-CTx0xk1z.js.map +0 -1
  55. package/dist/ThemeContext-BAcoPRJ-.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"TabSwitch-Bewsxeqz.js","names":[],"sources":["../src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/toolkit/TabSwitch/styles.ts","../src/components/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n disabled?: boolean\n selected?: boolean\n selectedColor?: string\n variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n variant,\n disabled,\n selected,\n selectedColor\n}: Params): StyleMap {\n const accent = selectedColor ?? 'var(--px-color-primary)'\n\n return {\n item: {\n minHeight: '1.25rem',\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 4,\n background: 'transparent',\n border: 0,\n padding: '8px 10px',\n cursor: disabled ? 'not-allowed' : 'pointer',\n opacity: disabled ? 0.5 : 1,\n userSelect: 'none',\n whiteSpace: 'nowrap',\n __rules: { '& > p': { zIndex: 1 } }\n },\n\n selectedBg:\n variant === 'default'\n ? {\n position: 'absolute',\n inset: 0,\n borderRadius: 6,\n border: '1px solid var(--px-border-primary)',\n background: selected ? accent : 'transparent'\n }\n : {\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: -2,\n height: 2,\n background: selected ? accent : 'transparent'\n }\n }\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n option: SwitchOption<T>\n selected: boolean\n layoutId?: string\n disabled?: boolean\n selectedColor?: string\n selectedLabelColor?: string\n variant: 'default' | 'underline'\n onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n const { option, disabled, selected, layoutId, onClick } = props\n\n const { styles, classes } = useThemedStyles(\n props,\n createTabSwitchItemStyles,\n {\n pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n }\n )\n\n const isDisabled = disabled || option.disabled\n\n return (\n <button\n type=\"button\"\n style={styles.item}\n className={classes.item}\n tabIndex={isDisabled ? -1 : 0}\n onClick={() => !isDisabled && onClick(option.value)}\n >\n {selected ? (\n <motion.div\n layoutId={layoutId || 'pixel-tabswitch-selected'}\n style={styles.selectedBg}\n />\n ) : null}\n\n {option.icon ? (\n <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n ) : null}\n\n <Typography variant=\"b1\" fontWeight=\"bold\">\n {option.label}\n </Typography>\n </button>\n )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap {\n const { fitContent } = props\n\n return {\n container: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n color: 'var(--px-text-primary, #4b5563)',\n width: fitContent ? 'fit-content' : '100%',\n borderBottom: '1px solid var(--px-border-primaryder, #e5e7eb)',\n gap: 0,\n __rules: { '& svg': { zIndex: 1 } }\n }\n }\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n {\n const {\n options,\n disabled,\n layoutId,\n currentValue,\n variant = 'default',\n onChange\n } = props\n\n const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n pick: p => [p.fitContent, p.selectedLabelColor, p.variant],\n override: props.styles,\n applyCommonProps: true\n })\n\n return (\n <div style={styles.container} className={classes.container}>\n {options.map(opt => (\n <SwitchItem\n key={String(opt.value)}\n option={opt}\n variant={variant}\n layoutId={layoutId}\n disabled={disabled}\n selectedColor={props.selectedColor}\n selected={currentValue === opt.value}\n selectedLabelColor={props.selectedLabelColor}\n onClick={onChange}\n />\n ))}\n </div>\n )\n }\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACmB;CACnB,MAAM,SAAS,iBAAiB;AAEhC,QAAO;EACL,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR;;;;;AC3BH,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAAoC;CAC3E,MAAM,EAAE,eAAe;AAEvB,QAAO,EACL,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,cAAc;EACd,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF;;;;;ACJH,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK;IAAC,EAAE;IAAY,EAAE;IAAoB,EAAE;IAAQ;GAC1D,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}
1
+ {"version":3,"file":"TabSwitch-DRs6-76U.js","names":[],"sources":["../src/components/toolkit/TabSwitch/components/TabSwitchItem/styles.ts","../src/components/toolkit/TabSwitch/components/TabSwitchItem/index.tsx","../src/components/toolkit/TabSwitch/styles.ts","../src/components/toolkit/TabSwitch/index.tsx"],"sourcesContent":["// External Libraries\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\ninterface Params {\n disabled?: boolean\n selected?: boolean\n selectedColor?: string\n variant: 'default' | 'underline'\n}\n\nexport function createTabSwitchItemStyles({\n variant,\n disabled,\n selected,\n selectedColor\n}: Params): StyleMap {\n const accent = selectedColor ?? 'var(--px-color-primary)'\n\n return {\n item: {\n minHeight: '1.25rem',\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 4,\n background: 'transparent',\n border: 0,\n padding: '8px 10px',\n cursor: disabled ? 'not-allowed' : 'pointer',\n opacity: disabled ? 0.5 : 1,\n userSelect: 'none',\n whiteSpace: 'nowrap',\n __rules: { '& > p': { zIndex: 1 } }\n },\n\n selectedBg:\n variant === 'default'\n ? {\n position: 'absolute',\n inset: 0,\n borderRadius: 6,\n border: '1px solid var(--px-border-primary)',\n background: selected ? accent : 'transparent'\n }\n : {\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: -2,\n height: 2,\n background: selected ? accent : 'transparent'\n }\n }\n}\n","// External Libraries\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SwitchOption } from '../../types'\n\n// Styles\nimport { createTabSwitchItemStyles } from './styles'\n\ntype Props<T> = {\n option: SwitchOption<T>\n selected: boolean\n layoutId?: string\n disabled?: boolean\n selectedColor?: string\n selectedLabelColor?: string\n variant: 'default' | 'underline'\n onClick: (value: T) => void\n}\n\nexport const SwitchItem = <T,>(props: Props<T>) => {\n const { option, disabled, selected, layoutId, onClick } = props\n\n const { styles, classes } = useThemedStyles(\n props,\n createTabSwitchItemStyles,\n {\n pick: p => [p.variant, p.selectedColor, p.selectedLabelColor, p.selected]\n }\n )\n\n const isDisabled = disabled || option.disabled\n\n return (\n <button\n type=\"button\"\n style={styles.item}\n className={classes.item}\n tabIndex={isDisabled ? -1 : 0}\n onClick={() => !isDisabled && onClick(option.value)}\n >\n {selected ? (\n <motion.div\n layoutId={layoutId || 'pixel-tabswitch-selected'}\n style={styles.selectedBg}\n />\n ) : null}\n\n {option.icon ? (\n <span style={{ display: 'inline-flex' }}>{option.icon}</span>\n ) : null}\n\n <Typography variant=\"b1\" fontWeight=\"bold\">\n {option.label}\n </Typography>\n </button>\n )\n}\n","// Types\nimport type { TabSwitchProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap {\n const { fitContent } = props\n\n return {\n container: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n color: 'var(--px-text-primary, #4b5563)',\n width: fitContent ? 'fit-content' : '100%',\n borderBottom: '1px solid var(--px-border-primaryder, #e5e7eb)',\n gap: 0,\n __rules: { '& svg': { zIndex: 1 } }\n }\n }\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { SwitchItem } from './components/TabSwitchItem'\n\n// Types\nimport type { TabSwitchProps } from './types'\n\n// Styles\nimport { createTabSwitchStyles } from './styles'\n\nexport * from './types'\n\nexport const TabSwitch = <T,>(props: TabSwitchProps<T>) => {\n {\n const {\n options,\n disabled,\n layoutId,\n currentValue,\n variant = 'default',\n onChange\n } = props\n\n const { styles, classes } = useThemedStyles(props, createTabSwitchStyles, {\n pick: p => [p.fitContent, p.selectedLabelColor, p.variant],\n override: props.styles,\n applyCommonProps: true\n })\n\n return (\n <div style={styles.container} className={classes.container}>\n {options.map(opt => (\n <SwitchItem\n key={String(opt.value)}\n option={opt}\n variant={variant}\n layoutId={layoutId}\n disabled={disabled}\n selectedColor={props.selectedColor}\n selected={currentValue === opt.value}\n selectedLabelColor={props.selectedLabelColor}\n onClick={onChange}\n />\n ))}\n </div>\n )\n }\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BAA0B,EACxC,SACA,UACA,UACA,iBACmB;CACnB,MAAM,SAAS,iBAAiB;AAEhC,QAAO;EACL,MAAM;GACJ,WAAW;GACX,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,QAAQ,WAAW,gBAAgB;GACnC,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,YAAY;GACZ,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;GACpC;EAED,YACE,YAAY,YACR;GACE,UAAU;GACV,OAAO;GACP,cAAc;GACd,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC,GACD;GACE,UAAU;GACV,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,YAAY,WAAW,SAAS;GACjC;EACR;;;;;AC3BH,MAAa,cAAkB,UAAoB;CACjD,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,YAAY;CAE1D,MAAM,EAAE,QAAQ,YAAY,gBAC1B,OACA,2BACA,EACE,OAAM,MAAK;EAAC,EAAE;EAAS,EAAE;EAAe,EAAE;EAAoB,EAAE;EAAS,EAC1E,CACF;CAED,MAAM,aAAa,YAAY,OAAO;AAEtC,QACE,qBAAC;EACC,MAAK;EACL,OAAO,OAAO;EACd,WAAW,QAAQ;EACnB,UAAU,aAAa,KAAK;EAC5B,eAAe,CAAC,cAAc,QAAQ,OAAO,MAAM;;GAElD,WACC,oBAAC,OAAO;IACN,UAAU,YAAY;IACtB,OAAO,OAAO;KACd,GACA;GAEH,OAAO,OACN,oBAAC;IAAK,OAAO,EAAE,SAAS,eAAe;cAAG,OAAO;KAAY,GAC3D;GAEJ,oBAAC;IAAW,SAAQ;IAAK,YAAW;cACjC,OAAO;KACG;;GACN;;;;;ACzDb,SAAgB,sBAAyB,OAAoC;CAC3E,MAAM,EAAE,eAAe;AAEvB,QAAO,EACL,WAAW;EACT,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,OAAO,aAAa,gBAAgB;EACpC,cAAc;EACd,KAAK;EACL,SAAS,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE;EACpC,EACF;;;;;ACJH,MAAa,aAAiB,UAA6B;CACzD;EACE,MAAM,EACJ,SACA,UACA,UACA,cACA,UAAU,WACV,aACE;EAEJ,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,uBAAuB;GACxE,OAAM,MAAK;IAAC,EAAE;IAAY,EAAE;IAAoB,EAAE;IAAQ;GAC1D,UAAU,MAAM;GAChB,kBAAkB;GACnB,CAAC;AAEF,SACE,oBAAC;GAAI,OAAO,OAAO;GAAW,WAAW,QAAQ;aAC9C,QAAQ,KAAI,QACX,oBAAC;IAEC,QAAQ;IACC;IACC;IACA;IACV,eAAe,MAAM;IACrB,UAAU,iBAAiB,IAAI;IAC/B,oBAAoB,MAAM;IAC1B,SAAS;MARJ,OAAO,IAAI,MAAM,CAStB,CACF;IACE"}
@@ -0,0 +1,113 @@
1
+ import { t as Icon } from "./Icon-BrLGgg0w.js";
2
+ import { n as useThemedStyles, t as Typography } from "./Typography-BaE9Y1O8.js";
3
+ import { t as Label } from "./Label-BVteAeiK.js";
4
+ import { useId } from "react";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+
7
+ //#region src/components/commons/inputs/TextArea/styles.ts
8
+ function createTextAreaStyles(props) {
9
+ const { height = "8rem", readOnly, startIcon } = props;
10
+ const focusRingColor = props.focusedRingColor || "var(--px-color-info)";
11
+ const placeHolderColor = props.placeholderColor || "var(--px-text-placeholder)";
12
+ return {
13
+ iconContainer: {
14
+ position: "absolute",
15
+ left: "0.75rem",
16
+ top: "1.375rem",
17
+ transform: "translateY(-50%)"
18
+ },
19
+ textArea: {
20
+ height,
21
+ width: "100%",
22
+ paddingBlock: "0.75rem",
23
+ paddingInline: "0.875rem",
24
+ borderRadius: "0.5rem",
25
+ resize: "none",
26
+ fontWeight: "400",
27
+ fontSize: "1rem",
28
+ color: "var(--px-text-primary)",
29
+ border: "1px solid red",
30
+ outlineOffset: "-1px",
31
+ cursor: readOnly ? "default" : void 0,
32
+ paddingLeft: startIcon ? "2.5rem" : void 0,
33
+ __rules: {
34
+ "&::placeholder": { color: `${placeHolderColor}` },
35
+ "&:focus": readOnly ? { outline: "none" } : { outline: `2px solid ${focusRingColor}` }
36
+ }
37
+ }
38
+ };
39
+ }
40
+
41
+ //#endregion
42
+ //#region src/components/commons/inputs/TextArea/index.tsx
43
+ const TextArea = (props) => {
44
+ const { value, disabled, readOnly, maxLength, hideMaxLength, textMaxLength, placeholder, label, required, requiredColor, labelColor, labelWeight, labelVariant, startIcon, iconColor } = props;
45
+ const inputId = useId();
46
+ const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {
47
+ pick: (p) => [
48
+ p.height,
49
+ p.readOnly,
50
+ p.startIcon,
51
+ p.placeholderColor,
52
+ p.focusedRingColor
53
+ ],
54
+ override: props.styles,
55
+ applyCommonProps: true
56
+ });
57
+ function handleChange(e) {
58
+ if (disabled || readOnly) return;
59
+ props.onChange?.(e.target.value);
60
+ }
61
+ function renderLabel() {
62
+ if (!label) return null;
63
+ return /* @__PURE__ */ jsx("div", {
64
+ className: "flex items-center gap-3",
65
+ children: /* @__PURE__ */ jsx(Label, {
66
+ htmlFor: inputId,
67
+ label,
68
+ required,
69
+ requiredColor,
70
+ labelColor,
71
+ labelWeight,
72
+ labelVariant
73
+ })
74
+ });
75
+ }
76
+ return /* @__PURE__ */ jsxs("div", { children: [
77
+ renderLabel(),
78
+ /* @__PURE__ */ jsxs("div", {
79
+ style: { position: "relative" },
80
+ children: [startIcon && /* @__PURE__ */ jsx("div", {
81
+ style: styles.iconContainer,
82
+ children: /* @__PURE__ */ jsx(Icon, {
83
+ name: startIcon,
84
+ color: iconColor ? iconColor : "var(--px-text-primary)"
85
+ })
86
+ }), /* @__PURE__ */ jsx("textarea", {
87
+ value,
88
+ disabled,
89
+ readOnly,
90
+ maxLength,
91
+ placeholder,
92
+ style: styles.textArea,
93
+ className: classes.textArea,
94
+ onChange: handleChange
95
+ })]
96
+ }),
97
+ maxLength && !hideMaxLength ? /* @__PURE__ */ jsxs(Typography, {
98
+ variant: "b2",
99
+ styles: { text: { marginLeft: "auto" } },
100
+ children: [
101
+ value.length,
102
+ "/",
103
+ maxLength,
104
+ " ",
105
+ textMaxLength
106
+ ]
107
+ }) : null
108
+ ] });
109
+ };
110
+
111
+ //#endregion
112
+ export { TextArea as t };
113
+ //# sourceMappingURL=TextArea-ZKDCCx4I.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TextArea-ZKDCCx4I.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps): StyleMap {\n const { height = '8rem', readOnly, startIcon } = props\n\n const focusRingColor = props.focusedRingColor || 'var(--px-color-info)'\n const placeHolderColor =\n props.placeholderColor || 'var(--px-text-placeholder)'\n\n return {\n iconContainer: {\n position: 'absolute',\n left: '0.75rem',\n top: '1.375rem',\n transform: 'translateY(-50%)'\n },\n textArea: {\n height,\n width: '100%',\n paddingBlock: '0.75rem',\n paddingInline: '0.875rem',\n borderRadius: '0.5rem',\n resize: 'none',\n\n fontWeight: '400',\n fontSize: '1rem',\n color: 'var(--px-text-primary)',\n\n border: '1px solid red',\n outlineOffset: '-1px',\n\n cursor: readOnly ? 'default' : undefined,\n paddingLeft: startIcon ? '2.5rem' : undefined,\n\n __rules: {\n '&::placeholder': {\n color: `${placeHolderColor}`\n },\n '&:focus': readOnly\n ? { outline: 'none' }\n : { outline: `2px solid ${focusRingColor}` }\n }\n }\n }\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/Label'\nimport { Icon } from '@components/toolkit/Icon'\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n const {\n value,\n disabled,\n readOnly,\n maxLength,\n hideMaxLength,\n textMaxLength,\n placeholder,\n\n label,\n required,\n requiredColor,\n labelColor,\n labelWeight,\n labelVariant,\n\n startIcon,\n iconColor\n } = props\n\n // Hooks\n const inputId = useId()\n\n const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n pick: p => [\n p.height,\n p.readOnly,\n p.startIcon,\n p.placeholderColor,\n p.focusedRingColor\n ],\n override: props.styles,\n applyCommonProps: true\n })\n\n // Functions\n function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n if (disabled || readOnly) return\n props.onChange?.(e.target.value)\n }\n\n function renderLabel() {\n if (!label) return null\n\n return (\n <div className=\"flex items-center gap-3\">\n <Label\n htmlFor={inputId}\n label={label}\n required={required}\n requiredColor={requiredColor}\n labelColor={labelColor}\n labelWeight={labelWeight}\n labelVariant={labelVariant}\n />\n </div>\n )\n }\n\n return (\n <div>\n {renderLabel()}\n\n <div style={{ position: 'relative' }}>\n {startIcon && (\n <div style={styles.iconContainer}>\n <Icon\n name={startIcon}\n color={iconColor ? iconColor : 'var(--px-text-primary)'}\n />\n </div>\n )}\n\n <textarea\n value={value}\n disabled={disabled}\n readOnly={readOnly}\n maxLength={maxLength}\n placeholder={placeholder}\n style={styles.textArea}\n className={classes.textArea}\n onChange={handleChange}\n />\n </div>\n\n {maxLength && !hideMaxLength ? (\n <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n {value.length}/{maxLength} {textMaxLength}\n </Typography>\n ) : null}\n </div>\n )\n}\n"],"mappings":";;;;;;;AAIA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,SAAS,QAAQ,UAAU,cAAc;CAEjD,MAAM,iBAAiB,MAAM,oBAAoB;CACjD,MAAM,mBACJ,MAAM,oBAAoB;AAE5B,QAAO;EACL,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,QAAQ;GACR,eAAe;GAEf,QAAQ,WAAW,YAAY;GAC/B,aAAa,YAAY,WAAW;GAEpC,SAAS;IACP,kBAAkB,EAChB,OAAO,GAAG,oBACX;IACD,WAAW,WACP,EAAE,SAAS,QAAQ,GACnB,EAAE,SAAS,aAAa,kBAAkB;IAC/C;GACF;EACF;;;;;AC5BH,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aAEA,OACA,UACA,eACA,YACA,aACA,cAEA,WACA,cACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,SAAS;IACF;IACG;IACK;IACH;IACC;IACC;KACd;IACE;;AAIV,QACE,qBAAC;EACE,aAAa;EAEd,qBAAC;GAAI,OAAO,EAAE,UAAU,YAAY;cACjC,aACC,oBAAC;IAAI,OAAO,OAAO;cACjB,oBAAC;KACC,MAAM;KACN,OAAO,YAAY,YAAY;MAC/B;KACE,EAGR,oBAAC;IACQ;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;IACE;EAEL,aAAa,CAAC,gBACb,qBAAC;GAAW,SAAQ;GAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;IAC9D,MAAM;IAAO;IAAE;IAAU;IAAE;;IACjB,GACX;KACA"}
@@ -361,6 +361,7 @@ function themeToCssVars(theme) {
361
361
  "--px-color-error": theme.colors.error,
362
362
  "--px-color-invalid": theme.colors.invalid,
363
363
  "--px-color-info": theme.colors.info,
364
+ "--px-color-disabled": theme.colors.text.disabled,
364
365
  "--px-scrollbar": theme.colors.scrollbar,
365
366
  "--px-bg": theme.colors.background.primary,
366
367
  "--px-surface": theme.colors.surface,
@@ -556,4 +557,4 @@ function useTheme() {
556
557
 
557
558
  //#endregion
558
559
  export { useTheme as n, ThemeProvider as t };
559
- //# sourceMappingURL=ThemeContext-BAcoPRJ-.js.map
560
+ //# sourceMappingURL=ThemeContext-BQQnMo5F.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeContext-BQQnMo5F.js","names":["result: any","out: any","defaultThemes: ThemeRegistry","ThemeProvider: React.FC<ThemeProviderProps>"],"sources":["../src/utils/functions/deepMerge.ts","../src/contexts/ThemeContext/constants.ts","../src/contexts/ThemeContext/utils/general.ts","../src/contexts/ThemeContext/utils/themeToCSSVars.ts","../src/contexts/ThemeContext/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport type DeepPartial<T> = {\n [P in keyof T]?: T[P] extends Array<infer U>\n ? Array<DeepPartial<U>>\n : T[P] extends object\n ? DeepPartial<T[P]>\n : T[P]\n}\n\nexport function deepMerge<T>(base: T, override?: DeepPartial<T>): T {\n if (override === undefined) return clone(base)\n\n if (!isPlainObject(base) || !isPlainObject(override)) {\n return clone(override as T)\n }\n\n const result: any = Array.isArray(base) ? [] : {}\n\n const baseKeys = Object.keys(base as any) as (keyof T)[]\n const overrideKeys = Object.keys(override as any) as (keyof T)[]\n\n const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]))\n\n for (const k of allKeys) {\n const baseVal = (base as any)[k]\n const overrideVal = (override as any)[k]\n\n if (overrideVal === undefined) {\n result[k] = clone(baseVal)\n continue\n }\n\n if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {\n result[k] = deepMerge(baseVal, overrideVal)\n continue\n }\n\n result[k] = clone(overrideVal)\n }\n\n return result as T\n}\n\nfunction isPlainObject(x: any): x is Record<string, any> {\n return !!x && typeof x === 'object' && !Array.isArray(x)\n}\n\nfunction clone<T>(v: T): T {\n if (v === undefined || v === null) return v\n if (Array.isArray(v)) return v.map(item => clone(item)) as unknown as T\n if (isPlainObject(v)) {\n const out: any = {}\n for (const k of Object.keys(v)) out[k] = clone((v as any)[k])\n return out\n }\n return v\n}\n","// theme/defaultThemes.ts\nimport type { ThemeRegistry } from './types'\n\nconst COMMON_MAP = {\n spacing: {\n xs: '0.25rem', // 4px\n sm: '0.5rem', // 8px\n md: '1rem', // 16px\n lg: '1.5rem', // 24px\n xl: '2rem', // 32px\n '2xl': '3rem' // 48px\n },\n borderRadius: {\n none: '0rem', // 0px\n sm: '0.25rem', // 4px\n md: '0.375rem', // 6px\n lg: '0.5rem', // 8px\n full: '9999rem' // \"infinite\" radius equivalent\n },\n fontSize: {\n xs: '0.75rem', // 12px\n sm: '0.875rem', // 14px\n md: '1rem', // 16px\n lg: '1.125rem', // 18px\n xl: '1.25rem', // 20px\n '2xl': '1.5rem' // 24px\n },\n fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 }\n} as const\n\nexport const defaultThemes: ThemeRegistry = {\n light: {\n colors: {\n scrollbar: '#0000001a',\n\n primary: '#0EB24C',\n secondary: '#6C6C6C',\n success: '#0EB24C',\n warning: '#f59e0b',\n error: '#ef4444',\n invalid: '#f87171',\n info: '#06b6d4',\n\n background: {\n primary: '#FFFFFF',\n card: {\n primary: '#F4F4F4',\n secondary: '#F3F6F9'\n }\n },\n button: {\n filled: {\n label: '#FFFFFF',\n background: '#0EB24C'\n },\n\n outlined: {\n label: '#0EB24C',\n borderColor: '#0EB24C'\n },\n\n ghost: {\n label: '#6C6C6C'\n }\n },\n\n surface: '#FBFBFB',\n border: {\n primary: '#E8E8E9',\n secondary: '#E8E8E9'\n },\n\n text: {\n primary: '#222222',\n secondary: '#6C6C6C',\n disabled: '#A0A0A0',\n inverse: '#FFFFFF'\n }\n },\n\n ...COMMON_MAP,\n\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.10)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.10)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.10)'\n }\n },\n\n dark: {\n colors: {\n scrollbar: '#858585',\n primary: '#0EB24C', // brand se mantém (ou pode clarear depois)\n secondary: '#C7CFD8',\n success: '#0EB24C',\n warning: '#f59e0b',\n error: '#ef4444',\n invalid: '#f87171',\n info: '#06b6d4',\n\n background: {\n primary: '#090909',\n card: {\n primary: '#F4F4F4',\n secondary: '#202020'\n }\n },\n button: {\n filled: {\n label: '#FFFFFF',\n background: '#0EB24C'\n },\n\n outlined: {\n label: '#0EB24C',\n borderColor: '#0EB24C'\n },\n\n ghost: {\n label: '#6C6C6C'\n }\n },\n\n surface: '#090909',\n\n border: {\n primary: '#27282D',\n secondary: '#27282D'\n },\n\n text: {\n primary: '#ECECEC',\n secondary: '#C7CFD8',\n disabled: '#8B93A0',\n inverse: '#090909'\n }\n },\n\n ...COMMON_MAP,\n\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.35)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.45)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.50)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.55)'\n }\n }\n}\n","// Utils\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport { deepMerge } from '@utils/functions'\nimport { defaultThemes } from '../constants'\n\n// Types\nimport type { ThemeMode, ThemeRegistry, ThemeTokens } from '../types'\n\n/**\n * Theme Utilities\n * ===============\n * Small DOM utilities used by the ThemeProvider to:\n * - toggle dark mode class for Tailwind compatibility\n * - inject CSS variables (`--px-*`) into the document root\n * - read/watch the OS/browser theme preference (`prefers-color-scheme`)\n *\n * These helpers are:\n * - **client-safe** (guarded for SSR)\n * - **framework-agnostic** (only touch `documentElement`)\n * - **tiny** (no dependencies)\n */\n\n/**\n * CSSVarMap\n * ---------\n * A map of CSS custom properties to be applied on the document root.\n *\n * Notes:\n * - Keys must be valid CSS variable names (e.g. `\"--px-bg\"`, `\"--px-text-primary\"`).\n * - Values can be strings or numbers.\n * - If you store numbers (e.g. 16), you decide at consumption time whether it means px.\n *\n * You can keep it generic:\n * Record<`--${string}`, string | number>\n *\n * Or restrict to your library prefix:\n * Record<`--px-${string}`, string | number>\n */\nexport type CSSVarMap = Partial<Record<`--${string}`, string | number>>\n\n/**\n * applyThemeClass(themeName)\n * -------------------------\n * Applies the light/dark mode class to the `<html>` element.\n *\n * Tailwind’s dark mode (in the common \"class\" strategy) typically relies on a\n * `.dark` class. This function toggles ONLY the `dark` class:\n *\n * - themeName `\"dark\"` => adds `.dark`\n * - themeName `\"light\"` => removes `.dark`\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyThemeClass(themeName: 'light' | 'dark') {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n root.classList.toggle('dark', themeName === 'dark')\n}\n\n/**\n * applyCssVars(vars)\n * ------------------\n * Injects CSS variables into the document root (`<html>`).\n *\n * This is how the library exposes theme tokens as CSS variables.\n * Components can then use `var(--px-...)` in styles.\n *\n * Example:\n * ```ts\n * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })\n * ```\n *\n * Behavior:\n * - Ignores `null` / `undefined` values.\n * - Converts all values to string before applying.\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyCssVars(vars: CSSVarMap) {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n\n for (const [key, value] of Object.entries(vars)) {\n if (value == null) continue\n root.style.setProperty(key, String(value))\n }\n}\n\n/**\n * getSystemThemeName()\n * --------------------\n * Returns the current OS/browser color scheme preference.\n *\n * It reads `prefers-color-scheme: dark` using `window.matchMedia`.\n *\n * Returns:\n * - `\"dark\"` if the user prefers dark mode\n * - `\"light\"` otherwise\n *\n * SSR:\n * - Returns `\"light\"` on the server (safe default).\n */\nexport function getSystemThemeName(): 'light' | 'dark' {\n if (typeof window === 'undefined') return 'light'\n const prefersDark =\n window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false\n return prefersDark ? 'dark' : 'light'\n}\n\n/**\n * watchSystemTheme(onChange)\n * --------------------------\n * Subscribes to changes in OS/browser theme preference.\n *\n * Use this when your selected mode is `\"system\"` so the app immediately reacts\n * when the user changes their OS theme.\n *\n * - Calls `onChange('light' | 'dark')` whenever the preference changes.\n * - Returns an `unsubscribe()` function.\n *\n * Implementation details:\n * - Uses `matchMedia('(prefers-color-scheme: dark)')`.\n * - Supports both modern `addEventListener('change', ...)` and legacy Safari\n * `addListener(...)` APIs.\n *\n * SSR:\n * - Returns a no-op unsubscribe function on the server.\n */\nexport function watchSystemTheme(onChange: (name: 'light' | 'dark') => void) {\n if (typeof window === 'undefined') return () => {}\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)')\n\n const handler = () => onChange(mq.matches ? 'dark' : 'light')\n\n // Optional: sync immediately on subscribe\n handler()\n\n // Modern browsers\n if (mq.addEventListener) {\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }\n\n // Legacy Safari\n mq.addListener(handler as any)\n return () => mq.removeListener(handler as any)\n}\n\n/**\n * Resolves an effective theme name from a mode.\n */\nexport function resolveName(mode: ThemeMode): string {\n if (mode !== 'system') return mode\n return getSystemThemeName()\n}\n\n/**\n * Builds a registry of user theme patches.\n */\nexport function buildRegistry(\n userThemes?: Partial<ThemeRegistry>\n): ThemeRegistry {\n return {\n light: {},\n dark: {},\n ...(userThemes ?? {})\n } as ThemeRegistry\n}\n\n/**\n * Builds the final resolved theme tokens.\n */\nexport function buildTheme(\n registry: ThemeRegistry,\n resolvedName: string,\n override?: Partial<ThemeTokens>\n): ThemeTokens {\n const base: ThemeTokens =\n resolvedName === 'dark'\n ? (defaultThemes.dark as ThemeTokens)\n : (defaultThemes.light as ThemeTokens)\n\n const selectedPatch = (registry[resolvedName] ?? registry.light) as any\n\n const merged = deepMerge(base, selectedPatch)\n return deepMerge(merged, override)\n}\n\nexport function isThemeMode(value: unknown): value is ThemeMode {\n return typeof value === 'string' && value.length > 0\n}\n\nexport function getLocalStorageSafe(): Storage | null {\n if (typeof window === 'undefined') return null\n try {\n return window.localStorage\n } catch {\n return null\n }\n}\n","// Types\nimport type { CSSVarMap } from './general'\nimport type { ThemeTokens } from '../types'\n\n/**\n * themeToCssVars(theme)\n * ---------------------\n * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).\n *\n * The ThemeProvider uses this function to inject `--px-*` variables into the\n * document root (`<html>`). Components can then rely on stable CSS variables,\n * making them framework-agnostic and compatible with Tailwind (via `.dark`).\n *\n * Why CSS variables?\n * - They are fast (native to the browser)\n * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)\n * - They enable dynamic theme switching without rerendering every component\n *\n * Requirements / Assumptions:\n * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).\n * The ThemeProvider is responsible for merging partial theme patches on top\n * of a complete base theme (light/dark defaults).\n *\n * Variable naming:\n * - All variables are prefixed with `--px-` to avoid collisions.\n * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).\n *\n * Notes:\n * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid\n * for CSS variables. When consuming them, you can:\n * - append `px` in JS (`${var}px`), or\n * - store them as strings here (e.g. `\"16px\"`) if you prefer.\n *\n * Example usage (component styles):\n * ```ts\n * const styles = {\n * background: 'var(--px-bg)',\n * color: 'var(--px-text-primary)',\n * borderColor: 'var(--px-border-primary)',\n * }\n * ```\n *\n * Example usage (Tailwind config / CSS):\n * ```css\n * .card {\n * background: var(--px-surface);\n * color: var(--px-text-primary);\n * border: 1px solid var(--px-border-primary);\n * }\n * ```\n */\nexport function themeToCssVars(theme: ThemeTokens): CSSVarMap {\n return {\n /**\n * Brand & intent colors\n */\n '--px-color-primary': theme.colors.primary,\n '--px-color-secondary': theme.colors.secondary,\n '--px-color-success': theme.colors.success,\n '--px-color-warning': theme.colors.warning,\n '--px-color-error': theme.colors.error,\n '--px-color-invalid': theme.colors.invalid,\n '--px-color-info': theme.colors.info,\n '--px-color-disabled': theme.colors.text.disabled,\n\n /**\n * Scrollbar\n */\n '--px-scrollbar': theme.colors.scrollbar,\n\n /**\n * Surfaces / backgrounds\n */\n '--px-bg': theme.colors.background.primary,\n '--px-surface': theme.colors.surface,\n '--px-background-card-primary': theme.colors.background.card.primary,\n '--px-background-card-secondary': theme.colors.background.card.secondary,\n\n /**\n * Borders\n * -------\n * Divider and outline colors.\n */\n '--px-border-primary': theme.colors.border.primary,\n '--px-border-secondary': theme.colors.border.secondary,\n\n /**\n * Text\n * ----\n * Text colors for different emphasis levels.\n */\n '--px-text-primary': theme.colors.text.primary,\n '--px-text-secondary': theme.colors.text.secondary,\n '--px-text-disabled': theme.colors.text.disabled,\n '--px-text-inverse': theme.colors.text.inverse,\n\n /**\n * Buttons – Filled\n * ----------------\n * Filled button colors\n */\n '--px-btn-filled-bg': theme.colors.button.filled.background,\n '--px-btn-filled-label': theme.colors.button.filled.label,\n\n /**\n * Buttons – Outlined\n * ------------------\n * Outlined button colors\n */\n '--px-btn-outlined-border': theme.colors.button.outlined.borderColor,\n '--px-btn-outlined-label': theme.colors.button.outlined.label,\n\n /**\n * Buttons – Ghost\n * --------------\n * Ghost button colors\n */\n '--px-btn-ghost-label': theme.colors.button.ghost.label,\n /**\n * Spacing\n * -------------\n * Numeric spacing tokens (commonly used as px).\n */\n '--px-space-xs': theme.spacing.xs,\n '--px-space-sm': theme.spacing.sm,\n '--px-space-md': theme.spacing.md,\n '--px-space-lg': theme.spacing.lg,\n '--px-space-xl': theme.spacing.xl,\n '--px-space-2xl': theme.spacing['2xl'],\n\n /**\n * Border radius scale\n * -------------------\n * Numeric radius tokens (commonly used as px).\n */\n '--px-radius-none': theme.borderRadius.none,\n '--px-radius-sm': theme.borderRadius.sm,\n '--px-radius-md': theme.borderRadius.md,\n '--px-radius-lg': theme.borderRadius.lg,\n '--px-radius-full': theme.borderRadius.full,\n\n /**\n * Typography scale\n * ----------------\n * Font sizes and font weights.\n */\n '--px-fs-xs': theme.fontSize.xs,\n '--px-fs-sm': theme.fontSize.sm,\n '--px-fs-md': theme.fontSize.md,\n '--px-fs-lg': theme.fontSize.lg,\n '--px-fs-xl': theme.fontSize.xl,\n '--px-fs-2xl': theme.fontSize['2xl'],\n\n '--px-fw-normal': theme.fontWeight.normal,\n '--px-fw-medium': theme.fontWeight.medium,\n '--px-fw-semibold': theme.fontWeight.semibold,\n '--px-fw-bold': theme.fontWeight.bold,\n\n /**\n * Shadows\n * -------\n * CSS shadow strings for elevation.\n */\n '--px-shadow-sm': theme.shadows.sm,\n '--px-shadow-md': theme.shadows.md,\n '--px-shadow-lg': theme.shadows.lg,\n '--px-shadow-xl': theme.shadows.xl\n }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// External Libraries\nimport { useMemo, useState, useEffect, useContext, createContext } from 'react'\n\n// Utils\nimport {\n buildTheme,\n isThemeMode,\n resolveName,\n applyCssVars,\n buildRegistry,\n themeToCssVars,\n applyThemeClass,\n watchSystemTheme,\n getLocalStorageSafe\n} from './utils'\n\n// Types\nimport type { ThemeMode, ThemeContextData, ThemeProviderProps } from './types'\n\nexport * from './types'\n\n/**\n * Theme Context\n * -------------\n * Internal context used by `ThemeProvider` and consumed by `useTheme()`.\n *\n * The value is always non-null inside a `<ThemeProvider />`.\n */\nconst ThemeContext = createContext<ThemeContextData | null>(null)\n\n/**\n * ThemeProvider\n * -------------\n * Provides theme state + resolved theme tokens to your app.\n */\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n themes,\n children,\n override,\n persistence,\n persist = false,\n defaultMode = 'system',\n storageKey = 'px-theme'\n}) => {\n /**\n * Registry of user patches (stable unless `themes` changes).\n */\n const registry = useMemo(() => buildRegistry(themes), [themes])\n\n // States\n /**\n * Selected mode (with optional persistence).\n *\n * Priority:\n * 1) `persistence` adapter (advanced)\n * 2) `persist === true` + localStorage (quick)\n * 3) `defaultMode`\n */\n const [mode, setMode] = useState<ThemeMode>(makeInitialMode)\n\n /**\n * Loading flag (mainly useful if consumers want to wait for first mount).\n */\n const [isLoading, setLoading] = useState(true)\n\n // UseEffects\n useEffect(() => {\n setLoading(false)\n }, [])\n\n /**\n * Keep in sync with OS when mode === \"system\".\n */\n useEffect(() => {\n if (typeof window === 'undefined') return\n if (mode !== 'system') return\n\n return watchSystemTheme(() => {\n setMode('system')\n })\n }, [mode])\n\n /**\n * Resolved name is the actual currently applied theme name.\n * If `mode === \"system\"`, it becomes \"light\" or \"dark\".\n */\n const resolvedName = useMemo(() => {\n if (typeof window === 'undefined') return mode === 'system' ? 'light' : mode\n return resolveName(mode)\n }, [mode])\n\n /**\n * Build final resolved theme tokens (always complete).\n */\n const theme = useMemo(\n () => buildTheme(registry, resolvedName, override),\n [registry, resolvedName, override]\n )\n\n /**\n * Apply theme effects:\n * - toggles `.dark` class on <html> (Tailwind)\n * - injects --px-* variables on <html>\n */\n useEffect(() => {\n if (typeof window === 'undefined') return\n applyThemeClass(resolvedName === 'dark' ? 'dark' : 'light')\n applyCssVars(themeToCssVars(theme))\n }, [resolvedName, theme])\n\n /**\n * Persist mode changes (optional).\n *\n * We persist the selected `mode` (including \"system\"), not the resolvedName.\n *\n * Priority:\n * - If `persistence` exists, use it.\n * - Else if `persist === true`, use localStorage.\n */\n useEffect(() => {\n // advanced adapter\n if (persistence) {\n try {\n persistence.set(mode)\n } catch {\n // ignore\n }\n return\n }\n\n // quick localStorage mode\n if (!persist) return\n const ls = getLocalStorageSafe()\n if (!ls) return\n\n try {\n ls.setItem(storageKey, mode)\n } catch {\n // ignore\n }\n }, [mode, persist, storageKey, persistence])\n\n // Functions\n function makeInitialMode() {\n // 1) advanced adapter\n if (persistence) {\n try {\n const saved = persistence.get()\n return (saved ?? defaultMode) as ThemeMode\n } catch {\n return defaultMode\n }\n }\n\n // 2) quick localStorage mode\n // if (persist) {\n const ls = getLocalStorageSafe()\n if (!ls) return defaultMode\n const raw = ls.getItem(storageKey)\n return isThemeMode(raw) ? raw : defaultMode\n // }\n\n // 3) fallback\n // return defaultMode\n }\n\n /**\n * Sets the selected theme mode.\n */\n function setTheme(next: ThemeMode) {\n setMode(next)\n }\n\n /**\n * Toggles between two theme names (defaults to \"light\" and \"dark\").\n */\n function toggleTheme(a: string = 'light', b: string = 'dark') {\n setMode(resolvedName === a ? b : a)\n }\n\n return (\n <ThemeContext.Provider\n value={{ mode, resolvedName, theme, isLoading, setTheme, toggleTheme }}\n >\n {children}\n </ThemeContext.Provider>\n )\n}\n\n/**\n * useTheme()\n *\n * Returns the current theme context.\n *\n * @throws If called outside of `<ThemeProvider />`.\n */\nexport function useTheme(): ThemeContextData {\n const ctx = useContext(ThemeContext)\n if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')\n return ctx\n}\n"],"mappings":"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"}
@@ -526,4 +526,4 @@ function Typography(props) {
526
526
 
527
527
  //#endregion
528
528
  export { useThemedStyles as n, Typography as t };
529
- //# sourceMappingURL=Typography-CTfrQCqI.js.map
529
+ //# sourceMappingURL=Typography-BaE9Y1O8.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Typography-CTfrQCqI.js","names":["parts: string[]","COMMON_MAP: Record<\n keyof CommonStyleProps,\n (value: any, out: React.CSSProperties) => void\n>","out: React.CSSProperties","inline: any","rulesBySlot: any","out: any","typographyVariants: Record<TypographyVariant, CSSProperties>","variantToElement: Record<\n TypographyVariant,\n keyof JSX.IntrinsicElements\n>","alignText: Record<TextAlign, CSSProperties>"],"sources":["../src/hooks/useThemedStyles/utils/hasString.ts","../src/hooks/useThemedStyles/utils/stableStringfy.ts","../src/hooks/useThemedStyles/utils/injectSlotsRule.ts","../src/hooks/useThemedStyles/utils/mergeStyleMaps.ts","../src/hooks/useThemedStyles/utils/resolveCommonStyleProps.ts","../src/hooks/useThemedStyles/utils/splitRules.ts","../src/hooks/useThemedStyles/utils/stripCommonProps.ts","../src/hooks/useThemedStyles/index.ts","../src/components/toolkit/Typography/config.ts","../src/components/toolkit/Typography/style.ts","../src/components/toolkit/Typography/index.tsx"],"sourcesContent":["/**\n * Small deterministic hash for strings (djb2 variant).\n * Used to generate stable class ids and cache keys.\n */\nexport function hashStr(str: string) {\n let h = 5381\n for (let i = 0; i < str.length; i++) h = (h * 33) ^ str.charCodeAt(i)\n return (h >>> 0).toString(36)\n}\n","/**\n * Stable stringify (order-independent) for hashing.\n * Sorts object keys to keep output deterministic.\n */\nexport function stableStringify(obj: any): string {\n if (obj == null || typeof obj !== 'object') return String(obj)\n if (Array.isArray(obj)) return `[${obj.map(stableStringify).join(',')}]`\n const keys = Object.keys(obj).sort()\n return `{${keys.map(k => `${k}:${stableStringify(obj[k])}`).join(',')}}`\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Utils\nimport { hashStr } from './hasString'\nimport { stableStringify } from './stableStringfy'\n\n// Types\nimport type { RuleMap } from '../types'\n\n/**\n * Single <style> tag used for all runtime rules.\n */\nconst STYLE_ID = '__px_runtime_rules__'\n\n/**\n * Prevents injecting identical rules multiple times.\n */\nconst CACHE = new Set<string>()\n\n/**\n * Ensures the runtime <style> element exists and returns it.\n */\nfunction ensureStyleEl(): HTMLStyleElement | null {\n if (typeof document === 'undefined') return null\n let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null\n if (!el) {\n el = document.createElement('style')\n el.id = STYLE_ID\n document.head.appendChild(el)\n }\n return el\n}\n\n/**\n * CSS properties that should NOT automatically receive \"px\" when given a number.\n *\n * Example:\n * - opacity: 0.5 (NOT 0.5px)\n * - zIndex: 10 (NOT 10px)\n * - lineHeight: 1.2 (NOT 1.2px)\n */\nconst UNITLESS = new Set([\n 'opacity',\n 'zIndex',\n 'fontWeight',\n 'flex',\n 'flexGrow',\n 'flexShrink',\n 'order',\n 'lineHeight'\n])\n\n/**\n * Converts camelCase CSS property names to kebab-case.\n * Keeps CSS variables intact (e.g. \"--px-bg\").\n */\nfunction toKebab(prop: string) {\n if (prop.startsWith('--')) return prop\n return prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)\n}\n\n/**\n * Converts a JS value to a CSS value.\n *\n * - `number` => `\"${n}px\"` for most properties\n * - `number` => `\"${n}\"` for unitless properties\n * - `string` => string as-is\n */\nfunction toCssValue(prop: string, value: any) {\n if (value == null) return null\n if (typeof value === 'number' && !UNITLESS.has(prop)) return `${value}px`\n return String(value)\n}\n\n/**\n * Converts a declaration object to CSS string.\n *\n * Example:\n * `{ backgroundColor: \"red\", padding: 8 }`\n * => `\"background-color:red;padding:8px;\"`\n */\nfunction declToCss(decl: Record<string, any>) {\n const parts: string[] = []\n for (const [k, v] of Object.entries(decl)) {\n const cssValue = toCssValue(k, v)\n if (cssValue == null) continue\n parts.push(`${toKebab(k)}:${cssValue};`)\n }\n return parts.join('')\n}\n\n/**\n * Scopes a selector to a generated slot class.\n *\n * Rules:\n * - selectors containing \"&\" are replaced: \"&:hover\" => \".slot:hover\"\n * - selectors starting with \":\" become pseudo: \":hover\" => \".slot:hover\"\n * - otherwise it's treated as descendant: \"p\" => \".slot p\"\n */\nfunction scopeSelector(selector: string, baseClass: string) {\n const base = `.${baseClass}`\n\n if (selector.includes('&')) return selector.replaceAll('&', base)\n if (selector.startsWith(':')) return `${base}${selector}`\n return `${base} ${selector}`\n}\n\n/**\n * Injects CSS rules for one slot class into the runtime <style> tag.\n *\n * The injected CSS is cached using a hash of (slotClass + rules).\n */\nexport function injectSlotRules(slotClass: string, rules?: RuleMap) {\n if (!rules || Object.keys(rules).length === 0) return\n\n if (typeof document === 'undefined') return\n\n const signature = `${slotClass}:${stableStringify(rules)}`\n const key = hashStr(signature)\n if (CACHE.has(key)) return\n\n const css = Object.entries(rules)\n .map(\n ([sel, decl]) => `${scopeSelector(sel, slotClass)}{${declToCss(decl)}}`\n )\n .join('\\n')\n\n const el = ensureStyleEl()\n if (!el) return\n\n el.appendChild(document.createTextNode(`\\n${css}\\n`))\n CACHE.add(key)\n}\n","/**\n * Shallow-merge style maps slot-by-slot.\n * Warns when override contains unknown slots (developer UX).\n */\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport function mergeStyleMaps<T extends Record<string, any>>(\n base: T,\n override?: Partial<T>\n): T {\n if (!override) return base\n const out = { ...base } as T\n\n for (const key in override) {\n if (!(key in base)) {\n console.warn(\n `[useThemedStyles] Unknown style slot \"${key}\". Available slots: ${Object.keys(base).join(', ')}`\n )\n }\n\n out[key] = { ...(base[key] ?? {}), ...(override[key] ?? {}) } as any\n }\n\n return out\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Types\nimport type { CommonStyleProps } from '../types'\n\nfunction toCss(v: number | string | undefined) {\n return typeof v === 'number' ? `${v}rem` : v\n}\n\n/**\n * Source of truth: common prop -> how it maps into CSSProperties.\n * Add new common props ONLY here.\n */\nconst COMMON_MAP: Record<\n keyof CommonStyleProps,\n (value: any, out: React.CSSProperties) => void\n> = {\n // margin\n m: (v, o) => {\n o.margin = toCss(v)\n },\n mx: (v, o) => {\n o.marginLeft = toCss(v)\n o.marginRight = toCss(v)\n },\n my: (v, o) => {\n o.marginTop = toCss(v)\n o.marginBottom = toCss(v)\n },\n mt: (v, o) => {\n o.marginTop = toCss(v)\n },\n mr: (v, o) => {\n o.marginRight = toCss(v)\n },\n mb: (v, o) => {\n o.marginBottom = toCss(v)\n },\n ml: (v, o) => {\n o.marginLeft = toCss(v)\n },\n\n // padding\n p: (v, o) => {\n o.padding = toCss(v)\n },\n px: (v, o) => {\n o.paddingLeft = toCss(v)\n o.paddingRight = toCss(v)\n },\n py: (v, o) => {\n o.paddingTop = toCss(v)\n o.paddingBottom = toCss(v)\n },\n pt: (v, o) => {\n o.paddingTop = toCss(v)\n },\n pr: (v, o) => {\n o.paddingRight = toCss(v)\n },\n pb: (v, o) => {\n o.paddingBottom = toCss(v)\n },\n pl: (v, o) => {\n o.paddingLeft = toCss(v)\n },\n\n // text\n fontSize: (v, o) => {\n o.fontSize = toCss(v)\n },\n fontWeight: (v, o) => {\n o.fontWeight = v\n },\n lineHeight: (v, o) => {\n o.lineHeight = toCss(v)\n },\n textAlign: (v, o) => {\n o.textAlign = v\n },\n\n // layout\n w: (v, o) => {\n o.width = toCss(v)\n },\n h: (v, o) => {\n o.height = toCss(v)\n },\n minW: (v, o) => {\n o.minWidth = toCss(v)\n },\n maxW: (v, o) => {\n o.maxWidth = toCss(v)\n },\n minH: (v, o) => {\n o.minHeight = toCss(v)\n },\n maxH: (v, o) => {\n o.maxHeight = toCss(v)\n }\n}\n\nexport const COMMON_KEYS = Object.keys(COMMON_MAP) as Array<\n keyof CommonStyleProps\n>\n\nexport function hasAnyCommonStyleProps(props: Partial<CommonStyleProps>) {\n for (const k of COMMON_KEYS) {\n if (props[k] != null) return true\n }\n return false\n}\n\nexport function resolveCommonStyleProps(\n props: Partial<CommonStyleProps>\n): React.CSSProperties {\n const out: React.CSSProperties = {}\n\n for (const k of COMMON_KEYS) {\n const value = props[k]\n if (value != null) COMMON_MAP[k](value, out)\n }\n\n return out\n}\n\n/**\n * Applies common style props (if present) to a chosen slot.\n * Common props are resolved by `resolveCommonStyleProps`.\n */\nexport function applyCommonsToStyles<TStyles extends Record<string, any>>(\n styles: TStyles,\n props: Partial<CommonStyleProps>,\n slotOverride?: keyof TStyles\n): TStyles {\n if (!hasAnyCommonStyleProps(props)) return styles\n\n const keys = Object.keys(styles)\n if (keys.length === 0) return styles\n\n const slot =\n slotOverride ??\n (('container' in styles ? 'container' : keys[0]) as keyof TStyles)\n\n const common = resolveCommonStyleProps(props)\n\n return {\n ...styles,\n [slot]: { ...(styles[slot] ?? {}), ...common }\n } as TStyles\n}\n","// Types\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport type { SplitResult, StyleMap } from '../types'\n\n/**\n * Splits the style map into:\n * - `inline`: slot styles without `__rules`\n * - `rulesBySlot`: extracted `__rules` grouped by slot\n *\n * This lets us:\n * - apply inline styles directly via `style={...}`\n * - inject selectors/pseudos via generated CSS classes\n */\nexport function splitRules<TStyles extends StyleMap>(\n styles: TStyles\n): SplitResult<TStyles> {\n const inline: any = {}\n const rulesBySlot: any = {}\n\n for (const key in styles) {\n const slot = styles[key]\n if (!slot) continue\n\n const { __rules, ...rest } = slot as any\n inline[key] = rest\n\n if (__rules && Object.keys(__rules).length > 0) {\n rulesBySlot[key] = __rules\n }\n }\n\n return { inline, rulesBySlot }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\nimport type { CommonStyleProps } from '../types'\n\nimport { COMMON_KEYS } from './resolveCommonStyleProps'\n\nconst COMMON_KEY_SET = new Set<string>(COMMON_KEYS as readonly string[])\n\nexport function stripCommonProps<T extends object>(\n props: T\n): Omit<T, keyof CommonStyleProps> {\n const out: Record<string, unknown> = {}\n\n for (const key of Object.keys(props as any)) {\n if (!COMMON_KEY_SET.has(key)) {\n out[key] = (props as any)[key]\n }\n }\n\n return out as Omit<T, keyof CommonStyleProps>\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// External Libraries\nimport { useMemo, useInsertionEffect } from 'react'\n\n// Utils\nimport {\n hashStr,\n splitRules,\n mergeStyleMaps,\n injectSlotRules,\n stableStringify,\n applyCommonsToStyles\n} from './utils'\n\n// Types\nimport type {\n CSSVars,\n RuleMap,\n StyleMap,\n StylesFactory,\n UseThemedStylesOptions\n} from './types'\n\n/**\n * useThemedStyles\n *\n * A React-Native-like style factory hook for React Web that also supports:\n * - CSS variables in inline styles\n * - Pseudo selectors, nested selectors, and vendor selectors via `__rules`\n *\n * It returns two maps:\n * - `styles`: inline styles for each slot\n * - `classes`: generated classes for each slot (needed for `__rules`)\n *\n * Usage:\n * ```tsx\n * const { styles, classes } = useThemedStyles(props, createStyles)\n *\n * return (\n * <button style={styles.item} className={classes.item}>\n * <p style={styles.label} className={classes.label}>Hello</p>\n * </button>\n * )\n * ```\n *\n * Notes:\n * - If a slot has no `__rules`, you can omit `className` for that slot.\n * - If you use `__rules`, you MUST apply the corresponding class for scoping.\n */\nexport function useThemedStyles<TProps, TStyles extends StyleMap>(\n props: TProps,\n factory: StylesFactory<TProps, TStyles>,\n options?: UseThemedStylesOptions<TProps, TStyles>\n): {\n styles: Record<keyof TStyles, React.CSSProperties | CSSVars>\n classes: Record<keyof TStyles, string>\n} {\n /**\n * Memoization priority:\n * 1) deps (manual)\n * 2) pick(props) (recommended)\n * 3) props reference (default behavior)\n */\n const memoKey =\n options?.deps ?? (options?.pick ? options.pick(props) : [props])\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: controlled by deps/pick\n const raw = useMemo(() => factory(props), [factory, ...memoKey])\n\n const { inline, rulesBySlot } = useMemo(() => splitRules(raw), [raw])\n\n const merged = useMemo(\n () => mergeStyleMaps(inline as any, options?.override),\n [inline, options?.override]\n )\n\n const withCommons = useMemo(() => {\n if (!options?.applyCommonProps) return merged\n return applyCommonsToStyles(merged as any, props as any, options.commonSlot)\n }, [merged, props, options?.applyCommonProps, options?.commonSlot])\n\n /**\n * Base id is derived only from the rules signature.\n * This keeps class names stable whenever rules don't change.\n */\n const baseId = useMemo(() => {\n const sig = stableStringify(rulesBySlot)\n const key = hashStr(sig)\n return options?.debugName ? `pxr-${options.debugName}-${key}` : `pxr-${key}`\n }, [rulesBySlot, options?.debugName])\n\n /**\n * Generated class per slot.\n * Example: pxr-<hash>__item\n */\n const classes = useMemo(() => {\n const out: any = {}\n for (const slotKey of Object.keys(withCommons)) {\n out[slotKey] = `${baseId}__${slotKey}`\n }\n return out as Record<keyof TStyles, string>\n }, [baseId, withCommons])\n\n /**\n * Inject rules into the runtime <style> tag.\n *\n * We use `useInsertionEffect` so styles are inserted before layout/paint\n * when supported (best for CSS-in-JS style injection).\n */\n useInsertionEffect(() => {\n for (const slotKey of Object.keys(rulesBySlot as any)) {\n const rules = (rulesBySlot as any)[slotKey] as RuleMap | undefined\n\n if (!rules) continue\n\n injectSlotRules((classes as any)[slotKey], rules)\n }\n }, [rulesBySlot, classes])\n\n return { styles: withCommons as any, classes }\n}\n","// External Libraries\nimport type { CSSProperties, JSX } from 'react'\n\n// Types\nimport type { TextAlign, TypographyVariant } from './types'\n\nconst primaryColor = 'var(--px-text-primary)'\nconst secondaryColor = 'var(--px-text-secondary)'\n\nexport const typographyVariants: Record<TypographyVariant, CSSProperties> = {\n h1: {\n fontSize: '3rem',\n fontWeight: '700',\n lineHeight: '1.25',\n color: primaryColor\n },\n h2: {\n fontSize: '2.25rem',\n fontWeight: '600',\n lineHeight: '1.35',\n color: primaryColor\n },\n h3: {\n fontSize: '1.875rem',\n fontWeight: '600',\n color: primaryColor\n },\n h4: {\n fontSize: '1.5rem',\n fontWeight: '500',\n color: primaryColor\n },\n h5: {\n fontSize: '1.25rem',\n fontWeight: '500',\n color: primaryColor\n },\n b1: {\n fontSize: '1rem',\n fontWeight: '500',\n color: primaryColor\n },\n b2: {\n fontSize: '0.875rem',\n color: secondaryColor\n },\n b3: {\n fontSize: '0.75rem',\n color: secondaryColor\n },\n caption: {\n fontSize: '0.75rem',\n color: secondaryColor\n },\n legal: {\n fontSize: '0.65rem',\n textTransform: 'uppercase',\n letterSpacing: '0.025em',\n color: secondaryColor\n }\n}\n\nexport const variantToElement: Record<\n TypographyVariant,\n keyof JSX.IntrinsicElements\n> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n caption: 'span',\n legal: 'span'\n}\n\nexport const alignText: Record<TextAlign, CSSProperties> = {\n left: { textAlign: 'left' },\n center: { textAlign: 'center' },\n right: { textAlign: 'right' },\n justify: { textAlign: 'justify' }\n}\n","// Utils\nimport { alignText, typographyVariants } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTypographyStyles(props: TypographyProps): StyleMap {\n const { isLoading, variant, align = 'left', color } = props\n\n return {\n base: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n borderBottom: '1px solid var(--pixel-border, #e5e7eb)',\n gap: 0,\n animation: isLoading ? 'animate-pulse 1.5s infinite' : undefined\n },\n\n loading: {\n width: '50%',\n height: '1em',\n display: 'inline-block',\n backgroundColor: 'var(--pixel-gray-300, #d1d5db)',\n borderRadius: '0.25rem'\n },\n\n text: {\n ...alignText[align],\n ...typographyVariants[variant],\n color: color ?? typographyVariants[variant].color\n }\n }\n}\n","// Utils\nimport { variantToElement } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTypographyStyles } from './style'\n\nexport function Typography(props: TypographyProps) {\n const {\n id,\n as,\n href,\n variant,\n children,\n placeholder,\n isLoading = false,\n styles: styleTypography\n } = props\n\n const { styles } = useThemedStyles(props, createTypographyStyles, {\n pick: p => [p.isLoading, p.variant, p.align],\n commonSlot: 'text',\n applyCommonProps: true,\n override: styleTypography\n })\n\n const Component = as ?? variantToElement[variant]\n\n if (isLoading) {\n return (\n <span\n id={id}\n aria-hidden=\"true\"\n role=\"presentation\"\n style={{ ...styles.text, ...styles.loading }}\n />\n )\n }\n\n const sharedProps = {\n id,\n style: styles.text,\n 'aria-label': placeholder\n }\n\n if (href) {\n return (\n <a href={href} {...sharedProps}>\n {children}\n </a>\n )\n }\n\n return <Component {...sharedProps}>{children}</Component>\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"Typography-BaE9Y1O8.js","names":["parts: string[]","COMMON_MAP: Record<\n keyof CommonStyleProps,\n (value: any, out: React.CSSProperties) => void\n>","out: React.CSSProperties","inline: any","rulesBySlot: any","out: any","typographyVariants: Record<TypographyVariant, CSSProperties>","variantToElement: Record<\n TypographyVariant,\n keyof JSX.IntrinsicElements\n>","alignText: Record<TextAlign, CSSProperties>"],"sources":["../src/hooks/useThemedStyles/utils/hasString.ts","../src/hooks/useThemedStyles/utils/stableStringfy.ts","../src/hooks/useThemedStyles/utils/injectSlotsRule.ts","../src/hooks/useThemedStyles/utils/mergeStyleMaps.ts","../src/hooks/useThemedStyles/utils/resolveCommonStyleProps.ts","../src/hooks/useThemedStyles/utils/splitRules.ts","../src/hooks/useThemedStyles/utils/stripCommonProps.ts","../src/hooks/useThemedStyles/index.ts","../src/components/toolkit/Typography/config.ts","../src/components/toolkit/Typography/style.ts","../src/components/toolkit/Typography/index.tsx"],"sourcesContent":["/**\n * Small deterministic hash for strings (djb2 variant).\n * Used to generate stable class ids and cache keys.\n */\nexport function hashStr(str: string) {\n let h = 5381\n for (let i = 0; i < str.length; i++) h = (h * 33) ^ str.charCodeAt(i)\n return (h >>> 0).toString(36)\n}\n","/**\n * Stable stringify (order-independent) for hashing.\n * Sorts object keys to keep output deterministic.\n */\nexport function stableStringify(obj: any): string {\n if (obj == null || typeof obj !== 'object') return String(obj)\n if (Array.isArray(obj)) return `[${obj.map(stableStringify).join(',')}]`\n const keys = Object.keys(obj).sort()\n return `{${keys.map(k => `${k}:${stableStringify(obj[k])}`).join(',')}}`\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Utils\nimport { hashStr } from './hasString'\nimport { stableStringify } from './stableStringfy'\n\n// Types\nimport type { RuleMap } from '../types'\n\n/**\n * Single <style> tag used for all runtime rules.\n */\nconst STYLE_ID = '__px_runtime_rules__'\n\n/**\n * Prevents injecting identical rules multiple times.\n */\nconst CACHE = new Set<string>()\n\n/**\n * Ensures the runtime <style> element exists and returns it.\n */\nfunction ensureStyleEl(): HTMLStyleElement | null {\n if (typeof document === 'undefined') return null\n let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null\n if (!el) {\n el = document.createElement('style')\n el.id = STYLE_ID\n document.head.appendChild(el)\n }\n return el\n}\n\n/**\n * CSS properties that should NOT automatically receive \"px\" when given a number.\n *\n * Example:\n * - opacity: 0.5 (NOT 0.5px)\n * - zIndex: 10 (NOT 10px)\n * - lineHeight: 1.2 (NOT 1.2px)\n */\nconst UNITLESS = new Set([\n 'opacity',\n 'zIndex',\n 'fontWeight',\n 'flex',\n 'flexGrow',\n 'flexShrink',\n 'order',\n 'lineHeight'\n])\n\n/**\n * Converts camelCase CSS property names to kebab-case.\n * Keeps CSS variables intact (e.g. \"--px-bg\").\n */\nfunction toKebab(prop: string) {\n if (prop.startsWith('--')) return prop\n return prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`)\n}\n\n/**\n * Converts a JS value to a CSS value.\n *\n * - `number` => `\"${n}px\"` for most properties\n * - `number` => `\"${n}\"` for unitless properties\n * - `string` => string as-is\n */\nfunction toCssValue(prop: string, value: any) {\n if (value == null) return null\n if (typeof value === 'number' && !UNITLESS.has(prop)) return `${value}px`\n return String(value)\n}\n\n/**\n * Converts a declaration object to CSS string.\n *\n * Example:\n * `{ backgroundColor: \"red\", padding: 8 }`\n * => `\"background-color:red;padding:8px;\"`\n */\nfunction declToCss(decl: Record<string, any>) {\n const parts: string[] = []\n for (const [k, v] of Object.entries(decl)) {\n const cssValue = toCssValue(k, v)\n if (cssValue == null) continue\n parts.push(`${toKebab(k)}:${cssValue};`)\n }\n return parts.join('')\n}\n\n/**\n * Scopes a selector to a generated slot class.\n *\n * Rules:\n * - selectors containing \"&\" are replaced: \"&:hover\" => \".slot:hover\"\n * - selectors starting with \":\" become pseudo: \":hover\" => \".slot:hover\"\n * - otherwise it's treated as descendant: \"p\" => \".slot p\"\n */\nfunction scopeSelector(selector: string, baseClass: string) {\n const base = `.${baseClass}`\n\n if (selector.includes('&')) return selector.replaceAll('&', base)\n if (selector.startsWith(':')) return `${base}${selector}`\n return `${base} ${selector}`\n}\n\n/**\n * Injects CSS rules for one slot class into the runtime <style> tag.\n *\n * The injected CSS is cached using a hash of (slotClass + rules).\n */\nexport function injectSlotRules(slotClass: string, rules?: RuleMap) {\n if (!rules || Object.keys(rules).length === 0) return\n\n if (typeof document === 'undefined') return\n\n const signature = `${slotClass}:${stableStringify(rules)}`\n const key = hashStr(signature)\n if (CACHE.has(key)) return\n\n const css = Object.entries(rules)\n .map(\n ([sel, decl]) => `${scopeSelector(sel, slotClass)}{${declToCss(decl)}}`\n )\n .join('\\n')\n\n const el = ensureStyleEl()\n if (!el) return\n\n el.appendChild(document.createTextNode(`\\n${css}\\n`))\n CACHE.add(key)\n}\n","/**\n * Shallow-merge style maps slot-by-slot.\n * Warns when override contains unknown slots (developer UX).\n */\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport function mergeStyleMaps<T extends Record<string, any>>(\n base: T,\n override?: Partial<T>\n): T {\n if (!override) return base\n const out = { ...base } as T\n\n for (const key in override) {\n if (!(key in base)) {\n console.warn(\n `[useThemedStyles] Unknown style slot \"${key}\". Available slots: ${Object.keys(base).join(', ')}`\n )\n }\n\n out[key] = { ...(base[key] ?? {}), ...(override[key] ?? {}) } as any\n }\n\n return out\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// Types\nimport type { CommonStyleProps } from '../types'\n\nfunction toCss(v: number | string | undefined) {\n return typeof v === 'number' ? `${v}rem` : v\n}\n\n/**\n * Source of truth: common prop -> how it maps into CSSProperties.\n * Add new common props ONLY here.\n */\nconst COMMON_MAP: Record<\n keyof CommonStyleProps,\n (value: any, out: React.CSSProperties) => void\n> = {\n // margin\n m: (v, o) => {\n o.margin = toCss(v)\n },\n mx: (v, o) => {\n o.marginLeft = toCss(v)\n o.marginRight = toCss(v)\n },\n my: (v, o) => {\n o.marginTop = toCss(v)\n o.marginBottom = toCss(v)\n },\n mt: (v, o) => {\n o.marginTop = toCss(v)\n },\n mr: (v, o) => {\n o.marginRight = toCss(v)\n },\n mb: (v, o) => {\n o.marginBottom = toCss(v)\n },\n ml: (v, o) => {\n o.marginLeft = toCss(v)\n },\n\n // padding\n p: (v, o) => {\n o.padding = toCss(v)\n },\n px: (v, o) => {\n o.paddingLeft = toCss(v)\n o.paddingRight = toCss(v)\n },\n py: (v, o) => {\n o.paddingTop = toCss(v)\n o.paddingBottom = toCss(v)\n },\n pt: (v, o) => {\n o.paddingTop = toCss(v)\n },\n pr: (v, o) => {\n o.paddingRight = toCss(v)\n },\n pb: (v, o) => {\n o.paddingBottom = toCss(v)\n },\n pl: (v, o) => {\n o.paddingLeft = toCss(v)\n },\n\n // text\n fontSize: (v, o) => {\n o.fontSize = toCss(v)\n },\n fontWeight: (v, o) => {\n o.fontWeight = v\n },\n lineHeight: (v, o) => {\n o.lineHeight = toCss(v)\n },\n textAlign: (v, o) => {\n o.textAlign = v\n },\n\n // layout\n w: (v, o) => {\n o.width = toCss(v)\n },\n h: (v, o) => {\n o.height = toCss(v)\n },\n minW: (v, o) => {\n o.minWidth = toCss(v)\n },\n maxW: (v, o) => {\n o.maxWidth = toCss(v)\n },\n minH: (v, o) => {\n o.minHeight = toCss(v)\n },\n maxH: (v, o) => {\n o.maxHeight = toCss(v)\n }\n}\n\nexport const COMMON_KEYS = Object.keys(COMMON_MAP) as Array<\n keyof CommonStyleProps\n>\n\nexport function hasAnyCommonStyleProps(props: Partial<CommonStyleProps>) {\n for (const k of COMMON_KEYS) {\n if (props[k] != null) return true\n }\n return false\n}\n\nexport function resolveCommonStyleProps(\n props: Partial<CommonStyleProps>\n): React.CSSProperties {\n const out: React.CSSProperties = {}\n\n for (const k of COMMON_KEYS) {\n const value = props[k]\n if (value != null) COMMON_MAP[k](value, out)\n }\n\n return out\n}\n\n/**\n * Applies common style props (if present) to a chosen slot.\n * Common props are resolved by `resolveCommonStyleProps`.\n */\nexport function applyCommonsToStyles<TStyles extends Record<string, any>>(\n styles: TStyles,\n props: Partial<CommonStyleProps>,\n slotOverride?: keyof TStyles\n): TStyles {\n if (!hasAnyCommonStyleProps(props)) return styles\n\n const keys = Object.keys(styles)\n if (keys.length === 0) return styles\n\n const slot =\n slotOverride ??\n (('container' in styles ? 'container' : keys[0]) as keyof TStyles)\n\n const common = resolveCommonStyleProps(props)\n\n return {\n ...styles,\n [slot]: { ...(styles[slot] ?? {}), ...common }\n } as TStyles\n}\n","// Types\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport type { SplitResult, StyleMap } from '../types'\n\n/**\n * Splits the style map into:\n * - `inline`: slot styles without `__rules`\n * - `rulesBySlot`: extracted `__rules` grouped by slot\n *\n * This lets us:\n * - apply inline styles directly via `style={...}`\n * - inject selectors/pseudos via generated CSS classes\n */\nexport function splitRules<TStyles extends StyleMap>(\n styles: TStyles\n): SplitResult<TStyles> {\n const inline: any = {}\n const rulesBySlot: any = {}\n\n for (const key in styles) {\n const slot = styles[key]\n if (!slot) continue\n\n const { __rules, ...rest } = slot as any\n inline[key] = rest\n\n if (__rules && Object.keys(__rules).length > 0) {\n rulesBySlot[key] = __rules\n }\n }\n\n return { inline, rulesBySlot }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\nimport type { CommonStyleProps } from '../types'\n\nimport { COMMON_KEYS } from './resolveCommonStyleProps'\n\nconst COMMON_KEY_SET = new Set<string>(COMMON_KEYS as readonly string[])\n\nexport function stripCommonProps<T extends object>(\n props: T\n): Omit<T, keyof CommonStyleProps> {\n const out: Record<string, unknown> = {}\n\n for (const key of Object.keys(props as any)) {\n if (!COMMON_KEY_SET.has(key)) {\n out[key] = (props as any)[key]\n }\n }\n\n return out as Omit<T, keyof CommonStyleProps>\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// External Libraries\nimport { useMemo, useInsertionEffect } from 'react'\n\n// Utils\nimport {\n hashStr,\n splitRules,\n mergeStyleMaps,\n injectSlotRules,\n stableStringify,\n applyCommonsToStyles\n} from './utils'\n\n// Types\nimport type {\n CSSVars,\n RuleMap,\n StyleMap,\n StylesFactory,\n UseThemedStylesOptions\n} from './types'\n\n/**\n * useThemedStyles\n *\n * A React-Native-like style factory hook for React Web that also supports:\n * - CSS variables in inline styles\n * - Pseudo selectors, nested selectors, and vendor selectors via `__rules`\n *\n * It returns two maps:\n * - `styles`: inline styles for each slot\n * - `classes`: generated classes for each slot (needed for `__rules`)\n *\n * Usage:\n * ```tsx\n * const { styles, classes } = useThemedStyles(props, createStyles)\n *\n * return (\n * <button style={styles.item} className={classes.item}>\n * <p style={styles.label} className={classes.label}>Hello</p>\n * </button>\n * )\n * ```\n *\n * Notes:\n * - If a slot has no `__rules`, you can omit `className` for that slot.\n * - If you use `__rules`, you MUST apply the corresponding class for scoping.\n */\nexport function useThemedStyles<TProps, TStyles extends StyleMap>(\n props: TProps,\n factory: StylesFactory<TProps, TStyles>,\n options?: UseThemedStylesOptions<TProps, TStyles>\n): {\n styles: Record<keyof TStyles, React.CSSProperties | CSSVars>\n classes: Record<keyof TStyles, string>\n} {\n /**\n * Memoization priority:\n * 1) deps (manual)\n * 2) pick(props) (recommended)\n * 3) props reference (default behavior)\n */\n const memoKey =\n options?.deps ?? (options?.pick ? options.pick(props) : [props])\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: controlled by deps/pick\n const raw = useMemo(() => factory(props), [factory, ...memoKey])\n\n const { inline, rulesBySlot } = useMemo(() => splitRules(raw), [raw])\n\n const merged = useMemo(\n () => mergeStyleMaps(inline as any, options?.override),\n [inline, options?.override]\n )\n\n const withCommons = useMemo(() => {\n if (!options?.applyCommonProps) return merged\n return applyCommonsToStyles(merged as any, props as any, options.commonSlot)\n }, [merged, props, options?.applyCommonProps, options?.commonSlot])\n\n /**\n * Base id is derived only from the rules signature.\n * This keeps class names stable whenever rules don't change.\n */\n const baseId = useMemo(() => {\n const sig = stableStringify(rulesBySlot)\n const key = hashStr(sig)\n return options?.debugName ? `pxr-${options.debugName}-${key}` : `pxr-${key}`\n }, [rulesBySlot, options?.debugName])\n\n /**\n * Generated class per slot.\n * Example: pxr-<hash>__item\n */\n const classes = useMemo(() => {\n const out: any = {}\n for (const slotKey of Object.keys(withCommons)) {\n out[slotKey] = `${baseId}__${slotKey}`\n }\n return out as Record<keyof TStyles, string>\n }, [baseId, withCommons])\n\n /**\n * Inject rules into the runtime <style> tag.\n *\n * We use `useInsertionEffect` so styles are inserted before layout/paint\n * when supported (best for CSS-in-JS style injection).\n */\n useInsertionEffect(() => {\n for (const slotKey of Object.keys(rulesBySlot as any)) {\n const rules = (rulesBySlot as any)[slotKey] as RuleMap | undefined\n\n if (!rules) continue\n\n injectSlotRules((classes as any)[slotKey], rules)\n }\n }, [rulesBySlot, classes])\n\n return { styles: withCommons as any, classes }\n}\n","// External Libraries\nimport type { CSSProperties, JSX } from 'react'\n\n// Types\nimport type { TextAlign, TypographyVariant } from './types'\n\nconst primaryColor = 'var(--px-text-primary)'\nconst secondaryColor = 'var(--px-text-secondary)'\n\nexport const typographyVariants: Record<TypographyVariant, CSSProperties> = {\n h1: {\n fontSize: '3rem',\n fontWeight: '700',\n lineHeight: '1.25',\n color: primaryColor\n },\n h2: {\n fontSize: '2.25rem',\n fontWeight: '600',\n lineHeight: '1.35',\n color: primaryColor\n },\n h3: {\n fontSize: '1.875rem',\n fontWeight: '600',\n color: primaryColor\n },\n h4: {\n fontSize: '1.5rem',\n fontWeight: '500',\n color: primaryColor\n },\n h5: {\n fontSize: '1.25rem',\n fontWeight: '500',\n color: primaryColor\n },\n b1: {\n fontSize: '1rem',\n fontWeight: '500',\n color: primaryColor\n },\n b2: {\n fontSize: '0.875rem',\n color: secondaryColor\n },\n b3: {\n fontSize: '0.75rem',\n color: secondaryColor\n },\n caption: {\n fontSize: '0.75rem',\n color: secondaryColor\n },\n legal: {\n fontSize: '0.65rem',\n textTransform: 'uppercase',\n letterSpacing: '0.025em',\n color: secondaryColor\n }\n}\n\nexport const variantToElement: Record<\n TypographyVariant,\n keyof JSX.IntrinsicElements\n> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n b1: 'p',\n b2: 'p',\n b3: 'p',\n caption: 'span',\n legal: 'span'\n}\n\nexport const alignText: Record<TextAlign, CSSProperties> = {\n left: { textAlign: 'left' },\n center: { textAlign: 'center' },\n right: { textAlign: 'right' },\n justify: { textAlign: 'justify' }\n}\n","// Utils\nimport { alignText, typographyVariants } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\nimport type { StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createTypographyStyles(props: TypographyProps): StyleMap {\n const { isLoading, variant, align = 'left', color } = props\n\n return {\n base: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n borderBottom: '1px solid var(--pixel-border, #e5e7eb)',\n gap: 0,\n animation: isLoading ? 'animate-pulse 1.5s infinite' : undefined\n },\n\n loading: {\n width: '50%',\n height: '1em',\n display: 'inline-block',\n backgroundColor: 'var(--pixel-gray-300, #d1d5db)',\n borderRadius: '0.25rem'\n },\n\n text: {\n ...alignText[align],\n ...typographyVariants[variant],\n color: color ?? typographyVariants[variant].color\n }\n }\n}\n","// Utils\nimport { variantToElement } from './config'\n\n// Types\nimport type { TypographyProps } from './types'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTypographyStyles } from './style'\n\nexport function Typography(props: TypographyProps) {\n const {\n id,\n as,\n href,\n variant,\n children,\n placeholder,\n isLoading = false,\n styles: styleTypography\n } = props\n\n const { styles } = useThemedStyles(props, createTypographyStyles, {\n pick: p => [p.isLoading, p.variant, p.align],\n commonSlot: 'text',\n applyCommonProps: true,\n override: styleTypography\n })\n\n const Component = as ?? variantToElement[variant]\n\n if (isLoading) {\n return (\n <span\n id={id}\n aria-hidden=\"true\"\n role=\"presentation\"\n style={{ ...styles.text, ...styles.loading }}\n />\n )\n }\n\n const sharedProps = {\n id,\n style: styles.text,\n 'aria-label': placeholder\n }\n\n if (href) {\n return (\n <a href={href} {...sharedProps}>\n {children}\n </a>\n )\n }\n\n return <Component {...sharedProps}>{children}</Component>\n}\n"],"mappings":"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"}
package/dist/button.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import "./types-CzIXNt_Y.js";
2
- import { t as Button } from "./index-BN9pjWqo.js";
1
+ import "./types-_ZbgGCjb.js";
2
+ import { t as Button } from "./index-x_PYKZgv.js";
3
3
  export { Button };
package/dist/button.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./Typography-CTfrQCqI.js";
2
- import { t as Button } from "./Button-FBwDmqJ7.js";
1
+ import "./Typography-BaE9Y1O8.js";
2
+ import { t as Button } from "./Button-B9tDbn4Q.js";
3
3
 
4
4
  export { Button };
@@ -0,0 +1,2 @@
1
+ import { t as CheckItem } from "./index-CADs9cEh.js";
2
+ export { CheckItem };
@@ -0,0 +1,5 @@
1
+ import "./Icon-BrLGgg0w.js";
2
+ import "./Typography-BaE9Y1O8.js";
3
+ import { t as CheckItem } from "./CheckItem-CBzbinCc.js";
4
+
5
+ export { CheckItem };
@@ -1,3 +1,3 @@
1
- import "./types-CzIXNt_Y.js";
2
- import { t as Checkbox } from "./index-Y4JLziyn.js";
1
+ import "./types-_ZbgGCjb.js";
2
+ import { t as Checkbox } from "./index-CqAWI5LI.js";
3
3
  export { Checkbox };
package/dist/checkbox.js CHANGED
@@ -1,5 +1,5 @@
1
- import "./Icon-CzUEwDPp.js";
2
- import "./Typography-CTfrQCqI.js";
3
- import { t as Checkbox } from "./Checkbox-D2dDt6Hp.js";
1
+ import "./Icon-BrLGgg0w.js";
2
+ import "./Typography-BaE9Y1O8.js";
3
+ import { t as Checkbox } from "./Checkbox-l_SA4qUE.js";
4
4
 
5
5
  export { Checkbox };
@@ -1,5 +1,5 @@
1
- import { t as StyleMap } from "./useThemedStyles-t3wVpy-H.js";
2
- import { n as TypographyVariant } from "./types-CzIXNt_Y.js";
1
+ import { t as StyleMap } from "./useThemedStyles-_SsqjB7Q.js";
2
+ import { n as TypographyVariant } from "./types-_ZbgGCjb.js";
3
3
  import { InputHTMLAttributes, ReactNode } from "react";
4
4
  import * as react_jsx_runtime1 from "react/jsx-runtime";
5
5
 
@@ -41,4 +41,4 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
41
41
  declare const Input: (props: InputProps) => react_jsx_runtime1.JSX.Element;
42
42
  //#endregion
43
43
  export { Input as t };
44
- //# sourceMappingURL=index-CRdoo14l.d.ts.map
44
+ //# sourceMappingURL=index-BvkboQOE.d.ts.map
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+
3
+ //#region src/components/toolkit/CheckItem/types.d.ts
4
+ interface CheckItemProps {
5
+ label: string;
6
+ checked: boolean;
7
+ }
8
+ //#endregion
9
+ //#region src/components/toolkit/CheckItem/index.d.ts
10
+ declare const CheckItem: React.FC<CheckItemProps>;
11
+ //#endregion
12
+ export { CheckItem as t };
13
+ //# sourceMappingURL=index-CADs9cEh.d.ts.map
@@ -0,0 +1,48 @@
1
+ import { t as StyleMap } from "./useThemedStyles-_SsqjB7Q.js";
2
+ import { n as TypographyVariant } from "./types-_ZbgGCjb.js";
3
+ import * as react_jsx_runtime3 from "react/jsx-runtime";
4
+
5
+ //#region src/assets/icons/index.d.ts
6
+ /** biome-ignore-all lint/suspicious/noShadowRestrictedNames: generated */
7
+ declare const icons: {
8
+ 'brands-facebook': react_jsx_runtime3.JSX.Element;
9
+ 'brands-facebook-fit': react_jsx_runtime3.JSX.Element;
10
+ 'brands-google': react_jsx_runtime3.JSX.Element;
11
+ 'general-check': react_jsx_runtime3.JSX.Element;
12
+ 'general-eye': react_jsx_runtime3.JSX.Element;
13
+ 'general-eye-off': react_jsx_runtime3.JSX.Element;
14
+ };
15
+ type IconName = keyof typeof icons;
16
+ //#endregion
17
+ //#region src/components/commons/inputs/TextArea/styles.d.ts
18
+ declare function createTextAreaStyles(props: TextAreaProps): StyleMap;
19
+ //#endregion
20
+ //#region src/components/commons/inputs/TextArea/types.d.ts
21
+ interface TextAreaProps {
22
+ value: string;
23
+ label?: string;
24
+ placeholder?: string;
25
+ styles?: Partial<ReturnType<typeof createTextAreaStyles>>;
26
+ required?: boolean;
27
+ disabled?: boolean;
28
+ readOnly?: boolean;
29
+ startIcon?: IconName;
30
+ height?: string;
31
+ maxLength?: number;
32
+ hideMaxLength?: boolean;
33
+ textMaxLength?: string;
34
+ iconColor?: string;
35
+ placeholderColor?: string;
36
+ focusedRingColor?: string;
37
+ requiredColor?: string;
38
+ labelColor?: string;
39
+ labelWeight?: string;
40
+ labelVariant?: TypographyVariant;
41
+ onChange?: (value: string) => void;
42
+ }
43
+ //#endregion
44
+ //#region src/components/commons/inputs/TextArea/index.d.ts
45
+ declare const TextArea: (props: TextAreaProps) => react_jsx_runtime3.JSX.Element;
46
+ //#endregion
47
+ export { TextArea as t };
48
+ //# sourceMappingURL=index-CXR_rnK-.d.ts.map
@@ -1,4 +1,4 @@
1
- import { n as CommonStyleProps, t as StyleMap } from "./useThemedStyles-t3wVpy-H.js";
1
+ import { n as CommonStyleProps, t as StyleMap } from "./useThemedStyles-_SsqjB7Q.js";
2
2
  import { ReactNode } from "react";
3
3
  import * as react_jsx_runtime0 from "react/jsx-runtime";
4
4
 
@@ -29,4 +29,4 @@ interface TabSwitchProps<T> extends CommonStyleProps {
29
29
  declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
30
30
  //#endregion
31
31
  export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
32
- //# sourceMappingURL=index-DeyMp__h.d.ts.map
32
+ //# sourceMappingURL=index-Cbt7nYQB.d.ts.map
@@ -1,4 +1,4 @@
1
- import { n as TypographyVariant } from "./types-CzIXNt_Y.js";
1
+ import { n as TypographyVariant } from "./types-_ZbgGCjb.js";
2
2
  import React$1 from "react";
3
3
  import { ChecklistAlertResponse } from "@api/checklist/alerts/dtos";
4
4
 
@@ -28,4 +28,4 @@ interface CheckboxProps {
28
28
  declare const Checkbox: React$1.FC<CheckboxProps>;
29
29
  //#endregion
30
30
  export { Checkbox as t };
31
- //# sourceMappingURL=index-Y4JLziyn.d.ts.map
31
+ //# sourceMappingURL=index-CqAWI5LI.d.ts.map
@@ -297,4 +297,4 @@ declare const ThemeProvider: React.FC<ThemeProviderProps>;
297
297
  declare function useTheme(): ThemeContextData;
298
298
  //#endregion
299
299
  export { ThemeName as a, ThemeRegistry as c, ThemeMode as i, ThemeTokens as l, useTheme as n, ThemePersistence as o, ThemeContextData as r, ThemeProviderProps as s, ThemeProvider as t };
300
- //# sourceMappingURL=index-BMSLSVxv.d.ts.map
300
+ //# sourceMappingURL=index-H8VYQre4.d.ts.map
@@ -1,11 +1,12 @@
1
- import { n as TypographyVariant } from "./types-CzIXNt_Y.js";
1
+ import { r as PaddingProps } from "./useThemedStyles-_SsqjB7Q.js";
2
+ import { n as TypographyVariant } from "./types-_ZbgGCjb.js";
2
3
  import React, { ReactNode } from "react";
3
4
 
4
5
  //#region src/components/commons/buttons/Button/types.d.ts
5
6
  type Align = 'center' | 'left' | 'right';
6
7
  type ButtonType = 'button' | 'submit' | 'reset';
7
8
  type ButtonVariant = 'filled' | 'outlined' | 'ghost';
8
- interface ButtonProps {
9
+ interface ButtonProps extends PaddingProps {
9
10
  /** Text label displayed inside the button */
10
11
  label: string;
11
12
  /** Text variant of the button label */
@@ -61,4 +62,4 @@ interface ButtonProps {
61
62
  declare const Button: React.FC<ButtonProps>;
62
63
  //#endregion
63
64
  export { Button as t };
64
- //# sourceMappingURL=index-BN9pjWqo.d.ts.map
65
+ //# sourceMappingURL=index-x_PYKZgv.d.ts.map
package/dist/index.d.ts CHANGED
@@ -1,9 +1,11 @@
1
- import "./types-CzIXNt_Y.js";
2
- import { t as Button } from "./index-BN9pjWqo.js";
3
- import { t as Input } from "./index-CRdoo14l.js";
4
- import { t as Checkbox } from "./index-Y4JLziyn.js";
1
+ import "./types-_ZbgGCjb.js";
2
+ import { t as Button } from "./index-x_PYKZgv.js";
3
+ import { t as Input } from "./index-BvkboQOE.js";
4
+ import { t as TextArea } from "./index-CXR_rnK-.js";
5
+ import { t as CheckItem } from "./index-CADs9cEh.js";
6
+ import { t as Checkbox } from "./index-CqAWI5LI.js";
5
7
  import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
6
- import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DeyMp__h.js";
8
+ import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-Cbt7nYQB.js";
7
9
  import { Typography } from "./typography.js";
8
- import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-BMSLSVxv.js";
9
- export { Button, Checkbox, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, SwitchOption, TabSwitch, TabSwitchProps, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };
10
+ import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-H8VYQre4.js";
11
+ export { Button, CheckItem, Checkbox, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };
package/dist/index.js CHANGED
@@ -1,10 +1,13 @@
1
- import "./Icon-CzUEwDPp.js";
2
- import { t as Typography } from "./Typography-CTfrQCqI.js";
3
- import { t as Checkbox } from "./Checkbox-D2dDt6Hp.js";
4
- import { t as TabSwitch } from "./TabSwitch-Bewsxeqz.js";
5
- import { t as InfoSummary } from "./InfoSummary-DSOwr7Q1.js";
6
- import { t as Button } from "./Button-FBwDmqJ7.js";
7
- import { t as Input } from "./Input-CTx0xk1z.js";
8
- import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BAcoPRJ-.js";
1
+ import "./Icon-BrLGgg0w.js";
2
+ import { t as Typography } from "./Typography-BaE9Y1O8.js";
3
+ import { t as Checkbox } from "./Checkbox-l_SA4qUE.js";
4
+ import { n as useTheme, t as ThemeProvider } from "./ThemeContext-BQQnMo5F.js";
5
+ import { t as TabSwitch } from "./TabSwitch-DRs6-76U.js";
6
+ import { t as InfoSummary } from "./InfoSummary-CHRfCc3v.js";
7
+ import { t as CheckItem } from "./CheckItem-CBzbinCc.js";
8
+ import { t as Button } from "./Button-B9tDbn4Q.js";
9
+ import "./Label-BVteAeiK.js";
10
+ import { t as Input } from "./Input-CUZNjGoG.js";
11
+ import { t as TextArea } from "./TextArea-ZKDCCx4I.js";
9
12
 
10
- export { Button, Checkbox, InfoSummary, Input, TabSwitch, ThemeProvider, Typography, useTheme };
13
+ export { Button, CheckItem, Checkbox, InfoSummary, Input, TabSwitch, TextArea, ThemeProvider, Typography, useTheme };