plass-ui 0.0.1 → 1.0.0

package/dist/css/number-field.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <number-field>. Needs `plass-ui/css/base.css` first. */
+@source '../components/number-field';

package/dist/css/otp-field.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <otp-field>. Needs `plass-ui/css/base.css` first. */
+@source '../components/otp-field';

package/dist/css/overlay.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <overlay>. Needs `plass-ui/css/base.css` first. */
+@source '../components/overlay';

package/dist/css/pagination.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <pagination>. Needs `plass-ui/css/base.css` first. */
+@source '../components/pagination';

package/dist/css/panes.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <panes>. Needs `plass-ui/css/base.css` first. */
+@source '../components/panes';

package/dist/css/pill.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <pill>. Needs `plass-ui/css/base.css` first. */
+@source '../components/pill';

package/dist/css/popover.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <popover>. Needs `plass-ui/css/base.css` first. */
+@source '../components/popover';

package/dist/css/progress-box.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <progress-box>. Needs `plass-ui/css/base.css` first. */
+@source '../components/progress-box';

package/dist/css/progress-circular.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <progress-circular>. Needs `plass-ui/css/base.css` first. */
+@source '../components/progress-circular';

package/dist/css/progress-linear.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <progress-linear>. Needs `plass-ui/css/base.css` first. */
+@source '../components/progress-linear';

package/dist/css/radio-group.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <radio-group>. Needs `plass-ui/css/base.css` first. */
+@source '../components/radio-group';

package/dist/css/rating.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <rating>. Needs `plass-ui/css/base.css` first. */
+@source '../components/rating';

package/dist/css/scroll-zone.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <scroll-zone>. Needs `plass-ui/css/base.css` first. */
+@source '../components/scroll-zone';

package/dist/css/segmented-button.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <segmented-button>. Needs `plass-ui/css/base.css` first. */
+@source '../components/segmented-button';

package/dist/css/select.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <select>. Needs `plass-ui/css/base.css` first. */
+@source '../components/select';

package/dist/css/skeleton.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <skeleton>. Needs `plass-ui/css/base.css` first. */
+@source '../components/skeleton';

package/dist/css/slider.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <slider>. Needs `plass-ui/css/base.css` first. */
+@source '../components/slider';

package/dist/css/spoiler.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <spoiler>. Needs `plass-ui/css/base.css` first. */
+@source '../components/spoiler';

package/dist/css/switch.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <switch>. Needs `plass-ui/css/base.css` first. */
+@source '../components/switch';

package/dist/css/table.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <table>. Needs `plass-ui/css/base.css` first. */
+@source '../components/table';

package/dist/css/tabs.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <tabs>. Needs `plass-ui/css/base.css` first. */
+@source '../components/tabs';

package/dist/css/text-field.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <text-field>. Needs `plass-ui/css/base.css` first. */
+@source '../components/text-field';

package/dist/css/text-link.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <text-link>. Needs `plass-ui/css/base.css` first. */
+@source '../components/text-link';

package/dist/css/time-picker.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <time-picker>. Needs `plass-ui/css/base.css` first. */
+@source '../components/time-picker';

package/dist/css/timeline.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <timeline>. Needs `plass-ui/css/base.css` first. */
+@source '../components/timeline';

package/dist/css/toast.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <toast>. Needs `plass-ui/css/base.css` first. */
+@source '../components/toast';

package/dist/css/toolbar.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <toolbar>. Needs `plass-ui/css/base.css` first. */
+@source '../components/toolbar';

package/dist/css/tooltip.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <tooltip>. Needs `plass-ui/css/base.css` first. */
+@source '../components/tooltip';

package/dist/css/typography.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <typography>. Needs `plass-ui/css/base.css` first. */
+@source '../components/typography';

package/dist/index.d.ts

