@stll/ui 0.31.0 → 0.32.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.
@@ -1,4 +1,3 @@
1
- import { OverlayLayer } from "../lib/overlay-layer.js";
2
1
  import * as React$1 from "react";
3
2
  import { useRender } from "@base-ui/react/use-render";
4
3
  import { VariantProps } from "class-variance-authority";
@@ -14,20 +13,15 @@ import { VariantProps } from "class-variance-authority";
14
13
  */
15
14
  declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
16
15
  declare const buttonVariants: (props?: ({
17
- size?: "default" | "xs" | "sm" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "xl" | null | undefined;
18
- variant?: "default" | "link" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
16
+ size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
17
+ variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
19
18
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
20
19
  type ButtonProps = {
21
20
  variant?: VariantProps<typeof buttonVariants>["variant"];
22
21
  size?: VariantProps<typeof buttonVariants>["size"];
23
22
  loading?: boolean;
24
23
  tooltip?: React$1.ReactNode;
25
- /**
26
- * Overlay band for the tooltip popup. Needed when the button sits in floating
27
- * chrome whose own band would otherwise paint over the popup.
28
- */
29
- tooltipLayer?: OverlayLayer | undefined;
30
24
  } & useRender.ComponentProps<"button">;
31
- declare function Button({ className, variant, size, render, loading, children, disabled, tooltip, tooltipLayer, ...props }: ButtonProps): React$1.JSX.Element;
25
+ declare function Button({ className, variant, size, render, loading, children, disabled, tooltip, ...props }: ButtonProps): React$1.JSX.Element;
32
26
  //#endregion
33
27
  export { Button, buttonAccessibleDisabledClass, buttonVariants };
@@ -50,7 +50,7 @@ const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-ba
50
50
  }
51
51
  }
52
52
  });
53
- function Button({ className, variant, size, render, loading, children, disabled, tooltip, tooltipLayer, ...props }) {
53
+ function Button({ className, variant, size, render, loading, children, disabled, tooltip, ...props }) {
54
54
  const typeValue = render ? void 0 : "button";
55
55
  const tooltipContent = tooltip ?? props["aria-label"] ?? props.title;
56
56
  const disposition = resolveButtonDisposition({
@@ -90,8 +90,7 @@ function Button({ className, variant, size, render, loading, children, disabled,
90
90
  });
91
91
  return renderTooltipTrigger({
92
92
  tooltip: tooltipContent,
93
- trigger: button,
94
- ...tooltipLayer === void 0 ? {} : { layer: tooltipLayer }
93
+ trigger: button
95
94
  });
96
95
  }
97
96
  //#endregion
@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
5
5
  //#region src/components/input-group.d.ts
6
6
  declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
7
7
  declare const inputGroupAddonVariants: (props?: ({
8
- align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
8
+ align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
9
9
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
10
10
  declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
11
11
  declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
@@ -30,7 +30,7 @@ declare function useSidebar(): SidebarContextProps;
30
30
  * left for the content column. Mobile reports 0: there the sidebar is an
31
31
  * overlay sheet and occupies no layout width.
32
32
  */
33
- declare function useSidebarInlineSize(): 0 | 48 | 256;
33
+ declare function useSidebarInlineSize(): 0 | 256 | 48;
34
34
  declare const SidebarProvider: ({ defaultOpen, forceCollapsed, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
35
35
  defaultOpen?: boolean;
36
36
  forceCollapsed?: boolean;
@@ -83,7 +83,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
83
83
  declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
84
84
  declare const sidebarMenuButtonVariants: (props?: ({
85
85
  variant?: "default" | "outline" | null | undefined;
86
- size?: "default" | "sm" | "lg" | "rail" | null | undefined;
86
+ size?: "default" | "lg" | "sm" | "rail" | null | undefined;
87
87
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
88
88
  declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
89
89
  asChild?: boolean;
@@ -1,11 +1,9 @@
1
- import { OverlayLayer } from "../lib/overlay-layer.js";
2
1
  import * as React$1 from "react";
3
2
  //#region src/components/tooltip-trigger-helper.d.ts
4
3
  type TooltipTriggerOptions = {
5
4
  trigger: React$1.ReactElement;
6
5
  tooltip: React$1.ReactNode;
7
- layer?: OverlayLayer | undefined;
8
6
  };
9
- declare const renderTooltipTrigger: ({ trigger, tooltip, layer }: TooltipTriggerOptions) => React$1.JSX.Element;
7
+ declare const renderTooltipTrigger: ({ trigger, tooltip }: TooltipTriggerOptions) => React$1.JSX.Element;
10
8
  //#endregion
11
9
  export { renderTooltipTrigger };
@@ -3,12 +3,9 @@ import { hasTooltipContent } from "../lib/tooltip-content.js";
3
3
  import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  //#region src/components/tooltip-trigger-helper.tsx
6
- const renderTooltipTrigger = ({ trigger, tooltip, layer }) => {
6
+ const renderTooltipTrigger = ({ trigger, tooltip }) => {
7
7
  if (!hasTooltipContent(tooltip)) return trigger;
8
- return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: trigger }), /* @__PURE__ */ jsx(TooltipPopup, {
9
- ...layer === void 0 ? {} : { layer },
10
- children: tooltip
11
- })] });
8
+ return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: trigger }), /* @__PURE__ */ jsx(TooltipPopup, { children: tooltip })] });
12
9
  };
13
10
  //#endregion
14
11
  export { renderTooltipTrigger };
@@ -1,15 +1,13 @@
1
- import { OverlayLayer } from "../lib/overlay-layer.js";
2
1
  import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
3
2
  //#region src/components/tooltip.d.ts
4
3
  declare const TooltipCreateHandle: typeof Tooltip$1.createHandle;
5
4
  declare const TooltipProvider: import("react").FC<import("@base-ui/react").TooltipProviderProps>;
6
5
  declare const Tooltip: <Payload>(props: Tooltip$1.Root.Props<Payload>) => React.JSX.Element;
7
6
  declare const TooltipTrigger: (props: Tooltip$1.Trigger.Props) => import("react").JSX.Element;
8
- declare const TooltipPopup: ({ className, align, sideOffset, side, layer, children, ...props }: Tooltip$1.Popup.Props & {
7
+ declare const TooltipPopup: ({ className, align, sideOffset, side, children, ...props }: Tooltip$1.Popup.Props & {
9
8
  align?: Tooltip$1.Positioner.Props["align"];
10
9
  side?: Tooltip$1.Positioner.Props["side"];
11
10
  sideOffset?: Tooltip$1.Positioner.Props["sideOffset"];
12
- layer?: OverlayLayer;
13
11
  }) => import("react").JSX.Element;
14
12
  //#endregion
15
13
  export { Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger };
@@ -12,9 +12,9 @@ const TooltipTrigger = (props) => /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
12
12
  "data-slot": "tooltip-trigger",
13
13
  ...props
14
14
  });
15
- const TooltipPopup = ({ className, align = "center", sideOffset = 4, side = "top", layer = "default", children, ...props }) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
15
+ const TooltipPopup = ({ className, align = "center", sideOffset = 4, side = "top", children, ...props }) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
16
16
  align,
17
- className: cn(CONTENT_SIZED_POSITIONER_CLASS_NAME, "transition-[top,left,right,bottom,transform] data-instant:transition-none", OVERLAY_LAYER_CLASS_NAMES[layer]),
17
+ className: cn(CONTENT_SIZED_POSITIONER_CLASS_NAME, "transition-[top,left,right,bottom,transform] data-instant:transition-none", OVERLAY_LAYER_CLASS_NAMES.popup),
18
18
  collisionPadding: 8,
19
19
  "data-slot": "tooltip-positioner",
20
20
  side,
@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
5
5
  readonly lg: "lg";
6
6
  }>;
7
7
  type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
8
- declare const CONTROL_SIZES: readonly ("default" | "sm" | "lg")[];
8
+ declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
9
9
  //#endregion
10
10
  export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };
