kang-components 0.9.8 → 0.9.10
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/dist/back-button.d.ts.map +1 -1
- package/dist/back-button.js +5 -0
- package/dist/back-button.js.map +1 -1
- package/dist/banner-button.d.ts.map +1 -1
- package/dist/banner-button.js +6 -0
- package/dist/banner-button.js.map +1 -1
- package/dist/bottom-sheet.d.ts.map +1 -1
- package/dist/bottom-sheet.js +56 -2
- package/dist/bottom-sheet.js.map +1 -1
- package/dist/circle-icon-button.d.ts +7 -1
- package/dist/circle-icon-button.d.ts.map +1 -1
- package/dist/circle-icon-button.js +14 -2
- package/dist/circle-icon-button.js.map +1 -1
- package/dist/confirm-dialog.d.ts.map +1 -1
- package/dist/confirm-dialog.js +3 -0
- package/dist/confirm-dialog.js.map +1 -1
- package/dist/focus-ring.d.ts +3 -0
- package/dist/focus-ring.d.ts.map +1 -0
- package/dist/focus-ring.js +26 -0
- package/dist/focus-ring.js.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/spring.d.ts +10 -0
- package/dist/spring.d.ts.map +1 -1
- package/dist/spring.js +10 -0
- package/dist/spring.js.map +1 -1
- package/dist/toggle-switch.d.ts +7 -1
- package/dist/toggle-switch.d.ts.map +1 -1
- package/dist/toggle-switch.js +26 -5
- package/dist/toggle-switch.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"back-button.d.ts","sourceRoot":"","sources":["../src/back-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAgC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"back-button.d.ts","sourceRoot":"","sources":["../src/back-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAgC,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxF,MAAM,MAAM,eAAe,GAAG;IAC7B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,CAAC;AAwDF,QAAA,MAAM,UAAU,6DAOb,eAAe,KAAG,YAyBpB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
package/dist/back-button.js
CHANGED
|
@@ -29,6 +29,7 @@ import { useCallback } from 'react';
|
|
|
29
29
|
import { styled } from 'styled-components';
|
|
30
30
|
import { pressPrimary } from './press.js';
|
|
31
31
|
import { Ripple, useRipple } from './ripple.js';
|
|
32
|
+
import { focusVisibleRing } from './focus-ring.js';
|
|
32
33
|
/**
|
|
33
34
|
* Inline IoChevronBackOutline (react-icons/io5) — identical Ionicons path data
|
|
34
35
|
* (viewBox + stroke-width 48 outline chevron) so the glyph is unchanged.
|
|
@@ -40,6 +41,9 @@ const StyledBackButton = styled.button `
|
|
|
40
41
|
display: inline-flex;
|
|
41
42
|
align-items: center;
|
|
42
43
|
justify-content: center;
|
|
44
|
+
/* 44px min touch target; the icon keeps its size and just centers in it. */
|
|
45
|
+
min-width: 2.75rem;
|
|
46
|
+
min-height: 2.75rem;
|
|
43
47
|
padding: 0;
|
|
44
48
|
margin: 0;
|
|
45
49
|
border: none;
|
|
@@ -51,6 +55,7 @@ const StyledBackButton = styled.button `
|
|
|
51
55
|
-webkit-tap-highlight-color: transparent;
|
|
52
56
|
|
|
53
57
|
${pressPrimary()}
|
|
58
|
+
${focusVisibleRing()}
|
|
54
59
|
|
|
55
60
|
&:disabled {
|
|
56
61
|
pointer-events: none;
|
package/dist/back-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"back-button.js","sourceRoot":"","sources":["../src/back-button.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,WAAW,EAAsD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"back-button.js","sourceRoot":"","sources":["../src/back-button.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,WAAW,EAAsD,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAwBnD;;;GAGG;AACH,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAgB,EAAE,CAAC,CACrE,cACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,aAAa,EACrB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,IAAI,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,YAEjB,eACC,IAAI,EAAC,MAAM,EACX,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,EAChB,CAAC,EAAC,0BAA0B,GAC3B,GACG,CACN,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAwB;;;;;;;;;;;;;WAanD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;UAC3D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrB,KAA6C,EAAE,MAAM,EAAE,SAAS,IAAI,cAAc;YACzE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;;;;GAIjD,YAAY,EAAE;GACd,gBAAgB,EAAE;;;;;CAKpB,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,MAAM,EAClB,SAAS,EACT,IAAI,GACa,EAAgB,EAAE;IACnC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAU,CAAC;IAE1D,MAAM,WAAW,GAAG,WAAW,CAC9B,CAAC,CAAgC,EAAE,EAAE;QACpC,IAAI,QAAQ;YAAE,OAAO;QACrB,OAAO,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;QACnB,OAAO,EAAE,EAAE,CAAC;IACb,CAAC,EACD,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAC5B,CAAC;IAEF,OAAO,CACN,MAAC,gBAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,eACT,QAAQ,EACnB,QAAQ,EAAE,QAAQ,gBACN,SAAS,EACrB,OAAO,EAAE,WAAW,aAEnB,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,GAAI,EACrF,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,IAAI,KAAC,MAAM,UAAsB,MAAM,CAAC,CAAC,QAAM,MAAM,CAAC,CAAC,IAAtC,MAAM,CAAC,GAAG,CAAgC,IACpE,CACnB,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner-button.d.ts","sourceRoot":"","sources":["../src/banner-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"banner-button.d.ts","sourceRoot":"","sources":["../src/banner-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yEAAyE;IACzE,UAAU,EAAE,eAAe,CAAC;IAC5B,+CAA+C;IAC/C,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACrC,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAoGF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACpC,aAAa,EACb,IAAI,EACJ,UAAU,EACV,UAAsB,EACtB,OAAO,EACP,mBAAkC,EAClC,OAAc,GACd,EAAE,iBAAiB,+BAwBnB"}
|
package/dist/banner-button.js
CHANGED
|
@@ -4,6 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
import { styled } from 'styled-components';
|
|
5
5
|
import AnimatedText from './animated-text.js';
|
|
6
6
|
import { pressPrimary } from './press.js';
|
|
7
|
+
import { focusVisibleRing } from './focus-ring.js';
|
|
7
8
|
const BannerButtonContainer = styled.div `
|
|
8
9
|
display: inline-block;
|
|
9
10
|
position: relative;
|
|
@@ -20,12 +21,17 @@ const StyledButton = styled.button `
|
|
|
20
21
|
align-items: center;
|
|
21
22
|
position: relative;
|
|
22
23
|
z-index: 10;
|
|
24
|
+
/* min 44px tall for a comfortable touch target (was ~36px) */
|
|
25
|
+
min-height: 44px;
|
|
26
|
+
box-sizing: border-box;
|
|
23
27
|
padding: 0.5rem 1rem;
|
|
24
28
|
border: none;
|
|
25
29
|
outline: none;
|
|
26
30
|
cursor: pointer;
|
|
27
31
|
transition: background-color 0.3s;
|
|
28
32
|
|
|
33
|
+
${focusVisibleRing('-3px')}
|
|
34
|
+
|
|
29
35
|
&.primary {
|
|
30
36
|
background-color: ${({ theme }) => theme?.colors?.primary ?? '#489fb5'};
|
|
31
37
|
color: ${({ theme }) => theme?.colors?.onPrimary ?? 'white'};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"banner-button.js","sourceRoot":"","sources":["../src/banner-button.tsx"],"names":[],"mappings":";AA4BA,+EAA+E;AAC/E,4DAA4D;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"banner-button.js","sourceRoot":"","sources":["../src/banner-button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottom-sheet.d.ts","sourceRoot":"","sources":["../src/bottom-sheet.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EACN,KAAK,YAAY,EACjB,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"bottom-sheet.d.ts","sourceRoot":"","sources":["../src/bottom-sheet.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EACN,KAAK,YAAY,EACjB,KAAK,SAAS,EAOd,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,gBAAgB;IAChC,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AA2ED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAsB,EACtB,SAAe,EACf,iBAAuB,EACvB,cAAqB,EACrB,cAAc,GACd,EAAE,gBAAgB,GAAG,YAAY,CA4MjC;AAED,eAAe,WAAW,CAAC"}
|
package/dist/bottom-sheet.js
CHANGED
|
@@ -33,7 +33,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
|
|
|
33
33
|
* `styled-components`, `@react-spring/web` and `@use-gesture/react` are optional
|
|
34
34
|
* peer dependencies, used only by this module.
|
|
35
35
|
*/
|
|
36
|
-
import { useRef, useEffect, useCallback, useState, } from 'react';
|
|
36
|
+
import { useRef, useEffect, useCallback, useState, useId, } from 'react';
|
|
37
37
|
import { useSpring, animated } from '@react-spring/web';
|
|
38
38
|
import { useDrag } from '@use-gesture/react';
|
|
39
39
|
// Named import (not the default) so styled-components resolves consistently
|
|
@@ -80,6 +80,13 @@ const VisuallyHidden = styled.span `
|
|
|
80
80
|
function dampenValue(v) {
|
|
81
81
|
return 8 * (Math.log(v + 1) - 2);
|
|
82
82
|
}
|
|
83
|
+
const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
84
|
+
/** Focusable descendants of `root`, in DOM order (for the focus trap). */
|
|
85
|
+
function getFocusable(root) {
|
|
86
|
+
if (!root)
|
|
87
|
+
return [];
|
|
88
|
+
return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
|
|
89
|
+
}
|
|
83
90
|
/**
|
|
84
91
|
* Draggable bottom sheet modal with gesture support.
|
|
85
92
|
* Features rubber-band physics, velocity-based swipe detection, and smooth animations.
|
|
@@ -140,6 +147,53 @@ export function BottomSheet({ isOpen, onClose, children, title = 'Bottom Sheet',
|
|
|
140
147
|
const handleClose = useCallback(() => {
|
|
141
148
|
onCloseRef.current();
|
|
142
149
|
}, []);
|
|
150
|
+
// Accessible name for the dialog, linked to the visually-hidden title.
|
|
151
|
+
const titleId = useId();
|
|
152
|
+
// Focus management (#720), deliberately separate from the open/close spring
|
|
153
|
+
// effect so it can't perturb the onExitComplete stability contract above.
|
|
154
|
+
// On open: remember what had focus, then move focus into the sheet. On close:
|
|
155
|
+
// return focus to the invoking element.
|
|
156
|
+
const previouslyFocused = useRef(null);
|
|
157
|
+
useEffect(() => {
|
|
158
|
+
if (isOpen) {
|
|
159
|
+
previouslyFocused.current = document.activeElement;
|
|
160
|
+
// Panel mounts this render; focus it after paint. tabIndex=-1 makes it
|
|
161
|
+
// programmatically focusable without being a Tab stop itself.
|
|
162
|
+
const raf = requestAnimationFrame(() => modalRef.current?.focus());
|
|
163
|
+
return () => cancelAnimationFrame(raf);
|
|
164
|
+
}
|
|
165
|
+
// Closing: restore focus to the trigger if it's still around.
|
|
166
|
+
previouslyFocused.current?.focus?.();
|
|
167
|
+
}, [isOpen]);
|
|
168
|
+
// Escape-to-close + a Tab focus trap so keyboard/AT users can't tab out of the
|
|
169
|
+
// modal sheet or get stuck behind it.
|
|
170
|
+
const handleKeyDown = useCallback((e) => {
|
|
171
|
+
if (e.key === 'Escape') {
|
|
172
|
+
e.stopPropagation();
|
|
173
|
+
handleClose();
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
if (e.key !== 'Tab')
|
|
177
|
+
return;
|
|
178
|
+
const focusable = getFocusable(modalRef.current);
|
|
179
|
+
if (focusable.length === 0) {
|
|
180
|
+
// Nothing focusable inside — keep focus on the panel.
|
|
181
|
+
e.preventDefault();
|
|
182
|
+
modalRef.current?.focus();
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
const first = focusable[0];
|
|
186
|
+
const last = focusable[focusable.length - 1];
|
|
187
|
+
const activeEl = document.activeElement;
|
|
188
|
+
if (e.shiftKey && (activeEl === first || activeEl === modalRef.current)) {
|
|
189
|
+
e.preventDefault();
|
|
190
|
+
last.focus();
|
|
191
|
+
}
|
|
192
|
+
else if (!e.shiftKey && activeEl === last) {
|
|
193
|
+
e.preventDefault();
|
|
194
|
+
first.focus();
|
|
195
|
+
}
|
|
196
|
+
}, [handleClose]);
|
|
143
197
|
// Drag handler
|
|
144
198
|
const bind = useDrag(({ active, movement: [, my], velocity: [, vy], direction: [, dy], cancel }) => {
|
|
145
199
|
// Prevent dragging up beyond the top
|
|
@@ -191,7 +245,7 @@ export function BottomSheet({ isOpen, onClose, children, title = 'Bottom Sheet',
|
|
|
191
245
|
right: 0,
|
|
192
246
|
zIndex: 50,
|
|
193
247
|
transform: spring.y.to((y) => `translateY(${y}px)`),
|
|
194
|
-
}, children: _jsxs(SheetContent, { ref: modalRef, children: [_jsx(VisuallyHidden, { children: title }), _jsx("div", { ...bind(), style: {
|
|
248
|
+
}, children: _jsxs(SheetContent, { ref: modalRef, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, onKeyDown: handleKeyDown, children: [_jsx(VisuallyHidden, { id: titleId, children: title }), _jsx("div", { ...bind(), style: {
|
|
195
249
|
touchAction: 'none',
|
|
196
250
|
cursor: 'grab',
|
|
197
251
|
padding: '8px 0',
|
package/dist/bottom-sheet.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bottom-sheet.js","sourceRoot":"","sources":["../src/bottom-sheet.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"bottom-sheet.js","sourceRoot":"","sources":["../src/bottom-sheet.tsx"],"names":[],"mappings":"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"}
|
|
@@ -47,6 +47,12 @@ export type CircleIconButtonProps = {
|
|
|
47
47
|
* button still renders and is interactive but performs no action.
|
|
48
48
|
*/
|
|
49
49
|
onClick?: () => void;
|
|
50
|
+
/**
|
|
51
|
+
* Accessible name for the button. The icon is decorative (`aria-hidden`), so
|
|
52
|
+
* without this the button is announced as just "button". Required in practice
|
|
53
|
+
* for a usable control — e.g. "Profile" / "Scan invite code".
|
|
54
|
+
*/
|
|
55
|
+
ariaLabel?: string;
|
|
50
56
|
};
|
|
51
|
-
export default function CircleIconButton({ iconComponent, icon, onClick, }: CircleIconButtonProps): ReactElement;
|
|
57
|
+
export default function CircleIconButton({ iconComponent, icon, onClick, ariaLabel, }: CircleIconButtonProps): ReactElement;
|
|
52
58
|
//# sourceMappingURL=circle-icon-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circle-icon-button.d.ts","sourceRoot":"","sources":["../src/circle-icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"circle-icon-button.d.ts","sourceRoot":"","sources":["../src/circle-icon-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ1D,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,IAAI,CAAC;AAE7C,MAAM,MAAM,qBAAqB,GAAG;IACnC;;;;;OAKG;IACH,aAAa,EAAE,cAAc,CAAC;IAE9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAoFF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACxC,aAAa,EACb,IAAI,EACJ,OAAO,EACP,SAAS,GACT,EAAE,qBAAqB,GAAG,YAAY,CAsBtC"}
|
|
@@ -4,7 +4,9 @@ import { animated, useSpring } from '@react-spring/web';
|
|
|
4
4
|
// across bundler and raw ESM/CJS environments — matches ripple.ts.
|
|
5
5
|
import { styled } from 'styled-components';
|
|
6
6
|
import { pressPrimaryScale } from './press.js';
|
|
7
|
+
import { focusVisibleRing } from './focus-ring.js';
|
|
7
8
|
const StyledCircleButton = styled(animated.button) `
|
|
9
|
+
position: relative;
|
|
8
10
|
width: 2.5rem;
|
|
9
11
|
height: 2.5rem;
|
|
10
12
|
padding: 0;
|
|
@@ -17,6 +19,16 @@ const StyledCircleButton = styled(animated.button) `
|
|
|
17
19
|
justify-content: center;
|
|
18
20
|
cursor: pointer;
|
|
19
21
|
${pressPrimaryScale()}
|
|
22
|
+
${focusVisibleRing()}
|
|
23
|
+
|
|
24
|
+
/* Extend the tap target to the 44px minimum without growing the visible 40px
|
|
25
|
+
circle — the pseudo-element is invisible and adds no layout. */
|
|
26
|
+
&::after {
|
|
27
|
+
content: '';
|
|
28
|
+
position: absolute;
|
|
29
|
+
inset: -2px;
|
|
30
|
+
border-radius: 50%;
|
|
31
|
+
}
|
|
20
32
|
`;
|
|
21
33
|
const StyledIcon = styled.span `
|
|
22
34
|
display: flex;
|
|
@@ -36,7 +48,7 @@ function resolveIcon(icon, iconComponent) {
|
|
|
36
48
|
return icon;
|
|
37
49
|
return ICONS[iconComponent];
|
|
38
50
|
}
|
|
39
|
-
export default function CircleIconButton({ iconComponent, icon, onClick, }) {
|
|
51
|
+
export default function CircleIconButton({ iconComponent, icon, onClick, ariaLabel, }) {
|
|
40
52
|
const animatedStyles = useSpring({
|
|
41
53
|
from: { opacity: 0, scale: 0.5 },
|
|
42
54
|
to: { opacity: 1, scale: 1 },
|
|
@@ -46,6 +58,6 @@ export default function CircleIconButton({ iconComponent, icon, onClick, }) {
|
|
|
46
58
|
onClick();
|
|
47
59
|
}
|
|
48
60
|
};
|
|
49
|
-
return (_jsx(StyledCircleButton, { type: "button", style: animatedStyles, onClick: handleClick, children: _jsx(StyledIcon, { children: resolveIcon(icon, iconComponent) }) }));
|
|
61
|
+
return (_jsx(StyledCircleButton, { type: "button", "aria-label": ariaLabel, style: animatedStyles, onClick: handleClick, children: _jsx(StyledIcon, { children: resolveIcon(icon, iconComponent) }) }));
|
|
50
62
|
}
|
|
51
63
|
//# sourceMappingURL=circle-icon-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circle-icon-button.js","sourceRoot":"","sources":["../src/circle-icon-button.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxD,4EAA4E;AAC5E,mEAAmE;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"circle-icon-button.js","sourceRoot":"","sources":["../src/circle-icon-button.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxD,4EAA4E;AAC5E,mEAAmE;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAqCnD,MAAM,kBAAkB,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;;;;;;;IAO9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO;;;;;;GAMpE,iBAAiB,EAAE;GACnB,gBAAgB,EAAE;;;;;;;;;;CAUpB,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;UAEpB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAqB,EAAE,MAAM,EAAE,SAAS,IAAI,OAAO;;CAE5E,CAAC;AAEF,qFAAqF;AACrF,MAAM,UAAU,GAAG,GAAiB,EAAE,CAAC,CACtC,cACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,YAEjB,eAAM,CAAC,EAAC,uOAAuO,GAAG,GAC7O,CACN,CAAC;AAEF,yFAAyF;AACzF,MAAM,MAAM,GAAG,GAAiB,EAAE,CAAC,CAClC,eACC,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,eAAM,CAAC,EAAC,gUAAgU,GAAG,EAC3U,eAAM,CAAC,EAAC,mCAAmC,GAAG,EAC9C,eAAM,CAAC,EAAC,qCAAqC,GAAG,EAChD,eAAM,CAAC,EAAC,wGAAwG,GAAG,EACnH,eAAM,CAAC,EAAC,eAAe,GAAG,IACrB,CACN,CAAC;AAEF,MAAM,KAAK,GAAyC;IACnD,MAAM,EAAE,KAAC,UAAU,KAAG;IACtB,EAAE,EAAE,KAAC,MAAM,KAAG;CACd,CAAC;AAEF,SAAS,WAAW,CAAC,IAAe,EAAE,aAA6B;IAClE,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACpC,OAAO,KAAK,CAAC,aAAa,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACxC,aAAa,EACb,IAAI,EACJ,OAAO,EACP,SAAS,GACc;IACvB,MAAM,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE;QAChC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE;KAC5B,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,IAAI,OAAO,EAAE,CAAC;YACb,OAAO,EAAE,CAAC;QACX,CAAC;IACF,CAAC,CAAC;IAEF,OAAO,CACN,KAAC,kBAAkB,IAClB,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,KAAK,EAAE,cAAc,EACrB,OAAO,EAAE,WAAW,YAEpB,KAAC,UAAU,cAAE,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,GAAc,GACvC,CACrB,CAAC;AACH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-dialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAC;AAK3E,MAAM,WAAW,kBAAkB;IAClC,4CAA4C;IAC5C,OAAO,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oCAAoC;IACpC,YAAY,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,EAAE,SAAS,CAAC;IACvB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACrB;AAgED,wBAAgB,aAAa,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAmB,EACnB,SAAS,EACT,QAAQ,GACR,EAAE,kBAAkB,GAAG,YAAY,CA+BnC;AAED,eAAe,aAAa,CAAC"}
|
package/dist/confirm-dialog.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { styled } from 'styled-components';
|
|
3
3
|
import { Ripple, useRipple } from './ripple.js';
|
|
4
|
+
import { focusVisibleRing } from './focus-ring.js';
|
|
4
5
|
/** Convert a hex color (`#rrggbb`) to an `r, g, b` triple for rgba() usage. */
|
|
5
6
|
function hexToRgbTriple(hex) {
|
|
6
7
|
const h = hex.replace('#', '');
|
|
@@ -57,6 +58,8 @@ const DialogButton = styled.button `
|
|
|
57
58
|
outline: none;
|
|
58
59
|
overflow: hidden;
|
|
59
60
|
-webkit-tap-highlight-color: transparent;
|
|
61
|
+
|
|
62
|
+
${focusVisibleRing('-2px')}
|
|
60
63
|
`;
|
|
61
64
|
export function ConfirmDialog({ message, description, confirmLabel, cancelLabel, destructive = false, onConfirm, onCancel, }) {
|
|
62
65
|
const { ripple, trigger, isTarget } = useRipple();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirm-dialog.js","sourceRoot":"","sources":["../src/confirm-dialog.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"confirm-dialog.js","sourceRoot":"","sources":["../src/confirm-dialog.tsx"],"names":[],"mappings":";AAsBA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAqBnD,+EAA+E;AAC/E,SAAS,cAAc,CAAC,GAAW;IAClC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC/B,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAChC,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IACxD,OAAO,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;AAC3B,CAAC;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKnC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAA4B;;;;;;;;;;;;qBAYzC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/C,IAAI,CAAC,YAAY;QAAE,OAAO,aAAa,CAAC;IACxC,MAAM,KAAK,GAAI,KAAqB,EAAE,MAAM,EAAE,KAAK,CAAC;IACpD,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpD,OAAO,MAAM,CAAC,CAAC,CAAC,QAAQ,MAAM,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC;AACnE,CAAC;UACQ,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IACpC,IAAI,CAAC,YAAY;QAAE,OAAO,SAAS,CAAC;IACpC,OAAQ,KAAqB,EAAE,MAAM,EAAE,KAAK,IAAI,SAAS,CAAC;AAC3D,CAAC;;;;;;GAMC,gBAAgB,CAAC,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,QAAQ,GACY;IACpB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAwB,CAAC;IAExE,MAAM,aAAa,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC1D,OAAO,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;QACtB,SAAS,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE;QACzD,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;QACrB,QAAQ,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACN,MAAC,eAAe,eACf,KAAC,aAAa,cAAE,OAAO,GAAiB,EACvC,WAAW,IAAI,KAAC,iBAAiB,cAAE,WAAW,GAAqB,EACpE,MAAC,YAAY,oBAAe,WAAW,EAAE,OAAO,EAAE,aAAa,aAC7D,QAAQ,CAAC,SAAS,CAAC,IAAI,MAAM,IAAI,CACjC,KAAC,MAAM,UAAsB,MAAM,CAAC,CAAC,QAAM,MAAM,CAAC,CAAC,IAAtC,MAAM,CAAC,GAAG,CAAgC,CACvD,EACA,YAAY,IACC,EACf,MAAC,YAAY,IAAC,OAAO,EAAE,YAAY,aACjC,QAAQ,CAAC,QAAQ,CAAC,IAAI,MAAM,IAAI,CAChC,KAAC,MAAM,UAAsB,MAAM,CAAC,CAAC,QAAM,MAAM,CAAC,CAAC,IAAtC,MAAM,CAAC,GAAG,CAAgC,CACvD,EACA,WAAW,IACE,IACE,CAClB,CAAC;AACH,CAAC;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus-ring.d.ts","sourceRoot":"","sources":["../src/focus-ring.ts"],"names":[],"mappings":"AAkBA,8EAA8E;AAC9E,wBAAgB,gBAAgB,CAAC,MAAM,SAAQ,+CAQ9C"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* focusVisibleRing — a shared keyboard focus indicator for kang's interactive
|
|
3
|
+
* primitives.
|
|
4
|
+
*
|
|
5
|
+
* Many kang buttons set `outline: none` (or wrap a hidden input) and had **no**
|
|
6
|
+
* replacement, so keyboard / switch-access users got no visible focus. This CSS
|
|
7
|
+
* helper adds a ring that shows only for keyboard/AT focus (`:focus-visible`),
|
|
8
|
+
* never on mouse press, so it doesn't disturb touch/mouse UX. It reads
|
|
9
|
+
* `theme.colors.primary` (with a literal fallback) so it adapts to a
|
|
10
|
+
* `ThemeProvider` yet still renders sensibly without one — matching the theming
|
|
11
|
+
* convention of `press` / `ripple`.
|
|
12
|
+
*
|
|
13
|
+
* `styled-components` is an optional peer dependency, used only by this module.
|
|
14
|
+
*/
|
|
15
|
+
import { css } from 'styled-components';
|
|
16
|
+
/** Apply inside a styled interactive element. `offset` tunes the ring gap. */
|
|
17
|
+
export function focusVisibleRing(offset = '2px') {
|
|
18
|
+
return css `
|
|
19
|
+
&:focus-visible {
|
|
20
|
+
outline: 2px solid
|
|
21
|
+
${({ theme }) => theme?.colors?.primary ?? '#489fb5'};
|
|
22
|
+
outline-offset: ${offset};
|
|
23
|
+
}
|
|
24
|
+
`;
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=focus-ring.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["../src/focus-ring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,8EAA8E;AAC9E,MAAM,UAAU,gBAAgB,CAAC,MAAM,GAAG,KAAK;IAC9C,OAAO,GAAG,CAAA;;;MAGL,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAE,KAAoB,EAAE,MAAM,EAAE,OAAO,IAAI,SAAS;qBACnD,MAAM;;EAEzB,CAAC;AACH,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,9 +5,10 @@ export type { ViewportSize } from './use-viewport-size.js';
|
|
|
5
5
|
export { useHideOnScroll } from './use-hide-on-scroll.js';
|
|
6
6
|
export type { UseHideOnScrollOptions } from './use-hide-on-scroll.js';
|
|
7
7
|
export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action-sheet.js';
|
|
8
|
+
export { focusVisibleRing } from './focus-ring.js';
|
|
8
9
|
export { Ripple, rippleAnimation, useRipple } from './ripple.js';
|
|
9
10
|
export type { RippleState } from './ripple.js';
|
|
10
|
-
export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESPONSIVE, SPRING_STAGGERED, SPRING_INSTANT, SPRING_GENTLE, SPRING_VERY_SLOW, SPRING_LANDING, SPRING_RISING, } from './spring.js';
|
|
11
|
+
export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESPONSIVE, SPRING_STAGGERED, SPRING_INSTANT, SPRING_GENTLE, SPRING_VERY_SLOW, SPRING_LANDING, SPRING_RISING, SPRING_TRACKING, SPRING_BRISK, SPRING_FLOAT, } from './spring.js';
|
|
11
12
|
export type { SpringConfigConstant } from './spring.js';
|
|
12
13
|
export { default as AnimatedText } from './animated-text.js';
|
|
13
14
|
export type { AnimatedTextProps } from './animated-text.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -3,8 +3,9 @@ export { useAnimatedAction } from './use-animated-action.js';
|
|
|
3
3
|
export { useViewportSize } from './use-viewport-size.js';
|
|
4
4
|
export { useHideOnScroll } from './use-hide-on-scroll.js';
|
|
5
5
|
export { actionSheetContainer, actionSheetList, actionSheetRow, } from './action-sheet.js';
|
|
6
|
+
export { focusVisibleRing } from './focus-ring.js';
|
|
6
7
|
export { Ripple, rippleAnimation, useRipple } from './ripple.js';
|
|
7
|
-
export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESPONSIVE, SPRING_STAGGERED, SPRING_INSTANT, SPRING_GENTLE, SPRING_VERY_SLOW, SPRING_LANDING, SPRING_RISING, } from './spring.js';
|
|
8
|
+
export { SPRING_COMFORTABLE, SPRING_COMFORTABLE_SLOW, SPRING_SNAPPY, SPRING_RESPONSIVE, SPRING_STAGGERED, SPRING_INSTANT, SPRING_GENTLE, SPRING_VERY_SLOW, SPRING_LANDING, SPRING_RISING, SPRING_TRACKING, SPRING_BRISK, SPRING_FLOAT, } from './spring.js';
|
|
8
9
|
export { default as AnimatedText } from './animated-text.js';
|
|
9
10
|
export { default as BackButton } from './back-button.js';
|
|
10
11
|
export { default as CircleIconButton } from './circle-icon-button.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,OAAO,EACN,oBAAoB,EACpB,eAAe,EACf,cAAc,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGjE,OAAO,EACN,kBAAkB,EAClB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,GACZ,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG1D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AASjF,OAAO,EAAE,QAAQ,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC"}
|
package/dist/spring.d.ts
CHANGED
|
@@ -38,4 +38,14 @@ export declare const SPRING_VERY_SLOW: SpringConfigConstant;
|
|
|
38
38
|
export declare const SPRING_LANDING: SpringConfigConstant;
|
|
39
39
|
/** Rising config — for reverse hero animations, smoother deceleration. */
|
|
40
40
|
export declare const SPRING_RISING: SpringConfigConstant;
|
|
41
|
+
/**
|
|
42
|
+
* Tracking config — for elements that follow a pointer drag/scroll and settle
|
|
43
|
+
* (sheet drags, scroll-restore, card carousels). Looser than RESPONSIVE so the
|
|
44
|
+
* follow feels physical rather than snappy.
|
|
45
|
+
*/
|
|
46
|
+
export declare const SPRING_TRACKING: SpringConfigConstant;
|
|
47
|
+
/** Brisk config — quick UI feedback a touch livelier than RESPONSIVE (keyboards, nav). */
|
|
48
|
+
export declare const SPRING_BRISK: SpringConfigConstant;
|
|
49
|
+
/** Float config — slow ambient drift for decorative/background motion (watermarks). */
|
|
50
|
+
export declare const SPRING_FLOAT: SpringConfigConstant;
|
|
41
51
|
//# sourceMappingURL=spring.d.ts.map
|
package/dist/spring.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spring.d.ts","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,4FAA4F;AAC5F,MAAM,WAAW,oBAAoB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB,EAAE,oBAAqD,CAAC;AAEvF,sEAAsE;AACtE,eAAO,MAAM,uBAAuB,EAAE,oBAAqD,CAAC;AAE5F,oDAAoD;AACpD,eAAO,MAAM,aAAa,EAAE,oBAAqD,CAAC;AAElF,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,EAAE,oBAAqD,CAAC;AAEtF,0DAA0D;AAC1D,eAAO,MAAM,gBAAgB,EAAE,oBAAqD,CAAC;AAErF,mDAAmD;AACnD,eAAO,MAAM,cAAc,EAAE,oBAAqD,CAAC;AAEnF,sDAAsD;AACtD,eAAO,MAAM,aAAa,EAAE,oBAAqD,CAAC;AAElF,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,EAAE,oBAAoD,CAAC;AAEpF,6EAA6E;AAC7E,eAAO,MAAM,cAAc,EAAE,oBAA8D,CAAC;AAE5F,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,oBAA8D,CAAC"}
|
|
1
|
+
{"version":3,"file":"spring.d.ts","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,4FAA4F;AAC5F,MAAM,WAAW,oBAAoB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB,EAAE,oBAAqD,CAAC;AAEvF,sEAAsE;AACtE,eAAO,MAAM,uBAAuB,EAAE,oBAAqD,CAAC;AAE5F,oDAAoD;AACpD,eAAO,MAAM,aAAa,EAAE,oBAAqD,CAAC;AAElF,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,EAAE,oBAAqD,CAAC;AAEtF,0DAA0D;AAC1D,eAAO,MAAM,gBAAgB,EAAE,oBAAqD,CAAC;AAErF,mDAAmD;AACnD,eAAO,MAAM,cAAc,EAAE,oBAAqD,CAAC;AAEnF,sDAAsD;AACtD,eAAO,MAAM,aAAa,EAAE,oBAAqD,CAAC;AAElF,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,EAAE,oBAAoD,CAAC;AAEpF,6EAA6E;AAC7E,eAAO,MAAM,cAAc,EAAE,oBAA8D,CAAC;AAE5F,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,oBAA8D,CAAC;AAE3F;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,oBAAqD,CAAC;AAEpF,0FAA0F;AAC1F,eAAO,MAAM,YAAY,EAAE,oBAAqD,CAAC;AAEjF,uFAAuF;AACvF,eAAO,MAAM,YAAY,EAAE,oBAAoD,CAAC"}
|
package/dist/spring.js
CHANGED
|
@@ -32,4 +32,14 @@ export const SPRING_VERY_SLOW = { tension: 50, friction: 20 };
|
|
|
32
32
|
export const SPRING_LANDING = { tension: 280, friction: 22, mass: 1 };
|
|
33
33
|
/** Rising config — for reverse hero animations, smoother deceleration. */
|
|
34
34
|
export const SPRING_RISING = { tension: 220, friction: 26, mass: 1 };
|
|
35
|
+
/**
|
|
36
|
+
* Tracking config — for elements that follow a pointer drag/scroll and settle
|
|
37
|
+
* (sheet drags, scroll-restore, card carousels). Looser than RESPONSIVE so the
|
|
38
|
+
* follow feels physical rather than snappy.
|
|
39
|
+
*/
|
|
40
|
+
export const SPRING_TRACKING = { tension: 170, friction: 26 };
|
|
41
|
+
/** Brisk config — quick UI feedback a touch livelier than RESPONSIVE (keyboards, nav). */
|
|
42
|
+
export const SPRING_BRISK = { tension: 300, friction: 26 };
|
|
43
|
+
/** Float config — slow ambient drift for decorative/background motion (watermarks). */
|
|
44
|
+
export const SPRING_FLOAT = { tension: 60, friction: 20 };
|
|
35
45
|
//# sourceMappingURL=spring.js.map
|
package/dist/spring.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spring.js","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AASH,4DAA4D;AAC5D,MAAM,CAAC,MAAM,kBAAkB,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEvF,sEAAsE;AACtE,MAAM,CAAC,MAAM,uBAAuB,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAE5F,oDAAoD;AACpD,MAAM,CAAC,MAAM,aAAa,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAElF,oEAAoE;AACpE,MAAM,CAAC,MAAM,iBAAiB,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEtF,0DAA0D;AAC1D,MAAM,CAAC,MAAM,gBAAgB,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAErF,mDAAmD;AACnD,MAAM,CAAC,MAAM,cAAc,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEnF,sDAAsD;AACtD,MAAM,CAAC,MAAM,aAAa,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAElF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,gBAAgB,GAAyB,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEpF,6EAA6E;AAC7E,MAAM,CAAC,MAAM,cAAc,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;AAE5F,0EAA0E;AAC1E,MAAM,CAAC,MAAM,aAAa,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"spring.js","sourceRoot":"","sources":["../src/spring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AASH,4DAA4D;AAC5D,MAAM,CAAC,MAAM,kBAAkB,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEvF,sEAAsE;AACtE,MAAM,CAAC,MAAM,uBAAuB,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAE5F,oDAAoD;AACpD,MAAM,CAAC,MAAM,aAAa,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAElF,oEAAoE;AACpE,MAAM,CAAC,MAAM,iBAAiB,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEtF,0DAA0D;AAC1D,MAAM,CAAC,MAAM,gBAAgB,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAErF,mDAAmD;AACnD,MAAM,CAAC,MAAM,cAAc,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEnF,sDAAsD;AACtD,MAAM,CAAC,MAAM,aAAa,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAElF,8DAA8D;AAC9D,MAAM,CAAC,MAAM,gBAAgB,GAAyB,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEpF,6EAA6E;AAC7E,MAAM,CAAC,MAAM,cAAc,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;AAE5F,0EAA0E;AAC1E,MAAM,CAAC,MAAM,aAAa,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;AAE3F;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEpF,0FAA0F;AAC1F,MAAM,CAAC,MAAM,YAAY,GAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;AAEjF,uFAAuF;AACvF,MAAM,CAAC,MAAM,YAAY,GAAyB,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC"}
|
package/dist/toggle-switch.d.ts
CHANGED
|
@@ -32,7 +32,13 @@ export type ToggleSwitchProps = {
|
|
|
32
32
|
onChange?: (checked: boolean) => void;
|
|
33
33
|
/** When `true`, the switch is non-interactive and suppresses `onChange`. */
|
|
34
34
|
disabled?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Accessible name for the switch. The control is a bare checkbox with no
|
|
37
|
+
* visible text of its own, so without this it is announced as an unnamed
|
|
38
|
+
* checkbox — pass what the toggle controls, e.g. "Error reporting".
|
|
39
|
+
*/
|
|
40
|
+
ariaLabel?: string;
|
|
35
41
|
};
|
|
36
|
-
export declare const ToggleSwitch: ({ checked: controlledChecked, defaultChecked, onChange, disabled, }: ToggleSwitchProps) => ReactElement;
|
|
42
|
+
export declare const ToggleSwitch: ({ checked: controlledChecked, defaultChecked, onChange, disabled, ariaLabel, }: ToggleSwitchProps) => ReactElement;
|
|
37
43
|
export default ToggleSwitch;
|
|
38
44
|
//# sourceMappingURL=toggle-switch.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../src/toggle-switch.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAoB,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"toggle-switch.d.ts","sourceRoot":"","sources":["../src/toggle-switch.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAoB,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AAwHtE,MAAM,MAAM,iBAAiB,GAAG;IAC/B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4EAA4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,YAAY,mFAMtB,iBAAiB,KAAG,YAmCtB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/dist/toggle-switch.js
CHANGED
|
@@ -55,6 +55,18 @@ const SwitchContainer = styled.label `
|
|
|
55
55
|
cursor: pointer;
|
|
56
56
|
-webkit-tap-highlight-color: transparent;
|
|
57
57
|
|
|
58
|
+
/* Extend the tap target to the 44px minimum without changing the visible
|
|
59
|
+
34x20 switch or the row layout — the pseudo is invisible and absolute. */
|
|
60
|
+
&::before {
|
|
61
|
+
content: '';
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 50%;
|
|
64
|
+
left: 50%;
|
|
65
|
+
width: 44px;
|
|
66
|
+
height: 44px;
|
|
67
|
+
transform: translate(-50%, -50%);
|
|
68
|
+
}
|
|
69
|
+
|
|
58
70
|
@media (hover: hover) {
|
|
59
71
|
&:hover ${RippleEffect} {
|
|
60
72
|
background-color: ${({ $checked, theme }) => $checked
|
|
@@ -77,6 +89,13 @@ const SwitchTrack = styled.span `
|
|
|
77
89
|
: c(theme).toggleTrackOff ?? 'rgba(0, 0, 0, 0.38)'};
|
|
78
90
|
border-radius: 7px;
|
|
79
91
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
92
|
+
|
|
93
|
+
/* Keyboard focus ring — the input is visually hidden, so surface the ring on
|
|
94
|
+
the track. :focus-visible so it only shows for keyboard/AT, not mouse. */
|
|
95
|
+
${SwitchInput}:focus-visible ~ & {
|
|
96
|
+
outline: 2px solid ${({ theme }) => c(theme).toggleThumbOn ?? '#489fb5'};
|
|
97
|
+
outline-offset: 3px;
|
|
98
|
+
}
|
|
80
99
|
`;
|
|
81
100
|
const SwitchThumb = styled.span `
|
|
82
101
|
position: absolute;
|
|
@@ -97,22 +116,24 @@ const SwitchThumb = styled.span `
|
|
|
97
116
|
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
98
117
|
pointer-events: none;
|
|
99
118
|
`;
|
|
100
|
-
export const ToggleSwitch = ({ checked: controlledChecked, defaultChecked = false, onChange, disabled = false, }) => {
|
|
119
|
+
export const ToggleSwitch = ({ checked: controlledChecked, defaultChecked = false, onChange, disabled = false, ariaLabel, }) => {
|
|
101
120
|
const [internalChecked, setInternalChecked] = useState(defaultChecked);
|
|
102
121
|
const isControlled = controlledChecked !== undefined;
|
|
103
122
|
const checked = isControlled ? controlledChecked : internalChecked;
|
|
104
|
-
const handleChange = (
|
|
123
|
+
const handleChange = (_e) => {
|
|
105
124
|
if (disabled)
|
|
106
125
|
return;
|
|
107
|
-
//
|
|
108
|
-
|
|
126
|
+
// NOTE: do NOT blur here. The old ymy code blurred the input on change to
|
|
127
|
+
// hide the focus ring, which also deleted the keyboard-focus indicator for
|
|
128
|
+
// AT/keyboard users. Focus visibility is now handled via :focus-visible
|
|
129
|
+
// (only shows for keyboard), so mouse users don't see a lingering ring.
|
|
109
130
|
const newValue = !checked;
|
|
110
131
|
if (!isControlled) {
|
|
111
132
|
setInternalChecked(newValue);
|
|
112
133
|
}
|
|
113
134
|
onChange?.(newValue);
|
|
114
135
|
};
|
|
115
|
-
return (_jsxs(SwitchContainer, { "$checked": checked, onClick: (e) => e.stopPropagation(), children: [_jsx(SwitchInput, { type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled }), _jsx(SwitchTrack, { "$checked": checked }), _jsx(RippleEffect, { "$checked": checked }), _jsx(SwitchThumb, { "$checked": checked })] }));
|
|
136
|
+
return (_jsxs(SwitchContainer, { "$checked": checked, onClick: (e) => e.stopPropagation(), children: [_jsx(SwitchInput, { type: "checkbox", "aria-label": ariaLabel, checked: checked, onChange: handleChange, disabled: disabled }), _jsx(SwitchTrack, { "$checked": checked }), _jsx(RippleEffect, { "$checked": checked }), _jsx(SwitchThumb, { "$checked": checked })] }));
|
|
116
137
|
};
|
|
117
138
|
export default ToggleSwitch;
|
|
118
139
|
//# sourceMappingURL=toggle-switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../src/toggle-switch.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAuC,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,4EAA4E;AAC5E,8EAA8E;AAC9E,0BAA0B;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAiB3C,MAAM,CAAC,GAAG,CAAC,KAAc,EAAuC,EAAE,CAChE,KAAsB,EAAE,MAAM,IAAI,EAAE,CAAC;AAEvC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;CAK/B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAuB;;;SAG9C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;;;;;;;;;CASrD,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAuB
|
|
1
|
+
{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../src/toggle-switch.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kang-components",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.10",
|
|
4
4
|
"description": "Generic, domain-free React UI primitives (CSS-first press feedback, delayed-action hook, spring presets, cross-fading text, circle icon button).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|