@lssm/lib.accessibility 0.0.0-canary-20251217060433 → 0.0.0-canary-20251217062139
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/AccessibilityPanel.d.ts +2 -2
- package/dist/AccessibilityPanel.js +8 -8
- package/dist/AccessibilityProvider.js +2 -2
- package/dist/design-system/dist/_virtual/rolldown_runtime.js +5 -0
- package/dist/design-system/dist/components/atoms/Button.js +33 -0
- package/dist/design-system/dist/ui-kit-web/dist/ui/button.js +55 -0
- package/dist/design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js +13 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +6 -6
- package/dist/next-route-announcer.d.ts +2 -2
- package/dist/preferences.d.ts +2 -2
- package/dist/ui-kit-web/dist/ui/dialog.js +68 -0
- package/dist/ui-kit-web/dist/ui/focus-on-route-change.js +16 -0
- package/dist/ui-kit-web/dist/ui/label.js +18 -0
- package/dist/ui-kit-web/dist/ui/live-region.js +46 -0
- package/dist/ui-kit-web/dist/ui/route-announcer.js +21 -0
- package/dist/ui-kit-web/dist/ui/select.js +79 -0
- package/dist/ui-kit-web/dist/ui/skip-link.js +16 -0
- package/dist/ui-kit-web/dist/ui/switch.js +23 -0
- package/dist/ui-kit-web/dist/ui/use-reduced-motion.js +17 -0
- package/dist/ui-kit-web/dist/ui/utils.js +10 -0
- package/dist/ui-kit-web/dist/ui/visually-hidden.js +30 -0
- package/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js +10 -0
- package/package.json +6 -6
- /package/dist/{styles-C5GUMPoX.css → styles-Hj-tTiy1.css} +0 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/AccessibilityPanel.d.ts
|
|
4
4
|
declare function AccessibilityPanel({
|
|
5
5
|
className
|
|
6
6
|
}: {
|
|
7
7
|
className?: string;
|
|
8
|
-
}):
|
|
8
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
9
9
|
//#endregion
|
|
10
10
|
export { AccessibilityPanel };
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
+
import { Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./ui-kit-web/dist/ui/dialog.js";
|
|
4
|
+
import { Button$1 } from "./design-system/dist/components/atoms/Button.js";
|
|
5
|
+
import { Switch } from "./ui-kit-web/dist/ui/switch.js";
|
|
6
|
+
import { Label } from "./ui-kit-web/dist/ui/label.js";
|
|
7
|
+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui-kit-web/dist/ui/select.js";
|
|
3
8
|
import { useA11YPreferences } from "./preferences.js";
|
|
9
|
+
import { cn } from "./ui-kit-web/dist/ui/utils.js";
|
|
4
10
|
import React from "react";
|
|
5
|
-
import { Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "@lssm/lib.ui-kit-web/ui/dialog";
|
|
6
|
-
import { Button } from "@lssm/lib.design-system";
|
|
7
|
-
import { Switch } from "@lssm/lib.ui-kit-web/ui/switch";
|
|
8
|
-
import { Label } from "@lssm/lib.ui-kit-web/ui/label";
|
|
9
|
-
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@lssm/lib.ui-kit-web/ui/select";
|
|
10
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
-
import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
|
|
12
12
|
|
|
13
13
|
//#region src/AccessibilityPanel.tsx
|
|
14
14
|
function AccessibilityPanel({ className }) {
|
|
15
15
|
const { preferences, setPreferences } = useA11YPreferences();
|
|
16
16
|
return /* @__PURE__ */ jsxs(Dialog, { children: [/* @__PURE__ */ jsx(DialogTrigger, {
|
|
17
17
|
asChild: true,
|
|
18
|
-
children: /* @__PURE__ */ jsx(Button, {
|
|
18
|
+
children: /* @__PURE__ */ jsx(Button$1, {
|
|
19
19
|
variant: "outline",
|
|
20
20
|
"aria-haspopup": "dialog",
|
|
21
21
|
children: "Accessibility"
|
|
@@ -160,7 +160,7 @@ function AccessibilityPanel({ className }) {
|
|
|
160
160
|
className: "mt-8 flex justify-end gap-2",
|
|
161
161
|
children: /* @__PURE__ */ jsx(DialogClose, {
|
|
162
162
|
asChild: true,
|
|
163
|
-
children: /* @__PURE__ */ jsx(Button, {
|
|
163
|
+
children: /* @__PURE__ */ jsx(Button$1, {
|
|
164
164
|
variant: "secondary",
|
|
165
165
|
children: "Close"
|
|
166
166
|
})
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
import { A11YPreferencesProvider } from "./preferences.js";
|
|
4
|
+
import { SRLiveRegionProvider } from "./ui-kit-web/dist/ui/live-region.js";
|
|
4
5
|
import { NextRouteAnnouncer } from "./next-route-announcer.js";
|
|
6
|
+
import { SkipLink } from "./ui-kit-web/dist/ui/skip-link.js";
|
|
5
7
|
import "react";
|
|
6
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { SRLiveRegionProvider } from "@lssm/lib.ui-kit-web/ui/live-region";
|
|
8
|
-
import { SkipLink } from "@lssm/lib.ui-kit-web/ui/skip-link";
|
|
9
9
|
|
|
10
10
|
//#region src/AccessibilityProvider.tsx
|
|
11
11
|
function AccessibilityProvider({ children, skipTargetId = "main" }) {
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Button } from "../../ui-kit-web/dist/ui/button.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { Loader2 } from "lucide-react";
|
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region ../design-system/dist/components/atoms/Button.js
|
|
7
|
+
function Button$1({ children, loading, spinnerPlacement = "start", onPress, onPressIn, onPressOut, onLongPress, onTouchStart, onTouchEnd, onTouchCancel, onMouseDown, onMouseUp, onClick, className, disabled, ...rest }) {
|
|
8
|
+
const isDisabled = Boolean(disabled || loading);
|
|
9
|
+
const content = !rest.asChild ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
10
|
+
loading && spinnerPlacement === "start" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : null,
|
|
11
|
+
children,
|
|
12
|
+
loading && spinnerPlacement === "end" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : null
|
|
13
|
+
] }) : children;
|
|
14
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
15
|
+
...rest,
|
|
16
|
+
className,
|
|
17
|
+
disabled: isDisabled,
|
|
18
|
+
"aria-busy": loading ? true : void 0,
|
|
19
|
+
"aria-disabled": isDisabled ? true : void 0,
|
|
20
|
+
onPress: onPress || onClick,
|
|
21
|
+
onClick: onPress || onClick,
|
|
22
|
+
onMouseDown: onMouseDown || onPressIn,
|
|
23
|
+
onMouseUp: onMouseUp || onPressOut,
|
|
24
|
+
onTouchStart,
|
|
25
|
+
onTouchEnd: onTouchEnd || onPressOut,
|
|
26
|
+
onTouchCancel: onTouchCancel || onPressOut,
|
|
27
|
+
type: rest?.type ?? "button",
|
|
28
|
+
children: content
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
//#endregion
|
|
33
|
+
export { Button$1 };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { cn, init_utils } from "../ui-kit-core/dist/utils.js";
|
|
2
|
+
import * as React$1 from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
6
|
+
|
|
7
|
+
//#region ../design-system/dist/ui-kit-web/dist/ui/button.js
|
|
8
|
+
init_utils();
|
|
9
|
+
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
13
|
+
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
14
|
+
outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
15
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
16
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
17
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
18
|
+
},
|
|
19
|
+
size: {
|
|
20
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
21
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
22
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
23
|
+
icon: "size-9"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
variant: "default",
|
|
28
|
+
size: "default"
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const Button = React$1.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
32
|
+
if (asChild) return /* @__PURE__ */ jsx(Slot, {
|
|
33
|
+
"data-slot": "button",
|
|
34
|
+
className: cn(buttonVariants({
|
|
35
|
+
variant,
|
|
36
|
+
size,
|
|
37
|
+
className
|
|
38
|
+
})),
|
|
39
|
+
...props
|
|
40
|
+
});
|
|
41
|
+
return /* @__PURE__ */ jsx("button", {
|
|
42
|
+
ref,
|
|
43
|
+
"data-slot": "button",
|
|
44
|
+
className: cn(buttonVariants({
|
|
45
|
+
variant,
|
|
46
|
+
size,
|
|
47
|
+
className
|
|
48
|
+
})),
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
Button.displayName = "Button";
|
|
53
|
+
|
|
54
|
+
//#endregion
|
|
55
|
+
export { Button };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { __esmMin } from "../../../../_virtual/rolldown_runtime.js";
|
|
2
|
+
import { clsx } from "clsx";
|
|
3
|
+
import { twMerge } from "tailwind-merge";
|
|
4
|
+
|
|
5
|
+
//#region ../design-system/dist/ui-kit-web/dist/ui-kit-core/dist/utils.js
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
var init_utils = __esmMin((() => {}));
|
|
10
|
+
init_utils();
|
|
11
|
+
|
|
12
|
+
//#endregion
|
|
13
|
+
export { cn, init_utils };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,9 +2,9 @@ import { AccessibilityPanel } from "./AccessibilityPanel.js";
|
|
|
2
2
|
import { AccessibilityProvider } from "./AccessibilityProvider.js";
|
|
3
3
|
import { A11YPreferencesProvider, AccessibilityPreferences, useA11YPreferences } from "./preferences.js";
|
|
4
4
|
import { NextRouteAnnouncer } from "./next-route-announcer.js";
|
|
5
|
-
import { SRLiveRegionProvider, useSRLiveRegion } from "@lssm/lib.ui-kit-web/ui/live-region";
|
|
6
5
|
import { SkipLink } from "@lssm/lib.ui-kit-web/ui/skip-link";
|
|
7
6
|
import { VisuallyHidden } from "@lssm/lib.ui-kit-web/ui/visually-hidden";
|
|
7
|
+
import { SRLiveRegionProvider, useSRLiveRegion } from "@lssm/lib.ui-kit-web/ui/live-region";
|
|
8
8
|
import { RouteAnnouncer } from "@lssm/lib.ui-kit-web/ui/route-announcer";
|
|
9
9
|
import { FocusOnRouteChange } from "@lssm/lib.ui-kit-web/ui/focus-on-route-change";
|
|
10
10
|
import { useReducedMotion } from "@lssm/lib.ui-kit-web/ui/use-reduced-motion";
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { A11YPreferencesProvider, useA11YPreferences } from "./preferences.js";
|
|
2
2
|
import { AccessibilityPanel } from "./AccessibilityPanel.js";
|
|
3
|
+
import { SRLiveRegionProvider, useSRLiveRegion } from "./ui-kit-web/dist/ui/live-region.js";
|
|
3
4
|
import { NextRouteAnnouncer } from "./next-route-announcer.js";
|
|
5
|
+
import { SkipLink } from "./ui-kit-web/dist/ui/skip-link.js";
|
|
4
6
|
import { AccessibilityProvider } from "./AccessibilityProvider.js";
|
|
7
|
+
import { VisuallyHidden } from "./ui-kit-web/dist/ui/visually-hidden.js";
|
|
8
|
+
import { RouteAnnouncer } from "./ui-kit-web/dist/ui/route-announcer.js";
|
|
9
|
+
import { FocusOnRouteChange } from "./ui-kit-web/dist/ui/focus-on-route-change.js";
|
|
10
|
+
import { useReducedMotion } from "./ui-kit-web/dist/ui/use-reduced-motion.js";
|
|
5
11
|
import "./styles.js";
|
|
6
|
-
import { SRLiveRegionProvider, useSRLiveRegion } from "@lssm/lib.ui-kit-web/ui/live-region";
|
|
7
|
-
import { SkipLink } from "@lssm/lib.ui-kit-web/ui/skip-link";
|
|
8
|
-
import { VisuallyHidden } from "@lssm/lib.ui-kit-web/ui/visually-hidden";
|
|
9
|
-
import { RouteAnnouncer } from "@lssm/lib.ui-kit-web/ui/route-announcer";
|
|
10
|
-
import { FocusOnRouteChange } from "@lssm/lib.ui-kit-web/ui/focus-on-route-change";
|
|
11
|
-
import { useReducedMotion } from "@lssm/lib.ui-kit-web/ui/use-reduced-motion";
|
|
12
12
|
|
|
13
13
|
export { A11YPreferencesProvider, AccessibilityPanel, AccessibilityProvider, FocusOnRouteChange, NextRouteAnnouncer, RouteAnnouncer, SRLiveRegionProvider, SkipLink, VisuallyHidden, useA11YPreferences, useReducedMotion, useSRLiveRegion };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/next-route-announcer.d.ts
|
|
4
|
-
declare function NextRouteAnnouncer():
|
|
4
|
+
declare function NextRouteAnnouncer(): react_jsx_runtime2.JSX.Element;
|
|
5
5
|
//#endregion
|
|
6
6
|
export { NextRouteAnnouncer };
|
package/dist/preferences.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/preferences.d.ts
|
|
5
5
|
type TextSize = 's' | 'm' | 'l' | 'xl';
|
|
@@ -29,7 +29,7 @@ declare function A11YPreferencesProvider({
|
|
|
29
29
|
children
|
|
30
30
|
}: {
|
|
31
31
|
children: React.ReactNode;
|
|
32
|
-
}):
|
|
32
|
+
}): react_jsx_runtime1.JSX.Element;
|
|
33
33
|
declare function a11yRootClassName(): string;
|
|
34
34
|
//#endregion
|
|
35
35
|
export { A11YPreferencesProvider, AccessibilityPreferences, DyslexiaFont, FocusRing, HighContrast, LineHeight, ReduceMotion, TextSize, TextSpacing, UnderlineLinks, a11yRootClassName, useA11YPreferences };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "../ui-kit-core/dist/utils.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { XIcon } from "lucide-react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
8
|
+
|
|
9
|
+
//#region ../ui-kit-web/dist/ui/dialog.js
|
|
10
|
+
function Dialog({ ...props }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
|
|
12
|
+
"data-slot": "dialog",
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
function DialogTrigger({ ...props }) {
|
|
17
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
|
|
18
|
+
"data-slot": "dialog-trigger",
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function DialogPortal({ ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
|
|
24
|
+
"data-slot": "dialog-portal",
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function DialogClose({ ...props }) {
|
|
29
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
30
|
+
"data-slot": "dialog-close",
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function DialogOverlay({ className, ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
|
|
36
|
+
"data-slot": "dialog-overlay",
|
|
37
|
+
className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsxs(DialogPortal, {
|
|
43
|
+
"data-slot": "dialog-portal",
|
|
44
|
+
children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
|
|
45
|
+
"data-slot": "dialog-content",
|
|
46
|
+
className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
|
|
47
|
+
...props,
|
|
48
|
+
children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
|
|
49
|
+
"data-slot": "dialog-close",
|
|
50
|
+
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
51
|
+
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
52
|
+
className: "sr-only",
|
|
53
|
+
children: "Close"
|
|
54
|
+
})]
|
|
55
|
+
})]
|
|
56
|
+
})]
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
function DialogTitle({ className, ...props }) {
|
|
60
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
61
|
+
"data-slot": "dialog-title",
|
|
62
|
+
className: cn("text-lg leading-none font-semibold", className),
|
|
63
|
+
...props
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
//#endregion
|
|
68
|
+
export { Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
|
|
3
|
+
//#region ../ui-kit-web/dist/ui/focus-on-route-change.js
|
|
4
|
+
function FocusOnRouteChange({ focusSelector = "h1, [data-page-title], #main" }) {
|
|
5
|
+
React$1.useEffect(() => {
|
|
6
|
+
const el = document.querySelector(focusSelector);
|
|
7
|
+
if (el) {
|
|
8
|
+
el.tabIndex = -1;
|
|
9
|
+
el.focus();
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
//#endregion
|
|
16
|
+
export { FocusOnRouteChange };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "../ui-kit-core/dist/utils.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
7
|
+
|
|
8
|
+
//#region ../ui-kit-web/dist/ui/label.js
|
|
9
|
+
function Label({ className, ...props }) {
|
|
10
|
+
return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
|
|
11
|
+
"data-slot": "label",
|
|
12
|
+
className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
//#endregion
|
|
18
|
+
export { Label };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React$1 from "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region ../ui-kit-web/dist/ui/live-region.js
|
|
7
|
+
const SRLiveRegionContext = React$1.createContext(null);
|
|
8
|
+
function useSRLiveRegion() {
|
|
9
|
+
const ctx = React$1.useContext(SRLiveRegionContext);
|
|
10
|
+
if (!ctx) throw new Error("useSRLiveRegion must be used within SRLiveRegionProvider");
|
|
11
|
+
return ctx;
|
|
12
|
+
}
|
|
13
|
+
function SRLiveRegionProvider({ children }) {
|
|
14
|
+
const [messages, setMessages] = React$1.useState([]);
|
|
15
|
+
const idRef = React$1.useRef(0);
|
|
16
|
+
const announce = React$1.useCallback((text, politeness = "polite") => {
|
|
17
|
+
const id = ++idRef.current;
|
|
18
|
+
setMessages((prev) => [...prev, {
|
|
19
|
+
id,
|
|
20
|
+
text,
|
|
21
|
+
politeness
|
|
22
|
+
}]);
|
|
23
|
+
setTimeout(() => setMessages((prev) => prev.filter((m) => m.id !== id)), 1e3);
|
|
24
|
+
}, []);
|
|
25
|
+
return /* @__PURE__ */ jsxs(SRLiveRegionContext.Provider, {
|
|
26
|
+
value: { announce },
|
|
27
|
+
children: [
|
|
28
|
+
children,
|
|
29
|
+
/* @__PURE__ */ jsx("div", {
|
|
30
|
+
"aria-live": "polite",
|
|
31
|
+
"aria-atomic": "true",
|
|
32
|
+
className: "sr-only",
|
|
33
|
+
children: messages.filter((m) => m.politeness === "polite").map((m) => /* @__PURE__ */ jsx("div", { children: m.text }, m.id))
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsx("div", {
|
|
36
|
+
"aria-live": "assertive",
|
|
37
|
+
"aria-atomic": "true",
|
|
38
|
+
className: "sr-only",
|
|
39
|
+
children: messages.filter((m) => m.politeness === "assertive").map((m) => /* @__PURE__ */ jsx("div", { children: m.text }, m.id))
|
|
40
|
+
})
|
|
41
|
+
]
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
//#endregion
|
|
46
|
+
export { SRLiveRegionProvider, useSRLiveRegion };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React$1 from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region ../ui-kit-web/dist/ui/route-announcer.js
|
|
7
|
+
function RouteAnnouncer({ title }) {
|
|
8
|
+
const [message, setMessage] = React$1.useState("");
|
|
9
|
+
React$1.useEffect(() => {
|
|
10
|
+
if (title) setMessage(title);
|
|
11
|
+
}, [title]);
|
|
12
|
+
return /* @__PURE__ */ jsx("div", {
|
|
13
|
+
"aria-live": "polite",
|
|
14
|
+
"aria-atomic": "true",
|
|
15
|
+
className: "sr-only",
|
|
16
|
+
children: message
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
//#endregion
|
|
21
|
+
export { RouteAnnouncer };
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "../ui-kit-core/dist/utils.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
8
|
+
|
|
9
|
+
//#region ../ui-kit-web/dist/ui/select.js
|
|
10
|
+
function Select({ ...props }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Root, {
|
|
12
|
+
"data-slot": "select",
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
function SelectValue({ ...props }) {
|
|
17
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Value, {
|
|
18
|
+
"data-slot": "select-value",
|
|
19
|
+
...props
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
23
|
+
return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
|
|
24
|
+
"data-slot": "select-trigger",
|
|
25
|
+
"data-size": size,
|
|
26
|
+
className: cn("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input focus-visible:border-ring focus-visible:ring-ring/50 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
27
|
+
...props,
|
|
28
|
+
children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
|
|
29
|
+
asChild: true,
|
|
30
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
|
|
31
|
+
})]
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function SelectContent({ className, children, position = "popper", ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
|
|
36
|
+
"data-slot": "select-content",
|
|
37
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
|
|
38
|
+
position,
|
|
39
|
+
...props,
|
|
40
|
+
children: [
|
|
41
|
+
/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
|
|
42
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
|
|
43
|
+
className: cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"),
|
|
44
|
+
children
|
|
45
|
+
}),
|
|
46
|
+
/* @__PURE__ */ jsx(SelectScrollDownButton, {})
|
|
47
|
+
]
|
|
48
|
+
}) });
|
|
49
|
+
}
|
|
50
|
+
function SelectItem({ className, children, ...props }) {
|
|
51
|
+
return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
|
|
52
|
+
"data-slot": "select-item",
|
|
53
|
+
className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
|
|
54
|
+
...props,
|
|
55
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
56
|
+
className: "absolute right-2 flex size-3.5 items-center justify-center",
|
|
57
|
+
children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
|
|
58
|
+
}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
function SelectScrollUpButton({ className, ...props }) {
|
|
62
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
|
|
63
|
+
"data-slot": "select-scroll-up-button",
|
|
64
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
65
|
+
...props,
|
|
66
|
+
children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
function SelectScrollDownButton({ className, ...props }) {
|
|
70
|
+
return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
|
|
71
|
+
"data-slot": "select-scroll-down-button",
|
|
72
|
+
className: cn("flex cursor-default items-center justify-center py-1", className),
|
|
73
|
+
...props,
|
|
74
|
+
children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
//#endregion
|
|
79
|
+
export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region ../ui-kit-web/dist/ui/skip-link.js
|
|
5
|
+
const defaultClasses = "sr-only focus:not-sr-only focus-visible:outline-solid focus-visible:ring-4 focus-visible:ring-offset-2 fixed top-2 left-2 z-100 rounded-xs bg-background px-3 py-2 text-sm shadow-2xs";
|
|
6
|
+
function SkipLink({ targetId = "main", children, className, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx("a", {
|
|
8
|
+
className: [defaultClasses, className].filter(Boolean).join(" "),
|
|
9
|
+
href: `#${targetId}`,
|
|
10
|
+
...props,
|
|
11
|
+
children: children ?? "Skip to main content"
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
//#endregion
|
|
16
|
+
export { SkipLink };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "../ui-kit-core/dist/utils.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { cva } from "class-variance-authority";
|
|
7
|
+
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
8
|
+
|
|
9
|
+
//#region ../ui-kit-web/dist/ui/switch.js
|
|
10
|
+
function Switch({ className, thumbClassName, ...props }) {
|
|
11
|
+
return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
|
|
12
|
+
"data-slot": "switch",
|
|
13
|
+
className: cn("peer focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-2xs outline-hidden transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
|
|
14
|
+
...props,
|
|
15
|
+
children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
|
|
16
|
+
"data-slot": "switch-thumb",
|
|
17
|
+
className: cn("bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0", thumbClassName)
|
|
18
|
+
})
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
//#endregion
|
|
23
|
+
export { Switch };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
|
|
3
|
+
//#region ../ui-kit-web/dist/ui/use-reduced-motion.js
|
|
4
|
+
function useReducedMotion() {
|
|
5
|
+
const [reduced, setReduced] = React$1.useState(false);
|
|
6
|
+
React$1.useEffect(() => {
|
|
7
|
+
const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
8
|
+
const onChange = () => setReduced(mql.matches);
|
|
9
|
+
onChange();
|
|
10
|
+
mql.addEventListener("change", onChange);
|
|
11
|
+
return () => mql.removeEventListener("change", onChange);
|
|
12
|
+
}, []);
|
|
13
|
+
return reduced;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
//#endregion
|
|
17
|
+
export { useReducedMotion };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region ../ui-kit-web/dist/ui/visually-hidden.js
|
|
5
|
+
const srOnlyStyle = {
|
|
6
|
+
border: 0,
|
|
7
|
+
clip: "rect(0 0 0 0)",
|
|
8
|
+
height: "1px",
|
|
9
|
+
margin: "-1px",
|
|
10
|
+
overflow: "hidden",
|
|
11
|
+
padding: 0,
|
|
12
|
+
position: "absolute",
|
|
13
|
+
width: "1px",
|
|
14
|
+
whiteSpace: "nowrap"
|
|
15
|
+
};
|
|
16
|
+
const VisuallyHidden = React$1.forwardRef(({ as = "span", style, children, ...props }, ref) => {
|
|
17
|
+
return /* @__PURE__ */ jsx(as, {
|
|
18
|
+
ref,
|
|
19
|
+
style: {
|
|
20
|
+
...srOnlyStyle,
|
|
21
|
+
...style
|
|
22
|
+
},
|
|
23
|
+
...props,
|
|
24
|
+
children
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
VisuallyHidden.displayName = "VisuallyHidden";
|
|
28
|
+
|
|
29
|
+
//#endregion
|
|
30
|
+
export { VisuallyHidden };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lssm/lib.accessibility",
|
|
3
|
-
"version": "0.0.0-canary-
|
|
3
|
+
"version": "0.0.0-canary-20251217062139",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"publish:pkg": "bun publish --tolerate-republish --ignore-scripts --verbose",
|
|
6
6
|
"publish:pkg:canary": "bun publish:pkg --tag canary",
|
|
@@ -14,13 +14,13 @@
|
|
|
14
14
|
"lint:check": "eslint src"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@lssm/lib.design-system": "0.0.0-canary-
|
|
18
|
-
"@lssm/lib.ui-kit": "0.0.0-canary-
|
|
19
|
-
"@lssm/lib.ui-kit-web": "0.0.0-canary-
|
|
17
|
+
"@lssm/lib.design-system": "0.0.0-canary-20251217062139",
|
|
18
|
+
"@lssm/lib.ui-kit": "0.0.0-canary-20251217062139",
|
|
19
|
+
"@lssm/lib.ui-kit-web": "0.0.0-canary-20251217062139"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@lssm/tool.tsdown": "0.0.0-canary-
|
|
23
|
-
"@lssm/tool.typescript": "0.0.0-canary-
|
|
22
|
+
"@lssm/tool.tsdown": "0.0.0-canary-20251217062139",
|
|
23
|
+
"@lssm/tool.typescript": "0.0.0-canary-20251217062139",
|
|
24
24
|
"tsdown": "^0.17.4",
|
|
25
25
|
"typescript": "^5.9.3"
|
|
26
26
|
},
|
|
File without changes
|