@pathscale/ui 2.1.0 → 2.2.0

package/dist/components/calendar/Calendar.generated.d.ts

@@ -2,7 +2,7 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./Calendar.css";
 import { type JSX } from "solid-js";
 import { type CalendarSelectionMode } from "../../hooks/date";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps, State } from "../vocabulary";
 export type CalendarWeekdayFormat = "narrow" | "short" | "long";
 export type { CalendarSelectionMode };
 export type CalendarDaySelectHandler = (date: Date) => void;
@@ -23,9 +23,9 @@ type CalendarBaseProps = {
     locale?: string;
     weekdayFormat?: CalendarWeekdayFormat;
     showOutsideDays?: boolean;
-    isDisabled?: boolean;
+    state?: State;
     disabled?: boolean;
 };
-export type CalendarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & IComponentBaseProps & CalendarBaseProps;
+export type CalendarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & UIBaseProps & CalendarBaseProps;
 declare const Calendar: __LayoutComponent<CalendarProps>;
 export default Calendar;

package/dist/components/calendar/Calendar.generated.js

@@ -9,7 +9,6 @@ var _tmpl$ = /*#__PURE__*/ template('<div><div><div><button type=button><svg><pa
 const __solidLayoutCalendar = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "ref",
@@ -28,7 +27,7 @@ const __solidLayoutCalendar = (_stable, p)=>{
         "locale",
         "weekdayFormat",
         "showOutsideDays",
-        "isDisabled",
+        "state",
         "disabled"
     ]);
     const selectionMode = createMemo(()=>local.selectionMode ?? "single");
