@pearpages/pulp-react 0.0.0

package/dist/toast.css

@@ -0,0 +1,300 @@
+/* src/icon/Icon.module.css */
+@layer components {
+  .Icon_icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    font-size: var(--icon-size-md);
+    vertical-align: middle;
+    &[data-size=sm] {
+      font-size: var(--icon-size-sm);
+    }
+    &[data-size=lg] {
+      font-size: var(--icon-size-lg);
+    }
+    &[data-size=inherit] {
+      font-size: inherit;
+    }
+    & > * {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}
+
+/* src/visually-hidden/VisuallyHidden.module.css */
+@layer components {
+  .VisuallyHidden_root {
+    position: absolute;
+    inline-size: var(--visually-hidden-size);
+    block-size: var(--visually-hidden-size);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* src/spinner/Spinner.module.css */
+@layer components {
+  .Spinner_spinner {
+    --_size: var(--spinner-size-md);
+    --_track: var(--spinner-track);
+    --_indicator: var(--spinner-indicator);
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--_size);
+    block-size: var(--_size);
+    vertical-align: middle;
+    &[data-size=sm] {
+      --_size: var(--spinner-size-sm);
+    }
+    &[data-size=lg] {
+      --_size: var(--spinner-size-lg);
+    }
+    &[data-size=inherit] {
+      --_size: 1em;
+    }
+    &[data-tone=inherit] {
+      --_track: transparent;
+      --_indicator: currentcolor;
+    }
+  }
+  .Spinner_ring {
+    inline-size: 100%;
+    block-size: 100%;
+    border: var(--spinner-width) solid var(--_track);
+    border-block-start-color: var(--_indicator);
+    border-radius: var(--radius-full);
+    animation: Spinner_spin var(--spinner-duration) linear infinite;
+  }
+  @keyframes Spinner_spin {
+    to {
+      rotate: 1turn;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Spinner_ring {
+      animation: none;
+    }
+  }
+}
+
+/* src/button/Button.module.css */
+@layer components {
+  .Button_button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--button-gap);
+    min-block-size: var(--button-height-md);
+    padding-block: 0;
+    padding-inline: var(--button-padding-inline-md);
+    border: 1px solid transparent;
+    border-radius: var(--button-radius);
+    font-family: var(--button-font-family);
+    font-size: var(--button-font-size-md);
+    font-weight: var(--button-font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--button-motion-duration) var(--motion-easing-standard),
+      border-color var(--button-motion-duration) var(--motion-easing-standard),
+      color var(--button-motion-duration) var(--motion-easing-standard);
+    &:focus-visible {
+      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);
+      outline-offset: var(--button-focus-ring-offset);
+    }
+    &:disabled,
+    &[aria-disabled=true] {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    &[data-loading] {
+      cursor: progress;
+    }
+    &[data-size=sm] {
+      min-block-size: var(--button-height-sm);
+      padding-inline: var(--button-padding-inline-sm);
+      font-size: var(--button-font-size-sm);
+    }
+    &[data-size=lg] {
+      min-block-size: var(--button-height-lg);
+      padding-inline: var(--button-padding-inline-lg);
+      font-size: var(--button-font-size-lg);
+    }
+    &[data-variant=primary] {
+      background-color: var(--button-primary-bg);
+      color: var(--button-primary-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-primary-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-primary-bg-active);
+      }
+    }
+    &[data-variant=secondary] {
+      background-color: var(--button-secondary-bg);
+      border-color: var(--button-secondary-border);
+      color: var(--button-secondary-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-secondary-bg-hover);
+      }
+    }
+    &[data-variant=ghost] {
+      background-color: transparent;
+      color: var(--button-ghost-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-ghost-bg-hover);
+      }
+    }
+  }
+  .Button_label {
+    display: inline-block;
+  }
+}
+
+/* src/icon-button/IconButton.module.css */
+@layer components {
+  .IconButton_iconButton[data-icon-only] {
+    gap: 0;
+    inline-size: var(--icon-button-size-md);
+    padding-inline: 0;
+    &[data-size=sm] {
+      inline-size: var(--icon-button-size-sm);
+    }
+    &[data-size=lg] {
+      inline-size: var(--icon-button-size-lg);
+    }
+  }
+}
+
+/* src/alert/Alert.module.css */
+@layer components {
+  .Alert_alert {
+    --_bg: var(--alert-info-bg);
+    --_accent: var(--alert-info-accent);
+    --_title: var(--alert-info-title);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--alert-gap);
+    padding: var(--alert-padding);
+    border: var(--alert-border-width) solid var(--_accent);
+    border-inline-start-width: var(--alert-accent-width);
+    border-radius: var(--alert-radius);
+    background-color: var(--_bg);
+    color: var(--alert-fg);
+    font-size: var(--alert-font-size);
+    &[data-tone=info] {
+      --_bg: var(--alert-info-bg);
+      --_accent: var(--alert-info-accent);
+      --_title: var(--alert-info-title);
+    }
+    &[data-tone=success] {
+      --_bg: var(--alert-success-bg);
+      --_accent: var(--alert-success-accent);
+      --_title: var(--alert-success-title);
+    }
+    &[data-tone=warning] {
+      --_bg: var(--alert-warning-bg);
+      --_accent: var(--alert-warning-accent);
+      --_title: var(--alert-warning-title);
+    }
+    &[data-tone=error] {
+      --_bg: var(--alert-error-bg);
+      --_accent: var(--alert-error-accent);
+      --_title: var(--alert-error-title);
+    }
+  }
+  .Alert_icon {
+    flex: none;
+    color: var(--_accent);
+  }
+  .Alert_body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-inline-size: 0;
+  }
+  .Alert_title {
+    margin: 0;
+    color: var(--_title);
+    font-weight: var(--alert-title-font-weight);
+  }
+  .Alert_content {
+    overflow-wrap: anywhere;
+  }
+  .Alert_action {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    margin-block-start: var(--space-1);
+  }
+  .Alert_dismiss {
+    flex: none;
+    margin-block: calc(-1 * var(--space-1));
+    margin-inline-end: calc(-1 * var(--space-2));
+  }
+}
+
+/* src/toast/Toast.module.css */
+@layer components {
+  .Toast_region {
+    --_top: auto;
+    --_end: var(--toast-offset);
+    --_bottom: var(--toast-offset);
+    --_start: auto;
+    position: fixed;
+    z-index: var(--toast-layer);
+    inset: var(--_top) var(--_end) var(--_bottom) var(--_start);
+    inline-size: min(var(--toast-width), 100vw);
+    padding: 0;
+    pointer-events: none;
+    &[data-placement=top-end] {
+      --_top: var(--toast-offset);
+      --_bottom: auto;
+    }
+    &[data-placement=top-center] {
+      --_top: var(--toast-offset);
+      --_bottom: auto;
+      --_start: 0;
+      --_end: 0;
+      margin-inline: auto;
+    }
+  }
+  .Toast_list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .Toast_item {
+    pointer-events: auto;
+    animation: Toast_enter var(--toast-motion-duration) var(--motion-easing-standard);
+  }
+  .Toast_toast {
+    border-radius: var(--toast-radius);
+    box-shadow: var(--toast-shadow);
+  }
+  @keyframes Toast_enter {
+    from {
+      opacity: 0;
+      translate: 0 var(--space-2);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Toast_item {
+      animation: none;
+    }
+  }
+}
+/*# sourceMappingURL=toast.css.map */

package/dist/toast.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/alert/Alert.module.css","../src/toast/Toast.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","/* Every value is a token (--alert-*). Tone resolves into private custom properties. */\n\n@layer components {\n  .alert {\n    --_bg: var(--alert-info-bg);\n    --_accent: var(--alert-info-accent);\n    --_title: var(--alert-info-title);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--alert-gap);\n    padding: var(--alert-padding);\n    border: var(--alert-border-width) solid var(--_accent);\n    border-inline-start-width: var(--alert-accent-width);\n    border-radius: var(--alert-radius);\n    background-color: var(--_bg);\n    color: var(--alert-fg);\n    font-size: var(--alert-font-size);\n\n    &[data-tone=\"info\"] {\n      --_bg: var(--alert-info-bg);\n      --_accent: var(--alert-info-accent);\n      --_title: var(--alert-info-title);\n    }\n\n    &[data-tone=\"success\"] {\n      --_bg: var(--alert-success-bg);\n      --_accent: var(--alert-success-accent);\n      --_title: var(--alert-success-title);\n    }\n\n    &[data-tone=\"warning\"] {\n      --_bg: var(--alert-warning-bg);\n      --_accent: var(--alert-warning-accent);\n      --_title: var(--alert-warning-title);\n    }\n\n    &[data-tone=\"error\"] {\n      --_bg: var(--alert-error-bg);\n      --_accent: var(--alert-error-accent);\n      --_title: var(--alert-error-title);\n    }\n  }\n\n  .icon {\n    flex: none;\n    color: var(--_accent);\n  }\n\n  .body {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--space-1);\n    min-inline-size: 0;\n  }\n\n  .title {\n    margin: 0;\n    color: var(--_title);\n    font-weight: var(--alert-title-font-weight);\n  }\n\n  .content {\n    overflow-wrap: anywhere;\n  }\n\n  .action {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--space-2);\n    margin-block-start: var(--space-1);\n  }\n\n  .dismiss {\n    flex: none;\n    margin-block: calc(-1 * var(--space-1));\n    margin-inline-end: calc(-1 * var(--space-2));\n  }\n}\n","/* Every value is a token (--toast-*). The region is fixed; placement is a data attribute. */\n\n@layer components {\n  .region {\n    --_top: auto;\n    --_end: var(--toast-offset);\n    --_bottom: var(--toast-offset);\n    --_start: auto;\n\n    position: fixed;\n    z-index: var(--toast-layer);\n    inset: var(--_top) var(--_end) var(--_bottom) var(--_start);\n    inline-size: min(var(--toast-width), 100vw);\n    padding: 0;\n    pointer-events: none;\n\n    &[data-placement=\"top-end\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n    }\n\n    &[data-placement=\"top-center\"] {\n      --_top: var(--toast-offset);\n      --_bottom: auto;\n      --_start: 0;\n      --_end: 0;\n\n      margin-inline: auto;\n    }\n  }\n\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--toast-gap);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .item {\n    pointer-events: auto;\n    animation: enter var(--toast-motion-duration) var(--motion-easing-standard);\n  }\n\n  .toast {\n    border-radius: var(--toast-radius);\n    box-shadow: var(--toast-shadow);\n  }\n\n  @keyframes enter {\n    from {\n      opacity: 0;\n      translate: 0 var(--space-2);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .item {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","alert","icon","body","title","content","action","dismiss","region","list","item","toast","enter"]}

package/dist/toast.d.ts

@@ -0,0 +1,60 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AlertTone } from './alert.js';
+
+type ToastPlacement = 'bottom-end' | 'top-end' | 'top-center';
+interface ToastProviderProps {
+    /** @default 'bottom-end' */
+    placement?: ToastPlacement;
+    /** Most toasts shown at once; the oldest is dismissed first. @default 5 */
+    max?: number;
+    /** Default auto-dismiss time in milliseconds. @default 6000 */
+    duration?: number;
+    /** Accessible name of the region. @default 'Notifications' */
+    label?: string;
+    children: ReactNode;
+}
+/**
+ * Mount once near the app root. Owns a portal element with a polite live
+ * region; `useToast()` adds notifications to it. Timers pause while the
+ * region is hovered or holds focus, Escape dismisses the focused toast, and
+ * error toasts stay until dismissed. Each toast is an Alert.
+ *
+ * @status stable
+ * @category Feedback
+ * @accessibility Owns a `region` named "Notifications" with `aria-live="polite"`; each toast is an Alert with its live role off (the region announces). Timers pause while the region is hovered or holds focus; Escape dismisses the focused toast; error toasts stay until dismissed.
+ * @do Mount it once near the app root.
+ * Keep messages to one sentence; put detail behind an `action`.
+ * @dont Use a toast for an error the user must fix in a form; show it at the field.
+ * Stack more than a few; the cap drops the oldest.
+ */
+declare function ToastProvider({ placement, max, duration, label, children }: ToastProviderProps): react.JSX.Element;
+declare namespace ToastProvider {
+    var displayName: string;
+}
+
+interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    /** @default 'info' */
+    tone?: AlertTone;
+    /** Milliseconds before auto-dismiss; `Infinity` keeps it until dismissed. Errors default to `Infinity`. */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface ToastItem extends ToastOptions {
+    id: string;
+}
+interface ToastContextValue {
+    /** Shows a toast and returns its id. */
+    toast: (options: ToastOptions) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+/** The toast API. Must be used inside `ToastProvider`. */
+declare function useToast(): ToastContextValue;
+
+export { type ToastContextValue, type ToastItem, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, useToast };

package/dist/toast.js

@@ -0,0 +1,11 @@
+export { ToastProvider, useToast } from './chunk-DXOOW6Q6.js';
+import './chunk-PM4YO67Q.js';
+import './chunk-FXRSZUDH.js';
+import './chunk-KPQGS4PG.js';
+import './chunk-I4KC4V6A.js';
+import './chunk-ZVDN3GRI.js';
+import './chunk-Z4PN6B2C.js';
+import './chunk-ASNTNTJW.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=toast.js.map
+//# sourceMappingURL=toast.js.map

package/dist/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"toast.js"}

