@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/toast/Toast.generated.js

@@ -286,7 +286,7 @@ const CloseIcon = ()=>(()=>{
         return _el$5;
     })();
 const __solidLayoutDefaultIndicator = (_stable, p)=>{
-    if (p.isLoading) return (()=>{
+    if ("loading" === p.state) return (()=>{
         var _el$6 = _tmpl$6();
         spread(_el$6, mergeProps(()=>({
                 class: CLASSES.Spinner.base
@@ -318,14 +318,13 @@ const __solidLayoutToastContent = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$7 = _tmpl$7();
         spread(_el$7, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Content.base, local.class, local.className)
+                class: twMerge(CLASSES.Content.base, local.class)
             }), {
             "data-slot": "toast-content",
             get ["data-theme"] () {
@@ -349,7 +348,6 @@ const __solidLayoutToastIndicator = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "variant"
@@ -358,7 +356,7 @@ const __solidLayoutToastIndicator = (_stable, p)=>{
     return (()=>{
         var _el$8 = _tmpl$7();
         spread(_el$8, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Indicator.base, local.class, local.className)
+                class: twMerge(CLASSES.Indicator.base, local.class)
             }), {
             "data-slot": "toast-indicator",
             get ["data-theme"] () {
@@ -398,14 +396,13 @@ const __solidLayoutToastTitle = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$9 = _tmpl$8();
         spread(_el$9, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Title.base, local.class, local.className)
+                class: twMerge(CLASSES.Title.base, local.class)
             }), {
             "data-slot": "toast-title",
             get ["data-theme"] () {
@@ -428,14 +425,13 @@ const __solidLayoutToastDescription = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
     return (()=>{
         var _el$0 = _tmpl$8();
         spread(_el$0, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Description.base, local.class, local.className)
+                class: twMerge(CLASSES.Description.base, local.class)
             }), {
             "data-slot": "toast-description",
             get ["data-theme"] () {
@@ -456,14 +452,13 @@ const ToastDescription = defineComponent({
 });
 const __solidLayoutToastActionButton = (_stable, p)=>{
     const [local, others] = splitProps(p, [
-        "class",
-        "className"
+        "class"
     ]);
     return createComponent(button_0, mergeProps(others, {
         variant: "outline",
         size: "sm"
     }, ()=>({
-            class: twMerge(CLASSES.Action.base, local.class, local.className)
+            class: twMerge(CLASSES.Action.base, local.class)
         }), {
         "data-slot": "toast-action",
         get children () {
@@ -480,7 +475,6 @@ const __solidLayoutToastCloseButton = (_stable, p)=>{
     const ctx = useToastItemContext();
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "aria-label",
         "dataTheme",
         "style",
@@ -492,7 +486,7 @@ const __solidLayoutToastCloseButton = (_stable, p)=>{
         ctx.onClose?.();
     };
     return createComponent(close_button, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.Close.base, local.class, local.className)
+            class: twMerge(CLASSES.Close.base, local.class)
         }), {
         get ["aria-label"] () {
             return local["aria-label"] ?? "Dismiss notification";
@@ -519,7 +513,6 @@ const __solidLayoutToastRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "title",
@@ -527,7 +520,7 @@ const __solidLayoutToastRoot = (_stable, p)=>{
         "variant",
         "indicator",
         "actionProps",
-        "isLoading",
+        "state",
         "onClose",
         "isFrontmost",
         "isHidden",
@@ -535,7 +528,7 @@ const __solidLayoutToastRoot = (_stable, p)=>{
         "isExiting"
     ]);
     const variant = createMemo(()=>normalizeVariant(local.variant));
-    const isLoading = createMemo(()=>Boolean(local.isLoading));
+    const isLoading = createMemo(()=>Boolean("loading" === local.state));
     const isFrontmost = createMemo(()=>local.isFrontmost ?? true);
     const isHidden = createMemo(()=>local.isHidden ?? false);
     const contextValue = {
@@ -550,7 +543,7 @@ const __solidLayoutToastRoot = (_stable, p)=>{
         get children () {
             var _el$1 = _tmpl$7();
             spread(_el$1, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], isFrontmost() && CLASSES.Item.state.frontmost, isHidden() && CLASSES.Item.state.hidden, local.isEntering && CLASSES.Item.state.entering, local.isExiting && CLASSES.Item.state.exiting, local.class, local.className)
+                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], isFrontmost() && CLASSES.Item.state.frontmost, isHidden() && CLASSES.Item.state.hidden, local.isEntering && CLASSES.Item.state.entering, local.isExiting && CLASSES.Item.state.exiting, local.class)
                 }), {
                 get role () {
                     return role();
@@ -651,7 +644,6 @@ const __solidLayoutToastProvider = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "ref",
@@ -713,7 +705,7 @@ const __solidLayoutToastProvider = (_stable, p)=>{
         var _ref$ = local.ref;
         "function" == typeof _ref$ ? use(_ref$, _el$10) : local.ref = _el$10;
         spread(_el$10, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Provider.base, CLASSES.Provider.placement[placement()], local.class, local.className)
+                class: twMerge(CLASSES.Provider.base, CLASSES.Provider.placement[placement()], local.class)
             }), {
             "data-slot": "toast-region",
             get ["data-placement"] () {
@@ -795,8 +787,8 @@ const __solidLayoutToastProvider = (_stable, p)=>{
                                 get actionProps () {
                                     return queuedToast.content.actionProps;
                                 },
-                                get isLoading () {
-                                    return queuedToast.content.isLoading;
+                                get state () {
+                                    return queuedToast.content.state;
                                 },
                                 onClose: dismiss,
                                 get isFrontmost () {
@@ -836,7 +828,7 @@ const createToastFunction = (queue)=>{
             indicator: options?.indicator,
             variant: options?.variant ?? "default",
             actionProps: options?.actionProps,
-            isLoading: options?.isLoading
+            state: options?.state
         }, {
             timeout,
             onClose: options?.onClose
@@ -867,7 +859,7 @@ const createToastFunction = (queue)=>{
         const loadingToastKey = queue.add({
             title: options.loading,
             variant: "default",
-            isLoading: true
+            state: "loading"
         }, {
             timeout: 0
         });

package/dist/components/toolbar/Toolbar.css

@@ -19,10 +19,10 @@
   }
 
   .toolbar--attached {
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: var(--color-surface, var(--color-base-100));
     padding: 0.25rem;
-    box-shadow: var(--shadow-overlay, 0 12px 28px color-mix(in oklab, black 12%, transparent));
+    box-shadow: var(--shadow-overlay, 0 12px 28px color-mix(in oklab, rgb(var(--shadow-color, 0 0 0)) 12%, transparent));
   }
 
   .toolbar [data-slot="separator"][data-orientation="vertical"] {

package/dist/components/toolbar/Toolbar.generated.d.ts

@@ -1,9 +1,9 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Toolbar.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type ToolbarOrientation = "horizontal" | "vertical";
-export type ToolbarRootProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
+export type ToolbarRootProps = UIBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
     orientation?: ToolbarOrientation;
     isAttached?: boolean;
 };

package/dist/components/toolbar/Toolbar.generated.js

@@ -21,7 +21,6 @@ const __solidLayoutToolbarRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "orientation",
@@ -84,7 +83,7 @@ const __solidLayoutToolbarRoot = (_stable, p)=>{
             },
             onKeyDown: handleKeyDown
         }, ()=>({
-                class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], local.isAttached && CLASSES.flag.attached, local.class, local.className)
+                class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], local.isAttached && CLASSES.flag.attached, local.class)
             })), false, true);
         insert(_el$, ()=>local.children);
         return _el$;

package/dist/components/tooltip/Tooltip.css

@@ -17,8 +17,8 @@
 
   .tooltip__trigger:focus-visible,
   .tooltip__trigger[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
     border-radius: var(--radius-field, 0.375rem);
   }
 
@@ -40,8 +40,8 @@
     pointer-events: none;
     background-color: var(--color-neutral);
     color: var(--color-neutral-content);
-    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px
-      oklch(0% 0 0 / 0.1);
+    box-shadow: 0 4px 6px -1px rgb(var(--shadow-color, 0 0 0) / 10%), 0 2px 4px -2px
+      rgb(var(--shadow-color, 0 0 0) / 10%);
 
     opacity: 0;
     overflow: visible;

package/dist/components/tooltip/Tooltip.generated.d.ts

@@ -2,9 +2,9 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./Tooltip.css";
 import { type JSX } from "solid-js";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type TooltipPlacement = OverlayPlacement;
-export type TooltipRootProps = IComponentBaseProps & {
+export type TooltipRootProps = UIBaseProps & {
     children: JSX.Element;
     placement?: TooltipPlacement;
     autoFlip?: boolean;
@@ -12,17 +12,17 @@ export type TooltipRootProps = IComponentBaseProps & {
     showArrow?: boolean;
     delay?: number;
     closeDelay?: number;
-    isOpen?: boolean;
+    open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
 };
-export type TooltipTriggerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type TooltipTriggerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children: JSX.Element;
 };
-export type TooltipContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type TooltipContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children: JSX.Element;
 };
-export type TooltipArrowProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+export type TooltipArrowProps = JSX.HTMLAttributes<HTMLSpanElement> & UIBaseProps & {
     children?: JSX.Element;
 };
 declare const TooltipRoot: __LayoutComponent<TooltipRootProps>;

package/dist/components/tooltip/Tooltip.generated.js

@@ -21,12 +21,11 @@ const __solidLayoutTooltipRoot = (_stable, p)=>{
         "showArrow",
         "delay",
         "closeDelay",
-        "isOpen",
+        "open",
         "defaultOpen",
         "onOpenChange",
         "dataTheme",
         "class",
-        "className",
         "style"
     ]);
     const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
@@ -35,8 +34,8 @@ const __solidLayoutTooltipRoot = (_stable, p)=>{
     const [resolvedPlacement, setResolvedPlacement] = createSignal(local.placement ?? "top");
     let delayTimer;
     let closeTimer;
-    const isControlled = ()=>void 0 !== local.isOpen;
-    const isOpen = ()=>isControlled() ? Boolean(local.isOpen) : internalOpen();
+    const isControlled = ()=>void 0 !== local.open;
+    const isOpen = ()=>isControlled() ? Boolean(local.open) : internalOpen();
     const setIsOpen = (v)=>{
         if (!isControlled()) setInternalOpen(v);
         local.onOpenChange?.(v);
@@ -77,7 +76,7 @@ const __solidLayoutTooltipRoot = (_stable, p)=>{
         get children () {
             var _el$ = _tmpl$();
             spread(_el$, mergeProps(()=>({
-                    class: twMerge(CLASSES.base, local.class, local.className)
+                    class: twMerge(CLASSES.base, local.class)
                 }), {
                 "data-slot": "tooltip-root",
                 get ["data-theme"] () {
@@ -101,7 +100,6 @@ const __solidLayoutTooltipTrigger = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "onMouseEnter",
@@ -130,7 +128,7 @@ const __solidLayoutTooltipTrigger = (_stable, p)=>{
         var _el$2 = _tmpl$2();
         use((el)=>ctx.setTriggerRef(el), _el$2);
         spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.trigger, local.class, local.className)
+                class: twMerge(CLASSES.slot.trigger, local.class)
             }), {
             "data-slot": "tooltip-trigger",
             get ["data-theme"] () {
@@ -157,7 +155,6 @@ const __solidLayoutTooltipContent = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "onMouseEnter",
@@ -207,7 +204,7 @@ const __solidLayoutTooltipContent = (_stable, p)=>{
                     spread(_el$3, mergeProps(others, {
                         role: "tooltip"
                     }, ()=>({
-                            class: twMerge(CLASSES.slot.content, local.class, local.className)
+                            class: twMerge(CLASSES.slot.content, local.class)
                         }), {
                         "data-slot": "tooltip-content",
                         get ["data-placement"] () {
@@ -241,7 +238,6 @@ const __solidLayoutTooltipArrow = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style"
     ]);
@@ -250,7 +246,7 @@ const __solidLayoutTooltipArrow = (_stable, p)=>{
     return (()=>{
         var _el$5 = _tmpl$();
         spread(_el$5, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.arrow, local.class, local.className)
+                class: twMerge(CLASSES.slot.arrow, local.class)
             }), {
             "data-slot": "tooltip-arrow",
             get ["data-placement"] () {

package/dist/components/types.d.ts

@@ -1,10 +1,3 @@
-import type { JSX } from "solid-js";
-export interface IComponentBaseProps {
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-}
 export type ResponsiveBreakpoints = "base" | "sm" | "md" | "lg" | "xl";
 export type ResponsiveProp<T> = T | Partial<Record<ResponsiveBreakpoints, T>>;
 export declare const breakpoints: readonly ["base", "sm", "md", "lg", "xl"];

package/dist/components/video-preview/VideoPreview.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import { type Accessor, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 type VideoPreviewBaseProps = {
     /**
      * Reactive accessor for the MediaStream to display
@@ -17,6 +17,6 @@ type VideoPreviewBaseProps = {
      */
     mirror?: boolean;
 };
-export type VideoPreviewProps = VideoPreviewBaseProps & IComponentBaseProps & Omit<JSX.VideoHTMLAttributes<HTMLVideoElement>, keyof VideoPreviewBaseProps>;
+export type VideoPreviewProps = VideoPreviewBaseProps & UIBaseProps & Omit<JSX.VideoHTMLAttributes<HTMLVideoElement>, keyof VideoPreviewBaseProps>;
 export declare const VideoPreview: __LayoutComponent<VideoPreviewProps>;
 export default VideoPreview;

package/dist/components/video-preview/VideoPreview.generated.js

@@ -11,7 +11,6 @@ const __solidLayoutVideoPreview = (_stable, p)=>{
         "mirror",
         "dataTheme",
         "class",
-        "className",
         "style"
     ]);
     const muted = ()=>local.muted ?? true;
@@ -42,7 +41,7 @@ const __solidLayoutVideoPreview = (_stable, p)=>{
                         return local.dataTheme;
                     }
                 }, ()=>({
-                        class: twMerge(mirror() && CLASSES.mirror, local.class, local.className)
+                        class: twMerge(mirror() && CLASSES.mirror, local.class)
                     }), {
                     get style () {
                         return local.style;