@fairfox/polly 0.29.3 → 0.30.0

package/dist/src/polly-ui/Modal.d.ts

@@ -8,7 +8,7 @@
  * callback), and the body scroll locks.
  */
 import type { ReadonlySignal } from "@preact/signals";
-import { type ComponentChildren } from "preact";
+import { type ComponentChildren, type JSX } from "preact";
 type RootProps = {
     when: ReadonlySignal<boolean> | boolean;
     onClose?: () => void;
@@ -17,28 +17,31 @@ type RootProps = {
     "aria-label"?: string;
 };
 declare function Root({ when, onClose, children, "aria-label": ariaLabel }: RootProps): import("preact").VNode<any> | null;
-declare function Backdrop(): import("preact").JSX.Element;
-declare function Content({ children }: {
+declare function Backdrop(): JSX.Element;
+type ContentProps = {
     children: ComponentChildren;
-}): import("preact").JSX.Element;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+declare function Content({ children, className, style }: ContentProps): JSX.Element;
 declare function Header({ children }: {
     children: ComponentChildren;
-}): import("preact").JSX.Element;
+}): JSX.Element;
 declare function Title({ children }: {
     children: ComponentChildren;
-}): import("preact").JSX.Element;
+}): JSX.Element;
 declare function Body({ children }: {
     children: ComponentChildren;
-}): import("preact").JSX.Element;
+}): JSX.Element;
 declare function Footer({ children }: {
     children: ComponentChildren;
-}): import("preact").JSX.Element;
+}): JSX.Element;
 type CloseProps = {
     children: ComponentChildren;
     /** Fire a registered data-action instead of calling the onClose callback. */
     action?: string;
 };
-declare function Close({ children, action }: CloseProps): import("preact").JSX.Element;
+declare function Close({ children, action }: CloseProps): JSX.Element;
 export declare const Modal: {
     Root: typeof Root;
     Backdrop: typeof Backdrop;

package/dist/src/polly-ui/Surface.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Surface — the one primitive that owns visual-surface concerns.
+ *
+ * Where Layout governs spatial concerns (grid, flex, gap, alignment),
+ * Surface governs the chrome that sits on top of layout: padding,
+ * background, border, radius, shadow, and the narrow positioning idioms
+ * (sticky strips, fixed floating panes) that consumers reach for inline
+ * styles to express. Every prop maps to a `--polly-*` token through a
+ * local `--s-*` custom property, so consumers can retheme an individual
+ * Surface by overriding the polly token in `style` without touching the
+ * primitive's CSS.
+ */
+import { type ComponentChildren, type JSX } from "preact";
+export type SurfaceVariant = "plain" | "raised" | "sunken" | "bubble" | "chip" | "callout" | "floating" | "sticky-bar";
+type Background = "raised" | "sunken" | "transparent" | (string & {});
+type Radius = "none" | "sm" | "md" | "lg" | "full";
+type Border = "none" | "default" | "strong";
+type BorderWidth = "none" | "default" | "medium" | "thick";
+type BorderSides = "all" | "block-start" | "block-end" | "inline-start" | "inline-end" | "block" | "inline";
+type Shadow = "none" | "sm" | "md" | "lg";
+type Position = "static" | "relative" | "sticky" | "fixed";
+/**
+ * Arbitrary `data-*` and `aria-*` attributes forwarded to the rendered element
+ * so consumers (Modal, Toast, Card, etc.) can compose Surface without losing
+ * DOM hooks or ARIA semantics.
+ */
+export type SurfaceDataAttrs = {
+    [dataAttr: `data-${string}`]: string | number | boolean | undefined;
+    [ariaAttr: `aria-${string}`]: string | number | boolean | undefined;
+};
+export type SurfaceProps = SurfaceDataAttrs & {
+    children?: ComponentChildren;
+    /** Polymorphic element (div, section, article, aside, header, …). Defaults to 'div'. */
+    as?: keyof JSX.IntrinsicElements;
+    /** Named preset that resolves to a default bundle of the props below. Explicit props override. */
+    variant?: SurfaceVariant;
+    /** Any CSS length, typically `var(--polly-space-*)`. */
+    padding?: string;
+    /** Named values map to `var(--polly-surface-*)`; raw strings pass through for one-off colours. */
+    background?: Background;
+    radius?: Radius;
+    border?: Border;
+    borderWidth?: BorderWidth;
+    borderSides?: BorderSides;
+    shadow?: Shadow;
+    /** display: inline-block — Surface flows inline with surrounding text. */
+    inline?: boolean;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+    maxInlineSize?: string;
+    position?: Position;
+    /** Any CSS inset value (`'0'`, `'auto auto 1rem 1rem'`, `'1rem'`, …). */
+    inset?: string;
+    zIndex?: number;
+    className?: string;
+    /**
+     * Per-instance overrides. The supported retint path is to set polly tokens
+     * here, e.g. `style={{ "--polly-surface-raised": "#fef3c7" }}`. Surface
+     * merges this into its own computed style.
+     */
+    style?: JSX.CSSProperties;
+    id?: string;
+    role?: JSX.AriaRole;
+    tabIndex?: number;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    onClick?: JSX.MouseEventHandler<HTMLElement>;
+    onKeyDown?: JSX.KeyboardEventHandler<HTMLElement>;
+};
+export declare function Surface(props: SurfaceProps): JSX.Element;
+export {};

package/dist/src/polly-ui/index.css

@@ -261,6 +261,77 @@
   }
 }
 