package/dist/tooltip.css

@@ -0,0 +1,36 @@
+/* src/internal/floating.css */
+@property --_gap { syntax: "<length>"; inherits: false; initial-value: 0px; }
+
+/* src/tooltip/Tooltip.module.css */
+@layer components {
+  .Tooltip_tooltip {
+    --_gap: var(--tooltip-gap);
+    position: fixed;
+    z-index: var(--tooltip-layer);
+    inset-block-start: var(--_y);
+    inset-inline-start: var(--_x);
+    max-inline-size: var(--tooltip-max-width);
+    padding-block: var(--tooltip-padding-block);
+    padding-inline: var(--tooltip-padding-inline);
+    border-radius: var(--tooltip-radius);
+    background-color: var(--tooltip-bg);
+    color: var(--tooltip-fg);
+    font-family: var(--font-family-body);
+    font-size: var(--tooltip-font-size);
+    line-height: var(--font-line-height-normal);
+    box-shadow: var(--tooltip-shadow);
+    pointer-events: none;
+    animation: Tooltip_fade var(--tooltip-duration) var(--motion-easing-standard);
+  }
+  @keyframes Tooltip_fade {
+    from {
+      opacity: 0;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .Tooltip_tooltip {
+      animation: none;
+    }
+  }
+}
+/*# sourceMappingURL=tooltip.css.map */

package/dist/tooltip.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/floating.css","../src/tooltip/Tooltip.module.css"],"sourcesContent":["/*\n * Registers the gap the floating hook reads. An unregistered custom property\n * computes to its specified text (\"calc(0.25rem * 2)\"), which no number\n * parser can use; a registered <length> computes to pixels (\"8px\"). Browsers\n * without @property (Firefox before 128) fall back to a gap of 0.\n * Outside the components layer on purpose: registration is not cascaded.\n */\n\n@property --_gap {\n  syntax: \"<length>\";\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- a registered <length> needs a unit in its initial value */\n  initial-value: 0px;\n}\n","/* Every value is a token (--tooltip-*). Position comes in as --_x/--_y from the floating hook. */\n\n@layer components {\n  .tooltip {\n    --_gap: var(--tooltip-gap);\n\n    position: fixed;\n    z-index: var(--tooltip-layer);\n    inset-block-start: var(--_y);\n    inset-inline-start: var(--_x);\n    max-inline-size: var(--tooltip-max-width);\n    padding-block: var(--tooltip-padding-block);\n    padding-inline: var(--tooltip-padding-inline);\n    border-radius: var(--tooltip-radius);\n    background-color: var(--tooltip-bg);\n    color: var(--tooltip-fg);\n    font-family: var(--font-family-body);\n    font-size: var(--tooltip-font-size);\n    line-height: var(--font-line-height-normal);\n    box-shadow: var(--tooltip-shadow);\n    pointer-events: none;\n    animation: fade var(--tooltip-duration) var(--motion-easing-standard);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .tooltip {\n      animation: none;\n    }\n  }\n}\n"],"mappings":";AAQA,UAAU,OAAO,EACf,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,KAAK,EAEf,aAAa,EAAE,GAAG;;;ACVpB;AACE,GAACA;AACC,YAAQ,IAAI;AAEZ,cAAU;AACV,aAAS,IAAI;AACb,uBAAmB,IAAI;AACvB,wBAAoB,IAAI;AACxB,qBAAiB,IAAI;AACrB,mBAAe,IAAI;AACnB,oBAAgB,IAAI;AACpB,mBAAe,IAAI;AACnB,sBAAkB,IAAI;AACtB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,oBAAgB;AAChB,eAAW,aAAK,IAAI,oBAAoB,IAAI;AAC9C;AAEA,aAHaC;AAIX;AACE,eAAS;AACX;AACF;AAEA,UAAO,wBAAyB;AAC9B,KA5BDD;AA6BG,iBAAW;AACb;AACF;AACF;","names":["tooltip","fade"]}

