@design-edito/tools 0.3.10 → 0.3.11

package/components/Video/index.d.ts

@@ -0,0 +1,119 @@
+import { type FunctionComponent, type PropsWithChildren, type VideoHTMLAttributes } from 'react';
+import { type Props as DisclaimerProps } from '../Disclaimer/index.js';
+import { type Props as SubsProps } from '../Subtitles/index.js';
+import type { WithClassName } from '../utils/types.js';
+/**
+ * Describes a single video source.
+ *
+ * @property src - URL of the video file.
+ * @property type - MIME type of the source (e.g. `'video/mp4'`).
+ */
+type SourceData = {
+    src?: string;
+    type?: string;
+};
+/**
+ * Describes a single text track (subtitles, captions, chapters, etc.).
+ *
+ * @property src - URL of the track file.
+ * @property kind - Track type, maps directly to the `<track>` `kind` attribute.
+ * @property srclang - Language of the track content (e.g. `'fr'`, `'en'`).
+ * @property label - Human-readable label shown in the browser's track selector.
+ * @property default - When `true`, marks this track as the default selection.
+ */
+type TrackData = {
+    src?: string;
+    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+    srclang?: string;
+    label?: string;
+    default?: boolean;
+};
+/**
+ * Props for the {@link Video} component.
+ *
+ * Extends all native `VideoHTMLAttributes<HTMLVideoElement>`, so any standard
+ * video attribute (`autoPlay`, `muted`, `loop`, `poster`, etc.) can be passed
+ * and will be forwarded to the underlying `<video>` element.
+ *
+ * @property sources - One or more video sources. Accepts:
+ * - a single URL string,
+ * - an array of URL strings,
+ * - an array of {@link SourceData} objects for fine-grained `type` control.
+ * @property tracks - One or more text tracks. Accepts:
+ * - a single URL string,
+ * - an array of URL strings,
+ * - an array of {@link TrackData} objects.
+ * @property playBtnContent - Custom content for the play button.
+ * @property pauseBtnContent - Custom content for the pause button.
+ * @property loudBtnContent - Custom content for the unmute button.
+ * @property muteBtnContent - Custom content for the mute button.
+ * @property fullScreenBtnContent - Custom content for the fullScreen button.
+ * @property subtitles - Props forwarded to the internal {@link Subtitles} component.
+ * `timecodeMs` is injected automatically from the current playback position.
+ * @property disclaimer - Props forwarded to the internal {@link Disclaimer} component.
+ * While the disclaimer is active, `autoPlay` and `muted` are suppressed on the
+ * underlying `<video>` element.
+ * @property autoPlayWhenVisible - When `true`, triggers playback the first time the
+ * component intersects the viewport, provided no disclaimer is active.
+ * @property autoPauseWhenHidden - When `true`, pauses playback whenever the component
+ * leaves the viewport.
+ * @property autoLoudWhenVisible - When `true`, unmutes the video the first time the
+ * component intersects the viewport, provided no disclaimer is active.
+ * @property autoMuteWhenHidden - When `true`, mutes the video whenever the component
+ * leaves the viewport.
+ * @property className - Optional additional class name(s) applied to the root element.
+ * @property children - React children rendered inside the `<video>` element itself
+ * (e.g. fallback content).
+ */
+export type Props = PropsWithChildren<WithClassName<{
+    sources?: string | string[] | SourceData[];
+    tracks?: string | string[] | TrackData[];
+    playBtnContent?: React.ReactNode;
+    pauseBtnContent?: React.ReactNode;
+    loudBtnContent?: React.ReactNode;
+    muteBtnContent?: React.ReactNode;
+    fullScreenBtnContent?: React.ReactNode;
+    subtitles?: SubsProps;
+    disclaimer?: DisclaimerProps;
+    autoPlayWhenVisible?: boolean;
+    autoPauseWhenHidden?: boolean;
+    autoLoudWhenVisible?: boolean;
+    autoMuteWhenHidden?: boolean;
+}> & VideoHTMLAttributes<HTMLVideoElement>>;
+/**
+ * Full-featured video player component. Wraps a native `<video>` element with
+ * playback controls, volume, playback rate, a timeline, optional subtitles,
+ * an optional disclaimer gate, and viewport-driven auto-play/mute behaviours.
+ *
+ * ### Root element modifiers
+ * The root `<figure>` receives the public class name defined by `video` and
+ * the following BEM-style modifier classes:
+ * - `--play-on` / `--play-off` — reflects current playback state.
+ * - `--fullscreen-on` / `--fullscreen-off` — reflects fullscreen state.
+ * - `--loud` / `--muted` — reflects mute state.
+ *
+ * ### Data attributes on the root element
+ * - `data-play-on` — present (empty string) when playing.
+ * - `data-play-off` — present (empty string) when paused.
+ * - `data-fullscreen-on` — present (empty string) when in fullScreen.
+ * - `data-fullscreen-off` — present (empty string) when not in fullScreen.
+ * - `data-loud` — present (empty string) when unmuted.
+ * - `data-muted` — present (empty string) when muted.
+ * - `data-volume` — current volume as a `0–1` float.
+ * - `data-volume-percent` — current volume as a `0–100` float.
+ * - `data-playback-rate` — current playback rate (e.g. `1`, `1.5`).
+ * - `data-current-time-ms` — current time in milliseconds, fixed to 2 decimals.
+ * - `data-current-time-ratio` — current / total ratio, fixed to 8 decimals.
+ * - `data-total-time-ms` — total duration in milliseconds.
+ *
+ * ### CSS custom properties on the root element
+ * - `--video-current-time-ratio` — current / total ratio, fixed to 8 decimals.
+ * Useful for driving progress-bar animations purely in CSS.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A `<figure>` element containing the video, its controls, optional
+ * subtitles, and an optional disclaimer overlay.
+ */
+export declare const Video: FunctionComponent<Props>;
+export {};