@@ -1,3 +1,75 @@
-export * from './types';
-export * from './components/button';
-export * from './components/text-field';
+export * from './types.js';
+export * from './components/accordion/index.js';
+export * from './components/alert/index.js';
+export * from './components/animate-appear/index.js';
+export * from './components/animate-blink/index.js';
+export * from './components/animate-fade/index.js';
+export * from './components/animate-grow/index.js';
+export * from './components/animate-headline/index.js';
+export * from './components/animate-lighting/index.js';
+export * from './components/animate-marquee/index.js';
+export * from './components/animate-rotate/index.js';
+export * from './components/animate-slide/index.js';
+export * from './components/animate-typing/index.js';
+export * from './components/animate-zoom/index.js';
+export * from './components/aspect-ratio/index.js';
+export * from './components/avatar/index.js';
+export * from './components/badge/index.js';
+export * from './components/blockquote/index.js';
+export * from './components/bottom-navigation/index.js';
+export * from './components/box/index.js';
+export * from './components/breadcrumb/index.js';
+export * from './components/button/index.js';
+export * from './components/button-group/index.js';
+export * from './components/card/index.js';
+export * from './components/carousel/index.js';
+export * from './components/chat-bubble/index.js';
+export * from './components/checkbox/index.js';
+export * from './components/chip/index.js';
+export * from './components/collapsible/index.js';
+export * from './components/combobox/index.js';
+export * from './components/container/index.js';
+export * from './components/date-picker/index.js';
+export * from './components/date-range-picker/index.js';
+export * from './components/date-time-picker/index.js';
+export * from './components/divider/index.js';
+export * from './components/drawer/index.js';
+export * from './components/file-picker/index.js';
+export * from './components/floating-bottom-navigation/index.js';
+export * from './components/grid/index.js';
+export * from './components/highlight/index.js';
+export * from './components/hot-keys/index.js';
+export * from './components/icon/index.js';
+export * from './components/icon-button/index.js';
+export * from './components/list/index.js';
+export * from './components/menu/index.js';
+export * from './components/modal/index.js';
+export * from './components/number-field/index.js';
+export * from './components/otp-field/index.js';
+export * from './components/overlay/index.js';
+export * from './components/pagination/index.js';
+export * from './components/panes/index.js';
+export * from './components/pill/index.js';
+export * from './components/popover/index.js';
+export * from './components/progress-box/index.js';
+export * from './components/progress-circular/index.js';
+export * from './components/progress-linear/index.js';
+export * from './components/radio-group/index.js';
+export * from './components/rating/index.js';
+export * from './components/scroll-zone/index.js';
+export * from './components/segmented-button/index.js';
+export * from './components/select/index.js';
+export * from './components/skeleton/index.js';
+export * from './components/slider/index.js';
+export * from './components/spoiler/index.js';
+export * from './components/switch/index.js';
+export * from './components/table/index.js';
+export * from './components/tabs/index.js';
+export * from './components/text-field/index.js';
+export * from './components/text-link/index.js';
+export * from './components/time-picker/index.js';
+export * from './components/timeline/index.js';
+export * from './components/toast/index.js';
+export * from './components/toolbar/index.js';
+export * from './components/tooltip/index.js';
+export * from './components/typography/index.js';

package/dist/index.js

@@ -1 +1,75 @@
-export*from"./types";export*from"./components/button";export*from"./components/text-field";
+export * from './types.js';
+export * from './components/accordion/index.js';
+export * from './components/alert/index.js';
+export * from './components/animate-appear/index.js';
+export * from './components/animate-blink/index.js';
+export * from './components/animate-fade/index.js';
+export * from './components/animate-grow/index.js';
+export * from './components/animate-headline/index.js';
+export * from './components/animate-lighting/index.js';
+export * from './components/animate-marquee/index.js';
+export * from './components/animate-rotate/index.js';
+export * from './components/animate-slide/index.js';
+export * from './components/animate-typing/index.js';
+export * from './components/animate-zoom/index.js';
+export * from './components/aspect-ratio/index.js';
+export * from './components/avatar/index.js';
+export * from './components/badge/index.js';
+export * from './components/blockquote/index.js';
+export * from './components/bottom-navigation/index.js';
+export * from './components/box/index.js';
+export * from './components/breadcrumb/index.js';
+export * from './components/button/index.js';
+export * from './components/button-group/index.js';
+export * from './components/card/index.js';
+export * from './components/carousel/index.js';
+export * from './components/chat-bubble/index.js';
+export * from './components/checkbox/index.js';
+export * from './components/chip/index.js';
+export * from './components/collapsible/index.js';
+export * from './components/combobox/index.js';
+export * from './components/container/index.js';
+export * from './components/date-picker/index.js';
+export * from './components/date-range-picker/index.js';
+export * from './components/date-time-picker/index.js';
+export * from './components/divider/index.js';
+export * from './components/drawer/index.js';
+export * from './components/file-picker/index.js';
+export * from './components/floating-bottom-navigation/index.js';
+export * from './components/grid/index.js';
+export * from './components/highlight/index.js';
+export * from './components/hot-keys/index.js';
+export * from './components/icon/index.js';
+export * from './components/icon-button/index.js';
+export * from './components/list/index.js';
+export * from './components/menu/index.js';
+export * from './components/modal/index.js';
+export * from './components/number-field/index.js';
+export * from './components/otp-field/index.js';
+export * from './components/overlay/index.js';
+export * from './components/pagination/index.js';
+export * from './components/panes/index.js';
+export * from './components/pill/index.js';
+export * from './components/popover/index.js';
+export * from './components/progress-box/index.js';
+export * from './components/progress-circular/index.js';
+export * from './components/progress-linear/index.js';
+export * from './components/radio-group/index.js';
+export * from './components/rating/index.js';
+export * from './components/scroll-zone/index.js';
+export * from './components/segmented-button/index.js';
+export * from './components/select/index.js';
+export * from './components/skeleton/index.js';
+export * from './components/slider/index.js';
+export * from './components/spoiler/index.js';
+export * from './components/switch/index.js';
+export * from './components/table/index.js';
+export * from './components/tabs/index.js';
+export * from './components/text-field/index.js';
+export * from './components/text-link/index.js';
+export * from './components/time-picker/index.js';
+export * from './components/timeline/index.js';
+export * from './components/toast/index.js';
+export * from './components/toolbar/index.js';
+export * from './components/tooltip/index.js';
+export * from './components/typography/index.js';

