@atelier-ui/react 0.2.14 → 0.2.16

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 (98) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/package.json +1 -1
  3. package/src/lib/accordion/atl-accordion.css +21 -5
  4. package/src/lib/accordion/atl-accordion.d.ts.map +1 -1
  5. package/src/lib/accordion/atl-accordion.js +2 -3
  6. package/src/lib/accordion/atl-accordion.js.map +1 -1
  7. package/src/lib/alert/atl-alert.css +11 -1
  8. package/src/lib/alert/atl-alert.d.ts.map +1 -1
  9. package/src/lib/alert/atl-alert.js +2 -1
  10. package/src/lib/alert/atl-alert.js.map +1 -1
  11. package/src/lib/avatar/atl-avatar.css +24 -4
  12. package/src/lib/avatar/atl-avatar.d.ts.map +1 -1
  13. package/src/lib/avatar/atl-avatar.js +2 -1
  14. package/src/lib/avatar/atl-avatar.js.map +1 -1
  15. package/src/lib/badge/atl-badge.css +16 -6
  16. package/src/lib/breadcrumbs/atl-breadcrumbs.css +16 -0
  17. package/src/lib/button/atl-button.css +12 -2
  18. package/src/lib/card/atl-card.css +29 -4
  19. package/src/lib/chat/atl-chat.css +44 -15
  20. package/src/lib/chat/atl-chat.d.ts.map +1 -1
  21. package/src/lib/chat/atl-chat.js +2 -1
  22. package/src/lib/chat/atl-chat.js.map +1 -1
  23. package/src/lib/checkbox/atl-checkbox.css +12 -2
  24. package/src/lib/checkbox/atl-checkbox.d.ts +1 -5
  25. package/src/lib/checkbox/atl-checkbox.d.ts.map +1 -1
  26. package/src/lib/checkbox/atl-checkbox.js +2 -3
  27. package/src/lib/checkbox/atl-checkbox.js.map +1 -1
  28. package/src/lib/code-block/atl-code-block.css +27 -8
  29. package/src/lib/code-block/atl-code-block.d.ts.map +1 -1
  30. package/src/lib/code-block/atl-code-block.js +2 -1
  31. package/src/lib/code-block/atl-code-block.js.map +1 -1
  32. package/src/lib/combobox/atl-combobox.css +56 -5
  33. package/src/lib/combobox/atl-combobox.d.ts.map +1 -1
  34. package/src/lib/combobox/atl-combobox.js +4 -2
  35. package/src/lib/combobox/atl-combobox.js.map +1 -1
  36. package/src/lib/dialog/atl-dialog.css +28 -4
  37. package/src/lib/dialog/atl-dialog.d.ts.map +1 -1
  38. package/src/lib/dialog/atl-dialog.js +2 -1
  39. package/src/lib/dialog/atl-dialog.js.map +1 -1
  40. package/src/lib/drawer/atl-drawer.css +31 -4
  41. package/src/lib/drawer/atl-drawer.d.ts.map +1 -1
  42. package/src/lib/drawer/atl-drawer.js +2 -1
  43. package/src/lib/drawer/atl-drawer.js.map +1 -1
  44. package/src/lib/icon/atl-icon.css +18 -0
  45. package/src/lib/icon/atl-icon.d.ts +2 -1
  46. package/src/lib/icon/atl-icon.d.ts.map +1 -1
  47. package/src/lib/icon/atl-icon.js +6 -25
  48. package/src/lib/icon/atl-icon.js.map +1 -1
  49. package/src/lib/icons.d.ts +39 -0
  50. package/src/lib/icons.d.ts.map +1 -0
  51. package/src/lib/icons.js +49 -0
  52. package/src/lib/icons.js.map +1 -0
  53. package/src/lib/input/atl-input.css +21 -7
  54. package/src/lib/input/atl-input.d.ts.map +1 -1
  55. package/src/lib/input/atl-input.js +2 -1
  56. package/src/lib/input/atl-input.js.map +1 -1
  57. package/src/lib/menu/atl-menu.css +28 -3
  58. package/src/lib/pagination/atl-pagination.css +11 -1
  59. package/src/lib/progress/atl-progress.css +10 -0
  60. package/src/lib/radio/atl-radio.css +11 -1
  61. package/src/lib/radio/atl-radio.d.ts.map +1 -1
  62. package/src/lib/radio/atl-radio.js +5 -3
  63. package/src/lib/radio/atl-radio.js.map +1 -1
  64. package/src/lib/radio-group/atl-radio-group.css +10 -0
  65. package/src/lib/select/atl-select.css +21 -3
  66. package/src/lib/select/atl-select.d.ts +1 -5
  67. package/src/lib/select/atl-select.d.ts.map +1 -1
  68. package/src/lib/select/atl-select.js +1 -3
  69. package/src/lib/select/atl-select.js.map +1 -1
  70. package/src/lib/skeleton/atl-skeleton.css +15 -0
  71. package/src/lib/spec.d.ts +20 -6
  72. package/src/lib/spec.d.ts.map +1 -1
  73. package/src/lib/spec.js +1 -1
  74. package/src/lib/spec.js.map +1 -1
  75. package/src/lib/stepper/atl-stepper.css +11 -1
  76. package/src/lib/stepper/atl-stepper.d.ts.map +1 -1
  77. package/src/lib/stepper/atl-stepper.js +2 -1
  78. package/src/lib/stepper/atl-stepper.js.map +1 -1
  79. package/src/lib/table/atl-table.css +42 -3
  80. package/src/lib/table/atl-table.d.ts.map +1 -1
  81. package/src/lib/table/atl-table.js +2 -1
  82. package/src/lib/table/atl-table.js.map +1 -1
  83. package/src/lib/tabs/atl-tabs.css +27 -5
  84. package/src/lib/textarea/atl-textarea.css +22 -7
  85. package/src/lib/textarea/atl-textarea.d.ts.map +1 -1
  86. package/src/lib/textarea/atl-textarea.js +2 -1
  87. package/src/lib/textarea/atl-textarea.js.map +1 -1
  88. package/src/lib/toast/atl-toast.css +21 -0
  89. package/src/lib/toast/atl-toast.d.ts.map +1 -1
  90. package/src/lib/toast/atl-toast.js +2 -1
  91. package/src/lib/toast/atl-toast.js.map +1 -1
  92. package/src/lib/toggle/atl-toggle.css +11 -1
  93. package/src/lib/toggle/atl-toggle.d.ts +1 -5
  94. package/src/lib/toggle/atl-toggle.d.ts.map +1 -1
  95. package/src/lib/toggle/atl-toggle.js +2 -3
  96. package/src/lib/toggle/atl-toggle.js.map +1 -1
  97. package/src/lib/tooltip/atl-tooltip.css +21 -0
  98. package/styles/tokens.css +12 -0