@@ -48,7 +47,7 @@ const __solidLayoutCalendar = (_stable, p)=>{
     const locale = createMemo(()=>local.locale ?? "en-US");
     const weekdayFormat = createMemo(()=>local.weekdayFormat ?? "short");
     const showOutsideDays = createMemo(()=>local.showOutsideDays ?? true);
-    const isCalendarDisabled = createMemo(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
+    const isCalendarDisabled = createMemo(()=>Boolean("disabled" === local.state) || Boolean(local.disabled));
     const isDateUnavailable = (date)=>Boolean(local.isDateUnavailable?.(date));
     const isDateDisabled = (date)=>{
         if (isCalendarDisabled()) return true;
@@ -161,7 +160,7 @@ const __solidLayoutCalendar = (_stable, p)=>{
             if ("function" == typeof local.ref) local.ref(node);
         }, _el$);
         spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, isCalendarDisabled() && CLASSES.Root.flag.disabled, local.class, local.className)
+                class: twMerge(CLASSES.Root.base, isCalendarDisabled() && CLASSES.Root.flag.disabled, local.class)
             }), {
             "data-slot": "calendar",
             get ["data-selection-mode"] () {

package/dist/components/card/Card.css

@@ -1,110 +1,216 @@
 @layer components {
+  /* -----------------------------------------------------------------------
+   * Root
+   *
+   * Same accent mechanism as Button and Alert: flavor or state writes
+   * --card-accent, state second so a condition outranks a preference.
+   * --------------------------------------------------------------------- */
   .card {
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
-    overflow: hidden;
-    border-radius: var(--card-radius, calc(var(--radius-box, 0.75rem) + var(--card-padding, 1rem)));
-    padding: var(--card-padding, 1rem);
-    color: var(--card-fg, var(--color-base-content));
-    background-color: var(--card-bg, var(--color-base-100));
-    border: 1px solid var(--card-border, transparent);
-    box-shadow:
-      var(
-        --card-shadow,
-        0 8px 24px -18px rgb(0 0 0 / 0.45),
-        0 6px 14px -10px rgb(0 0 0 / 0.28)
-      );
+    min-width: 0;
+
+    --card-accent: var(--color-base-300);
+    --card-accent-fg: var(--color-base-content);
+    --card-bg: var(--color-base-100);
+    --card-fg: var(--color-base-content);
+    --card-border: transparent;
+    --card-shadow: none;
+
+    background-color: var(--card-bg);
+    border: var(--border, 1px) solid var(--card-border);
+    color: var(--card-fg);
+    box-shadow: var(--card-shadow);
     transition:
-      background-color 160ms ease,
-      border-color 160ms ease,
-      box-shadow 200ms ease,
-      transform 200ms ease;
+      box-shadow 150ms ease,
+      transform 150ms ease,
+      background-color 150ms ease;
   }
 
-  .card:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
+  /* --------------------------------------------------------------- Flavor */
+  .card--flavor-neutral {
+    --card-accent: var(--color-base-300);
+    --card-accent-fg: var(--color-base-content);
+  }
+  .card--flavor-primary {
+    --card-accent: var(--color-primary);
+    --card-accent-fg: var(--color-primary-content);
+  }
+  .card--flavor-secondary {
+    --card-accent: var(--color-secondary);
+    --card-accent-fg: var(--color-secondary-content);
+  }
+  .card--flavor-accent {
+    --card-accent: var(--color-accent);
+    --card-accent-fg: var(--color-accent-content);
   }
 
-  .card--default {
-    --card-bg: var(--color-base-100);
+  /* ---------------------------------------------------------------- State */
+  .card--state-info {
+    --card-accent: var(--color-info);
+    --card-accent-fg: var(--color-info-content);
+  }
+  .card--state-success {
+    --card-accent: var(--color-success);
+    --card-accent-fg: var(--color-success-content);
+  }
+  .card--state-warning {
+    --card-accent: var(--color-warning);
+    --card-accent-fg: var(--color-warning-content);
+  }
+  .card--state-danger {
+    --card-accent: var(--color-error);
+    --card-accent-fg: var(--color-error-content);
+  }
+
+  /* -------------------------------------------------------------- Variant */
+  .card--solid {
+    --card-bg: var(--card-accent);
+    --card-fg: var(--card-accent-fg);
     --card-border: transparent;
-    --card-shadow:
-      0 8px 24px -18px rgb(0 0 0 / 0.45),
-      0 6px 14px -10px rgb(0 0 0 / 0.28);
-    --card-hover-shadow:
-      0 16px 30px -20px rgb(0 0 0 / 0.5),
-      0 8px 18px -12px rgb(0 0 0 / 0.35);
   }
 
-  .card--flat {
-    --card-bg: var(--color-base-200);
+  .card--soft {
+    --card-bg: color-mix(in oklab, var(--card-accent), var(--color-base-100) 86%);
     --card-border: transparent;
-    --card-shadow: none;
-    --card-hover-shadow: none;
   }
 
-  .card--bordered {
+  /* 62 of the fleet's Card call sites — the old `bordered`. */
+  .card--outline {
     --card-bg: var(--color-base-100);
     --card-border: var(--color-base-300);
-    --card-shadow: none;
-    --card-hover-shadow:
-      0 6px 20px -16px rgb(0 0 0 / 0.4),
-      0 5px 12px -10px rgb(0 0 0 / 0.28);
   }
 
-  .card--shadow {
+  .card--ghost {
+    --card-bg: transparent;
+    --card-border: transparent;
+  }
+
+  /* The old `flat`. */
+  .card--plain {
     --card-bg: var(--color-base-100);
     --card-border: transparent;
-    --card-shadow:
-      0 20px 40px -24px rgb(0 0 0 / 0.55),
-      0 12px 20px -14px rgb(0 0 0 / 0.35);
-    --card-hover-shadow:
-      0 26px 44px -26px rgb(0 0 0 / 0.6),
-      0 14px 24px -15px rgb(0 0 0 / 0.4);
   }
 
-  .card--hoverable,
-  .card--pressable {
+  /* ------------------------------------------------------------- Material */
+  .card--material-solid {
+    backdrop-filter: none;
+  }
+
+  /* Absorbs GlassPanel. The highlight ring was its `highlight` flag. */
+  .card--material-glass {
+    --card-bg: color-mix(
+      in oklab,
+      var(--glass-background-color),
+      transparent calc(100% - var(--glass-background-opacity, 55%))
+    );
+    --card-border: color-mix(
+      in oklab,
+      var(--glass-border-color),
+      transparent calc(100% - var(--glass-border-opacity, 12%))
+    );
+    backdrop-filter: blur(var(--card-glass-blur, var(--glass-blur, 50px)))
+      saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1));
+    -webkit-backdrop-filter: blur(var(--card-glass-blur, var(--glass-blur, 50px)))
+      saturate(var(--glass-saturation, 1.2)) brightness(var(--glass-brightness, 1));
+  }
+
+  .card--material-glass::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 var(--border, 1px) 0 0
+      color-mix(
+        in oklab,
+        var(--glass-highlight-color),
+        transparent calc(100% - var(--glass-highlight-opacity, 18%))
+      );
+  }
+
+  /* ------------------------------------------------------------ Elevation */
+  .card--elevation-none {
+    --card-shadow: none;
+  }
+  .card--elevation-sm {
+    --card-shadow: var(--shadow-sm, 0 1px 2px rgb(var(--shadow-color, 0 0 0) / 5%), 0 1px 3px rgb(var(--shadow-color, 0 0 0) / 10%));
+  }
+  .card--elevation-md {
+    --card-shadow: var(--shadow-md, 0 4px 6px -1px rgb(var(--shadow-color, 0 0 0) / 10%), 0 2px 4px -2px rgb(var(--shadow-color, 0 0 0) / 10%));
+  }
+  .card--elevation-lg {
+    --card-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(var(--shadow-color, 0 0 0) / 10%), 0 4px 6px -4px rgb(var(--shadow-color, 0 0 0) / 10%));
+  }
+
+  /* -------------------------------------------------------------- Padding */
+  .card--padding-none .card__body { padding: 0; }
+  .card--padding-xs .card__body { padding: 0.5rem; }
+  .card--padding-sm .card__body { padding: 0.75rem; }
+  .card--padding-md .card__body { padding: 1rem; }
+  .card--padding-lg .card__body { padding: 1.5rem; }
+  .card--padding-xl .card__body { padding: 2rem; }
+
+  .card--padding-none .card__header,
+  .card--padding-none .card__footer { padding: 0; }
+  .card--padding-xs .card__header,
+  .card--padding-xs .card__footer { padding: 0.5rem; }
+  .card--padding-sm .card__header,
+  .card--padding-sm .card__footer { padding: 0.75rem; }
+  .card--padding-md .card__header,
+  .card--padding-md .card__footer { padding: 1rem; }
+  .card--padding-lg .card__header,
+  .card--padding-lg .card__footer { padding: 1.5rem; }
+  .card--padding-xl .card__header,
+  .card--padding-xl .card__footer { padding: 2rem; }
+
+  /* --------------------------------------------------------------- Radius */
+  .card--radius-none { border-radius: 0; }
+  .card--radius-sm { border-radius: 0.25rem; }
+  .card--radius-md { border-radius: 0.5rem; }
+  .card--radius-lg { border-radius: var(--radius-box, 1rem); }
+  .card--radius-full { border-radius: var(--radius-pill, 9999px); }
+
+  /* ---------------------------------------------------------- Interactive */
+  .card--interactive {
     cursor: pointer;
   }
 
-  @media (hover: hover) {
-    .card--hoverable:hover,
-    .card--pressable:hover {
-      box-shadow: var(--card-hover-shadow, var(--card-shadow));
-      transform: translateY(-1px);
-    }
+  .card--interactive:hover {
+    --card-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(var(--shadow-color, 0 0 0) / 10%), 0 4px 6px -4px rgb(var(--shadow-color, 0 0 0) / 10%));
+    transform: translateY(-1px);
   }
 
-  .card--pressable:active,
-  .card--pressable[data-pressed="true"] {
-    transform: scale(0.99);
+  .card--interactive:active {
+    transform: translateY(0);
   }
 
-  .card__header,
-  .card__body,
-  .card__footer {
-    display: flex;
-    width: 100%;
+  .card--interactive:focus-visible {
+    outline: var(--focus-ring-width, 2px) solid var(--card-accent);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
+  /* ---------------------------------------------------------------- Slots */
   .card__header {
-    flex-direction: column;
-    gap: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    border-block-end: var(--border, 1px) solid color-mix(in oklab, var(--color-base-300), transparent 40%);
   }
 
   .card__body {
+    display: flex;
+    min-width: 0;
     flex: 1 1 auto;
     flex-direction: column;
-    gap: 0.5rem;
   }
 
   .card__footer {
+    display: flex;
     align-items: center;
-    flex-wrap: wrap;
     gap: 0.5rem;
+    border-block-start: var(--border, 1px) solid color-mix(in oklab, var(--color-base-300), transparent 40%);
   }
 }

package/dist/components/card/Card.generated.d.ts

@@ -1,30 +1,27 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Card.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type CardVariant = "default" | "flat" | "bordered" | "shadow";
-type CardContextlessProps<T extends HTMLElement> = Omit<JSX.HTMLAttributes<T>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element;
+import type { Flavor, Radius, Space, State, UIBaseProps, Variant } from "../vocabulary";
+export type CardMaterial = "solid" | "glass";
+export type CardElevation = "none" | "sm" | "md" | "lg";
+export type CardProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    variant?: Variant;
+    material?: CardMaterial;
+    elevation?: CardElevation;
+    flavor?: Flavor;
+    state?: State;
+    padding?: Space;
+    radius?: Radius;
+    /** Replaces isHoverable and isPressable, which had one call site each across 330. */
+    isInteractive?: boolean;
+    header?: JSX.Element;
+    footer?: JSX.Element;
+    children: JSX.Element;
 };
-export type CardRootProps = CardContextlessProps<HTMLDivElement> & {
-    variant?: CardVariant;
-    isHoverable?: boolean;
-    isPressable?: boolean;
+export type CardSectionProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    children: JSX.Element;
 };
-export type CardHeaderProps = CardContextlessProps<HTMLDivElement>;
-export type CardBodyProps = CardContextlessProps<HTMLDivElement>;
-export type CardFooterProps = CardContextlessProps<HTMLDivElement>;
-declare const CardRoot: __LayoutComponent<CardRootProps>;
-declare const CardHeader: __LayoutComponent<CardHeaderProps>;
-declare const CardBody: __LayoutComponent<CardBodyProps>;
-declare const CardFooter: __LayoutComponent<CardFooterProps>;
-declare const Card: __LayoutComponent<CardRootProps> & {
-    Root: __LayoutComponent<CardRootProps>;
-    Header: __LayoutComponent<CardHeaderProps>;
-    Body: __LayoutComponent<CardBodyProps>;
-    Content: __LayoutComponent<CardBodyProps>;
-    Footer: __LayoutComponent<CardFooterProps>;
-};
-export default Card;
-export { Card, CardRoot, CardHeader, CardBody, CardFooter };
-export type { CardRootProps as CardProps };
+export declare const CardHeaderLayout: __LayoutComponent<CardSectionProps>;
+export declare const CardBodyLayout: __LayoutComponent<CardSectionProps>;
+export declare const CardFooterLayout: __LayoutComponent<CardSectionProps>;
+export declare const CardLayout: __LayoutComponent<CardProps>;

package/dist/components/card/Card.generated.js

@@ -1,172 +1,99 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import "./Card.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./Card.recipe.js";
+import { Show } from "solid-js";
+import { card, cardBody, cardFooter, cardHeader } from "./Card.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
-const invokeEventHandler = (handler, event)=>{
-    if ("function" == typeof handler) return void handler(event);
-    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
-};
-const __solidLayoutCardRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "variant",
-        "isHoverable",
-        "isPressable",
-        "onKeyDown",
-        "role",
-        "tabIndex"
-    ]);
-    const variant = ()=>local.variant ?? "default";
-    const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
-        if (event.defaultPrevented || !local.isPressable) return;
-        if ("Enter" !== event.key && " " !== event.key) return;
-        if (event.target !== event.currentTarget) return;
-        event.preventDefault();
-        event.currentTarget.click();
-    };
-    return (()=>{
+const __solidLayoutCardHeaderLayout = (_stable, p)=>(()=>{
         var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], local.isHoverable && CLASSES.Root.flag.isHoverable, local.isPressable && CLASSES.Root.flag.isPressable, local.class, local.className)
-            }), {
-            "data-slot": "card",
-            get ["data-variant"] () {
-                return variant();
-            },
-            get ["data-hoverable"] () {
-                return local.isHoverable ? "true" : "false";
-            },
-            get ["data-pressable"] () {
-                return local.isPressable ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get role () {
-                return local.role ?? (local.isPressable ? "button" : void 0);
-            },
-            get tabIndex () {
-                return local.tabIndex ?? (local.isPressable ? 0 : void 0);
-            },
-            onKeyDown: handleKeyDown
-        }), false, true);
-        insert(_el$, ()=>local.children);
+        spread(_el$, mergeProps(()=>_stable.slot.root), false, true);
+        insert(_el$, ()=>_stable.children);
         return _el$;
     })();