@@ -23,12 +23,12 @@ export declare const OVERLAY_LAYER_CLASS_NAMES: {
23
23
  * regardless of mount order.
24
24
  */
25
25
  readonly "chrome-raised": "z-[81]";
26
- /** Dialogs, sheets, popovers, tooltips: above chrome, below toasts. */
26
+ /** Dialogs, sheets, popovers: above chrome, below toasts. */
27
27
  readonly default: "z-[85]";
28
28
  /** Search sits a hair above a plain dialog so its own popup wins. */
29
29
  readonly search: "z-[86]";
30
30
  /**
31
- * Transient popups — menu, select, combobox, context menus. Above everything
31
+ * Transient popups — menu, select, combobox, context menus, tooltips. Above everything
32
32
  * including the toast viewport (z-[90]), because any of them can be opened
33
33
  * *from* a dialog, a popover or a toast action and must cover its opener.
34
34
  * They sat at z-50 alongside dialogs, so which one won was decided by portal
@@ -23,12 +23,12 @@ const OVERLAY_LAYER_CLASS_NAMES = {
23
23
  * regardless of mount order.
24
24
  */
25
25
  "chrome-raised": "z-[81]",
26
- /** Dialogs, sheets, popovers, tooltips: above chrome, below toasts. */
26
+ /** Dialogs, sheets, popovers: above chrome, below toasts. */
27
27
  default: "z-[85]",
28
28
  /** Search sits a hair above a plain dialog so its own popup wins. */
29
29
  search: "z-[86]",
30
30
  /**
31
- * Transient popups — menu, select, combobox, context menus. Above everything
31
+ * Transient popups — menu, select, combobox, context menus, tooltips. Above everything
32
32
  * including the toast viewport (z-[90]), because any of them can be opened
33
33
  * *from* a dialog, a popover or a toast action and must cover its opener.
34
34
  * They sat at z-50 alongside dialogs, so which one won was decided by portal
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stll/ui",
3
- "version": "0.31.0",
3
+ "version": "0.32.0",
4
4
  "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
5
5
  "keywords": [
6
6
  "base-ui",