atlas-react-kit 1.2.5 → 1.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COMPONENTS.md +1 -1
- package/DESIGN_RULES.md +3 -1
- package/dist/checkbox.js +1 -1
- package/dist/field.js +2 -2
- package/dist/internal/styles.d.ts +1 -0
- package/dist/internal/styles.js +1 -0
- package/dist/internal/tabs-styles.js +6 -2
- package/dist/skeleton.js +1 -1
- package/dist/switch.js +1 -1
- package/dist/toast.js +5 -2
- package/package.json +1 -1
package/COMPONENTS.md
CHANGED
|
@@ -74,7 +74,7 @@ theme from `next-themes`, so toast consumers install that too.
|
|
|
74
74
|
| `table` | Table, header, body, footer, row, head, cell, caption; root scroller is `min-w-0 overflow-x-auto` with a fade cue; cells are `px-2` below `sm` |
|
|
75
75
|
| `table-body-skeleton` | `TableBodySkeleton`; `columns`, optional `rows` (default 5) |
|
|
76
76
|
| `tabs` | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `TabsNavLink`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; `TabsNavLink` is the link inside `TabsNav` (required `active`, `asChild` for a router link); `TabsNav` / `TabsList` scroll horizontally only (`overflow-y` hidden, `p-1` counted in the scroller height, edge fade, active item into view, mouse drag scrolls the row) — do not wrap them in `overflow-x-auto` |
|
|
77
|
-
| `toast` | `Toaster`, `toast`; mount one `Toaster` (`position`, `closeButton` (default on), `expand`, `visibleToasts`, `duration`), then `toast(message, options)`. The stack expands on hover and while keyboard focus is inside it; collapsed toasts behind the front one are hidden, `.success`, `.info`, `.warning`, `.error`, `.loading`, `.dismiss(id?)`. Options: `id` (replaces that toast), `description`, `duration`, `action` / `cancel` as `{ label, onClick }`. Kit-owned API: no toast library is exposed
|
|
77
|
+
| `toast` | `Toaster`, `toast`; mount one `Toaster` (`position`, `closeButton` (default on), `expand`, `visibleToasts`, `duration`), then `toast(message, options)`. The stack expands on hover and while keyboard focus is inside it; collapsed toasts behind the front one are hidden, `.success`, `.info`, `.warning`, `.error`, `.loading`, `.dismiss(id?)`. Options: `id` (replaces that toast), `description`, `duration`, `action` / `cancel` as `{ label, onClick }`. The toaster list is clamped to `calc(100vw - 2rem)` so it stays inside a narrow viewport. Kit-owned API: no toast library is exposed |
|
|
78
78
|
| `toggle` | `Toggle`, `toggleVariants`; `variant`, `size`. `selectedToggleChrome` is deprecated: `toggleVariants()` already includes it. Pressed state is the selected wash, text, and border via `data-state=on`, `aria-pressed`, and `aria-checked` |
|
|
79
79
|
| `toggle-group` | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`. Items share `toggleVariants`, so single (radio) and multiple selections match a pressed `Toggle`. In a single group the arrow keys select as they move focus, like radios; Tab and clicks do not. A multiple group only moves focus |
|
|
80
80
|
| `theme-provider` | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle |
|
package/DESIGN_RULES.md
CHANGED
|
@@ -84,7 +84,9 @@ keyboard and screen-reader testing.
|
|
|
84
84
|
field, checkbox, radio, and switch boundaries (`border-input`), checked
|
|
85
85
|
fills (`bg-primary`), selected borders (`border-selected-foreground`), and
|
|
86
86
|
the focus ring. `border-border` is for dividers and card edges only; never
|
|
87
|
-
make it the only boundary of a control.
|
|
87
|
+
make it the only boundary of a control. Loading placeholders (`Skeleton`)
|
|
88
|
+
use `bg-muted`. They are decorative, not UI boundaries, so they do not
|
|
89
|
+
use the input-boundary token.
|
|
88
90
|
- Focus is a solid `ring-ring` (brand purple), never a translucent ring such
|
|
89
91
|
as `ring-ring/30`, which fades below 3:1. Keyboard-highlighted menu and list
|
|
90
92
|
items show a 2px `ring` bar on their leading edge. Content that scrolls must
|
package/dist/checkbox.js
CHANGED
|
@@ -6,6 +6,6 @@ import { choiceHitArea, disabledState, focusRing, invalidState, } from "./intern
|
|
|
6
6
|
import { cn } from "./utils.js";
|
|
7
7
|
import { CheckIcon } from "lucide-react";
|
|
8
8
|
function Checkbox({ className, ...props }) {
|
|
9
|
-
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow group-has-disabled/field:opacity-50 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground
|
|
9
|
+
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow group-has-disabled/field:opacity-50 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
|
|
10
10
|
}
|
|
11
11
|
export { Checkbox };
|
package/dist/field.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import { errorText, labelText } from "./internal/styles.js";
|
|
5
|
+
import { errorText, labelText, selectedState } from "./internal/styles.js";
|
|
6
6
|
import { cn } from "./utils.js";
|
|
7
7
|
import { Label } from "./label.js";
|
|
8
8
|
import { Separator } from "./separator.js";
|
|
@@ -47,7 +47,7 @@ function FieldContent({ className, ...props }) {
|
|
|
47
47
|
return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-1 leading-snug", className), ...props }));
|
|
48
48
|
}
|
|
49
49
|
function FieldLabel({ className, ...props }) {
|
|
50
|
-
return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-
|
|
50
|
+
return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4", selectedState.checkedWithin, "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
|
|
51
51
|
}
|
|
52
52
|
function FieldTitle({ className, ...props }) {
|
|
53
53
|
return (_jsx("div", { "data-slot": "field-label", className: cn(labelText, "flex w-fit items-center gap-2 group-data-[disabled=true]/field:opacity-50 in-data-[slot=field-label]:font-semibold", className), ...props }));
|
|
@@ -25,6 +25,7 @@ export declare const fieldSurface = "w-full min-w-0 rounded-none border border-i
|
|
|
25
25
|
* the wash alone is 1.2:1 against the page. One string per state attribute.
|
|
26
26
|
*/
|
|
27
27
|
export declare const selectedState: {
|
|
28
|
+
checkedWithin: string;
|
|
28
29
|
/**
|
|
29
30
|
* Toggle and ToggleGroupItem. Radix Toggle sets `data-state=on` and
|
|
30
31
|
* `aria-pressed`; group items always set `data-state=on`, add
|
package/dist/internal/styles.js
CHANGED
|
@@ -25,6 +25,7 @@ export const fieldSurface = "w-full min-w-0 rounded-none border border-input bg-
|
|
|
25
25
|
* the wash alone is 1.2:1 against the page. One string per state attribute.
|
|
26
26
|
*/
|
|
27
27
|
export const selectedState = {
|
|
28
|
+
checkedWithin: "has-data-checked:border-selected-foreground has-data-checked:bg-selected has-data-checked:text-selected-foreground",
|
|
28
29
|
/**
|
|
29
30
|
* Toggle and ToggleGroupItem. Radix Toggle sets `data-state=on` and
|
|
30
31
|
* `aria-pressed`; group items always set `data-state=on`, add
|
|
@@ -60,10 +60,14 @@ const tabsTriggerVariants = cva([
|
|
|
60
60
|
// flex-none + px-4: every trigger and TabsNav link keeps the same
|
|
61
61
|
// horizontal padding. flex-1 used to grow short labels and make the
|
|
62
62
|
// longest (e.g. Apple Reminders) look tighter. No last-child padding.
|
|
63
|
-
|
|
63
|
+
// py-0: h-full already fills the h-7 row. py-1.5 plus the 16px line
|
|
64
|
+
// and 1px border needed ~32px, so the 28px list overflowed on y.
|
|
65
|
+
'relative inline-flex h-full min-w-max flex-none items-center justify-center gap-2 border border-transparent px-4 py-0 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground',
|
|
64
66
|
inlineIcon.default,
|
|
65
67
|
'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:border-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent',
|
|
66
68
|
selectedState.active,
|
|
67
|
-
|
|
69
|
+
// The line-variant bar stays inside the trigger. Hanging it at
|
|
70
|
+
// bottom-[-5px] made the 28px list's scrollHeight 32 even with py-0.
|
|
71
|
+
'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation="horizontal"]/tabs:after:inset-x-0 group-data-[orientation="horizontal"]/tabs:after:bottom-0 group-data-[orientation="horizontal"]/tabs:after:h-0.5 group-data-[orientation="vertical"]/tabs:after:inset-y-0 group-data-[orientation="vertical"]/tabs:after:right-0 group-data-[orientation="vertical"]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state="active"]:after:opacity-100',
|
|
68
72
|
]);
|
|
69
73
|
export { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants };
|
package/dist/skeleton.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "./utils.js";
|
|
3
3
|
function Skeleton({ className, ...props }) {
|
|
4
|
-
return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse bg-
|
|
4
|
+
return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse bg-muted", className), ...props }));
|
|
5
5
|
}
|
|
6
6
|
export { Skeleton };
|
package/dist/switch.js
CHANGED
|
@@ -10,6 +10,6 @@ import { cn } from "./utils.js";
|
|
|
10
10
|
* primitives; checked uses the primary fill, as `Checkbox` does.
|
|
11
11
|
*/
|
|
12
12
|
function Switch({ className, ...props }) {
|
|
13
|
-
return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative inline-flex h-5 w-9 shrink-0 items-center rounded-none border border-transparent bg-input p-0.5 shadow-xs transition-colors data-checked:bg-primary
|
|
13
|
+
return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative inline-flex h-5 w-9 shrink-0 items-center rounded-none border border-transparent bg-input p-0.5 shadow-xs transition-colors data-checked:bg-primary", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block size-3.5 rounded-none bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground" }) }));
|
|
14
14
|
}
|
|
15
15
|
export { Switch };
|
package/dist/toast.js
CHANGED
|
@@ -56,7 +56,7 @@ const toast = Object.assign(show(sonnerToast), {
|
|
|
56
56
|
* so the status icon and copy read as one unit.
|
|
57
57
|
*/
|
|
58
58
|
const classNames = {
|
|
59
|
-
toast: cn(focusRing, "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-10 text-sm text-popover-foreground shadow-md focus-visible:!shadow-[var(--tw-ring-offset-shadow),var(--tw-ring-shadow)] data-[visible=false]:invisible data-[expanded=false]:data-[front=false]:*:invisible"),
|
|
59
|
+
toast: cn(focusRing, "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] max-[600px]:!w-full flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-10 text-sm text-popover-foreground shadow-md focus-visible:!shadow-[var(--tw-ring-offset-shadow),var(--tw-ring-shadow)] data-[visible=false]:invisible data-[expanded=false]:data-[front=false]:*:invisible"),
|
|
60
60
|
// Fills the row beside the icon, so action buttons wrap to their own row
|
|
61
61
|
// (aligned right by the toast's justify-end). Without an icon the basis
|
|
62
62
|
// falls back to the title's width, so a one-word toast stays compact.
|
|
@@ -95,6 +95,9 @@ const Toaster = ({ position, closeButton = true, expand, visibleToasts, duration
|
|
|
95
95
|
setFocusWithin(false);
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
|
-
return (_jsx("div", { "data-slot": "toaster", className: "contents", onFocus: () => setFocusWithin(true), onBlur: onBlur, children: _jsx(Sonner, { theme: theme, className: "toaster group overflow-visible", style: {
|
|
98
|
+
return (_jsx("div", { "data-slot": "toaster", className: "contents", onFocus: () => setFocusWithin(true), onBlur: onBlur, children: _jsx(Sonner, { theme: theme, className: "toaster group overflow-visible", style: {
|
|
99
|
+
fontFamily: "var(--font-sans)",
|
|
100
|
+
maxWidth: "calc(100vw - 2rem)",
|
|
101
|
+
}, position: position, closeButton: closeButton, expand: expand || focusWithin, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }) }));
|
|
99
102
|
};
|
|
100
103
|
export { Toaster, toast };
|