@krizaka/ui 2.3.0 → 2.4.0

package/dist/tag-input.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ComboboxLabels } from './combobox.js';
+import 'tailwind-variants';
+
+type TagInputProps = {
+    /** The visible label, passed translated (also the accessible name). */
+    label: string;
+    /** Hides the label visually, keeping it as the accessible name. */
+    hideLabel?: boolean;
+    /** The tags (controlled). */
+    value?: readonly string[];
+    /** The tags at first, uncontrolled. */
+    defaultValue?: readonly string[];
+    /** Called with every tag after a change. */
+    onValueChange?: (tags: string[]) => void;
+    /** Words offered as the person types (their own history, a curated list). */
+    suggestions?: readonly string[];
+    /** Cleans a word before it is added (`(t) => t.toLowerCase().replace(/^#/, "")`). An empty result is ignored. */
+    normalize?: (tag: string) => string;
+    /** Refuses a word: return the reason (passed translated), shown and read as the field's error; `null` accepts it. */
+    validate?: (tag: string, tags: readonly string[]) => string | null;
+    /** Most tags; the field stops offering more past it. */
+    max?: number;
+    /** Keys that add the word, besides Enter. Default `[","]`. */
+    separators?: readonly string[];
+    /** The input's placeholder, passed translated. */
+    placeholder?: string;
+    /** A help text under the field ("Up to 10 tags, separated by commas"). */
+    hint?: string;
+    /** An error from the app (a server refusal); `validate`'s own errors show here too. */
+    error?: string;
+    /** Not available. */
+    disabled?: boolean;
+    /** The name of the hidden inputs, for a plain `<form>` post (one per tag). */
+    name?: string;
+    /** The words of the field, passed translated; English by default. */
+    labels?: Partial<Pick<ComboboxLabels, "create" | "remove" | "empty" | "results" | "toggle">>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** Words as removable chips — tags, keywords, e-mail recipients — with suggestions, cleaning and validation. */
+declare function TagInput({ value, defaultValue, onValueChange, suggestions, normalize, validate, max, separators, error, labels, ...props }: TagInputProps): React.JSX.Element;
+
+export { TagInput, type TagInputProps };

package/dist/tag-input.js

@@ -0,0 +1,67 @@
+"use client";
+import {
+  Combobox
+} from "./chunk-XUMJA5ZI.js";
+import "./chunk-YH4LMWRU.js";
+import "./chunk-ZIXB33X7.js";
+import {
+  useControllable
+} from "./chunk-EUPTXKH7.js";
+import "./chunk-YX6CNVJA.js";
+
+// src/tag-input/tag-input.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var toOption = (tag) => ({ value: tag, label: tag });
+function TagInput({
+  value,
+  defaultValue = [],
+  onValueChange,
+  suggestions = [],
+  normalize = (tag) => tag.trim(),
+  validate,
+  max,
+  separators = [","],
+  error,
+  labels,
+  ...props
+}) {
+  const [tags, setTags] = useControllable(value, defaultValue, onValueChange);
+  const [refusal, setRefusal] = React.useState(null);
+  const change = (options) => {
+    const next = [];
+    for (const option of options) {
+      const tag = normalize(option.value);
+      if (!tag || next.includes(tag)) continue;
+      if (!tags.includes(tag)) {
+        const reason = validate?.(tag, next) ?? null;
+        if (reason) {
+          setRefusal(reason);
+          continue;
+        }
+      }
+      next.push(tag);
+    }
+    if (next.length >= options.length || options.length < tags.length) setRefusal(null);
+    setTags(next);
+  };
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      ...props,
+      multiple: true,
+      creatable: true,
+      separators,
+      maxSelected: max,
+      value: tags.map(toOption),
+      onValueChange: change,
+      options: suggestions.map(toOption),
+      error: refusal ?? error,
+      labels: { empty: "", results: () => "", ...labels }
+    }
+  );
+}
+export {
+  TagInput
+};
+//# sourceMappingURL=tag-input.js.map