package/components/Video/index.js

@@ -0,0 +1,358 @@
+// src/components/Video/index.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { clss } from "../../agnostic/css/clss/index.js";
+import {
+  Disclaimer
+} from "../Disclaimer/index.js";
+import { IntersectionObserverComponent } from "../IntersectionObserver/index.js";
+import {
+  Subtitles
+} from "../Subtitles/index.js";
+import { mergeClassNames } from "../utils/index.js";
+import { video as publicClassName } from "../public-classnames.js";
+import {
+  formatTime,
+  secondsToMs,
+  muteAttributeWorkaround,
+  forcePlay,
+  forcePause,
+  forceLoud,
+  forceMute,
+  forceFullScreen,
+  forceExitFullScreen
+} from "./utils.js";
+import cssModule from "./styles.module.css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Video = ({
+  sources,
+  tracks,
+  playBtnContent,
+  pauseBtnContent,
+  loudBtnContent,
+  muteBtnContent,
+  fullScreenBtnContent,
+  subtitles,
+  disclaimer,
+  autoPlayWhenVisible,
+  autoPauseWhenHidden,
+  autoLoudWhenVisible,
+  autoMuteWhenHidden,
+  children,
+  className,
+  ...intrinsicVideoAttributes
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isLoud, setIsLoud] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [totalTime, setTotalTime] = useState(0);
+  const [volume, setVolume] = useState(0);
+  const [playbackRate, setPlaybackRate] = useState(0);
+  const [hasBeenAutoPlayed, setHasBeenAutoPlayed] = useState(false);
+  const [isDisclaimerOn, setIsDisclaimerOn] = useState(
+    disclaimer?.isOn === true || disclaimer?.defaultIsOn === true || disclaimer !== void 0 && disclaimer.defaultIsOn === void 0
+  );
+  let shouldDisclaimerBeOn = isDisclaimerOn;
+  if (disclaimer?.isOn === true) {
+    shouldDisclaimerBeOn = true;
+  }
+  if (disclaimer?.isOn === false) {
+    shouldDisclaimerBeOn = false;
+  }
+  const currentTimeMs = secondsToMs(currentTime);
+  const totalTimeMs = useMemo(() => secondsToMs(totalTime), [totalTime]);
+  const volumePercent = useMemo(() => volume * 100, [volume]);
+  const videoRef = useRef(null);
+  const $root = useRef(null);
+  const handleMetadataLoadEvent = useCallback((e) => {
+    if (videoRef.current === null) return;
+    const video = videoRef.current;
+    muteAttributeWorkaround(
+      video,
+      intrinsicVideoAttributes.muted ?? false,
+      setIsLoud
+    );
+    setTotalTime(video.duration);
+    setPlaybackRate(video.playbackRate);
+    setVolume(video.volume);
+    setIsLoud(!video.muted);
+    intrinsicVideoAttributes.onLoadedMetadata?.(e);
+  }, []);
+  const handleVolumeChangeEvent = useCallback((e) => {
+    const { volume: volume2 } = e.currentTarget;
+    setVolume(volume2);
+    intrinsicVideoAttributes.onVolumeChange?.(e);
+  }, []);
+  const handlePlayEvent = useCallback((e) => {
+    setIsPlaying(true);
+    setHasBeenAutoPlayed(true);
+    intrinsicVideoAttributes.onPlay?.(e);
+  }, []);
+  const handlePauseEvent = useCallback((e) => {
+    setIsPlaying(false);
+    intrinsicVideoAttributes.onPause?.(e);
+  }, []);
+  const handleRateChangeEvent = useCallback((e) => {
+    const rate = e.currentTarget.playbackRate;
+    setPlaybackRate(rate);
+    intrinsicVideoAttributes.onRateChange?.(e);
+  }, []);
+  const handleTimeUpdateEvent = useCallback((e) => {
+    const currentTime2 = e.currentTarget.currentTime;
+    setCurrentTime(currentTime2);
+    intrinsicVideoAttributes?.onTimeUpdate?.(e);
+  }, [totalTime]);
+  const handleVolumeRangeChange = useCallback((e) => {
+    const volumePercent2 = Number(e.currentTarget.value);
+    const volume2 = volumePercent2 / 100;
+    if (videoRef.current === null) return;
+    videoRef.current.volume = volume2;
+  }, []);
+  const handleLoudButtonClick = useCallback(() => {
+    forceLoud(videoRef.current, setIsLoud);
+  }, [forceLoud]);
+  const handleMuteButtonClick = useCallback(() => {
+    forceMute(videoRef.current, setIsLoud);
+  }, []);
+  const handlePlayButtonClick = useCallback(() => {
+    void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+  }, [forcePlay, shouldDisclaimerBeOn]);
+  const handlePauseButtonClick = useCallback(() => {
+    forcePause(videoRef.current, setIsPlaying);
+  }, []);
+  const handleFullScreenButtonClick = useCallback(() => {
+    if (isFullScreen) void forceExitFullScreen(videoRef.current, setIsFullScreen);
+    else void forceFullScreen(videoRef.current, shouldDisclaimerBeOn, setIsFullScreen);
+  }, [isFullScreen, shouldDisclaimerBeOn]);
+  const handleRateRangeChange = useCallback((e) => {
+    const rate = Number(e.currentTarget.value);
+    if (videoRef.current === null) return;
+    videoRef.current.playbackRate = rate;
+  }, []);
+  const handleTimelineClick = useCallback((e) => {
+    if (videoRef.current === null) return;
+    const timelineRect = e.currentTarget.getBoundingClientRect();
+    const position = e.clientX - timelineRect.left;
+    const progress = Math.min(1, Math.max(0, position / timelineRect.width));
+    videoRef.current.currentTime = progress * totalTime;
+  }, []);
+  const handleDisclaimerDismiss = useCallback(() => {
+    setIsDisclaimerOn(false);
+    if (intrinsicVideoAttributes.autoPlay === true && !hasBeenAutoPlayed) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+  }, [disclaimer, intrinsicVideoAttributes.autoPlay, shouldDisclaimerBeOn]);
+  useEffect(() => {
+    if (isDisclaimerOn !== shouldDisclaimerBeOn) setIsDisclaimerOn(shouldDisclaimerBeOn);
+    if (shouldDisclaimerBeOn) {
+      forceMute(videoRef.current, setIsLoud);
+      forcePause(videoRef.current, setIsPlaying);
+      void forceExitFullScreen(videoRef.current, setIsFullScreen);
+    } else if (intrinsicVideoAttributes.autoPlay === true) {
+      if (videoRef.current === null) return;
+      if (hasBeenAutoPlayed) return;
+      if (videoRef.current.paused) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+    }
+  }, [
+    shouldDisclaimerBeOn,
+    intrinsicVideoAttributes,
+    hasBeenAutoPlayed
+  ]);
+  const parsedSources = useMemo(() => {
+    if (sources === void 0) return [];
+    if (typeof sources === "string") return [{ src: sources }];
+    if (Array.isArray(sources)) {
+      if (sources.length === 0) return [];
+      if (typeof sources[0] === "string") return sources.map((src) => ({ src }));
+      return sources;
+    }
+    return [];
+  }, [sources]);
+  const parsedTracks = useMemo(() => {
+    if (tracks === void 0) return [];
+    if (typeof tracks === "string") return [{ src: tracks }];
+    if (Array.isArray(tracks)) {
+      if (tracks.length === 0) return [];
+      if (typeof tracks[0] === "string") return tracks.map((src) => ({ src }));
+      return tracks;
+    }
+    return [];
+  }, [tracks]);
+  const c = clss(publicClassName, { cssModule });
+  const rootClss = mergeClassNames(c(null, {
+    "play-on": isPlaying,
+    "play-off": !isPlaying,
+    "fullscreen-on": isFullScreen,
+    "fullscreen-off": !isFullScreen,
+    "loud": isLoud,
+    "muted": !isLoud
+  }), className);
+  const rootAttributes = {
+    "data-play-on": isPlaying ? "" : void 0,
+    "data-play-off": !isPlaying ? "" : void 0,
+    "data-fullscreen-on": isFullScreen ? "" : void 0,
+    "data-fullscreen-off": !isFullScreen ? "" : void 0,
+    "data-loud": isLoud ? "" : void 0,
+    "data-muted": !isLoud ? "" : void 0,
+    "data-volume": volume,
+    "data-volume-percent": volumePercent,
+    "data-playback-rate": playbackRate,
+    "data-current-time-ms": currentTimeMs.toFixed(2),
+    "data-current-time-ratio": (currentTime / totalTime).toFixed(8),
+    "data-total-time-ms": totalTimeMs
+  };
+  const rootStyles = {
+    [`--${publicClassName}-current-time-ratio`]: (currentTime / totalTime).toFixed(8)
+  };
+  const videoClss = c("video");
+  const videoControlsClss = c("video-controls");
+  const playBtnClss = c("play-btn");
+  const pauseBtnClss = c("pause-btn");
+  const loudBtnClss = c("loud-btn");
+  const muteBtnClss = c("mute-btn");
+  const volumePcntClss = c("volume-percent");
+  const fullScreenBtnClss = c("fullscreen-btn");
+  const volumeRangeClss = c("volume-range");
+  const playbackRateRangeClss = c("playback-rate-range");
+  const playbackRateClss = c("playback-rate");
+  const timeControlsClss = c("time-controls");
+  const currentTimeClss = c("current-time");
+  const totalTimeClss = c("total-time");
+  const timelineClss = c("timeline");
+  const sensitiveContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "video",
+      {
+        ref: videoRef,
+        className: videoClss,
+        onVolumeChange: handleVolumeChangeEvent,
+        onLoadedMetadata: handleMetadataLoadEvent,
+        onPlay: handlePlayEvent,
+        onPause: handlePauseEvent,
+        onTimeUpdate: handleTimeUpdateEvent,
+        onRateChange: handleRateChangeEvent,
+        ...intrinsicVideoAttributes,
+        autoPlay: shouldDisclaimerBeOn ? false : intrinsicVideoAttributes.autoPlay,
+        muted: shouldDisclaimerBeOn ? true : intrinsicVideoAttributes.muted,
+        children: [
+          parsedSources.map(
+            (source, index) => typeof source === "string" ? /* @__PURE__ */ jsx(
+              "source",
+              {
+                src: source
+              },
+              index
+            ) : /* @__PURE__ */ jsx(
+              "source",
+              {
+                src: source.src,
+                type: source.type
+              },
+              index
+            )
+          ),
+          parsedTracks.map(
+            (track, index) => typeof track === "string" ? /* @__PURE__ */ jsx(
+              "track",
+              {
+                src: track
+              },
+              index
+            ) : /* @__PURE__ */ jsx(
+              "track",
+              {
+                src: track.src,
+                kind: track.kind,
+                srcLang: track.srclang,
+                label: track.label,
+                default: track.default
+              },
+              index
+            )
+          ),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: videoControlsClss, children: [
+      /* @__PURE__ */ jsx("button", { className: playBtnClss, onClick: handlePlayButtonClick, children: playBtnContent }),
+      /* @__PURE__ */ jsx("button", { className: pauseBtnClss, onClick: handlePauseButtonClick, children: pauseBtnContent }),
+      /* @__PURE__ */ jsx("button", { className: loudBtnClss, onClick: handleLoudButtonClick, children: loudBtnContent }),
+      /* @__PURE__ */ jsx("button", { className: muteBtnClss, onClick: handleMuteButtonClick, children: muteBtnContent }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          className: volumeRangeClss,
+          value: volumePercent,
+          onChange: handleVolumeRangeChange,
+          min: 0,
+          max: 100,
+          step: 1
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: volumePcntClss, children: volumePercent }),
+      /* @__PURE__ */ jsx("button", { className: fullScreenBtnClss, onClick: handleFullScreenButtonClick, children: fullScreenBtnContent }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          className: playbackRateRangeClss,
+          value: playbackRate,
+          onChange: handleRateRangeChange,
+          min: 0.25,
+          max: 4,
+          step: 0.25
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: playbackRateClss, children: playbackRate })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: timeControlsClss, children: [
+      /* @__PURE__ */ jsx("span", { className: currentTimeClss, children: formatTime(currentTimeMs, "mm:ss:ms") }),
+      /* @__PURE__ */ jsx("span", { className: totalTimeClss, children: formatTime(totalTimeMs, "mm:ss:ms") }),
+      /* @__PURE__ */ jsx("div", { className: timelineClss, onClick: handleTimelineClick })
+    ] }),
+    subtitles !== void 0 && /* @__PURE__ */ jsx(
+      Subtitles,
+      {
+        ...subtitles,
+        timecodeMs: currentTimeMs
+      }
+    )
+  ] });
+  const disclaimedContent = disclaimer !== void 0 ? /* @__PURE__ */ jsx(
+    Disclaimer,
+    {
+      ...disclaimer,
+      isOn: shouldDisclaimerBeOn,
+      actionHandlers: {
+        dismissClick: handleDisclaimerDismiss
+      },
+      children: sensitiveContent
+    }
+  ) : sensitiveContent;
+  const observedContent = autoLoudWhenVisible === true || autoMuteWhenHidden === true || autoPlayWhenVisible === true || autoPauseWhenHidden === true ? /* @__PURE__ */ jsx(IntersectionObserverComponent, { onIntersected: ({ ioEntry }) => {
+    const { isIntersecting = false } = ioEntry ?? {};
+    if (autoMuteWhenHidden === true && !isIntersecting) forceMute(videoRef.current, setIsLoud);
+    if (autoPauseWhenHidden === true && !isIntersecting) forcePause(videoRef.current, setIsPlaying);
+    if (autoPlayWhenVisible === true && !hasBeenAutoPlayed && !shouldDisclaimerBeOn && isIntersecting) void forcePlay(videoRef.current, shouldDisclaimerBeOn, setIsPlaying);
+    if (autoLoudWhenVisible === true && !hasBeenAutoPlayed && !shouldDisclaimerBeOn && isIntersecting) forceLoud(videoRef.current, setIsLoud);
+  }, children: disclaimedContent }) : disclaimedContent;
+  return /* @__PURE__ */ jsx(
+    "figure",
+    {
+      className: rootClss,
+      ...rootAttributes,
+      ref: $root,
+      style: rootStyles,
+      children: observedContent
+    }
+  );
+};
+export {
+  Video
+};

