@noxickon/onyx 6.2.0 → 6.3.0

package/dist/components/ResponsiveOverlay/ResponsiveOverlay.styles.d.ts

@@ -0,0 +1,78 @@
+import { VariantProps } from '../../internal/tv';
+export declare const responsiveOverlayVariants: import('tailwind-variants').TVReturnType<{
+    root: {
+        dialog: {
+            content: string;
+        };
+        alertDialog: {
+            content: string;
+        };
+        drawer: {};
+    };
+    fullScreen: {
+        true: {
+            content: string[];
+        };
+        false: {};
+    };
+}, {
+    content: string;
+    header: string;
+    title: string;
+    headerExtra: string;
+    description: string;
+    body: string;
+    footer: string[];
+    drawerFooter: string;
+}, undefined, {
+    root: {
+        dialog: {
+            content: string;
+        };
+        alertDialog: {
+            content: string;
+        };
+        drawer: {};
+    };
+    fullScreen: {
+        true: {
+            content: string[];
+        };
+        false: {};
+    };
+}, {
+    content: string;
+    header: string;
+    title: string;
+    headerExtra: string;
+    description: string;
+    body: string;
+    footer: string[];
+    drawerFooter: string;
+}, import('tailwind-variants').TVReturnType<{
+    root: {
+        dialog: {
+            content: string;
+        };
+        alertDialog: {
+            content: string;
+        };
+        drawer: {};
+    };
+    fullScreen: {
+        true: {
+            content: string[];
+        };
+        false: {};
+    };
+}, {
+    content: string;
+    header: string;
+    title: string;
+    headerExtra: string;
+    description: string;
+    body: string;
+    footer: string[];
+    drawerFooter: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ResponsiveOverlayVariants = VariantProps<typeof responsiveOverlayVariants>;

package/dist/components/ResponsiveOverlay/ResponsiveOverlay.styles.js

@@ -0,0 +1,36 @@
+import { tv as e } from "../../internal/tv.js";
+import { overlayBody as t, overlayDescription as n, overlayFooter as r, overlayFullWidthActions as i, overlayHeader as a } from "../../internal/styles/overlayFrameStyles.js";
+//#region src/components/ResponsiveOverlay/ResponsiveOverlay.styles.ts
+var o = e({
+	slots: {
+		content: "flex flex-col",
+		header: a,
+		title: "min-w-0 flex-1",
+		headerExtra: "shrink-0",
+		description: n,
+		body: t,
+		footer: r,
+		drawerFooter: i
+	},
+	variants: {
+		root: {
+			dialog: { content: "p-0" },
+			alertDialog: { content: "p-0" },
+			drawer: {}
+		},
+		fullScreen: {
+			true: { content: [
+				"rounded-none border-0",
+				"pointer-coarse:h-dvh pointer-coarse:w-dvw",
+				"pointer-coarse:max-h-none pointer-coarse:max-w-none"
+			] },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		root: "dialog",
+		fullScreen: !1
+	}
+});
+//#endregion
+export { o as responsiveOverlayVariants };

package/dist/components/ResponsiveOverlay/ResponsiveOverlay.types.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { DrawerSide } from '../Drawer';
+import { OxBreakpoint } from '../../hooks/useBreakpoint/useBreakpoint.types';
+type ResponsiveOverlayRoot = 'dialog' | 'alertDialog' | 'drawer';
+type ResponsiveOverlayTone = 'danger' | 'warning';
+type ResponsiveOverlayMobileMode = 'sheet' | 'fullscreen';
+interface ResponsiveOverlayOpenChangeDetails {
+    reason: string;
+}
+interface OxResponsiveOverlayProps {
+    below?: OxBreakpoint;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    headerExtra?: ReactNode;
+    mobile?: ResponsiveOverlayMobileMode;
+    mobileSide?: DrawerSide;
+    onOpenChange?: (open: boolean, details: ResponsiveOverlayOpenChangeDetails) => void;
+    open?: boolean;
+    tone?: ResponsiveOverlayTone;
+}
+interface OxResponsiveOverlayTriggerProps {
+    children?: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayContentProps {
+    children: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayTitleProps {
+    children: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayDescriptionProps {
+    children: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+interface OxResponsiveOverlayActionsProps {
+    children: ReactNode;
+    className?: string;
+}
+export type { OxResponsiveOverlayActionsProps, OxResponsiveOverlayBodyProps, OxResponsiveOverlayContentProps, OxResponsiveOverlayDescriptionProps, OxResponsiveOverlayProps, OxResponsiveOverlayTitleProps, OxResponsiveOverlayTriggerProps, ResponsiveOverlayMobileMode, ResponsiveOverlayOpenChangeDetails, ResponsiveOverlayRoot, ResponsiveOverlayTone, };

package/dist/components/ResponsiveOverlay/index.d.ts

@@ -0,0 +1,11 @@
+import { OxResponsiveOverlayActions, OxResponsiveOverlayBody, OxResponsiveOverlayContent, OxResponsiveOverlayDescription, OxResponsiveOverlayRoot, OxResponsiveOverlayTitle, OxResponsiveOverlayTrigger } from './ResponsiveOverlay';
+declare const OxResponsiveOverlay: typeof OxResponsiveOverlayRoot & {
+    Trigger: typeof OxResponsiveOverlayTrigger;
+    Content: typeof OxResponsiveOverlayContent;
+    Title: typeof OxResponsiveOverlayTitle;
+    Description: typeof OxResponsiveOverlayDescription;
+    Body: typeof OxResponsiveOverlayBody;
+    Actions: typeof OxResponsiveOverlayActions;
+};
+export { OxResponsiveOverlay };
+export type { OxResponsiveOverlayActionsProps, OxResponsiveOverlayBodyProps, OxResponsiveOverlayContentProps, OxResponsiveOverlayDescriptionProps, OxResponsiveOverlayProps, OxResponsiveOverlayTitleProps, OxResponsiveOverlayTriggerProps, ResponsiveOverlayMobileMode, ResponsiveOverlayOpenChangeDetails, ResponsiveOverlayTone, } from './ResponsiveOverlay.types';

package/dist/components/ResponsiveOverlay/index.js

@@ -0,0 +1,12 @@
+import { OxResponsiveOverlayActions as e, OxResponsiveOverlayBody as t, OxResponsiveOverlayContent as n, OxResponsiveOverlayDescription as r, OxResponsiveOverlayRoot as i, OxResponsiveOverlayTitle as a, OxResponsiveOverlayTrigger as o } from "./ResponsiveOverlay.js";
+//#region src/components/ResponsiveOverlay/index.ts
+var s = Object.assign(i, {
+	Trigger: o,
+	Content: n,
+	Title: a,
+	Description: r,
+	Body: t,
+	Actions: e
+});
+//#endregion
+export { s as OxResponsiveOverlay };

package/dist/components/Sidebar/Sidebar.styles.js

@@ -12,9 +12,9 @@ var r = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:o
 	"border-0 bg-transparent text-body text-fg-muted",
 	"rounded-control ox-console:rounded-sm",
 	"transition-colors ease-out-quint",
-	"ox-interactive:[&:not([data-active])]:hover:bg-surface-raised ox-interactive:hover:text-fg",
+	"ox-engaged:[&:not([data-active])]:bg-surface-raised ox-engaged:text-fg",
 	r,
-	"ox-disabled:opacity-50 ox-disabled:cursor-not-allowed ox-disabled:pointer-events-none",
+	"ox-disabled:opacity-50 ox-disabled:cursor-not-allowed",
 	"data-[active]:bg-primary-soft data-[active]:font-medium data-[active]:text-fg"
 ], o = n({
 	slots: {
@@ -22,12 +22,18 @@ var r = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:o
 		header: [
 			"flex items-center shrink-0 gap-2 overflow-hidden",
 			"h-[var(--topbar-h)] px-4.5 ox-console:px-4",
+			"has-[[data-ox-slot=sidebar-menu]]:px-0",
 			"border-b border-line"
 		],
-		content: ["flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden", "py-3 ox-console:py-2.5"],
+		content: [
+			"flex flex-col flex-1 min-h-0 overflow-y-auto overflow-x-hidden",
+			"[&>[data-ox-slot=sidebar-menu]]:py-1.5 ox-console:[&>[data-ox-slot=sidebar-menu]]:py-1.25",
+			"[&>[data-ox-slot=sidebar-menu]:not(:first-child)]:border-t [&>[data-ox-slot=sidebar-menu]:not(:first-child)]:border-line"
+		],
 		footer: [
 			"flex items-center shrink-0 overflow-hidden mt-auto",
 			"p-3 ox-console:p-2.5",
+			"has-[[data-ox-slot=sidebar-menu]]:px-0",
 			"border-t border-line"
 		],
 		separator: "mx-2 my-1 h-px border-0 bg-line shrink-0",
@@ -48,7 +54,8 @@ var r = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:o
 		menuIcon: [
 			"inline-flex items-center justify-center shrink-0 size-4 opacity-60",
 			"transition-opacity ease-out-quint",
-			"group-hover/menu-button:opacity-100 group-data-[active]/menu-button:opacity-100",
+			"group-[&:not([data-disabled]):hover]/menu-button:opacity-100 group-data-[active]/menu-button:opacity-100",
+			"group-data-[popup-open]/menu-button:opacity-100",
 			"[&>svg]:size-full [&>svg]:shrink-0"
 		],
 		menuLabel: "flex-1 truncate min-w-0",
@@ -101,9 +108,9 @@ var r = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:o
 			"inline-flex items-center justify-center shrink-0 size-5 rounded-sm cursor-pointer",
 			"border-0 bg-transparent text-fg-subtle",
 			"transition-colors ease-out-quint",
-			"hover:text-fg hover:bg-[color-mix(in_oklab,var(--fg)_8%,transparent)]",
+			"ox-interactive:hover:text-fg ox-interactive:hover:bg-[color-mix(in_oklab,var(--fg)_8%,transparent)]",
 			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-ink",
-			"ox-disabled:pointer-events-none ox-disabled:opacity-50",
+			"ox-disabled:cursor-not-allowed ox-disabled:opacity-50",
 			"[&>svg]:size-3.5"
 		]
 	},