@atelier-ui/react 0.2.6 → 0.2.8
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
|
+
## 0.2.8 (2026-08-26)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **react:** keyless list children in AtlStepper ([e3cb2a9](https://github.com/DominikPieper/atelier-ui/commit/e3cb2a9))
|
|
6
|
+
- **react:** showcase story passed a prop that does not exist ([0bce5d4](https://github.com/DominikPieper/atelier-ui/commit/0bce5d4))
|
|
7
|
+
|
|
8
|
+
### ❤️ Thank You
|
|
9
|
+
|
|
10
|
+
- Claude Opus 5
|
|
11
|
+
- Dominik Pieper @DominikPieper
|
|
12
|
+
|
|
13
|
+
## 0.2.7 (2026-07-23)
|
|
14
|
+
|
|
15
|
+
### 🚀 Features
|
|
16
|
+
|
|
17
|
+
- **a11y:** final gate batch — Tooltip, Drawer, Toast, Chat (25/31, complete) ([18455d5](https://github.com/DominikPieper/atelier-ui/commit/18455d5))
|
|
18
|
+
|
|
19
|
+
### ❤️ Thank You
|
|
20
|
+
|
|
21
|
+
- Dominik Pieper @DominikPieper
|
|
22
|
+
|
|
1
23
|
## 0.2.6 (2026-07-22)
|
|
2
24
|
|
|
3
25
|
### 🚀 Features
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-stepper.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"atl-stepper.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,SAAS,EACT,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3D,OAAO,mBAAmB,CAAC;AAE3B,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAYD,0DAA0D;AAC1D,wBAAgB,aAAa,wBAE5B;AAED,MAAM,WAAW,eACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc;IAChB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,0BAA0B;IAC1B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,UAAU,EAAE,YAAY,EACxB,kBAAkB,EAClB,WAA0B,EAC1B,MAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,eAAe,+BAsJjB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,aAEjD;yBAFe,OAAO"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
2
|
-
import { createContext, useContext, useState, Children, isValidElement, useMemo, } from 'react';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, createContext, useContext, useState, Children, isValidElement, useMemo, } from 'react';
|
|
3
3
|
import './atl-stepper.css';
|
|
4
4
|
const StepperContext = createContext({
|
|
5
5
|
activeStep: 0,
|
|
@@ -79,9 +79,9 @@ export function AtlStepper({ activeStep: externalStep, onActiveStepChange, orien
|
|
|
79
79
|
]
|
|
80
80
|
.filter(Boolean)
|
|
81
81
|
.join(' ');
|
|
82
|
-
return (_jsxs(
|
|
82
|
+
return (_jsxs(Fragment, { children: [_jsxs("div", { className: itemClass, children: [_jsx("button", { type: "button", role: "tab", id: `atl-step-${i}`, className: "step-circle", "aria-label": step.label, "aria-selected": isActive, "aria-controls": `atl-step-panel-${i}`, "aria-disabled": step.disabled || undefined, tabIndex: isActive ? 0 : -1, disabled: step.disabled, onClick: () => goTo(i), children: step.completed && !step.error ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2 7L5.5 10.5L12 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) : step.error ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })) : (i + 1) }), _jsxs("div", { className: "step-text", children: [_jsx("span", { className: "step-label", children: step.label }), step.description && (_jsx("span", { className: "step-description", children: step.description })), step.optional && !step.completed && (_jsx("span", { className: "step-optional", children: "Optional" }))] })] }), i < steps.length - 1 && (_jsx("div", { className: ['step-connector', (activeStep > i || step.completed) && 'is-active']
|
|
83
83
|
.filter(Boolean)
|
|
84
|
-
.join(' ') }
|
|
84
|
+
.join(' ') }))] }, i));
|
|
85
85
|
}) }), _jsx("div", { className: "stepper-content", children: stepPanels.map((panel, i) => {
|
|
86
86
|
const element = panel;
|
|
87
87
|
return (_jsx("div", { id: `atl-step-panel-${i}`, role: "tabpanel", "aria-labelledby": `atl-step-${i}`, tabIndex: 0, hidden: i !== activeStep, children: element.props.children }, i));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atl-stepper.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createContext,\n useContext,\n useState,\n ReactNode,\n HTMLAttributes,\n Children,\n isValidElement,\n useMemo,\n ReactElement,\n} from 'react';\nimport type { AtlStepperSpec, AtlStepSpec } from '../spec';\nimport './atl-stepper.css';\n\ninterface StepInfo {\n label: string;\n description?: string;\n completed: boolean;\n error: boolean;\n optional: boolean;\n disabled: boolean;\n}\n\ninterface StepperContextValue {\n activeStep: number;\n setActiveStep: (i: number) => void;\n steps: StepInfo[];\n linear: boolean;\n next(): void;\n prev(): void;\n goTo(i: number): void;\n}\n\nconst StepperContext = createContext<StepperContextValue>({\n activeStep: 0,\n setActiveStep: () => undefined,\n steps: [],\n linear: false,\n next: () => undefined,\n prev: () => undefined,\n goTo: () => undefined,\n});\n\n/** Access stepper navigation from within step content. */\nexport function useAtlStepper() {\n return useContext(StepperContext);\n}\n\nexport interface AtlStepperProps\n extends HTMLAttributes<HTMLDivElement>,\n AtlStepperSpec {\n /** Currently active step index. */\n activeStep?: number;\n /** Callback when the active step changes. */\n onActiveStepChange?: (index: number) => void;\n /** Layout orientation. */\n orientation?: 'horizontal' | 'vertical';\n /** Restrict forward navigation until previous steps are completed. */\n linear?: boolean;\n children?: ReactNode;\n}\n\nexport function AtlStepper({\n activeStep: externalStep,\n onActiveStepChange,\n orientation = 'horizontal',\n linear = false,\n children,\n className,\n ...rest\n}: AtlStepperProps) {\n const [internalStep, setInternalStep] = useState(externalStep ?? 0);\n const isControlled = externalStep !== undefined;\n const activeStep = isControlled ? externalStep : internalStep;\n\n const setStep = (i: number) => {\n if (!isControlled) setInternalStep(i);\n onActiveStepChange?.(i);\n };\n\n const childArray = Children.toArray(children);\n const steps: StepInfo[] = useMemo(\n () =>\n childArray\n .filter(\n (c) =>\n isValidElement(c) &&\n (c.type as { displayName?: string }).displayName === 'AtlStep'\n )\n .map((c) => {\n const element = c as ReactElement<AtlStepProps>;\n return {\n label: element.props.label ?? '',\n description: element.props.description,\n completed: element.props.completed ?? false,\n error: element.props.error ?? false,\n optional: element.props.optional ?? false,\n disabled: element.props.disabled ?? false,\n };\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [children]\n );\n\n const goTo = (i: number) => {\n if (i < 0 || i >= steps.length) return;\n if (steps[i]?.disabled) return;\n if (linear && i > activeStep) {\n const canAdvance = steps.slice(0, i).every((s) => s.completed || s.optional);\n if (!canAdvance) return;\n }\n setStep(i);\n };\n\n const next = () => goTo(activeStep + 1);\n const prev = () => {\n const p = activeStep - 1;\n if (p >= 0 && !steps[p]?.disabled) setStep(p);\n };\n\n const classes = [\n 'atl-stepper',\n `orientation-${orientation}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const stepPanels = childArray.filter(\n (c) =>\n isValidElement(c) &&\n (c.type as { displayName?: string }).displayName === 'AtlStep'\n );\n\n return (\n <StepperContext.Provider value={{ activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }}>\n <div className={classes} {...rest}>\n <div className=\"stepper-header\" role=\"tablist\">\n {steps.map((step, i) => {\n const isActive = activeStep === i;\n const isCompleted = step.completed && !isActive;\n const itemClass = [\n 'step-item',\n isActive && 'is-active',\n isCompleted && 'is-completed',\n step.error && 'is-error',\n step.disabled && 'is-disabled',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <>\n <div key={i} className={itemClass}>\n <button\n type=\"button\"\n role=\"tab\"\n id={`atl-step-${i}`}\n className=\"step-circle\"\n aria-label={step.label}\n aria-selected={isActive}\n aria-controls={`atl-step-panel-${i}`}\n aria-disabled={step.disabled || undefined}\n tabIndex={isActive ? 0 : -1}\n disabled={step.disabled}\n onClick={() => goTo(i)}\n >\n {step.completed && !step.error ? (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 7L5.5 10.5L12 3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n ) : step.error ? (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n </svg>\n ) : (\n i + 1\n )}\n </button>\n <div className=\"step-text\">\n <span className=\"step-label\">{step.label}</span>\n {step.description && (\n <span className=\"step-description\">{step.description}</span>\n )}\n {step.optional && !step.completed && (\n <span className=\"step-optional\">Optional</span>\n )}\n </div>\n </div>\n {i < steps.length - 1 && (\n <div\n key={`connector-${i}`}\n className={['step-connector', (activeStep > i || step.completed) && 'is-active']\n .filter(Boolean)\n .join(' ')}\n />\n )}\n </>\n );\n })}\n </div>\n <div className=\"stepper-content\">\n {stepPanels.map((panel, i) => {\n const element = panel as ReactElement<AtlStepProps>;\n return (\n <div\n key={i}\n id={`atl-step-panel-${i}`}\n role=\"tabpanel\"\n aria-labelledby={`atl-step-${i}`}\n tabIndex={0}\n hidden={i !== activeStep}\n >\n {element.props.children}\n </div>\n );\n })}\n </div>\n </div>\n </StepperContext.Provider>\n );\n}\n\nexport interface AtlStepProps extends AtlStepSpec {\n /** Text displayed on the step indicator. Required. */\n label: string;\n /** Optional subtitle. */\n description?: string;\n /** Mark as completed (shows checkmark). */\n completed?: boolean;\n /** Mark as errored (shows X). */\n error?: boolean;\n /** Mark as optional. */\n optional?: boolean;\n /** Whether the step is disabled. */\n disabled?: boolean;\n children?: ReactNode;\n}\n\nexport function AtlStep({ children }: AtlStepProps) {\n return children;\n}\nAtlStep.displayName = 'AtlStep';\n"]}
|
|
1
|
+
{"version":3,"file":"atl-stepper.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/stepper/atl-stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Fragment,\n createContext,\n useContext,\n useState,\n ReactNode,\n HTMLAttributes,\n Children,\n isValidElement,\n useMemo,\n ReactElement,\n} from 'react';\nimport type { AtlStepperSpec, AtlStepSpec } from '../spec';\nimport './atl-stepper.css';\n\ninterface StepInfo {\n label: string;\n description?: string;\n completed: boolean;\n error: boolean;\n optional: boolean;\n disabled: boolean;\n}\n\ninterface StepperContextValue {\n activeStep: number;\n setActiveStep: (i: number) => void;\n steps: StepInfo[];\n linear: boolean;\n next(): void;\n prev(): void;\n goTo(i: number): void;\n}\n\nconst StepperContext = createContext<StepperContextValue>({\n activeStep: 0,\n setActiveStep: () => undefined,\n steps: [],\n linear: false,\n next: () => undefined,\n prev: () => undefined,\n goTo: () => undefined,\n});\n\n/** Access stepper navigation from within step content. */\nexport function useAtlStepper() {\n return useContext(StepperContext);\n}\n\nexport interface AtlStepperProps\n extends HTMLAttributes<HTMLDivElement>,\n AtlStepperSpec {\n /** Currently active step index. */\n activeStep?: number;\n /** Callback when the active step changes. */\n onActiveStepChange?: (index: number) => void;\n /** Layout orientation. */\n orientation?: 'horizontal' | 'vertical';\n /** Restrict forward navigation until previous steps are completed. */\n linear?: boolean;\n children?: ReactNode;\n}\n\nexport function AtlStepper({\n activeStep: externalStep,\n onActiveStepChange,\n orientation = 'horizontal',\n linear = false,\n children,\n className,\n ...rest\n}: AtlStepperProps) {\n const [internalStep, setInternalStep] = useState(externalStep ?? 0);\n const isControlled = externalStep !== undefined;\n const activeStep = isControlled ? externalStep : internalStep;\n\n const setStep = (i: number) => {\n if (!isControlled) setInternalStep(i);\n onActiveStepChange?.(i);\n };\n\n const childArray = Children.toArray(children);\n const steps: StepInfo[] = useMemo(\n () =>\n childArray\n .filter(\n (c) =>\n isValidElement(c) &&\n (c.type as { displayName?: string }).displayName === 'AtlStep'\n )\n .map((c) => {\n const element = c as ReactElement<AtlStepProps>;\n return {\n label: element.props.label ?? '',\n description: element.props.description,\n completed: element.props.completed ?? false,\n error: element.props.error ?? false,\n optional: element.props.optional ?? false,\n disabled: element.props.disabled ?? false,\n };\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [children]\n );\n\n const goTo = (i: number) => {\n if (i < 0 || i >= steps.length) return;\n if (steps[i]?.disabled) return;\n if (linear && i > activeStep) {\n const canAdvance = steps.slice(0, i).every((s) => s.completed || s.optional);\n if (!canAdvance) return;\n }\n setStep(i);\n };\n\n const next = () => goTo(activeStep + 1);\n const prev = () => {\n const p = activeStep - 1;\n if (p >= 0 && !steps[p]?.disabled) setStep(p);\n };\n\n const classes = [\n 'atl-stepper',\n `orientation-${orientation}`,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const stepPanels = childArray.filter(\n (c) =>\n isValidElement(c) &&\n (c.type as { displayName?: string }).displayName === 'AtlStep'\n );\n\n return (\n <StepperContext.Provider value={{ activeStep, setActiveStep: setStep, steps, linear, next, prev, goTo }}>\n <div className={classes} {...rest}>\n <div className=\"stepper-header\" role=\"tablist\">\n {steps.map((step, i) => {\n const isActive = activeStep === i;\n const isCompleted = step.completed && !isActive;\n const itemClass = [\n 'step-item',\n isActive && 'is-active',\n isCompleted && 'is-completed',\n step.error && 'is-error',\n step.disabled && 'is-disabled',\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <Fragment key={i}>\n <div className={itemClass}>\n <button\n type=\"button\"\n role=\"tab\"\n id={`atl-step-${i}`}\n className=\"step-circle\"\n aria-label={step.label}\n aria-selected={isActive}\n aria-controls={`atl-step-panel-${i}`}\n aria-disabled={step.disabled || undefined}\n tabIndex={isActive ? 0 : -1}\n disabled={step.disabled}\n onClick={() => goTo(i)}\n >\n {step.completed && !step.error ? (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 7L5.5 10.5L12 3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n ) : step.error ? (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n </svg>\n ) : (\n i + 1\n )}\n </button>\n <div className=\"step-text\">\n <span className=\"step-label\">{step.label}</span>\n {step.description && (\n <span className=\"step-description\">{step.description}</span>\n )}\n {step.optional && !step.completed && (\n <span className=\"step-optional\">Optional</span>\n )}\n </div>\n </div>\n {i < steps.length - 1 && (\n <div\n className={['step-connector', (activeStep > i || step.completed) && 'is-active']\n .filter(Boolean)\n .join(' ')}\n />\n )}\n </Fragment>\n );\n })}\n </div>\n <div className=\"stepper-content\">\n {stepPanels.map((panel, i) => {\n const element = panel as ReactElement<AtlStepProps>;\n return (\n <div\n key={i}\n id={`atl-step-panel-${i}`}\n role=\"tabpanel\"\n aria-labelledby={`atl-step-${i}`}\n tabIndex={0}\n hidden={i !== activeStep}\n >\n {element.props.children}\n </div>\n );\n })}\n </div>\n </div>\n </StepperContext.Provider>\n );\n}\n\nexport interface AtlStepProps extends AtlStepSpec {\n /** Text displayed on the step indicator. Required. */\n label: string;\n /** Optional subtitle. */\n description?: string;\n /** Mark as completed (shows checkmark). */\n completed?: boolean;\n /** Mark as errored (shows X). */\n error?: boolean;\n /** Mark as optional. */\n optional?: boolean;\n /** Whether the step is disabled. */\n disabled?: boolean;\n children?: ReactNode;\n}\n\nexport function AtlStep({ children }: AtlStepProps) {\n return children;\n}\nAtlStep.displayName = 'AtlStep';\n"]}
|