+/* src/polly-ui/Surface.module.css */
+@layer polly-components {
+  .surface_pQCFqA {
+    --s-p: 0;
+    --s-bg: transparent;
+    --s-radius: 0;
+    --s-border-color: transparent;
+    --s-border-width: 0;
+    --s-shadow: none;
+    --s-w: auto;
+    --s-h: auto;
+    --s-mh: auto;
+    --s-mis: none;
+    --s-position: static;
+    --s-inset: auto;
+    --s-z: auto;
+    box-sizing: border-box;
+    padding: var(--s-p);
+    background: var(--s-bg);
+    border-style: solid;
+    border-color: var(--s-border-color);
+    border-width: var(--s-border-width);
+    border-radius: var(--s-radius);
+    box-shadow: var(--s-shadow);
+    inline-size: var(--s-w);
+    block-size: var(--s-h);
+    min-block-size: var(--s-mh);
+    max-inline-size: var(--s-mis);
+    position: var(--s-position);
+    inset: var(--s-inset);
+    z-index: var(--s-z);
+  }
+
+  .inline_pQCFqA {
+    display: inline-block;
+    inline-size: auto;
+  }
+
+  .sides-block-start_pQCFqA {
+    border-style: none;
+    border-block-start-style: solid;
+  }
+
+  .sides-block-end_pQCFqA {
+    border-style: none;
+    border-block-end-style: solid;
+  }
+
+  .sides-inline-start_pQCFqA {
+    border-style: none;
+    border-inline-start-style: solid;
+  }
+
+  .sides-inline-end_pQCFqA {
+    border-style: none;
+    border-inline-end-style: solid;
+  }
+
+  .sides-block_pQCFqA {
+    border-style: none;
+    border-block-start-style: solid;
+    border-block-end-style: solid;
+  }
+
+  .sides-inline_pQCFqA {
+    border-style: none;
+    border-left-style: solid;
+    border-right-style: solid;
+  }
+}
+
 /* src/polly-ui/Checkbox.module.css */
 @layer polly-components {
   .checkbox_EKE5sg {
@@ -404,13 +475,8 @@
   }
 
   .surface_fLMrWA {
-    position: relative;
     pointer-events: auto;
-    background: var(--polly-surface-raised);
     color: var(--polly-text);
-    border: var(--polly-border-width-default) solid var(--polly-border);
-    border-radius: var(--polly-radius-lg);
-    box-shadow: var(--polly-shadow-lg);
     max-inline-size: min(640px, calc(100vw - 2 * var(--polly-space-lg)));
     max-block-size: calc(100vh - 2 * var(--polly-space-lg));
     overflow: auto;
@@ -717,23 +783,18 @@
     display: grid;
     grid-template-columns: 1fr auto;
     gap: var(--polly-space-md);
-    padding: var(--polly-space-md) var(--polly-space-lg);
-    background: var(--polly-surface-raised);
     color: var(--polly-text);
-    border: var(--polly-border-width-default) solid var(--polly-border);
-    border-radius: var(--polly-radius-md);
-    box-shadow: var(--polly-shadow-md);
     align-items:  center;
     min-inline-size: 16em;
     max-inline-size: 28em;
   }
 
   .item_xVzRuA[data-severity="error"] {
-    border-color: var(--polly-danger);
+    --polly-border: var(--polly-danger);
   }
 
   .item_xVzRuA[data-severity="warning"] {
-    border-color: var(--polly-warning);
+    --polly-border: var(--polly-warning);
   }
 
   .message_xVzRuA {

package/dist/src/polly-ui/index.d.ts

@@ -11,6 +11,7 @@ export { ActionForm, type ActionFormProps } from "./ActionForm.tsx";
 export { ActionInput, type ActionInputProps, type ActionInputSaveOn, type ActionInputVariant, } from "./ActionInput.tsx";
 export { Badge, type BadgeProps, type BadgeVariant } from "./Badge.tsx";
 export { Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonTier, } from "./Button.tsx";
+export { Card, type CardProps, type CardSlotProps } from "./Card.tsx";
 export { Checkbox, type CheckboxProps } from "./Checkbox.tsx";
 export { Collapsible, type CollapsibleProps } from "./Collapsible.tsx";
 export { ConfirmDialog, type ConfirmOptions, confirm } from "./ConfirmDialog.tsx";
@@ -20,6 +21,7 @@ export { Modal } from "./Modal.tsx";
 export { getOverlayRootNode, OverlayRoot } from "./OverlayRoot.tsx";
 export { Select, type SelectOption, type SelectProps } from "./Select.tsx";
 export { Skeleton, type SkeletonProps, type SkeletonVariant } from "./Skeleton.tsx";
+export { Surface, type SurfaceProps, type SurfaceVariant } from "./Surface.tsx";
 export { type Tab, Tabs, type TabsProps } from "./Tabs.tsx";
 export { TextInput, type TextInputProps } from "./TextInput.tsx";
 export { Toast, type ToastViewportProps } from "./Toast.tsx";