package/dist/tag-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tag-input/tag-input.tsx"],"sourcesContent":["// Client. Free words as chips — the multiple, creatable `Combobox` on strings: Enter or a separator adds the word,\n// a paste of \"a, b, c\" adds three, Backspace on an empty input removes the last, suggestions complete as you type.\n// `normalize` cleans a word (lower case, no `#`), `validate` refuses one with a reason read aloud.\nimport * as React from \"react\";\n\nimport { Combobox, type ComboboxLabels, type ComboboxOption } from \"../combobox\";\nimport { useControllable } from \"../media\";\n\nexport type TagInputProps = {\n  /** The visible label, passed translated (also the accessible name). */\n  label: string;\n  /** Hides the label visually, keeping it as the accessible name. */\n  hideLabel?: boolean;\n  /** The tags (controlled). */\n  value?: readonly string[];\n  /** The tags at first, uncontrolled. */\n  defaultValue?: readonly string[];\n  /** Called with every tag after a change. */\n  onValueChange?: (tags: string[]) => void;\n  /** Words offered as the person types (their own history, a curated list). */\n  suggestions?: readonly string[];\n  /** Cleans a word before it is added (`(t) => t.toLowerCase().replace(/^#/, \"\")`). An empty result is ignored. */\n  normalize?: (tag: string) => string;\n  /** Refuses a word: return the reason (passed translated), shown and read as the field's error; `null` accepts it. */\n  validate?: (tag: string, tags: readonly string[]) => string | null;\n  /** Most tags; the field stops offering more past it. */\n  max?: number;\n  /** Keys that add the word, besides Enter. Default `[\",\"]`. */\n  separators?: readonly string[];\n  /** The input's placeholder, passed translated. */\n  placeholder?: string;\n  /** A help text under the field (\"Up to 10 tags, separated by commas\"). */\n  hint?: string;\n  /** An error from the app (a server refusal); `validate`'s own errors show here too. */\n  error?: string;\n  /** Not available. */\n  disabled?: boolean;\n  /** The name of the hidden inputs, for a plain `<form>` post (one per tag). */\n  name?: string;\n  /** The words of the field, passed translated; English by default. */\n  labels?: Partial<Pick<ComboboxLabels, \"create\" | \"remove\" | \"empty\" | \"results\" | \"toggle\">>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nconst toOption = (tag: string): ComboboxOption => ({ value: tag, label: tag });\n\n/** Words as removable chips — tags, keywords, e-mail recipients — with suggestions, cleaning and validation. */\nexport function TagInput({\n  value,\n  defaultValue = [],\n  onValueChange,\n  suggestions = [],\n  normalize = (tag) => tag.trim(),\n  validate,\n  max,\n  separators = [\",\"],\n  error,\n  labels,\n  ...props\n}: TagInputProps) {\n  const [tags, setTags] = useControllable<readonly string[]>(value, defaultValue, onValueChange as (next: readonly string[]) => void);\n  const [refusal, setRefusal] = React.useState<string | null>(null);\n\n  const change = (options: ComboboxOption[]) => {\n    const next: string[] = [];\n    for (const option of options) {\n      const tag = normalize(option.value);\n      if (!tag || next.includes(tag)) continue;\n      if (!tags.includes(tag)) {\n        const reason = validate?.(tag, next) ?? null;\n        if (reason) {\n          setRefusal(reason);\n          continue;\n        }\n      }\n      next.push(tag);\n    }\n    if (next.length >= options.length || options.length < tags.length) setRefusal(null);\n    setTags(next);\n  };\n\n  return (\n    <Combobox\n      {...props}\n      multiple\n      creatable\n      separators={separators}\n      maxSelected={max}\n      value={tags.map(toOption)}\n      onValueChange={change}\n      options={suggestions.map(toOption)}\n      error={refusal ?? error}\n      labels={{ empty: \"\", results: () => \"\", ...labels }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAGA,YAAY,WAAW;AAgFnB;AAtCJ,IAAM,WAAW,CAAC,SAAiC,EAAE,OAAO,KAAK,OAAO,IAAI;AAGrE,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,YAAY,CAAC,QAAQ,IAAI,KAAK;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,aAAa,CAAC,GAAG;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,MAAM,OAAO,IAAI,gBAAmC,OAAO,cAAc,aAAkD;AAClI,QAAM,CAAC,SAAS,UAAU,IAAU,eAAwB,IAAI;AAEhE,QAAM,SAAS,CAAC,YAA8B;AAC5C,UAAM,OAAiB,CAAC;AACxB,eAAW,UAAU,SAAS;AAC5B,YAAM,MAAM,UAAU,OAAO,KAAK;AAClC,UAAI,CAAC,OAAO,KAAK,SAAS,GAAG,EAAG;AAChC,UAAI,CAAC,KAAK,SAAS,GAAG,GAAG;AACvB,cAAM,SAAS,WAAW,KAAK,IAAI,KAAK;AACxC,YAAI,QAAQ;AACV,qBAAW,MAAM;AACjB;AAAA,QACF;AAAA,MACF;AACA,WAAK,KAAK,GAAG;AAAA,IACf;AACA,QAAI,KAAK,UAAU,QAAQ,UAAU,QAAQ,SAAS,KAAK,OAAQ,YAAW,IAAI;AAClF,YAAQ,IAAI;AAAA,EACd;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAQ;AAAA,MACR,WAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb,OAAO,KAAK,IAAI,QAAQ;AAAA,MACxB,eAAe;AAAA,MACf,SAAS,YAAY,IAAI,QAAQ;AAAA,MACjC,OAAO,WAAW;AAAA,MAClB,QAAQ,EAAE,OAAO,IAAI,SAAS,MAAM,IAAI,GAAG,OAAO;AAAA;AAAA,EACpD;AAEJ;","names":[]}