package/dist/tooltip.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { F as FloatingPlacement } from './floating-Bw-LN_QT.js';
+import '@floating-ui/react-dom';
+
+type TooltipPlacement = FloatingPlacement;
+interface TooltipProps {
+    /** The tooltip text. Supplementary only: it must not be the control's only name. */
+    content: ReactNode;
+    /** Preferred side; flips when there is no room. @default 'top' */
+    placement?: TooltipPlacement;
+    /** Hover delay in milliseconds. Focus shows immediately. @default 300 */
+    delay?: number;
+    /** The single element that owns the tooltip; it receives the hover, focus and `aria-describedby` wiring. */
+    children: ReactElement;
+}
+/**
+ * A short description shown on hover or focus and linked with
+ * `aria-describedby` while visible. Never the only name of a control: use it
+ * for extra detail, and give icon-only controls a real label. Escape hides it.
+ *
+ * @status stable
+ * @category Overlays
+ * @accessibility Shown on hover after a delay and on focus immediately; the trigger gets `aria-describedby` pointing at the `tooltip` while it is visible; Escape hides it. It is a description, never a name.
+ * @do Use it for extra detail on controls that already have a name.
+ * @dont Put interactive content in it.
+ * Use it to name an icon-only control; use IconButton's `label`.
+ */
+declare function Tooltip({ content, placement, delay, children }: TooltipProps): react.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+
+export { Tooltip, type TooltipPlacement, type TooltipProps };

package/dist/tooltip.js

@@ -0,0 +1,5 @@
+export { Tooltip } from './chunk-Y4TZA77G.js';
+import './chunk-U6QRAD73.js';
+import './chunk-ZVDN3GRI.js';
+//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tooltip.js"}

package/dist/visually-hidden.css

@@ -0,0 +1,15 @@
+/* src/visually-hidden/VisuallyHidden.module.css */
+@layer components {
+  .VisuallyHidden_root {
+    position: absolute;
+    inline-size: var(--visually-hidden-size);
+    block-size: var(--visually-hidden-size);
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+/*# sourceMappingURL=visually-hidden.css.map */

package/dist/visually-hidden.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.module.css"],"sourcesContent":["/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n"],"mappings":";AAEA;AACE,GAACA;AACC,cAAU;AACV,iBAAa,IAAI;AACjB,gBAAY,IAAI;AAChB,aAAS;AACT,YAAQ;AACR,cAAU;AACV,eAAW,MAAM;AACjB,iBAAa;AACb,YAAQ;AACV;AACF;","names":["root"]}