package/dist/internal/animate.d.ts

@@ -0,0 +1,161 @@
+/**
+ * The machinery every `PlAnimate*` component runs on.
+ *
+ * It lives in `internal/` for the reason `button-group.ts` and `progress.ts`
+ * do: eleven components need it and none of them should have to import another.
+ *
+ * ## The shape of it
+ *
+ * Every effect is one `@keyframes` in `styles.css` running from a state written
+ * entirely in custom properties to the element's natural one. Nothing here
+ * generates CSS — it fills `--p-anim-*` slots and the stylesheet decides what
+ * they mean, which is the same split `controlSlots()` makes for colour and for
+ * the same reason: Tailwind only ever sees class names that appear literally in
+ * the source, so a class per duration would not survive the first prop.
+ *
+ * Because the from-state is the *keyframe* rather than a second class, running
+ * an effect backwards is `animation-direction: reverse` and nothing else. That
+ * is what makes `mode="out"` free on the five that offer it.
+ *
+ * ## Where the design language draws the line
+ *
+ * A Plass **control** never moves — a key that scales resamples its label, and
+ * that rule holds without exception. What moves here is content a caller has
+ * asked to have moved, and it moves on the independent `translate`, `scale` and
+ * `rotate` properties rather than on the `transform` shorthand, so a caller's
+ * own transform on the same element survives.
+ *
+ * ## What is deliberately not here
+ *
+ * An effect that has to know what its children *are* — a marquee that lays them
+ * down twice, a headline that swaps between them, a typewriter that counts
+ * graphemes — cannot be a class name and a few numbers. Those are components,
+ * and their logic stays in their own files.
+ */
+import * as React from 'react';
+import type { PlassAnimateRepeat, PlassAnimateTrigger, PlassAnimation, PlassSide } from '../types.js';
+/**
+ * Which keyframe an effect runs.
+ *
+ * `grow` and `zoom` share one: they are the same arithmetic at two strengths,
+ * and a second identical `@keyframes` would only be a second place to fix a
+ * bug. What separates them is their defaults and their origin, and an origin is
+ * a property rather than a keyframe.
+ */
+export declare const animationClasses: Record<PlassAnimation, string>;
+/** The class that reads the slots. Always paired with one of the above. */
+export declare const animBaseClass = "plass-anim";
+/** A number is pixels; a string is already a CSS length. */
+export declare function lengthValue(value: number | string): string;
+/** `'infinite'` reaches CSS as the word; a count reaches it as the number. */
+export declare function repeatValue(repeat: PlassAnimateRepeat): string;
+export declare function isInfinite(repeat: PlassAnimateRepeat | undefined): boolean;
+/**
+ * `normal`, `reverse`, `alternate`, `alternate-reverse` — the four CSS already
+ * has, assembled from the two props that mean something to a caller.
+ *
+ * `mode="out"` is a reversed run rather than a keyframe of its own, which is
+ * also why a reversed animation ends held on its own first frame: `fill-mode`
+ * is `both`, so a faded-out element stays faded out instead of snapping back.
+ */
+export declare function directionValue(mode: 'in' | 'out', alternate: boolean | undefined): string;
+export interface AnimationSlotOptions {
+    duration: number;
+    delay: number;
+    easing?: string;
+    repeat: PlassAnimateRepeat;
+    alternate?: boolean;
+    mode?: 'in' | 'out';
+    /** Where the animated properties start. Only the ones an effect reads. */
+    opacity?: number;
+    scale?: number;
+    x?: string;
+    y?: string;
+    angle?: string;
+    angleTo?: string;
+}
+/**
+ * The `--p-anim-*` slots, as an inline style object.
+ *
+ * Inline rather than utilities for the reason the colour slots are: these are
+ * per-instance numbers, and Tailwind cannot generate a class for a duration it
+ * has never seen written down.
+ */
+export declare function animationSlots(options: AnimationSlotOptions): React.CSSProperties;
+/**
+ * Which way a slide starts, given the edge it comes from.
+ *
+ * `PlassSide` is physical everywhere in the library and it stays physical here:
+ * something arriving from the top of the window arrives from the top in every
+ * writing direction.
+ */
+export declare function slideOffsets(from: PlassSide, distance: number | string): {
+    x: string;
+    y: string;
+};
+export declare function usePrefersReducedMotion(): boolean;
+export interface AnimationRunOptions {
+    trigger: PlassAnimateTrigger;
+    play?: boolean;
+    once: boolean;
+    threshold: number;
+    paused?: boolean;
+    /** An infinite effect stops when the pointer leaves; a finite one finishes. */
+    infinite: boolean;
+}
+export interface AnimationRun {
+    /** Goes on the animated element. */
+    ref: React.RefCallback<HTMLElement>;
+    /** `running` or `paused`, for `--p-anim-state`. */
+    state: 'running' | 'paused';
+    /** Whether the animation has been let go at all. */
+    started: boolean;
+    /** Spread onto the element when `trigger` is `hover`; empty otherwise. */
+    handlers: React.HTMLAttributes<HTMLElement>;
+}
+/**
+ * Starts, restarts and holds an animation.
+ *
+ * Two things here are less obvious than they look.
+ *
+ * **Waiting is `animation-play-state: paused`, not a second class.** An element
+ * that has not been triggered yet has to already look like its own first frame,
+ * or a `visible` fade would be fully drawn until it scrolled into view and then
+ * blink out to start. With `fill-mode: both` a paused animation shows exactly
+ * that frame, so waiting and running are one animation in two states rather
+ * than two states to keep in step.
+ *
+ * **Restarting reaches for the DOM.** There is no way to rewind a CSS animation
+ * from React: re-rendering with the same class changes nothing, and a `key`
+ * would restart the animation by unmounting the children, taking their state
+ * with it. Clearing `animation-name`, reading a layout property to force the
+ * style to settle, and putting it back is the one move that rewinds the element
+ * and leaves everything inside it alone.
+ */
+export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
+export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
+    /** Which keyframe. `null` for the components that write their own. */
+    effect: PlassAnimation | null;
+}
+export interface AnimateElement {
+    ref: React.RefCallback<HTMLElement>;
+    className: string;
+    style: React.CSSProperties;
+    /** The hover handlers and the two data attributes, ready to be spread. */
+    props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
+}
+/**
+ * Everything a one-keyframe `PlAnimate*` root needs, in one call.
+ *
+ * The six effect components differ only in their defaults and in which slots
+ * they fill, so this is where the identical two-thirds of each of them lives.
+ * The ones that have to understand their children — Appear, Headline, Marquee,
+ * Typing — call `useAnimationRun` directly and put the classes where their own
+ * structure needs them, which is why `effect` is allowed to be `null`.
+ *
+ * `data-plass-animation` and `data-state` are here rather than in each
+ * component because they are the same two facts every time, and because a test
+ * that has to assert on a class name is a test that breaks when a class name
+ * changes.
+ */
+export declare function useAnimateElement(params: AnimateElementParams): AnimateElement;