package/dist/video-player.d.ts

@@ -0,0 +1,204 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const videoPlayer: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            big?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            button?: tailwind_variants.ClassValue;
+            time?: tailwind_variants.ClassValue;
+            video?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            poster?: tailwind_variants.ClassValue;
+            volume?: tailwind_variants.ClassValue;
+            spinner?: tailwind_variants.ClassValue;
+            overlay?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            big?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            button?: tailwind_variants.ClassValue;
+            time?: tailwind_variants.ClassValue;
+            video?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            poster?: tailwind_variants.ClassValue;
+            volume?: tailwind_variants.ClassValue;
+            spinner?: tailwind_variants.ClassValue;
+            overlay?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    video: string;
+    poster: string;
+    big: string;
+    bar: string;
+    row: string;
+    button: string;
+    time: string;
+    volume: string;
+    status: string;
+    spinner: string;
+    overlay: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            big?: tailwind_variants.ClassValue;
+            root?: tailwind_variants.ClassValue;
+            button?: tailwind_variants.ClassValue;
+            time?: tailwind_variants.ClassValue;
+            video?: tailwind_variants.ClassValue;
+            row?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            poster?: tailwind_variants.ClassValue;
+            volume?: tailwind_variants.ClassValue;
+            spinner?: tailwind_variants.ClassValue;
+            overlay?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    video: string;
+    poster: string;
+    big: string;
+    bar: string;
+    row: string;
+    button: string;
+    time: string;
+    volume: string;
+    status: string;
+    spinner: string;
+    overlay: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    video: string;
+    poster: string;
+    big: string;
+    bar: string;
+    row: string;
+    button: string;
+    time: string;
+    volume: string;
+    status: string;
+    spinner: string;
+    overlay: string;
+}>>;
+/** What `loadHls` resolves to: the module of hls.js (only the members the player uses are typed). */
+type HlsModule = {
+    default: {
+        new (config?: Record<string, unknown>): {
+            loadSource(url: string): void;
+            attachMedia(media: HTMLMediaElement): void;
+            destroy(): void;
+            startLoad(): void;
+            recoverMediaError(): void;
+            on(event: string, listener: (event: string, data: {
+                fatal?: boolean;
+                type?: string;
+            }) => void): void;
+        };
+        isSupported(): boolean;
+        Events: {
+            ERROR: string;
+        };
+        ErrorTypes: {
+            NETWORK_ERROR: string;
+            MEDIA_ERROR: string;
+        };
+    };
+};
+type VideoTrack = {
+    /** The WebVTT file. */
+    src: string;
+    /** Its language, BCP 47 (`"fr"`). */
+    srcLang: string;
+    /** Its name in the menu ("Français"), passed translated. */
+    label: string;
+    /** `subtitles` (default) or `captions` (with the sounds, for deaf viewers). */
+    kind?: "subtitles" | "captions";
+    /** Shown from the start. */
+    default?: boolean;
+};
+type VideoPlayerLabels = {
+    play: string;
+    pause: string;
+    mute: string;
+    unmute: string;
+    volume: string;
+    seek: string;
+    /** The speed button: `(rate) => "Speed " + rate + "×"`. */
+    speed: (rate: number) => string;
+    /** The captions button: `(track) => "Subtitles: " + (track ?? "off")`, the track's label or `null` when off. */
+    captions: (track: string | null) => string;
+    fullscreen: string;
+    exitFullscreen: string;
+    pictureInPicture: string;
+    /** Read while the video waits for data. */
+    loading: string;
+    /** The video cannot play. */
+    error: string;
+    /** Tries again (resolves a signed `src` again). */
+    retry: string;
+    /** The seek slider's value: `(time, duration) => "1:05 of 3:20"`. */
+    time: (time: string, duration: string) => string;
+};
+declare const videoPlayerLabels: VideoPlayerLabels;
+type VideoPlayerProps = {
+    /** The address of the video (MP4, WebM, or an HLS `.m3u8`), or a function that resolves a signed one when needed. */
+    src: string | (() => Promise<string>);
+    /** `auto` (default): HLS when the address ends in `.m3u8`. */
+    type?: "auto" | "hls" | "file";
+    /** Loads hls.js when the browser cannot play HLS itself: `() => import("hls.js")`. Without it, HLS needs Safari. */
+    loadHls?: () => Promise<HlsModule>;
+    /** The accessible name of the player ("Video: Sunset over Montréal"), passed translated. */
+    title: string;
+    /** The picture shown before playback. */
+    poster?: string;
+    /** Starts playing, muted (browsers refuse sound without a gesture) — not under reduced motion. */
+    autoPlay?: boolean;
+    /** Starts muted. */
+    muted?: boolean;
+    /** Plays again from the start at the end. */
+    loop?: boolean;
+    /** How much to fetch before playback: `none` (a list of many videos), `metadata` (default), `auto`. */
+    preload?: "none" | "metadata" | "auto";
+    /** Subtitles or captions (WebVTT): the C key and a button cycle through them. */
+    tracks?: readonly VideoTrack[];
+    /** The speeds offered by the speed button. Default `[0.5, 1, 1.25, 1.5, 2]`. */
+    playbackRates?: readonly number[];
+    /** Pauses when less than a quarter of the player is on screen. Default `true`. */
+    pauseWhenHidden?: boolean;
+    /** Shows the controls (default). `false`: a bare video (a background loop) — give it no sound. */
+    controls?: boolean;
+    /** Covers the video and hides the controls: a gate (sign in, unlock, age check) drawn by the app. */
+    overlay?: React.ReactNode;
+    /** The width / height ratio of the frame. Default `"16 / 9"`; `"9 / 16"` for a vertical video. */
+    aspectRatio?: string;
+    /** Called when playback starts. */
+    onPlay?: () => void;
+    /** Called when playback pauses. */
+    onPause?: () => void;
+    /** Called at the end. */
+    onEnded?: () => void;
+    /** Called as the time moves, in seconds (a few times a second). */
+    onTimeUpdate?: (time: number) => void;
+    /** Called when the video cannot play (a network failure, an expired address). */
+    onError?: (error: unknown) => void;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<VideoPlayerLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** A video player with accessible controls, HLS on demand, signed sources, subtitles, speed, full screen. */
+declare function VideoPlayer({ src, type, loadHls, title, poster, autoPlay, muted: initiallyMuted, loop, preload, tracks, playbackRates, pauseWhenHidden, controls, overlay, aspectRatio, onPlay, onPause, onEnded, onTimeUpdate, onError, labels: given, className, }: VideoPlayerProps): React.JSX.Element;
+
+export { type HlsModule, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, type VideoTrack, videoPlayer, videoPlayerLabels };