@@ -1 +1 @@
1
- {"version":3,"file":"atl-toast.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/atl-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n useState,\n useCallback,\n useRef,\n ReactNode,\n} from 'react';\nimport type {\n AtlToastOptions,\n AtlToastContainerPosition,\n} from '../spec';\nimport './atl-toast.css';\n\n/**\n * Internal data structure for a toast message.\n */\nexport interface ToastData extends Required<AtlToastOptions> {\n id: string;\n message: string;\n}\n\ninterface ToastContextValue {\n show: (message: string, options?: AtlToastOptions) => string;\n dismiss: (id: string) => void;\n clear: () => void;\n toasts: ToastData[];\n}\n\nconst ToastContext = createContext<ToastContextValue>({\n show: () => '',\n dismiss: () => undefined,\n clear: () => undefined,\n toasts: [],\n});\n\n/**\n * Context provider that manages the toast state.\n */\nexport function AtlToastProvider({ children }: { children: ReactNode }) {\n const [toasts, setToasts] = useState<ToastData[]>([]);\n const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());\n const toastId = useRef(0);\n\n const dismiss = useCallback((id: string) => {\n const timer = timersRef.current.get(id);\n if (timer) {\n clearTimeout(timer);\n timersRef.current.delete(id);\n }\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, []);\n\n const show = useCallback(\n (message: string, options: AtlToastOptions = {}): string => {\n const id = `atl-toast-${toastId.current++}`;\n const toast: ToastData = {\n id,\n message,\n variant: options.variant ?? 'default',\n duration: options.duration ?? 5000,\n dismissible: options.dismissible ?? true,\n };\n setToasts((prev) => [...prev, toast]);\n if (toast.duration > 0) {\n const timer = setTimeout(() => dismiss(id), toast.duration);\n timersRef.current.set(id, timer);\n }\n return id;\n },\n [dismiss]\n );\n\n const clear = useCallback(() => {\n for (const timer of timersRef.current.values()) clearTimeout(timer);\n timersRef.current.clear();\n setToasts([]);\n }, []);\n\n return (\n <ToastContext.Provider value={{ show, dismiss, clear, toasts }}>\n {children}\n </ToastContext.Provider>\n );\n}\n\n/** Access toast actions: show, dismiss, clear. Must be inside AtlToastProvider. */\nexport function useAtlToast() {\n const ctx = useContext(ToastContext);\n return { show: ctx.show, dismiss: ctx.dismiss, clear: ctx.clear };\n}\n\n/**\n * Properties for the AtlToastContainer component.\n */\nexport interface AtlToastContainerProps {\n /**\n * Position of the toast container in the viewport.\n */\n position?: AtlToastContainerPosition;\n}\n\n/**\n * Renders the toast stack at a fixed viewport position.\n * Must be placed inside AtlToastProvider.\n */\nexport function AtlToastContainer({ position = 'bottom-right' }: AtlToastContainerProps) {\n const { toasts, dismiss } = useContext(ToastContext);\n const classes = `atl-toast-container position-${position}`;\n\n return (\n <div className={classes} aria-live=\"polite\" role=\"status\">\n {toasts.map((toast) => (\n <AtlToastItem key={toast.id} data={toast} onDismiss={dismiss} />\n ))}\n </div>\n );\n}\n\n/**\n * Properties for the AtlToastItem component.\n */\nexport interface AtlToastItemProps {\n /**\n * The toast data to display.\n */\n data: ToastData;\n /**\n * Callback fired when the toast is dismissed.\n */\n onDismiss: (id: string) => void;\n}\n\n/**\n * An individual toast notification item.\n */\nexport function AtlToastItem({ data, onDismiss }: AtlToastItemProps) {\n const classes = `atl-toast variant-${data.variant}`;\n return (\n <div className={classes} role=\"status\">\n <span className=\"message\">{data.message}</span>\n {data.dismissible && (\n <button\n className=\"dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n onClick={() => onDismiss(data.id)}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </button>\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"atl-toast.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toast/atl-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n useState,\n useCallback,\n useRef,\n ReactNode,\n} from 'react';\nimport type {\n AtlToastOptions,\n AtlToastContainerPosition,\n} from '../spec';\nimport './atl-toast.css';\nimport { AtlIcon } from '../icon/atl-icon';\n\n/**\n * Internal data structure for a toast message.\n */\nexport interface ToastData extends Required<AtlToastOptions> {\n id: string;\n message: string;\n}\n\ninterface ToastContextValue {\n show: (message: string, options?: AtlToastOptions) => string;\n dismiss: (id: string) => void;\n clear: () => void;\n toasts: ToastData[];\n}\n\nconst ToastContext = createContext<ToastContextValue>({\n show: () => '',\n dismiss: () => undefined,\n clear: () => undefined,\n toasts: [],\n});\n\n/**\n * Context provider that manages the toast state.\n */\nexport function AtlToastProvider({ children }: { children: ReactNode }) {\n const [toasts, setToasts] = useState<ToastData[]>([]);\n const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());\n const toastId = useRef(0);\n\n const dismiss = useCallback((id: string) => {\n const timer = timersRef.current.get(id);\n if (timer) {\n clearTimeout(timer);\n timersRef.current.delete(id);\n }\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, []);\n\n const show = useCallback(\n (message: string, options: AtlToastOptions = {}): string => {\n const id = `atl-toast-${toastId.current++}`;\n const toast: ToastData = {\n id,\n message,\n variant: options.variant ?? 'default',\n duration: options.duration ?? 5000,\n dismissible: options.dismissible ?? true,\n };\n setToasts((prev) => [...prev, toast]);\n if (toast.duration > 0) {\n const timer = setTimeout(() => dismiss(id), toast.duration);\n timersRef.current.set(id, timer);\n }\n return id;\n },\n [dismiss]\n );\n\n const clear = useCallback(() => {\n for (const timer of timersRef.current.values()) clearTimeout(timer);\n timersRef.current.clear();\n setToasts([]);\n }, []);\n\n return (\n <ToastContext.Provider value={{ show, dismiss, clear, toasts }}>\n {children}\n </ToastContext.Provider>\n );\n}\n\n/** Access toast actions: show, dismiss, clear. Must be inside AtlToastProvider. */\nexport function useAtlToast() {\n const ctx = useContext(ToastContext);\n return { show: ctx.show, dismiss: ctx.dismiss, clear: ctx.clear };\n}\n\n/**\n * Properties for the AtlToastContainer component.\n */\nexport interface AtlToastContainerProps {\n /**\n * Position of the toast container in the viewport.\n */\n position?: AtlToastContainerPosition;\n}\n\n/**\n * Renders the toast stack at a fixed viewport position.\n * Must be placed inside AtlToastProvider.\n */\nexport function AtlToastContainer({ position = 'bottom-right' }: AtlToastContainerProps) {\n const { toasts, dismiss } = useContext(ToastContext);\n const classes = `atl-toast-container position-${position}`;\n\n return (\n <div className={classes} aria-live=\"polite\" role=\"status\">\n {toasts.map((toast) => (\n <AtlToastItem key={toast.id} data={toast} onDismiss={dismiss} />\n ))}\n </div>\n );\n}\n\n/**\n * Properties for the AtlToastItem component.\n */\nexport interface AtlToastItemProps {\n /**\n * The toast data to display.\n */\n data: ToastData;\n /**\n * Callback fired when the toast is dismissed.\n */\n onDismiss: (id: string) => void;\n}\n\n/**\n * An individual toast notification item.\n */\nexport function AtlToastItem({ data, onDismiss }: AtlToastItemProps) {\n const classes = `atl-toast variant-${data.variant}`;\n return (\n <div className={classes} role=\"status\">\n <span className=\"message\">{data.message}</span>\n {data.dismissible && (\n <button\n className=\"dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n onClick={() => onDismiss(data.id)}\n >\n <AtlIcon name=\"close\" size=\"sm\" />\n </button>\n )}\n </div>\n );\n}\n"]}
@@ -1,3 +1,13 @@
1
+ /* Geometry contract: every size this component states is a border-box size.
2
+ * Declared with the component rather than as a global reset, so it ships in the
3
+ * same file as the sizes it governs and no consuming app has to supply one.
4
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
5
+ * See ADR-0043. */
6
+ .atl-toggle,
7
+ .atl-toggle * {
8
+ box-sizing: border-box;
9
+ }
10
+
1
11
  .atl-toggle {
2
12
  display: block;
3
13
  font-family: var(--ui-font-family);
@@ -37,7 +47,7 @@
37
47
  width: 2.75rem;
38
48
  height: 1.5rem;
39
49
  border-radius: var(--ui-radius-full);
40
- border: 1px solid var(--ui-color-border-strong);
50
+ border: var(--ui-border-width) solid var(--ui-color-border-strong);
41
51
  background-color: var(--ui-color-input-bg);
42
52
  transition: background-color var(--ui-transition-fast),
43
53
  border-color var(--ui-transition-fast),
@@ -5,10 +5,6 @@ import './atl-toggle.css';
5
5
  * Properties for the AtlToggle component.
6
6
  */
7
7
  export interface AtlToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'readOnly' | 'value'>, AtlToggleSpec {
8
- /**
9
- * Whether the toggle is read-only.
10
- */
11
- readOnly?: boolean;
12
8
  /**
13
9
  * Callback fired when the checked state changes.
14
10
  */
@@ -25,5 +21,5 @@ export interface AtlToggleProps extends Omit<InputHTMLAttributes<HTMLInputElemen
25
21
  /**
26
22
  * A toggle switch component for binary choices, supporting validation and custom labels.
27
23
  */
28
- export declare function AtlToggle({ checked, onCheckedChange, invalid, errors, disabled, readOnly: reactReadOnly, readonly: specReadOnly, required, children, className, id, name, ...rest }: AtlToggleProps): import("react").JSX.Element;
24
+ export declare function AtlToggle({ checked, onCheckedChange, invalid, errors, disabled, required, children, className, id, name, ...rest }: AtlToggleProps): import("react").JSX.Element;
29
25
  //# sourceMappingURL=atl-toggle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"atl-toggle.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/atl-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzG,aAAa;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAe,EACf,eAAe,EACf,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,cAAc,+BAmDhB"}
1
+ {"version":3,"file":"atl-toggle.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/atl-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EACzG,aAAa;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAe,EACf,eAAe,EACf,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,cAAc,+BAiDhB"}
@@ -4,8 +4,7 @@ import './atl-toggle.css';
4
4
  /**
5
5
  * A toggle switch component for binary choices, supporting validation and custom labels.
6
6
  */
7
- export function AtlToggle({ checked = false, onCheckedChange, invalid = false, errors = [], disabled = false, readOnly: reactReadOnly, readonly: specReadOnly, required = false, children, className, id, name, ...rest }) {
8
- const readOnly = reactReadOnly ?? specReadOnly ?? false;
7
+ export function AtlToggle({ checked = false, onCheckedChange, invalid = false, errors = [], disabled = false, required = false, children, className, id, name, ...rest }) {
9
8
  const generatedId = useId();
10
9
  const inputId = id || `toggle-${generatedId}`;
11
10
  const errorId = `${inputId}-errors`;
@@ -18,6 +17,6 @@ export function AtlToggle({ checked = false, onCheckedChange, invalid = false, e
18
17
  ]
19
18
  .filter(Boolean)
20
19
  .join(' ');
21
- return (_jsxs("div", { className: classes, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx("input", { type: "checkbox", role: "switch", id: inputId, checked: checked, onChange: (e) => onCheckedChange?.(e.target.checked), disabled: disabled, readOnly: readOnly, required: required, "aria-checked": checked, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, name: name, ...rest }), _jsx("span", { className: "track", "aria-hidden": "true", children: _jsx("span", { className: "thumb" }) }), children] }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
20
+ return (_jsxs("div", { className: classes, children: [_jsxs("label", { htmlFor: inputId, children: [_jsx("input", { type: "checkbox", role: "switch", id: inputId, checked: checked, onChange: (e) => onCheckedChange?.(e.target.checked), disabled: disabled, required: required, "aria-checked": checked, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, name: name, ...rest }), _jsx("span", { className: "track", "aria-hidden": "true", children: _jsx("span", { className: "thumb" }) }), children] }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
22
21
  }
23
22
  //# sourceMappingURL=atl-toggle.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"atl-toggle.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/atl-toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,kBAAkB,CAAC;AA0B1B;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,OAAO,GAAG,KAAK,EACf,eAAe,EACf,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACQ;IACf,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,UAAU,WAAW,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,OAAO,IAAI,YAAY;QACvB,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,kBACP,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAE,IAAI,KACN,IAAI,GACR,EACF,eAAM,SAAS,EAAC,OAAO,iBAAa,MAAM,YACxC,eAAM,SAAS,EAAC,OAAO,GAAG,GACrB,EACN,QAAQ,IACH,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes, ReactNode, useId } from 'react';\nimport type { AtlToggleSpec } from '../spec';\nimport './atl-toggle.css';\n\n/**\n * Properties for the AtlToggle component.\n */\nexport interface AtlToggleProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'readOnly' | 'value'>,\n AtlToggleSpec {\n /**\n * Whether the toggle is read-only.\n */\n readOnly?: boolean;\n /**\n * Callback fired when the checked state changes.\n */\n onCheckedChange?: (checked: boolean) => void;\n /**\n * List of error messages to display.\n */\n errors?: string[];\n /**\n * Optional content to display alongside the toggle.\n */\n children?: ReactNode;\n}\n\n/**\n * A toggle switch component for binary choices, supporting validation and custom labels.\n */\nexport function AtlToggle({\n checked = false,\n onCheckedChange,\n invalid = false,\n errors = [],\n disabled = false,\n readOnly: reactReadOnly,\n readonly: specReadOnly,\n required = false,\n children,\n className,\n id,\n name,\n ...rest\n}: AtlToggleProps) {\n const readOnly = reactReadOnly ?? specReadOnly ?? false;\n const generatedId = useId();\n const inputId = id || `toggle-${generatedId}`;\n const errorId = `${inputId}-errors`;\n\n const classes = [\n 'atl-toggle',\n checked && 'is-checked',\n invalid && 'is-invalid',\n disabled && 'is-disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={classes}>\n <label htmlFor={inputId}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n id={inputId}\n checked={checked}\n onChange={(e) => onCheckedChange?.(e.target.checked)}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n aria-checked={checked}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={errors.length > 0 ? errorId : undefined}\n name={name}\n {...rest}\n />\n <span className=\"track\" aria-hidden=\"true\">\n <span className=\"thumb\" />\n </span>\n {children}\n </label>\n {errors.length > 0 && (\n <div className=\"errors\" id={errorId} aria-live=\"polite\">\n {errors.map((err, i) => (\n <p key={i} className=\"error-message\">\n {err}\n </p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"atl-toggle.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/toggle/atl-toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,kBAAkB,CAAC;AAsB1B;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,OAAO,GAAG,KAAK,EACf,eAAe,EACf,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,GAAG,IAAI,EACQ;IACf,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,UAAU,WAAW,EAAE,CAAC;IAC9C,MAAM,OAAO,GAAG,GAAG,OAAO,SAAS,CAAC;IAEpC,MAAM,OAAO,GAAG;QACd,YAAY;QACZ,OAAO,IAAI,YAAY;QACvB,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,iBAAO,OAAO,EAAE,OAAO,aACrB,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,kBACP,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACzD,IAAI,EAAE,IAAI,KACN,IAAI,GACR,EACF,eAAM,SAAS,EAAC,OAAO,iBAAa,MAAM,YACxC,eAAM,SAAS,EAAC,OAAO,GAAG,GACrB,EACN,QAAQ,IACH,EACP,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes, ReactNode, useId } from 'react';\nimport type { AtlToggleSpec } from '../spec';\nimport './atl-toggle.css';\n\n/**\n * Properties for the AtlToggle component.\n */\nexport interface AtlToggleProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'readOnly' | 'value'>,\n AtlToggleSpec {\n /**\n * Callback fired when the checked state changes.\n */\n onCheckedChange?: (checked: boolean) => void;\n /**\n * List of error messages to display.\n */\n errors?: string[];\n /**\n * Optional content to display alongside the toggle.\n */\n children?: ReactNode;\n}\n\n/**\n * A toggle switch component for binary choices, supporting validation and custom labels.\n */\nexport function AtlToggle({\n checked = false,\n onCheckedChange,\n invalid = false,\n errors = [],\n disabled = false,\n required = false,\n children,\n className,\n id,\n name,\n ...rest\n}: AtlToggleProps) {\n const generatedId = useId();\n const inputId = id || `toggle-${generatedId}`;\n const errorId = `${inputId}-errors`;\n\n const classes = [\n 'atl-toggle',\n checked && 'is-checked',\n invalid && 'is-invalid',\n disabled && 'is-disabled',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={classes}>\n <label htmlFor={inputId}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n id={inputId}\n checked={checked}\n onChange={(e) => onCheckedChange?.(e.target.checked)}\n disabled={disabled}\n required={required}\n aria-checked={checked}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={errors.length > 0 ? errorId : undefined}\n name={name}\n {...rest}\n />\n <span className=\"track\" aria-hidden=\"true\">\n <span className=\"thumb\" />\n </span>\n {children}\n </label>\n {errors.length > 0 && (\n <div className=\"errors\" id={errorId} aria-live=\"polite\">\n {errors.map((err, i) => (\n <p key={i} className=\"error-message\">\n {err}\n </p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
@@ -1,5 +1,26 @@
1
+ /* Geometry contract: every size this component states is a border-box size.
2
+ * Declared with the component rather than as a global reset, so it ships in the
3
+ * same file as the sizes it governs and no consuming app has to supply one.
4
+ * Gated by check:box-sizing; the resulting boxes are measured by check:geometry.
5
+ * See ADR-0043. */
6
+ :is(
7
+ .atl-tooltip,
8
+ .atl-tooltip-wrapper
9
+ ),
10
+ :is(
11
+ .atl-tooltip,
12
+ .atl-tooltip-wrapper
13
+ ) * {
14
+ box-sizing: border-box;
15
+ }
16
+
1
17
  /* Tooltip wrapper — inline container */
2
18
  .atl-tooltip-wrapper {
19
+ /* The library states its own typeface (ADR-0035). Without this the component
20
+ * renders in the consuming app's font while its neighbours render Instrument
21
+ * Sans — measured: a card next to a button showed two typefaces. Declared once
22
+ * per component root, never on a descendant (ADR-0049). */
23
+ font-family: var(--ui-font-family);
3
24
  display: inline-block;
4
25
  position: relative;
5
26
  }
package/styles/tokens.css CHANGED
@@ -179,6 +179,18 @@
179
179
  --ui-radius-xl: 1.25rem; /* was 1rem */
180
180
  --ui-radius-full: 9999px;
181
181
 
182
+ /* ── Border widths ──────────────────────────────────────────────────────────
183
+ * Two steps, because the library only ever needed two: the hairline that
184
+ * separates surfaces (133 uses) and the heavier weight that marks a control
185
+ * (12 uses — the avatar status ring, the stepper circle, the checkbox mark,
186
+ * the table header rule). The 1.5px weight nine control outlines used is
187
+ * folded into `thick`: a half pixel renders blurry at 1x device-pixel-ratio
188
+ * and the two weights were never distinguishable side by side.
189
+ * Not here on purpose: AtlToast's 4px accent bar and AtlRadio's 6px dot are
190
+ * graphic devices drawn with `border-width`, not border weights. See ADR-0047. */
191
+ --ui-border-width: 1px;
192
+ --ui-border-width-thick: 2px;
193
+
182
194
  /* Spacing */
183
195
  --ui-spacing-1: 0.25rem;
184
196
  --ui-spacing-2: 0.5rem;