jvetrau-ds 0.1.0

package/index.js

@@ -0,0 +1,1170 @@
+import React4, { isValidElement, cloneElement, useRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import Hls from 'hls.js';
+
+// src/components/button/button.tsx
+
+// src/components/helpers/classnames.ts
+function classnames(...args) {
+  const classes = [];
+  args.forEach((arg) => {
+    if (!arg) return;
+    if (typeof arg === "string") {
+      classes.push(arg);
+      return;
+    }
+    for (const key in arg) {
+      if (arg[key]) {
+        classes.push(key);
+      }
+    }
+  });
+  return classes.join(" ");
+}
+var arrowLink = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M4 8H10M8 4H12V8M12 4L7 9" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M5 10H12M10 5H15V10M15 5L9 11" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M6 12H14M12 6H18V12M18 6L11 13" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M8 16H19M16 8H24V16M24 8L15 17" })
+};
+var arrowRight = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M4 8H12M9 5L12 8L9 11" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M5 10H15M11 6L15 10L11 14" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M6 12H18M13 7L18 12L13 17" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M8 16H24M18 10L24 16L18 22" })
+};
+var chevronRight = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M6 4.5L9.5 8L6 11.5" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M8 5.5L12.5 10L8 14.5" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M9.5 6.5L15 12L9.5 17.5" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M13 9L20 16L13 23" })
+};
+var fullscreen = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M5 7V5H7M11 5H13V7M13 11V13H11M7 13H5V11" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M6 8V6H8M14 6H16V8M16 14V16H14M8 16H6V14" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M7 10V7H10M14 7H17V10M17 14V17H14M10 17H7V14" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M9 13V9H13M19 9H23V13M23 19V23H19M13 23H9V19" })
+};
+var pause = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M5 4V12M11 4V12" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M7 5V15M13 5V15" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M9 6V18M15 6V18" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M11 8V24M21 8V24" })
+};
+var play = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M6 5.5L11 8L6 10.5Z" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M7 6.5L13.5 10L7 13.5Z" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M8 7L16 12L8 17Z" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M11 9L21 16L11 23Z" })
+};
+var settings = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M8 5V3.5M8 12.5V11M5.9 5.9L4.8 4.8M11.2 11.2L10.1 10.1M5 8H3.5M12.5 8H11M5.9 10.1L4.8 11.2M11.2 4.8L10.1 5.9M8 6.5A1.5 1.5 0 1 1 8 9.5A1.5 1.5 0 0 1 8 6.5Z" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M10 6V4M10 16V14M7.2 7.2L5.8 5.8M14.2 14.2L12.8 12.8M6 10H4M16 10H14M7.2 12.8L5.8 14.2M14.2 5.8L12.8 7.2M10 8A2 2 0 1 1 10 12A2 2 0 0 1 10 8Z" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M12 7V4M12 20V17M8.5 8.5L6.4 6.4M17.6 17.6L15.5 15.5M7 12H4M20 12H17M8.5 15.5L6.4 17.6M17.6 6.4L15.5 8.5M12 9A3 3 0 1 1 12 15A3 3 0 0 1 12 9Z" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M16 9V5M16 27V23M11 11L8 8M24 24L21 21M9 16H5M27 16H23M11 21L8 24M24 8L21 11M16 12A4 4 0 1 1 16 20A4 4 0 0 1 16 12Z" })
+};
+var sound = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M3.5 9.5H6L9.5 12.5V3.5L6 6.5H3.5V9.5ZM11 6.5C11.7 7.2 11.7 8.8 11 9.5" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M4.5 12H7.5L12 16V4L7.5 8H4.5V12ZM14 7.5C15 8.5 15 11.5 14 12.5" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M5.5 14.5H9L15 19V5L9 9.5H5.5V14.5ZM17 8.5C18.5 10 18.5 14 17 15.5" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M7 19H12L20 25V7L12 13H7V19ZM23 11C25 13 25 19 23 21" })
+};
+var soundOff = {
+  xs: /* @__PURE__ */ jsx("path", { d: "M3.5 9.5H6L9.5 12.5V3.5L6 6.5H3.5V9.5ZM11 6.5L13 8.5M13 6.5L11 8.5" }),
+  s: /* @__PURE__ */ jsx("path", { d: "M4.5 12H7.5L12 16V4L7.5 8H4.5V12ZM14 8L17 11M17 8L14 11" }),
+  m: /* @__PURE__ */ jsx("path", { d: "M5.5 14.5H9L15 19V5L9 9.5H5.5V14.5ZM17 9L21 13M21 9L17 13" }),
+  l: /* @__PURE__ */ jsx("path", { d: "M7 19H12L20 25V7L12 13H7V19ZM23 12L27 16M27 12L23 16" })
+};
+
+// src/icons/registry.ts
+var iconRegistry = {
+  "arrow-link": arrowLink,
+  "arrow-right": arrowRight,
+  "chevron-right": chevronRight,
+  fullscreen,
+  pause,
+  play,
+  settings,
+  sound,
+  "sound-off": soundOff
+};
+
+// src/tokens/helpers/create-scale-tokens.ts
+function detectTokenType(value) {
+  if (typeof value === "number") return "float";
+  if (typeof value === "string") return "string";
+  return "boolean";
+}
+function createScaleTokens(tokenPathPrefix, values) {
+  return Object.entries(values).map(([step, value]) => ({
+    collection: "scales",
+    name: `${tokenPathPrefix}/${step}`,
+    type: detectTokenType(value),
+    values: {
+      value
+    }
+  }));
+}
+
+// src/tokens/scales/size.ts
+var sizeX = {
+  "0": 0,
+  "025": 1,
+  "05": 2,
+  "1": 4,
+  "2": 8,
+  "3": 12,
+  "4": 16,
+  "5": 20,
+  "6": 24,
+  "8": 32,
+  "10": 40,
+  "12": 48
+};
+var sizeGrid = {
+  s: 12,
+  m: 20,
+  l: 40,
+  xl: 60,
+  xxl: 80,
+  xxxl: 100
+};
+var sizeIcon = {
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 32
+};
+[
+  ...createScaleTokens("size/x", sizeX),
+  ...createScaleTokens("size/grid", sizeGrid),
+  ...createScaleTokens("size/icon", sizeIcon)
+];
+var iconSizeMap = sizeIcon;
+var Icon = ({
+  name,
+  size: iconSize = "m",
+  className,
+  ...props
+}) => {
+  const glyph = iconRegistry[name];
+  const size = iconSizeMap[iconSize];
+  const viewBox = `0 0 ${size} ${size}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: classes,
+      width: size,
+      height: size,
+      viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children: glyph[iconSize]
+    }
+  );
+};
+var icon_default = Icon;
+var Button = ({
+  state = "default",
+  icon,
+  className = "",
+  disabled = false,
+  children,
+  ...props
+}) => {
+  const isIconOnly = !!icon && !children;
+  const classes = classnames("button", className, {
+    "button--primary": state === "primary",
+    "button--disabled": disabled,
+    "button--icon-only": isIconOnly
+  });
+  let resolvedIcon = icon;
+  if (isValidElement(icon) && icon.type === icon_default) {
+    const iconElement = icon;
+    resolvedIcon = cloneElement(iconElement, {
+      size: iconElement.props.size ?? "s",
+      className: classnames("button__icon", iconElement.props.className),
+      "aria-hidden": iconElement.props["aria-hidden"] ?? true,
+      focusable: iconElement.props.focusable ?? false
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: classes,
+      disabled,
+      ...props,
+      children: [
+        resolvedIcon,
+        children
+      ]
+    }
+  );
+};
+var button_default = Button;
+var ButtonIcon = ({
+  state = "default",
+  icon,
+  label,
+  className = "",
+  disabled = false,
+  ...props
+}) => {
+  const isDisabled = disabled || state === "disabled";
+  const classes = classnames("button-icon", className, {
+    "button-icon--disabled": isDisabled
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: classes,
+      disabled: isDisabled,
+      "aria-label": label,
+      title: label,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        icon_default,
+        {
+          name: icon,
+          className: "button-icon__icon",
+          "aria-hidden": true,
+          focusable: false
+        }
+      )
+    }
+  );
+};
+var button_icon_default = ButtonIcon;
+var Input = ({
+  state = "default",
+  className = "",
+  disabled = false,
+  ...props
+}) => {
+  const classes = classnames("input", className, {
+    error: state === "error",
+    success: state === "success"
+  });
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: classes,
+      disabled,
+      ...props
+    }
+  );
+};
+var input_default = Input;
+var Textarea = ({
+  state = "default",
+  className = "",
+  disabled = false,
+  ...props
+}) => {
+  const classes = classnames("textarea", className, {
+    error: state === "error",
+    success: state === "success"
+  });
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: classes,
+      disabled,
+      ...props
+    }
+  );
+};
+var textarea_default = Textarea;
+var Select = ({
+  state = "default",
+  className = "",
+  disabled = false,
+  children,
+  ...props
+}) => {
+  const classes = classnames("select", className, {
+    error: state === "error",
+    success: state === "success"
+  });
+  return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx(
+    "select",
+    {
+      className: "select__field",
+      disabled,
+      ...props,
+      children
+    }
+  ) });
+};
+var select_default = Select;
+var Dropdown = ({
+  options,
+  value,
+  defaultValue,
+  label = "Dropdown",
+  align = "bottom-start",
+  trigger,
+  onChange,
+  className = "",
+  ...props
+}) => {
+  const dropdownRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const selectedValue = value ?? internalValue;
+  const classes = classnames("dropdown", className, {
+    "dropdown--open": isOpen,
+    "dropdown--top-start": align === "top-start",
+    "dropdown--top-end": align === "top-end",
+    "dropdown--bottom-start": align === "bottom-start",
+    "dropdown--bottom-end": align === "bottom-end"
+  });
+  const triggerElement = trigger;
+  const triggerClasses = classnames(
+    "dropdown__trigger",
+    triggerElement.props.className
+  );
+  const resolvedTrigger = cloneElement(triggerElement, {
+    className: triggerClasses,
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    onClick: (event) => {
+      triggerElement.props.onClick?.(event);
+      setIsOpen((currentValue) => !currentValue);
+    }
+  });
+  const handleOptionClick = (option) => {
+    if (option.disabled) {
+      return;
+    }
+    if (value === void 0) {
+      setInternalValue(option.value);
+    }
+    onChange?.(option.value);
+    setIsOpen(false);
+  };
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handleDocumentClick = (event) => {
+      const dropdown = dropdownRef.current;
+      if (!dropdown || dropdown.contains(event.target)) {
+        return;
+      }
+      setIsOpen(false);
+    };
+    const handleDocumentKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleDocumentClick);
+    document.addEventListener("keydown", handleDocumentKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentClick);
+      document.removeEventListener("keydown", handleDocumentKeyDown);
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dropdownRef,
+      className: classes,
+      ...props,
+      children: [
+        resolvedTrigger,
+        isOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "dropdown__menu",
+            role: "menu",
+            "aria-label": label,
+            children: options.map((option) => {
+              const isSelected = option.value === selectedValue;
+              const itemClasses = classnames("dropdown__item", {
+                "dropdown__item--selected": isSelected,
+                "dropdown__item--disabled": option.disabled
+              });
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: itemClasses,
+                  type: "button",
+                  role: "menuitemradio",
+                  "aria-checked": isSelected,
+                  "aria-disabled": option.disabled,
+                  disabled: option.disabled,
+                  onClick: () => handleOptionClick(option),
+                  children: option.label
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+var dropdown_default = Dropdown;
+var Checkbox = ({
+  label,
+  className = "",
+  disabled = false,
+  ...props
+}) => {
+  const classes = classnames(
+    "checkbox",
+    className,
+    {
+      "checkbox--disabled": disabled
+    }
+  );
+  return /* @__PURE__ */ jsxs("label", { className: classes, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "checkbox__input",
+        type: "checkbox",
+        disabled,
+        ...props
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: "checkbox__label", children: label })
+  ] });
+};
+var checkbox_default = Checkbox;
+var Radio = ({
+  label,
+  className = "",
+  disabled = false,
+  ...props
+}) => {
+  const classes = classnames(
+    "radio",
+    className,
+    {
+      "radio--disabled": disabled
+    }
+  );
+  return /* @__PURE__ */ jsxs("label", { className: classes, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "radio__input",
+        type: "radio",
+        disabled,
+        ...props
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: "radio__label", children: label })
+  ] });
+};
+var radio_default = Radio;
+var Field = ({
+  label,
+  hint,
+  error,
+  required = false,
+  disabled = false,
+  htmlFor,
+  className = "",
+  children
+}) => {
+  const classes = classnames(
+    "field",
+    className,
+    {
+      "field--disabled": disabled,
+      "field--error": !!error
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "field__label",
+        htmlFor,
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "field__required", children: " *" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "field__control", children }),
+    error ? /* @__PURE__ */ jsx("div", { className: "field__message field__message--error", children: error }) : hint ? /* @__PURE__ */ jsx("div", { className: "field__message", children: hint }) : null
+  ] });
+};
+var field_default = Field;
+var Menu = ({
+  state = "default",
+  className = "",
+  children,
+  //  disabled = false,
+  ...props
+}) => {
+  const classes = classnames("menu", className, {
+    error: state === "error",
+    success: state === "success"
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var menu_default = Menu;
+var Tabs = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("tabs", className);
+  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
+};
+var tabs_default = Tabs;
+function getClampedValue(value, max) {
+  return Math.min(
+    Math.max(value, 0),
+    max
+  );
+}
+function getPercent(value, max) {
+  if (max <= 0) {
+    return 0;
+  }
+  return getClampedValue(value, max) / max * 100;
+}
+function getValueFromPointer(event, track, max, isVertical) {
+  const rect = track.getBoundingClientRect();
+  if (isVertical) {
+    const y = rect.bottom - event.clientY;
+    const ratio2 = y / rect.height;
+    return getClampedValue(
+      ratio2 * max,
+      max
+    );
+  }
+  const x = event.clientX - rect.left;
+  const ratio = x / rect.width;
+  return getClampedValue(
+    ratio * max,
+    max
+  );
+}
+function getNextKeyboardValue(key, value, max, step) {
+  if (key === "ArrowRight" || key === "ArrowUp") {
+    return getClampedValue(
+      value + step,
+      max
+    );
+  }
+  if (key === "ArrowLeft" || key === "ArrowDown") {
+    return getClampedValue(
+      value - step,
+      max
+    );
+  }
+  if (key === "Home") {
+    return 0;
+  }
+  if (key === "End") {
+    return max;
+  }
+  return value;
+}
+var ProgressBar = ({
+  mode = "player",
+  value = 0,
+  buffered = 0,
+  max = 100,
+  orientation = "horizontal",
+  step = 1,
+  interactive,
+  label = "Progress",
+  className = "",
+  style,
+  onValueChange,
+  onValueCommit,
+  ...props
+}) => {
+  const trackRef = useRef(null);
+  const safeValue = getClampedValue(
+    value,
+    max
+  );
+  const valuePercent = getPercent(
+    value,
+    max
+  );
+  const bufferedPercent = getPercent(
+    buffered,
+    max
+  );
+  const isInteractive = interactive ?? mode !== "diagram";
+  const isVertical = orientation === "vertical" || mode === "level";
+  const hasBuffered = mode === "player" && buffered > value;
+  const hasValue = mode === "diagram";
+  const classes = classnames(
+    "progressbar",
+    className,
+    {
+      "progressbar--vertical": isVertical,
+      "progressbar--level": mode === "level",
+      "progressbar--interactive": isInteractive
+    }
+  );
+  const progressStyle = {
+    ...style,
+    "--progressbar-value": `${valuePercent}%`,
+    "--progressbar-buffered": `${bufferedPercent}%`,
+    "--progressbar-buffered-offset": `${valuePercent}%`
+  };
+  const updateValueFromPointer = (event, shouldCommit = false) => {
+    const track = trackRef.current;
+    if (!isInteractive || !track) {
+      return;
+    }
+    const nextValue = getValueFromPointer(
+      event,
+      track,
+      max,
+      isVertical
+    );
+    onValueChange?.(
+      nextValue
+    );
+    if (shouldCommit) {
+      onValueCommit?.(
+        nextValue
+      );
+    }
+  };
+  const handlePointerDown = (event) => {
+    if (!isInteractive) {
+      return;
+    }
+    event.currentTarget.setPointerCapture(
+      event.pointerId
+    );
+    updateValueFromPointer(
+      event
+    );
+  };
+  const handlePointerMove = (event) => {
+    if (!isInteractive || !event.currentTarget.hasPointerCapture(
+      event.pointerId
+    )) {
+      return;
+    }
+    updateValueFromPointer(
+      event
+    );
+  };
+  const handlePointerUp = (event) => {
+    if (!isInteractive) {
+      return;
+    }
+    updateValueFromPointer(
+      event,
+      true
+    );
+    event.currentTarget.releasePointerCapture(
+      event.pointerId
+    );
+  };
+  const handleKeyDown = (event) => {
+    if (!isInteractive) {
+      return;
+    }
+    const nextValue = getNextKeyboardValue(
+      event.key,
+      safeValue,
+      max,
+      step
+    );
+    if (nextValue === safeValue) {
+      return;
+    }
+    event.preventDefault();
+    onValueChange?.(
+      nextValue
+    );
+    onValueCommit?.(
+      nextValue
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      role: isInteractive ? "slider" : "progressbar",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": safeValue,
+      "aria-orientation": isInteractive && isVertical ? "vertical" : void 0,
+      tabIndex: isInteractive ? 0 : void 0,
+      style: progressStyle,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: trackRef,
+          className: "progressbar__track",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "progressbar__value" }),
+            hasBuffered && /* @__PURE__ */ jsx("div", { className: "progressbar__buffered" }),
+            hasValue && /* @__PURE__ */ jsxs("span", { className: "progressbar__label", children: [
+              Math.round(
+                valuePercent
+              ),
+              "%"
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var progressbar_default = ProgressBar;
+function getClampedValue2(value, min, max) {
+  return Math.min(
+    Math.max(value, min),
+    max
+  );
+}
+function formatTime(value) {
+  if (!Number.isFinite(value)) {
+    return "0:00";
+  }
+  const minutes = Math.floor(value / 60);
+  const seconds = Math.floor(value % 60);
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+function getBufferedEnd(video) {
+  if (video.buffered.length === 0) {
+    return 0;
+  }
+  return video.buffered.end(video.buffered.length - 1);
+}
+function getVideoSource(src, qualities, selectedQuality) {
+  const selectedQualityItem = qualities.find(
+    (quality) => quality.value === selectedQuality
+  );
+  return selectedQualityItem?.src ?? src;
+}
+function getQualityOptions(qualities) {
+  return qualities.map((quality) => ({
+    value: quality.value,
+    label: quality.label,
+    disabled: quality.disabled
+  }));
+}
+var defaultQualities = [
+  {
+    value: "360p",
+    label: "360p"
+  },
+  {
+    value: "720p",
+    label: "720p"
+  },
+  {
+    value: "1080p",
+    label: "1080p"
+  }
+];
+var Video = ({
+  src,
+  cover,
+  qualities = defaultQualities,
+  defaultQuality = "1080p",
+  label = "Video player",
+  initialVolume = 1,
+  initialMuted = false,
+  className = "",
+  autoPlay,
+  loop,
+  muted,
+  playsInline = true,
+  preload = "metadata",
+  onQualityChange,
+  onPlay,
+  onPause,
+  onLoadedMetadata,
+  onTimeUpdate,
+  onProgress,
+  onVolumeChange,
+  children,
+  ...props
+}) => {
+  const videoRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isVolumeOpen, setIsVolumeOpen] = useState(false);
+  const [selectedQuality, setSelectedQuality] = useState(defaultQuality);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [buffered, setBuffered] = useState(0);
+  const [volume, setVolume] = useState(initialVolume);
+  const [isMuted, setIsMuted] = useState(muted ?? initialMuted);
+  const videoSrc = getVideoSource(
+    src,
+    qualities,
+    selectedQuality
+  );
+  React4.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !videoSrc) {
+      return;
+    }
+    if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = videoSrc;
+      return;
+    }
+    if (!Hls.isSupported()) {
+      video.src = videoSrc;
+      return;
+    }
+    const hls = new Hls();
+    hls.on(Hls.Events.ERROR, (_, data) => {
+      console.error("HLS error", data);
+    });
+    hls.loadSource(videoSrc);
+    hls.attachMedia(video);
+    return () => {
+      hls.destroy();
+    };
+  }, [videoSrc]);
+  const qualityOptions = getQualityOptions(
+    qualities
+  );
+  const hasStarted = currentTime > 0 || isPlaying;
+  const hasControls = hasStarted;
+  const hasVolume = isVolumeOpen;
+  const classes = classnames("video", className, {
+    "video--with-controls": hasControls,
+    "video--with-volume": hasVolume
+  });
+  const syncMediaState = () => {
+    const video = videoRef.current;
+    if (!video) {
+      return;
+    }
+    setCurrentTime(video.currentTime);
+    setDuration(video.duration || 0);
+    setBuffered(getBufferedEnd(video));
+    setVolume(video.volume);
+    setIsMuted(video.muted);
+    setIsPlaying(!video.paused);
+  };
+  const handlePlayToggle = () => {
+    const video = videoRef.current;
+    if (!video) {
+      return;
+    }
+    if (video.paused) {
+      video.play().catch(() => void 0);
+      return;
+    }
+    video.pause();
+  };
+  const handleSeek = (nextValue) => {
+    const video = videoRef.current;
+    if (!video) {
+      return;
+    }
+    video.currentTime = getClampedValue2(
+      nextValue,
+      0,
+      duration
+    );
+    setCurrentTime(video.currentTime);
+  };
+  const handleVolumeChange = (nextValue) => {
+    const video = videoRef.current;
+    if (!video) {
+      return;
+    }
+    const nextVolume = getClampedValue2(
+      nextValue,
+      0,
+      1
+    );
+    video.volume = nextVolume;
+    video.muted = nextVolume === 0;
+    setVolume(nextVolume);
+    setIsMuted(video.muted);
+  };
+  const handleSoundToggle = () => {
+    const video = videoRef.current;
+    if (!video) {
+      return;
+    }
+    video.muted = !video.muted;
+    setIsMuted(video.muted);
+  };
+  const handleFullscreen = () => {
+    const video = videoRef.current;
+    if (!video) {
+      return;
+    }
+    video.requestFullscreen?.();
+  };
+  const handleQualityChange = (quality) => {
+    setSelectedQuality(quality);
+    onQualityChange?.(quality);
+  };
+  const handleLoadedMetadata = (event) => {
+    syncMediaState();
+    onLoadedMetadata?.(event);
+  };
+  const handleTimeUpdate = (event) => {
+    syncMediaState();
+    onTimeUpdate?.(event);
+  };
+  const handleProgress = (event) => {
+    syncMediaState();
+    onProgress?.(event);
+  };
+  const handlePlay = (event) => {
+    setIsPlaying(true);
+    onPlay?.(event);
+  };
+  const handlePause = (event) => {
+    setIsPlaying(false);
+    onPause?.(event);
+  };
+  const handleNativeVolumeChange = (event) => {
+    syncMediaState();
+    onVolumeChange?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classes,
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "video__surface", children: [
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              ...props,
+              ref: videoRef,
+              className: "video__media",
+              poster: cover,
+              autoPlay,
+              loop,
+              muted: isMuted,
+              playsInline,
+              preload,
+              controls: false,
+              onLoadedMetadata: handleLoadedMetadata,
+              onTimeUpdate: handleTimeUpdate,
+              onProgress: handleProgress,
+              onPlay: handlePlay,
+              onPause: handlePause,
+              onVolumeChange: handleNativeVolumeChange,
+              children
+            }
+          ),
+          !hasStarted && /* @__PURE__ */ jsx(
+            button_icon_default,
+            {
+              className: "video__main-action",
+              icon: "play",
+              label: "Play video",
+              onClick: handlePlayToggle
+            }
+          )
+        ] }),
+        hasControls && /* @__PURE__ */ jsxs("div", { className: "video__controls", children: [
+          /* @__PURE__ */ jsx(
+            button_icon_default,
+            {
+              icon: isPlaying ? "pause" : "play",
+              label: isPlaying ? "Pause video" : "Play video",
+              onClick: handlePlayToggle
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "video__time", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsx(
+            progressbar_default,
+            {
+              className: "video__progress",
+              mode: "player",
+              value: currentTime,
+              buffered,
+              max: duration || 1,
+              step: 1,
+              label: "Video progress",
+              onValueChange: handleSeek
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            button_icon_default,
+            {
+              icon: "fullscreen",
+              label: "Fullscreen",
+              onClick: handleFullscreen
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "video__sound-control",
+              onMouseLeave: () => setIsVolumeOpen(false),
+              children: [
+                /* @__PURE__ */ jsx(
+                  button_icon_default,
+                  {
+                    icon: isMuted ? "sound-off" : "sound",
+                    label: isMuted ? "Unmute video" : "Mute video",
+                    onClick: handleSoundToggle,
+                    onMouseEnter: () => setIsVolumeOpen(true),
+                    onFocus: () => setIsVolumeOpen(true)
+                  }
+                ),
+                hasVolume && /* @__PURE__ */ jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsx(
+                  progressbar_default,
+                  {
+                    mode: "level",
+                    value: isMuted ? 0 : volume,
+                    max: 1,
+                    step: 0.05,
+                    label: "Volume",
+                    onValueChange: handleVolumeChange
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            dropdown_default,
+            {
+              align: "top-end",
+              value: selectedQuality,
+              options: qualityOptions,
+              label: "Video quality",
+              onChange: handleQualityChange,
+              trigger: /* @__PURE__ */ jsx(
+                button_icon_default,
+                {
+                  icon: "settings",
+                  label: "Video quality"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var video_default = Video;
+var Search = ({
+  state = "default",
+  className = "",
+  children,
+  //  disabled = false,
+  ...props
+}) => {
+  const classes = classnames("search", className, {
+    error: state === "error",
+    success: state === "success"
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var search_default = Search;
+var RichEdit = ({
+  state = "default",
+  className = "",
+  //  disabled = false,
+  ...props
+}) => {
+  const classes = classnames("richedit", className, {
+    error: state === "error",
+    success: state === "success"
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props
+    }
+  );
+};
+var richedit_default = RichEdit;
+var Tag = ({
+  context = "success",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("tag", className, {
+    [`tag--context-${context}`]: Boolean(context)
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var tag_default = Tag;
+var Card = ({
+  state = "default",
+  heading,
+  description,
+  actions,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("card", className, {});
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: classes,
+      ...props,
+      children: [
+        (heading || description) && /* @__PURE__ */ jsxs("div", { className: "card__header", children: [
+          heading && /* @__PURE__ */ jsx("h2", { className: "card__heading", children: heading }),
+          description && /* @__PURE__ */ jsx("p", { className: "card__description", children: description })
+        ] }),
+        children && /* @__PURE__ */ jsx("div", { className: "card__content", children }),
+        actions && /* @__PURE__ */ jsx("div", { className: "card__actions", children: actions })
+      ]
+    }
+  );
+};
+var card_default = Card;
+
+export { button_default as Button, button_icon_default as ButtonIcon, card_default as Card, checkbox_default as Checkbox, dropdown_default as Dropdown, field_default as Field, input_default as Input, menu_default as Menu, progressbar_default as ProgressBar, radio_default as Radio, richedit_default as RichEdit, search_default as Search, select_default as Select, tabs_default as Tabs, tag_default as Tag, textarea_default as Textarea, video_default as Video };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map