-};
-const CardRoot = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutCardRoot,
+const CardHeaderLayout = defineComponent({
+    recipe: cardHeader,
+    layout: __solidLayoutCardHeaderLayout,
     embedded: true
 });
-const __solidLayoutCardHeader = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
+const __solidLayoutCardBodyLayout = (_stable, p)=>(()=>{
         var _el$2 = _tmpl$();
-        spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Header.base, local.class, local.className)
-            }), {
-            "data-slot": "card-header",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$2, ()=>local.children);
+        spread(_el$2, mergeProps(()=>_stable.slot.root), false, true);
+        insert(_el$2, ()=>_stable.children);
         return _el$2;
     })();
-};
-const CardHeader = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutCardHeader,
+const CardBodyLayout = defineComponent({
+    recipe: cardBody,
+    layout: __solidLayoutCardBodyLayout,
     embedded: true
 });
-const __solidLayoutCardBody = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
+const __solidLayoutCardFooterLayout = (_stable, p)=>(()=>{
         var _el$3 = _tmpl$();
-        spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Body.base, local.class, local.className)
-            }), {
-            "data-slot": "card-body",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$3, ()=>local.children);
+        spread(_el$3, mergeProps(()=>_stable.slot.root), false, true);
+        insert(_el$3, ()=>_stable.children);
         return _el$3;
     })();
