@nadicodeai/ui 0.15.0 → 0.17.0
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/components/automation-section.d.ts +4 -2
- package/dist/components/automation-section.d.ts.map +1 -1
- package/dist/components/automation-section.js +1 -1
- package/dist/components/command.d.ts.map +1 -1
- package/dist/components/command.js +1 -1
- package/dist/components/dialog.d.ts +7 -2
- package/dist/components/dialog.d.ts.map +1 -1
- package/dist/components/dialog.js +5 -5
- package/dist/components/drawer.js +1 -1
- package/dist/components/settings-section.d.ts.map +1 -1
- package/dist/components/settings-section.js +0 -10
- package/dist/lib/motion.d.ts +3 -1
- package/dist/lib/motion.d.ts.map +1 -1
- package/dist/lib/motion.js +3 -1
- package/docs/component-classification.md +1 -1
- package/docs/product-compositions.md +3 -3
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Input } from "./input";
|
|
3
|
-
import {
|
|
3
|
+
import { type SettingsFieldControlProps, SettingsSection } from "./settings-section";
|
|
4
4
|
type AutomationStatus = "ready" | "running" | "paused" | "error" | "disabled";
|
|
5
5
|
type AutomationItem = {
|
|
6
6
|
id: string;
|
|
@@ -34,7 +34,9 @@ type AutomationSettingsField = {
|
|
|
34
34
|
value?: string;
|
|
35
35
|
placeholder?: string;
|
|
36
36
|
type?: React.ComponentProps<typeof Input>["type"];
|
|
37
|
-
control?:
|
|
37
|
+
control?: (props: {
|
|
38
|
+
controlProps: SettingsFieldControlProps;
|
|
39
|
+
}) => React.ReactNode;
|
|
38
40
|
};
|
|
39
41
|
type ProviderSettingsProps = Omit<React.ComponentProps<typeof SettingsSection>, "children"> & {
|
|
40
42
|
fields: AutomationSettingsField[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-section.d.ts","sourceRoot":"","sources":["../../src/components/automation-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAU3C,OAAO,
|
|
1
|
+
{"version":3,"file":"automation-section.d.ts","sourceRoot":"","sources":["../../src/components/automation-section.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ import { Badge } from "./badge.js";
|
|
|
6
6
|
import { FeedbackState } from "./feedback-state.js";
|
|
7
7
|
import { Input } from "./input.js";
|
|
8
8
|
import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "./item.js";
|
|
9
|
-
import { SettingsField, SettingsSection } from "./settings-section.js";
|
|
9
|
+
import { SettingsField, SettingsSection, } from "./settings-section.js";
|
|
10
10
|
import { Switch } from "./switch.js";
|
|
11
11
|
const automationStatusMeta = {
|
|
12
12
|
ready: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAGnD,OAAO,EACL,MAAM,EAKP,MAAM,qBAAqB,CAAC;AAI7B,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAWtF;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,
|
|
1
|
+
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../src/components/command.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAGnD,OAAO,EACL,MAAM,EAKP,MAAM,qBAAqB,CAAC;AAI7B,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,qBAWtF;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAuB,EACvB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAgBA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAkBrD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAW/F;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAQrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,qBAWrD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,qBAQzD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAcpD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW7E;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACjB,CAAC"}
|
|
@@ -9,7 +9,7 @@ function Command({ className, ...props }) {
|
|
|
9
9
|
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-2xl! bg-popover p-nadicode-xxs text-popover-foreground", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
|
|
12
|
-
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-2xl! p-0", className), showCloseButton: showCloseButton, children: children })] }));
|
|
12
|
+
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-2xl! p-0", className), motion: "instant", showCloseButton: showCloseButton, children: children })] }));
|
|
13
13
|
}
|
|
14
14
|
function CommandInput({ className, ...props }) {
|
|
15
15
|
return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-control-height! rounded-md! border-input bg-background shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
|
|
@@ -4,12 +4,17 @@ declare function Dialog({ ...props }: DialogPrimitive.Root.Props): React.JSX.Ele
|
|
|
4
4
|
declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
|
|
5
5
|
declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
|
|
6
6
|
declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
|
|
7
|
-
|
|
7
|
+
type DialogMotion = "default" | "instant";
|
|
8
|
+
type DialogOverlayProps = DialogPrimitive.Backdrop.Props & {
|
|
9
|
+
motion?: DialogMotion;
|
|
10
|
+
};
|
|
11
|
+
declare function DialogOverlay({ className, motion, ...props }: DialogOverlayProps): React.JSX.Element;
|
|
8
12
|
type DialogContentProps = DialogPrimitive.Popup.Props & {
|
|
9
13
|
showCloseButton?: boolean;
|
|
10
14
|
closeLabel?: React.ReactNode;
|
|
15
|
+
motion?: DialogMotion;
|
|
11
16
|
};
|
|
12
|
-
declare function DialogContent({ className, children, showCloseButton, closeLabel, ...props }: DialogContentProps): React.JSX.Element;
|
|
17
|
+
declare function DialogContent({ className, children, showCloseButton, closeLabel, motion, ...props }: DialogContentProps): React.JSX.Element;
|
|
13
18
|
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
14
19
|
type DialogFooterProps = React.ComponentProps<"div"> & {
|
|
15
20
|
showCloseButton?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAYlE,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAEvD;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,qBAEjE;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,qBAE/D;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAE7D;AAED,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1C,KAAK,kBAAkB,GAAG,eAAe,CAAC,QAAQ,CAAC,KAAK,GAAG;IACzD,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,MAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAYrF;AAED,KAAK,kBAAkB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG;IACtD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAEF,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,UAAoB,EACpB,MAAkB,EAClB,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAgCpB;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIzE;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAuB,EACvB,UAAoB,EACpB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAkBnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,WAAW,CAAC,KAAK,qBAWpF;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
3
3
|
import { cn } from "../lib/utils.js";
|
|
4
|
-
import { modalOverlayMotion, overlayBackdropMotion } from "../lib/motion.js";
|
|
4
|
+
import { instantModalOverlayMotion, instantOverlayBackdropMotion, modalOverlayMotion, overlayBackdropMotion, } from "../lib/motion.js";
|
|
5
5
|
import { Button } from "./button.js";
|
|
6
6
|
import { XIcon } from "lucide-react";
|
|
7
7
|
function Dialog({ ...props }) {
|
|
@@ -16,11 +16,11 @@ function DialogPortal({ ...props }) {
|
|
|
16
16
|
function DialogClose({ ...props }) {
|
|
17
17
|
return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
18
18
|
}
|
|
19
|
-
function DialogOverlay({ className, ...props }) {
|
|
20
|
-
return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
|
|
19
|
+
function DialogOverlay({ className, motion = "default", ...props }) {
|
|
20
|
+
return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim", motion === "instant" ? instantOverlayBackdropMotion : overlayBackdropMotion, className), ...props }));
|
|
21
21
|
}
|
|
22
|
-
function DialogContent({ className, children, showCloseButton = true, closeLabel = "Close", ...props }) {
|
|
23
|
-
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-var(--nc-xl))] -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-2xl border border-border bg-popover p-nadicode-lg text-sm text-popover-foreground shadow-dialog outline-none sm:max-w-sm", modalOverlayMotion, className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
|
|
22
|
+
function DialogContent({ className, children, showCloseButton = true, closeLabel = "Close", motion = "default", ...props }) {
|
|
23
|
+
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, { motion: motion }), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-var(--nc-xl))] -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-2xl border border-border bg-popover p-nadicode-lg text-sm text-popover-foreground shadow-dialog outline-none sm:max-w-sm", motion === "instant" ? instantModalOverlayMotion : modalOverlayMotion, className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-nadicode-md right-nadicode-md", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: closeLabel })] }))] })] }));
|
|
24
24
|
}
|
|
25
25
|
function DialogHeader({ className, ...props }) {
|
|
26
26
|
return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
|
|
@@ -46,7 +46,7 @@ function DrawerContent({ className, children, ...props }) {
|
|
|
46
46
|
// Stack.
|
|
47
47
|
"[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
|
|
48
48
|
// Transitions.
|
|
49
|
-
"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))]",
|
|
49
|
+
"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*var(--nc-duration-drawer-swipe))] motion-reduce:data-ending-style:transform-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:transform-none",
|
|
50
50
|
// Axis: y.
|
|
51
51
|
"data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
|
|
52
52
|
// Axis: x.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,KAAK,EAMN,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,qBAAqB,GACtB,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;IAAE,YAAY,EAAE,yBAAyB,CAAA;CAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"settings-section.d.ts","sourceRoot":"","sources":["../../src/components/settings-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,KAAK,EAMN,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,KAAK,qBAAqB,GACtB,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;IAAE,YAAY,EAAE,yBAAyB,CAAA;CAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;AAa9E,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBA8BA;AAED,iBAAS,aAAa,CAAC,EACrB,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,OAAwB,EACxB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,qBAsCA;AAED,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,21 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import * as React from "react";
|
|
4
3
|
import { cn } from "../lib/utils.js";
|
|
5
4
|
import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "./field.js";
|
|
6
5
|
function renderSettingsFieldChildren(children, controlProps) {
|
|
7
6
|
if (typeof children === "function") {
|
|
8
7
|
return children({ controlProps });
|
|
9
8
|
}
|
|
10
|
-
if (React.isValidElement(children)) {
|
|
11
|
-
const childProps = children.props;
|
|
12
|
-
return React.cloneElement(children, {
|
|
13
|
-
...controlProps,
|
|
14
|
-
...childProps,
|
|
15
|
-
"aria-invalid": controlProps["aria-invalid"] ?? childProps["aria-invalid"],
|
|
16
|
-
"aria-describedby": controlProps["aria-describedby"] ?? childProps["aria-describedby"],
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
9
|
return children;
|
|
20
10
|
}
|
|
21
11
|
function SettingsSection({ title, description, actions, children, className, ...props }) {
|
package/dist/lib/motion.d.ts
CHANGED
|
@@ -8,5 +8,7 @@
|
|
|
8
8
|
declare const overlayBackdropMotion = "transition-opacity duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:opacity-100";
|
|
9
9
|
declare const anchoredOverlayMotion = "origin-(--transform-origin) transition-[opacity,scale] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-instant:transition-none data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-starting-style:opacity-0 data-starting-style:scale-[0.98] motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:opacity-100 motion-reduce:data-starting-style:scale-100";
|
|
10
10
|
declare const modalOverlayMotion = "transition-[opacity,scale] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-starting-style:opacity-0 data-starting-style:scale-[0.98] motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:opacity-100 motion-reduce:data-starting-style:scale-100";
|
|
11
|
-
|
|
11
|
+
declare const instantOverlayBackdropMotion = "transition-none data-ending-style:opacity-100 data-starting-style:opacity-100";
|
|
12
|
+
declare const instantModalOverlayMotion = "transition-none data-ending-style:opacity-100 data-ending-style:scale-100 data-starting-style:opacity-100 data-starting-style:scale-100";
|
|
13
|
+
export { anchoredOverlayMotion, instantModalOverlayMotion, instantOverlayBackdropMotion, modalOverlayMotion, overlayBackdropMotion, };
|
|
12
14
|
//# sourceMappingURL=motion.d.ts.map
|
package/dist/lib/motion.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/lib/motion.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,QAAA,MAAM,qBAAqB,2TAC+R,CAAC;AAE3T,QAAA,MAAM,qBAAqB,khBACsf,CAAC;AAElhB,QAAA,MAAM,kBAAkB,ydACgc,CAAC;AAEzd,OAAO,
|
|
1
|
+
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/lib/motion.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,QAAA,MAAM,qBAAqB,2TAC+R,CAAC;AAE3T,QAAA,MAAM,qBAAqB,khBACsf,CAAC;AAElhB,QAAA,MAAM,kBAAkB,ydACgc,CAAC;AAEzd,QAAA,MAAM,4BAA4B,kFAC+C,CAAC;AAElF,QAAA,MAAM,yBAAyB,4IAC4G,CAAC;AAE5I,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,4BAA4B,EAC5B,kBAAkB,EAClB,qBAAqB,GACtB,CAAC"}
|
package/dist/lib/motion.js
CHANGED
|
@@ -8,4 +8,6 @@
|
|
|
8
8
|
const overlayBackdropMotion = "transition-opacity duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-starting-style:opacity-100";
|
|
9
9
|
const anchoredOverlayMotion = "origin-(--transform-origin) transition-[opacity,scale] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-instant:transition-none data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-starting-style:opacity-0 data-starting-style:scale-[0.98] motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:opacity-100 motion-reduce:data-starting-style:scale-100";
|
|
10
10
|
const modalOverlayMotion = "transition-[opacity,scale] duration-[var(--nc-duration-close)] ease-[var(--nc-ease-out-strong)] data-open:duration-[var(--nc-duration-open)] data-ending-style:opacity-0 data-ending-style:scale-[0.98] data-starting-style:opacity-0 data-starting-style:scale-[0.98] motion-reduce:transition-none motion-reduce:data-ending-style:opacity-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:opacity-100 motion-reduce:data-starting-style:scale-100";
|
|
11
|
-
|
|
11
|
+
const instantOverlayBackdropMotion = "transition-none data-ending-style:opacity-100 data-starting-style:opacity-100";
|
|
12
|
+
const instantModalOverlayMotion = "transition-none data-ending-style:opacity-100 data-ending-style:scale-100 data-starting-style:opacity-100 data-starting-style:scale-100";
|
|
13
|
+
export { anchoredOverlayMotion, instantModalOverlayMotion, instantOverlayBackdropMotion, modalOverlayMotion, overlayBackdropMotion, };
|
|
@@ -20,7 +20,7 @@ copy, and behavior.
|
|
|
20
20
|
| Component | Classification | Built on | Required states | Package-owned accessibility | Fixture |
|
|
21
21
|
| --- | --- | --- | --- | --- | --- |
|
|
22
22
|
| `SettingsSection` | Net-new NadicodeAI product composition. | shadcn `FieldGroup` plus standard section markup. | header with optional actions; field group content. | section structure; no form behavior. | `../tests/guards/product-compositions.test.ts` |
|
|
23
|
-
| `SettingsField` | Net-new NadicodeAI product composition. | shadcn `Field`, `FieldLabel`, `FieldDescription`, and `FieldError`. | valid and invalid field rows; disabled rows. | `
|
|
23
|
+
| `SettingsField` | Net-new NadicodeAI product composition. | shadcn `Field`, `FieldLabel`, `FieldDescription`, and `FieldError`. | valid and invalid field rows; disabled rows. | Label `htmlFor`; render props receive control attributes; element controls require an explicit matching `id` and described-by wiring. | `../tests/guards/product-compositions.test.ts` |
|
|
24
24
|
| `FeedbackState` | Net-new central product state composition adapted from shadcn empty-state patterns. | shadcn `Empty` and lucide status icons. | `empty`, `loading`, `saving`, `error`, `permission`, `offline`, `no-results`, `fatal`. | `role="status"` for loading/saving; `role="alert"` for error, permission, offline, and fatal. | `../tests/guards/product-compositions.test.ts` |
|
|
25
25
|
|
|
26
26
|
## App-Owned Boundaries
|
|
@@ -24,7 +24,7 @@ Fixtures live in:
|
|
|
24
24
|
|
|
25
25
|
| Component | Package owns | Consumer owns |
|
|
26
26
|
| --- | --- | --- |
|
|
27
|
-
| `SettingsSection` / `SettingsField` | Horizontal settings layout, `Field` composition, labels, descriptions, errors, `data-invalid`, and
|
|
27
|
+
| `SettingsSection` / `SettingsField` | Horizontal settings layout, `Field` composition, labels, descriptions, errors, deterministic description and error ids, `data-invalid`, and render-prop control wiring. | Form state, validation rules, submission, persistence, settings taxonomy, save/cancel behavior, and explicit control wiring for element children. |
|
|
28
28
|
| `FeedbackState` | Shared empty, loading, saving, error, permission, offline, no-results, and fatal state presentation. | Recovery actions, retry behavior, permission escalation, app-specific state language. |
|
|
29
29
|
|
|
30
30
|
## SettingsSection
|
|
@@ -55,9 +55,9 @@ Use `SettingsSection` and `SettingsField` for horizontal settings rows that need
|
|
|
55
55
|
| `title` / `description` / `actions` | Section header content and right-side action slot. |
|
|
56
56
|
| `id` / `label` | Required field identity and accessible label. |
|
|
57
57
|
| `description` / `error` / `invalid` | Field helper text, error text, and invalid state. |
|
|
58
|
-
| `children` |
|
|
58
|
+
| `children` | A render function receives `controlProps` for the real control and requires a client-component consumer. An element child renders unchanged and must put an explicit `id` matching the field `id` on its control. |
|
|
59
59
|
|
|
60
|
-
Accessibility:
|
|
60
|
+
Accessibility: `FieldLabel` uses the field `id` as `htmlFor`. The render-prop form passes `id`, `aria-invalid`, `aria-describedby`, `disabled`, and `required` to the consumer for placement on the real control. Functions cannot cross the React Server Component boundary, so this form requires a client-component consumer. Element children render unchanged; the consumer must put the matching `id` on the control and add `aria-describedby` when needed. Descriptions render with `${id}-description`, and errors render with `${id}-error`.
|
|
61
61
|
|
|
62
62
|
## FeedbackState
|
|
63
63
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"@base-ui/react": "^1.6.0",
|
|
66
|
-
"@nadicodeai/design-system": "0.
|
|
66
|
+
"@nadicodeai/design-system": "0.17.0",
|
|
67
67
|
"@rive-app/react-webgl2": "^4.29.1",
|
|
68
68
|
"@streamdown/cjk": "^1.0.3",
|
|
69
69
|
"@streamdown/code": "^1.1.1",
|