package/components/Video/utils.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch, SetStateAction } from 'react';
+export declare const muteAttributeWorkaround: (video: HTMLVideoElement | null, shouldMute: boolean, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
+export declare const forceMute: (video: HTMLVideoElement | null, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
+export declare const forceLoud: (video: HTMLVideoElement | null, setIsSoundOn: Dispatch<SetStateAction<boolean>>) => void;
+export declare const forcePlay: (video: HTMLVideoElement | null, shouldDisclaimerBeOn: boolean, setIsPlaying: Dispatch<SetStateAction<boolean>>) => Promise<void>;
+export declare const forcePause: (video: HTMLVideoElement | null, setIsPlaying: Dispatch<SetStateAction<boolean>>) => void;
+export declare const forceFullScreen: (video: HTMLVideoElement | null, shouldDisclaimerBeOn: boolean, setIsFullscreen: Dispatch<SetStateAction<boolean>>) => Promise<void>;
+export declare const forceExitFullScreen: (video: HTMLVideoElement | null, setIsFullscreen: Dispatch<SetStateAction<boolean>>) => Promise<void>;
+export declare function secondsToMs(seconds: number): number;
+export declare function formatTime(ms: number, format: string, fps?: number): string;

package/components/_WIP_AudioQuote/index.d.ts

@@ -0,0 +1 @@
+export {};

package/components/_WIP_Icon/index.d.ts

@@ -0,0 +1 @@
+export {};

package/components/index.d.ts

@@ -1,3 +1,17 @@
+export * as disclaimer from './Disclaimer/index.js'
+export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
-export * as input from './Input/index.js'
+export * as gallery from './Gallery/index.js'
+export * as image from './Image/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as paginator from './Paginator/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
+export * as scrllgngn from './Scrllgngn/index.js'
+export * as sequencer from './Sequencer/index.js'
+export * as shadowRoot from './ShadowRoot/index.js'
+export * as subtitles from './Subtitles/index.js'
+export * as theatre from './Theatre/index.js'
+export * as video from './Video/index.js'
+export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
+export * as wipIcon from './_WIP_Icon/index.js'
+export * as utils from './utils/index.js'

package/components/index.js

@@ -1,3 +1,17 @@
+export * as disclaimer from './Disclaimer/index.js'
+export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
-export * as input from './Input/index.js'
+export * as gallery from './Gallery/index.js'
+export * as image from './Image/index.js'
 export * as intersectionObserver from './IntersectionObserver/index.js'
+export * as paginator from './Paginator/index.js'
+export * as resizeObserver from './ResizeObserver/index.js'
+export * as scrllgngn from './Scrllgngn/index.js'
+export * as sequencer from './Sequencer/index.js'
+export * as shadowRoot from './ShadowRoot/index.js'
+export * as subtitles from './Subtitles/index.js'
+export * as theatre from './Theatre/index.js'
+export * as video from './Video/index.js'
+export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
+export * as wipIcon from './_WIP_Icon/index.js'
+export * as utils from './utils/index.js'

package/components/public-classnames.d.ts

@@ -1,3 +1,14 @@
-export declare const eventListener = "lm-event-listener";
-export declare const input = "lm-input";
-export declare const intersectionObserver = "lm-intersection-observer";
+export declare const disclaimer = "dsed-disclaimer";
+export declare const drawer = "dsed-drawer";
+export declare const eventListener = "dsed-event-listener";
+export declare const gallery = "dsed-gallery";
+export declare const image = "dsed-image";
+export declare const intersectionObserver = "dsed-intersection-observer";
+export declare const paginator = "dsed-paginator";
+export declare const resizeObserver = "dsed-resize-observer";
+export declare const scrllgngn = "dsed-scrllgngn";
+export declare const sequencer = "dsed-sequencer";
+export declare const shadowRoot = "dsed-shadow-root";
+export declare const subtitles = "dsed-subtitles";
+export declare const theatre = "dsed-theatre";
+export declare const video = "dsed-video";

package/components/utils/index.d.ts

@@ -0,0 +1 @@
+export declare function mergeClassNames(...names: Array<string | null | undefined | Array<string | null | undefined>>): string;

package/components/utils/index.js

@@ -0,0 +1,12 @@
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+export {
+  mergeClassNames
+};

package/components/utils/types.d.ts

@@ -0,0 +1,3 @@
+export type WithClassName<T extends Record<string, unknown>> = T & {
+    className?: string | Array<string | null | undefined>;
+};

package/index.d.ts

@@ -1,3 +1,3 @@
+export * as agnostic from './agnostic/index.js'
 export * as components from './components/index.js'
 export * as node from './node/index.js'
-export * as agnostic from './agnostic/index.js'

package/index.js

@@ -1,3 +1,3 @@
+export * as agnostic from './agnostic/index.js'
 export * as components from './components/index.js'
 export * as node from './node/index.js'
-export * as agnostic from './agnostic/index.js'

package/node/@aws-s3/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/node/@aws-s3/storage/directory/index.d.ts

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'

package/node/@aws-s3/storage/directory/index.js

@@ -1,4 +1,4 @@
 export * as copyDir from './copy-dir/index.js'
-export * as list from './list/index.js'
 export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'

package/node/@aws-s3/storage/file/index.d.ts

@@ -1,7 +1,7 @@
-export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
-export * as remove from './remove/index.js'
 export * as move from './move/index.js'
-export * as upload from './upload/index.js'
+export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
+export * as upload from './upload/index.js'
+export * as copy from './copy/index.js'

package/node/@aws-s3/storage/file/index.js

@@ -1,7 +1,7 @@
-export * as copy from './copy/index.js'
 export * as download from './download/index.js'
 export * as exists from './exists/index.js'
-export * as remove from './remove/index.js'
 export * as move from './move/index.js'
-export * as upload from './upload/index.js'
+export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
+export * as upload from './upload/index.js'
+export * as copy from './copy/index.js'

package/node/@google-cloud/storage/directory/index.d.ts

@@ -1,4 +1,4 @@
-export * as list from './list/index.js'
 export * as copyDir from './copy-dir/index.js'
-export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveDir from './move-dir/index.js'

package/node/@google-cloud/storage/directory/index.js

@@ -1,4 +1,4 @@
-export * as list from './list/index.js'
 export * as copyDir from './copy-dir/index.js'
-export * as moveDir from './move-dir/index.js'
+export * as list from './list/index.js'
 export * as removeDir from './remove-dir/index.js'
+export * as moveDir from './move-dir/index.js'