-};
-const CardBody = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutCardBody,
+const CardFooterLayout = defineComponent({
+    recipe: cardFooter,
+    layout: __solidLayoutCardFooterLayout,
     embedded: true
 });
-const __solidLayoutCardFooter = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style"
-    ]);
+const __solidLayoutCardLayout = (_stable, p)=>{
+    const handleKeyDown = (event)=>{
+        if (!p.isInteractive) return;
+        if ("Enter" !== event.key && " " !== event.key) return;
+        if (event.target !== event.currentTarget) return;
+        event.preventDefault();
+        event.currentTarget.click();
+    };
     return (()=>{
         var _el$4 = _tmpl$();
-        spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Footer.base, local.class, local.className)
-            }), {
-            "data-slot": "card-footer",
-            get ["data-theme"] () {
-                return local.dataTheme;
+        spread(_el$4, mergeProps(()=>_stable.slot.root, {
+            get role () {
+                return p.role ?? (p.isInteractive ? "button" : void 0);
             },
-            get style () {
-                return local.style;
+            get tabIndex () {
+                return p.tabIndex ?? (p.isInteractive ? 0 : void 0);
+            },
+            onKeyDown: handleKeyDown,
+            get ["data-flavor"] () {
+                return p.flavor ?? "neutral";
             }
         }), false, true);
-        insert(_el$4, ()=>local.children);
+        insert(_el$4, createComponent(Show, {
+            get when () {
+                return p.header;
+            },
+            get children () {
+                return createComponent(CardHeaderLayout, {
+                    get children () {
+                        return p.header;
+                    }
+                });
+            }
+        }), null);
+        insert(_el$4, createComponent(CardBodyLayout, {
+            get children () {
+                return _stable.children;
+            }
+        }), null);
+        insert(_el$4, createComponent(Show, {
+            get when () {
+                return p.footer;
+            },
+            get children () {
+                return createComponent(CardFooterLayout, {
+                    get children () {
+                        return p.footer;
+                    }
+                });
+            }
+        }), null);
         return _el$4;
     })();
 };
-const CardFooter = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutCardFooter,
+const CardLayout = defineComponent({
+    recipe: card,
+    layout: __solidLayoutCardLayout,
     embedded: true
 });
-const Card = Object.assign(CardRoot, {
-    Root: CardRoot,
-    Header: CardHeader,
-    Body: CardBody,
-    Content: CardBody,
-    Footer: CardFooter
-});
-const Card_generated = Card;
-export default Card_generated;
-export { Card, CardBody, CardFooter, CardHeader, CardRoot };
+export { CardBodyLayout, CardFooterLayout, CardHeaderLayout, CardLayout };