@brycks/core-front 0.2.7 → 0.2.9

package/dist/components/media/Image/Image.js

@@ -0,0 +1,171 @@
+import { jsx as t, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as z, useState as A, useCallback as j } from "react";
+import { cx as p } from "../../../utils/styles.js";
+const F = {
+  none: "0",
+  sm: "var(--brycks-radius-sm)",
+  md: "var(--brycks-radius-md)",
+  lg: "var(--brycks-radius-lg)",
+  xl: "var(--brycks-radius-xl)",
+  full: "var(--brycks-radius-full)"
+};
+function E(r) {
+  if (r === void 0) return;
+  if (typeof r == "number") return r;
+  const s = r.split(/[:/]/);
+  if (s.length === 2) {
+    const n = parseFloat(s[0]), i = parseFloat(s[1]);
+    if (!isNaN(n) && !isNaN(i) && i !== 0)
+      return n / i;
+  }
+  const e = parseFloat(r);
+  return isNaN(e) ? void 0 : e;
+}
+const L = z(function({
+  src: s,
+  alt: e,
+  aspectRatio: n,
+  fit: i = "cover",
+  loading: S = "lazy",
+  fallback: d,
+  placeholder: l,
+  radius: C = "none",
+  showBackground: R = !0,
+  onLoad: h,
+  onError: v,
+  className: g,
+  style: u,
+  testId: y,
+  ...f
+}, B) {
+  const [o, k] = A("loading"), I = j(
+    (b) => {
+      k("loaded"), h?.(b);
+    },
+    [h]
+  ), $ = j(
+    (b) => {
+      k("error"), v?.(b);
+    },
+    [v]
+  ), a = E(n), c = F[C] ?? F.none, m = {
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: c,
+    backgroundColor: R && o === "loading" ? "var(--brycks-background-muted)" : void 0,
+    ...a ? {
+      width: "100%",
+      paddingBottom: `${1 / a * 100}%`
+    } : {}
+  }, w = {
+    display: "block",
+    objectFit: i,
+    borderRadius: c,
+    ...a ? {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%"
+    } : {
+      width: u?.width ?? "100%",
+      height: u?.height ?? "auto"
+    },
+    opacity: o === "loaded" ? 1 : 0,
+    transition: "opacity var(--brycks-duration-normal, 200ms) var(--brycks-easing-out, ease-out)",
+    ...u
+  }, x = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: c
+  };
+  return o === "error" ? typeof d == "string" ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: p("brycks-image", "brycks-image--fallback", g),
+      style: m,
+      "data-testid": y,
+      children: /* @__PURE__ */ t(
+        "img",
+        {
+          src: d,
+          alt: e,
+          style: {
+            ...w,
+            opacity: 1
+          },
+          ...f
+        }
+      )
+    }
+  ) : /* @__PURE__ */ N(
+    "div",
+    {
+      className: p("brycks-image", "brycks-image--error", g),
+      style: {
+        ...m,
+        backgroundColor: "var(--brycks-background-muted)"
+      },
+      "data-testid": y,
+      role: "img",
+      "aria-label": e,
+      children: [
+        a && /* @__PURE__ */ t("div", { style: { paddingBottom: `${1 / a * 100}%` } }),
+        d && /* @__PURE__ */ t("div", { style: x, children: d })
+      ]
+    }
+  ) : /* @__PURE__ */ N(
+    "div",
+    {
+      className: p(
+        "brycks-image",
+        o === "loading" && "brycks-image--loading",
+        o === "loaded" && "brycks-image--loaded",
+        g
+      ),
+      style: a ? m : { position: "relative", borderRadius: c },
+      "data-testid": y,
+      children: [
+        o === "loading" && l && /* @__PURE__ */ t("div", { style: x, children: typeof l == "string" ? /* @__PURE__ */ t(
+          "img",
+          {
+            src: l,
+            alt: "",
+            "aria-hidden": "true",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: i,
+              filter: "blur(10px)",
+              transform: "scale(1.1)"
+            }
+          }
+        ) : l }),
+        /* @__PURE__ */ t(
+          "img",
+          {
+            ref: B,
+            src: s,
+            alt: e,
+            loading: S,
+            onLoad: I,
+            onError: $,
+            style: w,
+            ...f
+          }
+        )
+      ]
+    }
+  );
+});
+L.displayName = "Image";
+export {
+  L as Image
+};
+//# sourceMappingURL=Image.js.map

package/dist/components/media/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":["../../../../src/components/media/Image/Image.tsx"],"sourcesContent":["/**\r\n * Image Component\r\n *\r\n * Responsive image with lazy loading, fallback support, and aspect ratio control.\r\n * Follows accessibility best practices and design system conventions.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useState,\r\n  useCallback,\r\n  type CSSProperties,\r\n  type ImgHTMLAttributes,\r\n  type ReactNode,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type ImageLoading = 'lazy' | 'eager'\r\n\r\nexport interface ImageProps\r\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {\r\n  /** Image source URL */\r\n  src: string\r\n  /** Alternative text for accessibility (required) */\r\n  alt: string\r\n  /** Aspect ratio (width/height). If set, maintains ratio */\r\n  aspectRatio?: number | string\r\n  /** How the image should fit within its container */\r\n  fit?: ImageFit\r\n  /** Loading strategy */\r\n  loading?: ImageLoading\r\n  /** Fallback content or URL when image fails to load */\r\n  fallback?: ReactNode | string\r\n  /** Placeholder shown while loading */\r\n  placeholder?: ReactNode | string\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Whether to show a subtle background while loading */\r\n  showBackground?: boolean\r\n  /** Callback when image loads successfully */\r\n  onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void\r\n  /** Callback when image fails to load */\r\n  onError?: (event: SyntheticEvent<HTMLImageElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  // Handle string formats like \"16:9\" or \"16/9\"\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\r\n  {\r\n    src,\r\n    alt,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    loading = 'lazy',\r\n    fallback,\r\n    placeholder,\r\n    radius = 'none',\r\n    showBackground = true,\r\n    onLoad,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading')\r\n\r\n  const handleLoad = useCallback(\r\n    (event: SyntheticEvent<HTMLImageElement>) => {\r\n      setStatus('loaded')\r\n      onLoad?.(event)\r\n    },\r\n    [onLoad]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLImageElement>) => {\r\n      setStatus('error')\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  // Container styles for aspect ratio support\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor:\r\n      showBackground && status === 'loading'\r\n        ? 'var(--brycks-background-muted)'\r\n        : undefined,\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n  }\r\n\r\n  const imageStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: style?.width ?? '100%',\r\n          height: style?.height ?? 'auto',\r\n        }),\r\n    opacity: status === 'loaded' ? 1 : 0,\r\n    transition: 'opacity var(--brycks-duration-normal, 200ms) var(--brycks-easing-out, ease-out)',\r\n    ...style,\r\n  }\r\n\r\n  const overlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    borderRadius,\r\n  }\r\n\r\n  // Render fallback content\r\n  if (status === 'error') {\r\n    if (typeof fallback === 'string') {\r\n      // Fallback is an image URL\r\n      return (\r\n        <div\r\n          className={cx('brycks-image', 'brycks-image--fallback', className)}\r\n          style={containerStyle}\r\n          data-testid={testId}\r\n        >\r\n          <img\r\n            src={fallback}\r\n            alt={alt}\r\n            style={{\r\n              ...imageStyle,\r\n              opacity: 1,\r\n            }}\r\n            {...props}\r\n          />\r\n        </div>\r\n      )\r\n    }\r\n\r\n    // Fallback is a ReactNode\r\n    return (\r\n      <div\r\n        className={cx('brycks-image', 'brycks-image--error', className)}\r\n        style={{\r\n          ...containerStyle,\r\n          backgroundColor: 'var(--brycks-background-muted)',\r\n        }}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label={alt}\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        {fallback && <div style={overlayStyle}>{fallback}</div>}\r\n      </div>\r\n    )\r\n  }\r\n\r\n  // Render image with optional placeholder\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-image',\r\n        status === 'loading' && 'brycks-image--loading',\r\n        status === 'loaded' && 'brycks-image--loaded',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      {/* Placeholder */}\r\n      {status === 'loading' && placeholder && (\r\n        <div style={overlayStyle}>\r\n          {typeof placeholder === 'string' ? (\r\n            <img\r\n              src={placeholder}\r\n              alt=\"\"\r\n              aria-hidden=\"true\"\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                objectFit: fit,\r\n                filter: 'blur(10px)',\r\n                transform: 'scale(1.1)',\r\n              }}\r\n            />\r\n          ) : (\r\n            placeholder\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      {/* Main image */}\r\n      <img\r\n        ref={ref}\r\n        src={src}\r\n        alt={alt}\r\n        loading={loading}\r\n        onLoad={handleLoad}\r\n        onError={handleError}\r\n        style={imageStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nImage.displayName = 'Image'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Image","forwardRef","src","alt","aspectRatio","fit","loading","fallback","placeholder","radius","showBackground","onLoad","onError","className","style","testId","props","ref","status","setStatus","useState","handleLoad","useCallback","event","handleError","parsedRatio","borderRadius","containerStyle","imageStyle","overlayStyle","jsx","cx","jsxs"],"mappings":"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"}

package/dist/components/media/ImageThumbnail/ImageThumbnail.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),w=require("react"),x=require("../../../utils/styles.cjs"),S={sm:{width:60,deleteSize:18},md:{width:80,deleteSize:20},lg:{width:100,deleteSize:24}},l=w.forwardRef(function({src:d,alt:c,isSelected:r=!1,badge:o,onClick:u,onDelete:s,size:i="md",aspectRatio:b="1",disabled:e=!1,className:m,testId:g},y){const t=S[i],h={position:"relative",width:t.width,aspectRatio:b,padding:0,border:r?"2px solid var(--brycks-primary-default)":"2px solid transparent",borderRadius:"var(--brycks-radius-md)",overflow:"hidden",cursor:e?"not-allowed":"pointer",background:"var(--brycks-background-muted)",opacity:e?.5:1,transition:"border-color var(--brycks-duration-fast) var(--brycks-easing-out)"},p={width:"100%",height:"100%",objectFit:"cover",display:"block"},k={position:"absolute",top:4,right:4,width:t.deleteSize,height:t.deleteSize,borderRadius:"50%",background:"rgba(0, 0, 0, 0.7)",color:"white",border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:t.deleteSize*.6,fontWeight:600,lineHeight:1,padding:0,transition:"background var(--brycks-duration-fast) var(--brycks-easing-out)"},f={position:"absolute",bottom:4,left:4,background:"var(--brycks-primary-default)",color:"white",padding:"2px 6px",borderRadius:"var(--brycks-radius-sm)",fontSize:i==="sm"?8:i==="md"?10:11,fontWeight:600,lineHeight:1,textTransform:"uppercase"},v=n=>{n.stopPropagation(),s?.(n)};return a.jsxs("button",{ref:y,type:"button",className:x.cx("brycks-image-thumbnail",r&&"brycks-image-thumbnail--selected",e&&"brycks-image-thumbnail--disabled",m),style:h,onClick:u,disabled:e,"data-testid":g,"aria-pressed":r,children:[a.jsx("img",{src:d,alt:c,style:p}),s&&!e&&a.jsx("button",{type:"button",className:"brycks-image-thumbnail__delete",style:k,onClick:v,"aria-label":"Remove image",children:"×"}),o&&a.jsx("span",{className:"brycks-image-thumbnail__badge",style:f,children:o})]})});l.displayName="ImageThumbnail";exports.ImageThumbnail=l;
+//# sourceMappingURL=ImageThumbnail.cjs.map

package/dist/components/media/ImageThumbnail/ImageThumbnail.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageThumbnail.cjs","sources":["../../../../src/components/media/ImageThumbnail/ImageThumbnail.tsx"],"sourcesContent":["/**\n * ImageThumbnail Component\n *\n * Thumbnail image with selection state, optional badge, and delete action.\n * Designed for image galleries and media selection interfaces.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type MouseEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport interface ImageThumbnailProps {\n  /** Image source URL */\n  src: string\n  /** Alternative text for accessibility */\n  alt: string\n  /** Whether this thumbnail is selected */\n  isSelected?: boolean\n  /** Badge content (e.g., \"COVER\", \"PRIMARY\") */\n  badge?: ReactNode\n  /** Callback when thumbnail is clicked */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  /** Callback when delete button is clicked */\n  onDelete?: (event: MouseEvent<HTMLButtonElement>) => void\n  /** Size of the thumbnail */\n  size?: 'sm' | 'md' | 'lg'\n  /** Aspect ratio of the thumbnail */\n  aspectRatio?: '1' | '4/3' | '16/9'\n  /** Whether the thumbnail is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeMap: Record<string, { width: number; deleteSize: number }> = {\n  sm: { width: 60, deleteSize: 18 },\n  md: { width: 80, deleteSize: 20 },\n  lg: { width: 100, deleteSize: 24 },\n}\n\nexport const ImageThumbnail = forwardRef<HTMLButtonElement, ImageThumbnailProps>(\n  function ImageThumbnail(\n    {\n      src,\n      alt,\n      isSelected = false,\n      badge,\n      onClick,\n      onDelete,\n      size = 'md',\n      aspectRatio = '1',\n      disabled = false,\n      className,\n      testId,\n    },\n    ref\n  ) {\n    const sizeValue = sizeMap[size]\n\n    const containerStyle: CSSProperties = {\n      position: 'relative',\n      width: sizeValue.width,\n      aspectRatio,\n      padding: 0,\n      border: isSelected\n        ? '2px solid var(--brycks-primary-default)'\n        : '2px solid transparent',\n      borderRadius: 'var(--brycks-radius-md)',\n      overflow: 'hidden',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      background: 'var(--brycks-background-muted)',\n      opacity: disabled ? 0.5 : 1,\n      transition: 'border-color var(--brycks-duration-fast) var(--brycks-easing-out)',\n    }\n\n    const imageStyle: CSSProperties = {\n      width: '100%',\n      height: '100%',\n      objectFit: 'cover',\n      display: 'block',\n    }\n\n    const deleteButtonStyle: CSSProperties = {\n      position: 'absolute',\n      top: 4,\n      right: 4,\n      width: sizeValue.deleteSize,\n      height: sizeValue.deleteSize,\n      borderRadius: '50%',\n      background: 'rgba(0, 0, 0, 0.7)',\n      color: 'white',\n      border: 'none',\n      cursor: 'pointer',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      fontSize: sizeValue.deleteSize * 0.6,\n      fontWeight: 600,\n      lineHeight: 1,\n      padding: 0,\n      transition: 'background var(--brycks-duration-fast) var(--brycks-easing-out)',\n    }\n\n    const badgeStyle: CSSProperties = {\n      position: 'absolute',\n      bottom: 4,\n      left: 4,\n      background: 'var(--brycks-primary-default)',\n      color: 'white',\n      padding: '2px 6px',\n      borderRadius: 'var(--brycks-radius-sm)',\n      fontSize: size === 'sm' ? 8 : size === 'md' ? 10 : 11,\n      fontWeight: 600,\n      lineHeight: 1,\n      textTransform: 'uppercase',\n    }\n\n    const handleDelete = (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      onDelete?.(e)\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={cx(\n          'brycks-image-thumbnail',\n          isSelected && 'brycks-image-thumbnail--selected',\n          disabled && 'brycks-image-thumbnail--disabled',\n          className\n        )}\n        style={containerStyle}\n        onClick={onClick}\n        disabled={disabled}\n        data-testid={testId}\n        aria-pressed={isSelected}\n      >\n        <img src={src} alt={alt} style={imageStyle} />\n\n        {onDelete && !disabled && (\n          <button\n            type=\"button\"\n            className=\"brycks-image-thumbnail__delete\"\n            style={deleteButtonStyle}\n            onClick={handleDelete}\n            aria-label=\"Remove image\"\n          >\n            ×\n          </button>\n        )}\n\n        {badge && (\n          <span className=\"brycks-image-thumbnail__badge\" style={badgeStyle}>\n            {badge}\n          </span>\n        )}\n      </button>\n    )\n  }\n)\n\nImageThumbnail.displayName = 'ImageThumbnail'\n"],"names":["sizeMap","ImageThumbnail","forwardRef","src","alt","isSelected","badge","onClick","onDelete","size","aspectRatio","disabled","className","testId","ref","sizeValue","containerStyle","imageStyle","deleteButtonStyle","badgeStyle","handleDelete","e","jsxs","cx","jsx"],"mappings":"+KAwCMA,EAAiE,CACrE,GAAI,CAAE,MAAO,GAAI,WAAY,EAAA,EAC7B,GAAI,CAAE,MAAO,GAAI,WAAY,EAAA,EAC7B,GAAI,CAAE,MAAO,IAAK,WAAY,EAAA,CAChC,EAEaC,EAAiBC,EAAAA,WAC5B,SACE,CACE,IAAAC,EACA,IAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EACA,QAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,YAAAC,EAAc,IACd,SAAAC,EAAW,GACX,UAAAC,EACA,OAAAC,CAAA,EAEFC,EACA,CACA,MAAMC,EAAYf,EAAQS,CAAI,EAExBO,EAAgC,CACpC,SAAU,WACV,MAAOD,EAAU,MACjB,YAAAL,EACA,QAAS,EACT,OAAQL,EACJ,0CACA,wBACJ,aAAc,0BACd,SAAU,SACV,OAAQM,EAAW,cAAgB,UACnC,WAAY,iCACZ,QAASA,EAAW,GAAM,EAC1B,WAAY,mEAAA,EAGRM,EAA4B,CAChC,MAAO,OACP,OAAQ,OACR,UAAW,QACX,QAAS,OAAA,EAGLC,EAAmC,CACvC,SAAU,WACV,IAAK,EACL,MAAO,EACP,MAAOH,EAAU,WACjB,OAAQA,EAAU,WAClB,aAAc,MACd,WAAY,qBACZ,MAAO,QACP,OAAQ,OACR,OAAQ,UACR,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,SAAUA,EAAU,WAAa,GACjC,WAAY,IACZ,WAAY,EACZ,QAAS,EACT,WAAY,iEAAA,EAGRI,EAA4B,CAChC,SAAU,WACV,OAAQ,EACR,KAAM,EACN,WAAY,gCACZ,MAAO,QACP,QAAS,UACT,aAAc,0BACd,SAAUV,IAAS,KAAO,EAAIA,IAAS,KAAO,GAAK,GACnD,WAAY,IACZ,WAAY,EACZ,cAAe,WAAA,EAGXW,EAAgBC,GAAqC,CACzDA,EAAE,gBAAA,EACFb,IAAWa,CAAC,CACd,EAEA,OACEC,EAAAA,KAAC,SAAA,CACC,IAAAR,EACA,KAAK,SACL,UAAWS,EAAAA,GACT,yBACAlB,GAAc,mCACdM,GAAY,mCACZC,CAAA,EAEF,MAAOI,EACP,QAAAT,EACA,SAAAI,EACA,cAAaE,EACb,eAAcR,EAEd,SAAA,CAAAmB,EAAAA,IAAC,MAAA,CAAI,IAAArB,EAAU,IAAAC,EAAU,MAAOa,EAAY,EAE3CT,GAAY,CAACG,GACZa,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAU,iCACV,MAAON,EACP,QAASE,EACT,aAAW,eACZ,SAAA,GAAA,CAAA,EAKFd,GACCkB,EAAAA,IAAC,OAAA,CAAK,UAAU,gCAAgC,MAAOL,EACpD,SAAAb,CAAA,CACH,CAAA,CAAA,CAAA,CAIR,CACF,EAEAL,EAAe,YAAc"}

package/dist/components/media/ImageThumbnail/ImageThumbnail.js

@@ -0,0 +1,112 @@
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import { forwardRef as w } from "react";
+import { cx as x } from "../../../utils/styles.js";
+const S = {
+  sm: { width: 60, deleteSize: 18 },
+  md: { width: 80, deleteSize: 20 },
+  lg: { width: 100, deleteSize: 24 }
+}, z = w(
+  function({
+    src: d,
+    alt: l,
+    isSelected: r = !1,
+    badge: o,
+    onClick: c,
+    onDelete: n,
+    size: a = "md",
+    aspectRatio: m = "1",
+    disabled: e = !1,
+    className: b,
+    testId: u
+  }, g) {
+    const t = S[a], p = {
+      position: "relative",
+      width: t.width,
+      aspectRatio: m,
+      padding: 0,
+      border: r ? "2px solid var(--brycks-primary-default)" : "2px solid transparent",
+      borderRadius: "var(--brycks-radius-md)",
+      overflow: "hidden",
+      cursor: e ? "not-allowed" : "pointer",
+      background: "var(--brycks-background-muted)",
+      opacity: e ? 0.5 : 1,
+      transition: "border-color var(--brycks-duration-fast) var(--brycks-easing-out)"
+    }, h = {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
+      display: "block"
+    }, y = {
+      position: "absolute",
+      top: 4,
+      right: 4,
+      width: t.deleteSize,
+      height: t.deleteSize,
+      borderRadius: "50%",
+      background: "rgba(0, 0, 0, 0.7)",
+      color: "white",
+      border: "none",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: t.deleteSize * 0.6,
+      fontWeight: 600,
+      lineHeight: 1,
+      padding: 0,
+      transition: "background var(--brycks-duration-fast) var(--brycks-easing-out)"
+    }, f = {
+      position: "absolute",
+      bottom: 4,
+      left: 4,
+      background: "var(--brycks-primary-default)",
+      color: "white",
+      padding: "2px 6px",
+      borderRadius: "var(--brycks-radius-sm)",
+      fontSize: a === "sm" ? 8 : a === "md" ? 10 : 11,
+      fontWeight: 600,
+      lineHeight: 1,
+      textTransform: "uppercase"
+    }, k = (s) => {
+      s.stopPropagation(), n?.(s);
+    };
+    return /* @__PURE__ */ v(
+      "button",
+      {
+        ref: g,
+        type: "button",
+        className: x(
+          "brycks-image-thumbnail",
+          r && "brycks-image-thumbnail--selected",
+          e && "brycks-image-thumbnail--disabled",
+          b
+        ),
+        style: p,
+        onClick: c,
+        disabled: e,
+        "data-testid": u,
+        "aria-pressed": r,
+        children: [
+          /* @__PURE__ */ i("img", { src: d, alt: l, style: h }),
+          n && !e && /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              className: "brycks-image-thumbnail__delete",
+              style: y,
+              onClick: k,
+              "aria-label": "Remove image",
+              children: "×"
+            }
+          ),
+          o && /* @__PURE__ */ i("span", { className: "brycks-image-thumbnail__badge", style: f, children: o })
+        ]
+      }
+    );
+  }
+);
+z.displayName = "ImageThumbnail";
+export {
+  z as ImageThumbnail
+};
+//# sourceMappingURL=ImageThumbnail.js.map

package/dist/components/media/ImageThumbnail/ImageThumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageThumbnail.js","sources":["../../../../src/components/media/ImageThumbnail/ImageThumbnail.tsx"],"sourcesContent":["/**\n * ImageThumbnail Component\n *\n * Thumbnail image with selection state, optional badge, and delete action.\n * Designed for image galleries and media selection interfaces.\n */\n\nimport {\n  forwardRef,\n  type CSSProperties,\n  type ReactNode,\n  type MouseEvent,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport interface ImageThumbnailProps {\n  /** Image source URL */\n  src: string\n  /** Alternative text for accessibility */\n  alt: string\n  /** Whether this thumbnail is selected */\n  isSelected?: boolean\n  /** Badge content (e.g., \"COVER\", \"PRIMARY\") */\n  badge?: ReactNode\n  /** Callback when thumbnail is clicked */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  /** Callback when delete button is clicked */\n  onDelete?: (event: MouseEvent<HTMLButtonElement>) => void\n  /** Size of the thumbnail */\n  size?: 'sm' | 'md' | 'lg'\n  /** Aspect ratio of the thumbnail */\n  aspectRatio?: '1' | '4/3' | '16/9'\n  /** Whether the thumbnail is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeMap: Record<string, { width: number; deleteSize: number }> = {\n  sm: { width: 60, deleteSize: 18 },\n  md: { width: 80, deleteSize: 20 },\n  lg: { width: 100, deleteSize: 24 },\n}\n\nexport const ImageThumbnail = forwardRef<HTMLButtonElement, ImageThumbnailProps>(\n  function ImageThumbnail(\n    {\n      src,\n      alt,\n      isSelected = false,\n      badge,\n      onClick,\n      onDelete,\n      size = 'md',\n      aspectRatio = '1',\n      disabled = false,\n      className,\n      testId,\n    },\n    ref\n  ) {\n    const sizeValue = sizeMap[size]\n\n    const containerStyle: CSSProperties = {\n      position: 'relative',\n      width: sizeValue.width,\n      aspectRatio,\n      padding: 0,\n      border: isSelected\n        ? '2px solid var(--brycks-primary-default)'\n        : '2px solid transparent',\n      borderRadius: 'var(--brycks-radius-md)',\n      overflow: 'hidden',\n      cursor: disabled ? 'not-allowed' : 'pointer',\n      background: 'var(--brycks-background-muted)',\n      opacity: disabled ? 0.5 : 1,\n      transition: 'border-color var(--brycks-duration-fast) var(--brycks-easing-out)',\n    }\n\n    const imageStyle: CSSProperties = {\n      width: '100%',\n      height: '100%',\n      objectFit: 'cover',\n      display: 'block',\n    }\n\n    const deleteButtonStyle: CSSProperties = {\n      position: 'absolute',\n      top: 4,\n      right: 4,\n      width: sizeValue.deleteSize,\n      height: sizeValue.deleteSize,\n      borderRadius: '50%',\n      background: 'rgba(0, 0, 0, 0.7)',\n      color: 'white',\n      border: 'none',\n      cursor: 'pointer',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      fontSize: sizeValue.deleteSize * 0.6,\n      fontWeight: 600,\n      lineHeight: 1,\n      padding: 0,\n      transition: 'background var(--brycks-duration-fast) var(--brycks-easing-out)',\n    }\n\n    const badgeStyle: CSSProperties = {\n      position: 'absolute',\n      bottom: 4,\n      left: 4,\n      background: 'var(--brycks-primary-default)',\n      color: 'white',\n      padding: '2px 6px',\n      borderRadius: 'var(--brycks-radius-sm)',\n      fontSize: size === 'sm' ? 8 : size === 'md' ? 10 : 11,\n      fontWeight: 600,\n      lineHeight: 1,\n      textTransform: 'uppercase',\n    }\n\n    const handleDelete = (e: MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      onDelete?.(e)\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={cx(\n          'brycks-image-thumbnail',\n          isSelected && 'brycks-image-thumbnail--selected',\n          disabled && 'brycks-image-thumbnail--disabled',\n          className\n        )}\n        style={containerStyle}\n        onClick={onClick}\n        disabled={disabled}\n        data-testid={testId}\n        aria-pressed={isSelected}\n      >\n        <img src={src} alt={alt} style={imageStyle} />\n\n        {onDelete && !disabled && (\n          <button\n            type=\"button\"\n            className=\"brycks-image-thumbnail__delete\"\n            style={deleteButtonStyle}\n            onClick={handleDelete}\n            aria-label=\"Remove image\"\n          >\n            ×\n          </button>\n        )}\n\n        {badge && (\n          <span className=\"brycks-image-thumbnail__badge\" style={badgeStyle}>\n            {badge}\n          </span>\n        )}\n      </button>\n    )\n  }\n)\n\nImageThumbnail.displayName = 'ImageThumbnail'\n"],"names":["sizeMap","ImageThumbnail","forwardRef","src","alt","isSelected","badge","onClick","onDelete","size","aspectRatio","disabled","className","testId","ref","sizeValue","containerStyle","imageStyle","deleteButtonStyle","badgeStyle","handleDelete","e","jsxs","cx","jsx"],"mappings":";;;AAwCA,MAAMA,IAAiE;AAAA,EACrE,IAAI,EAAE,OAAO,IAAI,YAAY,GAAA;AAAA,EAC7B,IAAI,EAAE,OAAO,IAAI,YAAY,GAAA;AAAA,EAC7B,IAAI,EAAE,OAAO,KAAK,YAAY,GAAA;AAChC,GAEaC,IAAiBC;AAAA,EAC5B,SACE;AAAA,IACE,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,QAAAC;AAAA,EAAA,GAEFC,GACA;AACA,UAAMC,IAAYf,EAAQS,CAAI,GAExBO,IAAgC;AAAA,MACpC,UAAU;AAAA,MACV,OAAOD,EAAU;AAAA,MACjB,aAAAL;AAAA,MACA,SAAS;AAAA,MACT,QAAQL,IACJ,4CACA;AAAA,MACJ,cAAc;AAAA,MACd,UAAU;AAAA,MACV,QAAQM,IAAW,gBAAgB;AAAA,MACnC,YAAY;AAAA,MACZ,SAASA,IAAW,MAAM;AAAA,MAC1B,YAAY;AAAA,IAAA,GAGRM,IAA4B;AAAA,MAChC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,IAAA,GAGLC,IAAmC;AAAA,MACvC,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,OAAOH,EAAU;AAAA,MACjB,QAAQA,EAAU;AAAA,MAClB,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,UAAUA,EAAU,aAAa;AAAA,MACjC,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,IAAA,GAGRI,IAA4B;AAAA,MAChC,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,UAAUV,MAAS,OAAO,IAAIA,MAAS,OAAO,KAAK;AAAA,MACnD,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,eAAe;AAAA,IAAA,GAGXW,IAAe,CAACC,MAAqC;AACzD,MAAAA,EAAE,gBAAA,GACFb,IAAWa,CAAC;AAAA,IACd;AAEA,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,MAAK;AAAA,QACL,WAAWS;AAAA,UACT;AAAA,UACAlB,KAAc;AAAA,UACdM,KAAY;AAAA,UACZC;AAAA,QAAA;AAAA,QAEF,OAAOI;AAAA,QACP,SAAAT;AAAA,QACA,UAAAI;AAAA,QACA,eAAaE;AAAA,QACb,gBAAcR;AAAA,QAEd,UAAA;AAAA,UAAA,gBAAAmB,EAAC,OAAA,EAAI,KAAArB,GAAU,KAAAC,GAAU,OAAOa,GAAY;AAAA,UAE3CT,KAAY,CAACG,KACZ,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,OAAON;AAAA,cACP,SAASE;AAAA,cACT,cAAW;AAAA,cACZ,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAKFd,KACC,gBAAAkB,EAAC,QAAA,EAAK,WAAU,iCAAgC,OAAOL,GACpD,UAAAb,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAL,EAAe,cAAc;"}

package/dist/components/media/Video/Video.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),x=require("../../../utils/styles.cjs"),G=require("../../../hooks/useMediaQuery.cjs"),j={none:"0",sm:"var(--brycks-radius-sm)",md:"var(--brycks-radius-md)",lg:"var(--brycks-radius-lg)",xl:"var(--brycks-radius-xl)",full:"var(--brycks-radius-full)"};function J(s){if(s===void 0)return;if(typeof s=="number")return s;const n=s.split(/[:/]/);if(n.length===2){const u=parseFloat(n[0]),i=parseFloat(n[1]);if(!isNaN(u)&&!isNaN(i)&&i!==0)return u/i}const l=parseFloat(s);return isNaN(l)?void 0:l}const R=r.forwardRef(function({src:n,poster:l,aspectRatio:u,fit:i="cover",preload:w="metadata",autoPlay:y=!1,loop:C=!1,controls:N=!0,muted:S,playsInline:P=!0,radius:E="none",onPlay:p,onPause:b,onEnded:v,onCanPlay:M,onError:m,className:g,style:V,testId:h,...q},A){const e=r.useRef(null),[F,d]=r.useState(!1),[T,z]=r.useState(!1),B=G.usePrefersReducedMotion(),f=!(B||y===!1),H=S??(f||y==="muted");r.useImperativeHandle(A,()=>({play:async()=>{e.current&&await e.current.play()},pause:()=>{e.current?.pause()},toggle:()=>{e.current&&(e.current.paused?e.current.play():e.current.pause())},seek:t=>{e.current&&(e.current.currentTime=t)},getCurrentTime:()=>e.current?.currentTime??0,getDuration:()=>e.current?.duration??0,isPlaying:()=>!e.current?.paused,getElement:()=>e.current}),[]),r.useEffect(()=>{f&&e.current&&(async()=>{try{await e.current?.play()}catch{}})()},[f]);const I=r.useCallback(t=>{d(!0),p?.(t)},[p]),O=r.useCallback(t=>{d(!1),b?.(t)},[b]),$=r.useCallback(t=>{d(!1),v?.(t)},[v]),D=r.useCallback(t=>{z(!0),m?.(t)},[m]),a=J(u),c=j[E]??j.none,k={position:"relative",overflow:"hidden",borderRadius:c,backgroundColor:"var(--brycks-background-muted)",...a?{width:"100%",paddingBottom:`${1/a*100}%`}:{},...V},Q={display:"block",objectFit:i,borderRadius:c,...a?{position:"absolute",top:0,left:0,width:"100%",height:"100%"}:{width:"100%",height:"auto"}},U={position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--brycks-background-muted)",color:"var(--brycks-foreground-muted)",fontSize:"var(--brycks-font-size-sm)",borderRadius:c};return T?o.jsxs("div",{className:x.cx("brycks-video","brycks-video--error",g),style:k,"data-testid":h,role:"img","aria-label":"Video failed to load",children:[a&&o.jsx("div",{style:{paddingBottom:`${1/a*100}%`}}),o.jsx("div",{style:U,children:o.jsx("span",{children:"Unable to load video"})})]}):o.jsx("div",{className:x.cx("brycks-video",F&&"brycks-video--playing",g),style:a?k:{position:"relative",borderRadius:c},"data-testid":h,children:o.jsx("video",{ref:e,src:n,poster:l,preload:w,loop:C,controls:N,muted:H,playsInline:P,onPlay:I,onPause:O,onEnded:$,onCanPlay:M,onError:D,style:Q,...q})})});R.displayName="Video";exports.Video=R;
+//# sourceMappingURL=Video.cjs.map

package/dist/components/media/Video/Video.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.cjs","sources":["../../../../src/components/media/Video/Video.tsx"],"sourcesContent":["/**\r\n * Video Component\r\n *\r\n * Accessible video player with customizable controls, poster support,\r\n * and respect for user motion preferences.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useRef,\r\n  useState,\r\n  useCallback,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  type CSSProperties,\r\n  type VideoHTMLAttributes,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type VideoPreload = 'none' | 'metadata' | 'auto'\r\n\r\nexport interface VideoProps\r\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {\r\n  /** Video source URL */\r\n  src: string\r\n  /** Poster image URL shown before playback */\r\n  poster?: string\r\n  /** Aspect ratio (width/height) */\r\n  aspectRatio?: number | string\r\n  /** How the video should fit within its container */\r\n  fit?: VideoFit\r\n  /** Preload behavior */\r\n  preload?: VideoPreload\r\n  /**\r\n   * Autoplay behavior.\r\n   * - true: Autoplay (muted, respects reduced motion)\r\n   * - 'muted': Autoplay muted only\r\n   * - false: No autoplay\r\n   * @default false\r\n   */\r\n  autoPlay?: boolean | 'muted'\r\n  /** Loop video playback */\r\n  loop?: boolean\r\n  /** Show native controls */\r\n  controls?: boolean\r\n  /** Start muted */\r\n  muted?: boolean\r\n  /** Play inline on mobile (vs fullscreen) */\r\n  playsInline?: boolean\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Callback when video starts playing */\r\n  onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video pauses */\r\n  onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video ends */\r\n  onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video can play */\r\n  onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback on error */\r\n  onError?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport interface VideoRef {\r\n  /** Play the video */\r\n  play: () => Promise<void>\r\n  /** Pause the video */\r\n  pause: () => void\r\n  /** Toggle play/pause */\r\n  toggle: () => void\r\n  /** Seek to time in seconds */\r\n  seek: (time: number) => void\r\n  /** Get current time in seconds */\r\n  getCurrentTime: () => number\r\n  /** Get duration in seconds */\r\n  getDuration: () => number\r\n  /** Check if video is playing */\r\n  isPlaying: () => boolean\r\n  /** Get the underlying video element */\r\n  getElement: () => HTMLVideoElement | null\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Video = forwardRef<VideoRef, VideoProps>(function Video(\r\n  {\r\n    src,\r\n    poster,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    preload = 'metadata',\r\n    autoPlay = false,\r\n    loop = false,\r\n    controls = true,\r\n    muted,\r\n    playsInline = true,\r\n    radius = 'none',\r\n    onPlay,\r\n    onPause,\r\n    onEnded,\r\n    onCanPlay,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const videoRef = useRef<HTMLVideoElement>(null)\r\n  const [isPlaying, setIsPlaying] = useState(false)\r\n  const [hasError, setHasError] = useState(false)\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  // Determine if autoplay should be enabled\r\n  const shouldAutoPlay = (() => {\r\n    // Never autoplay if user prefers reduced motion\r\n    if (prefersReducedMotion) return false\r\n    if (autoPlay === false) return false\r\n    return true\r\n  })()\r\n\r\n  // Autoplay must be muted to work in most browsers\r\n  const shouldMute = muted ?? (shouldAutoPlay || autoPlay === 'muted')\r\n\r\n  // Expose imperative handle\r\n  useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      play: async () => {\r\n        if (videoRef.current) {\r\n          await videoRef.current.play()\r\n        }\r\n      },\r\n      pause: () => {\r\n        videoRef.current?.pause()\r\n      },\r\n      toggle: () => {\r\n        if (videoRef.current) {\r\n          if (videoRef.current.paused) {\r\n            videoRef.current.play()\r\n          } else {\r\n            videoRef.current.pause()\r\n          }\r\n        }\r\n      },\r\n      seek: (time: number) => {\r\n        if (videoRef.current) {\r\n          videoRef.current.currentTime = time\r\n        }\r\n      },\r\n      getCurrentTime: () => videoRef.current?.currentTime ?? 0,\r\n      getDuration: () => videoRef.current?.duration ?? 0,\r\n      isPlaying: () => !videoRef.current?.paused,\r\n      getElement: () => videoRef.current,\r\n    }),\r\n    []\r\n  )\r\n\r\n  // Handle autoplay on mount\r\n  useEffect(() => {\r\n    if (shouldAutoPlay && videoRef.current) {\r\n      // Use a small delay to ensure video is ready\r\n      const attemptAutoplay = async () => {\r\n        try {\r\n          await videoRef.current?.play()\r\n        } catch {\r\n          // Autoplay was blocked - this is expected in many browsers\r\n          // The video will remain paused with poster visible\r\n        }\r\n      }\r\n      attemptAutoplay()\r\n    }\r\n  }, [shouldAutoPlay])\r\n\r\n  const handlePlay = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(true)\r\n      onPlay?.(event)\r\n    },\r\n    [onPlay]\r\n  )\r\n\r\n  const handlePause = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onPause?.(event)\r\n    },\r\n    [onPause]\r\n  )\r\n\r\n  const handleEnded = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onEnded?.(event)\r\n    },\r\n    [onEnded]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setHasError(true)\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n    ...style,\r\n  }\r\n\r\n  const videoStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: '100%',\r\n          height: 'auto',\r\n        }),\r\n  }\r\n\r\n  const errorOverlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    fontSize: 'var(--brycks-font-size-sm)',\r\n    borderRadius,\r\n  }\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cx('brycks-video', 'brycks-video--error', className)}\r\n        style={containerStyle}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label=\"Video failed to load\"\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        <div style={errorOverlayStyle}>\r\n          <span>Unable to load video</span>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-video',\r\n        isPlaying && 'brycks-video--playing',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      <video\r\n        ref={videoRef}\r\n        src={src}\r\n        poster={poster}\r\n        preload={preload}\r\n        loop={loop}\r\n        controls={controls}\r\n        muted={shouldMute}\r\n        playsInline={playsInline}\r\n        onPlay={handlePlay}\r\n        onPause={handlePause}\r\n        onEnded={handleEnded}\r\n        onCanPlay={onCanPlay}\r\n        onError={handleError}\r\n        style={videoStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nVideo.displayName = 'Video'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Video","forwardRef","src","poster","aspectRatio","fit","preload","autoPlay","loop","controls","muted","playsInline","radius","onPlay","onPause","onEnded","onCanPlay","onError","className","style","testId","props","ref","videoRef","useRef","isPlaying","setIsPlaying","useState","hasError","setHasError","prefersReducedMotion","usePrefersReducedMotion","shouldAutoPlay","shouldMute","useImperativeHandle","time","useEffect","handlePlay","useCallback","event","handlePause","handleEnded","handleError","parsedRatio","borderRadius","containerStyle","videoStyle","errorOverlayStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/media/Video/Video.js

@@ -0,0 +1,185 @@
+import { jsxs as J, jsx as n } from "react/jsx-runtime";
+import { forwardRef as K, useRef as L, useState as w, useImperativeHandle as Q, useEffect as W, useCallback as c } from "react";
+import { cx as N } from "../../../utils/styles.js";
+import { usePrefersReducedMotion as X } from "../../../hooks/useMediaQuery.js";
+const R = {
+  none: "0",
+  sm: "var(--brycks-radius-sm)",
+  md: "var(--brycks-radius-md)",
+  lg: "var(--brycks-radius-lg)",
+  xl: "var(--brycks-radius-xl)",
+  full: "var(--brycks-radius-full)"
+};
+function Y(r) {
+  if (r === void 0) return;
+  if (typeof r == "number") return r;
+  const o = r.split(/[:/]/);
+  if (o.length === 2) {
+    const l = parseFloat(o[0]), a = parseFloat(o[1]);
+    if (!isNaN(l) && !isNaN(a) && a !== 0)
+      return l / a;
+  }
+  const i = parseFloat(r);
+  return isNaN(i) ? void 0 : i;
+}
+const Z = K(function({
+  src: o,
+  poster: i,
+  aspectRatio: l,
+  fit: a = "cover",
+  preload: x = "metadata",
+  autoPlay: p = !1,
+  loop: E = !1,
+  controls: P = !0,
+  muted: C,
+  playsInline: S = !0,
+  radius: j = "none",
+  onPlay: y,
+  onPause: m,
+  onEnded: v,
+  onCanPlay: A,
+  onError: b,
+  className: g,
+  style: F,
+  testId: h,
+  ...M
+}, V) {
+  const e = L(null), [T, u] = w(!1), [z, B] = w(!1), H = X(), f = !(H || p === !1), I = C ?? (f || p === "muted");
+  Q(
+    V,
+    () => ({
+      play: async () => {
+        e.current && await e.current.play();
+      },
+      pause: () => {
+        e.current?.pause();
+      },
+      toggle: () => {
+        e.current && (e.current.paused ? e.current.play() : e.current.pause());
+      },
+      seek: (t) => {
+        e.current && (e.current.currentTime = t);
+      },
+      getCurrentTime: () => e.current?.currentTime ?? 0,
+      getDuration: () => e.current?.duration ?? 0,
+      isPlaying: () => !e.current?.paused,
+      getElement: () => e.current
+    }),
+    []
+  ), W(() => {
+    f && e.current && (async () => {
+      try {
+        await e.current?.play();
+      } catch {
+      }
+    })();
+  }, [f]);
+  const $ = c(
+    (t) => {
+      u(!0), y?.(t);
+    },
+    [y]
+  ), D = c(
+    (t) => {
+      u(!1), m?.(t);
+    },
+    [m]
+  ), O = c(
+    (t) => {
+      u(!1), v?.(t);
+    },
+    [v]
+  ), U = c(
+    (t) => {
+      B(!0), b?.(t);
+    },
+    [b]
+  ), s = Y(l), d = R[j] ?? R.none, k = {
+    position: "relative",
+    overflow: "hidden",
+    borderRadius: d,
+    backgroundColor: "var(--brycks-background-muted)",
+    ...s ? {
+      width: "100%",
+      paddingBottom: `${1 / s * 100}%`
+    } : {},
+    ...F
+  }, q = {
+    display: "block",
+    objectFit: a,
+    borderRadius: d,
+    ...s ? {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%"
+    } : {
+      width: "100%",
+      height: "auto"
+    }
+  }, G = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--brycks-background-muted)",
+    color: "var(--brycks-foreground-muted)",
+    fontSize: "var(--brycks-font-size-sm)",
+    borderRadius: d
+  };
+  return z ? /* @__PURE__ */ J(
+    "div",
+    {
+      className: N("brycks-video", "brycks-video--error", g),
+      style: k,
+      "data-testid": h,
+      role: "img",
+      "aria-label": "Video failed to load",
+      children: [
+        s && /* @__PURE__ */ n("div", { style: { paddingBottom: `${1 / s * 100}%` } }),
+        /* @__PURE__ */ n("div", { style: G, children: /* @__PURE__ */ n("span", { children: "Unable to load video" }) })
+      ]
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      className: N(
+        "brycks-video",
+        T && "brycks-video--playing",
+        g
+      ),
+      style: s ? k : { position: "relative", borderRadius: d },
+      "data-testid": h,
+      children: /* @__PURE__ */ n(
+        "video",
+        {
+          ref: e,
+          src: o,
+          poster: i,
+          preload: x,
+          loop: E,
+          controls: P,
+          muted: I,
+          playsInline: S,
+          onPlay: $,
+          onPause: D,
+          onEnded: O,
+          onCanPlay: A,
+          onError: U,
+          style: q,
+          ...M
+        }
+      )
+    }
+  );
+});
+Z.displayName = "Video";
+export {
+  Z as Video
+};
+//# sourceMappingURL=Video.js.map

package/dist/components/media/Video/Video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.js","sources":["../../../../src/components/media/Video/Video.tsx"],"sourcesContent":["/**\r\n * Video Component\r\n *\r\n * Accessible video player with customizable controls, poster support,\r\n * and respect for user motion preferences.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useRef,\r\n  useState,\r\n  useCallback,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  type CSSProperties,\r\n  type VideoHTMLAttributes,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type VideoPreload = 'none' | 'metadata' | 'auto'\r\n\r\nexport interface VideoProps\r\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {\r\n  /** Video source URL */\r\n  src: string\r\n  /** Poster image URL shown before playback */\r\n  poster?: string\r\n  /** Aspect ratio (width/height) */\r\n  aspectRatio?: number | string\r\n  /** How the video should fit within its container */\r\n  fit?: VideoFit\r\n  /** Preload behavior */\r\n  preload?: VideoPreload\r\n  /**\r\n   * Autoplay behavior.\r\n   * - true: Autoplay (muted, respects reduced motion)\r\n   * - 'muted': Autoplay muted only\r\n   * - false: No autoplay\r\n   * @default false\r\n   */\r\n  autoPlay?: boolean | 'muted'\r\n  /** Loop video playback */\r\n  loop?: boolean\r\n  /** Show native controls */\r\n  controls?: boolean\r\n  /** Start muted */\r\n  muted?: boolean\r\n  /** Play inline on mobile (vs fullscreen) */\r\n  playsInline?: boolean\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Callback when video starts playing */\r\n  onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video pauses */\r\n  onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video ends */\r\n  onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video can play */\r\n  onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback on error */\r\n  onError?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport interface VideoRef {\r\n  /** Play the video */\r\n  play: () => Promise<void>\r\n  /** Pause the video */\r\n  pause: () => void\r\n  /** Toggle play/pause */\r\n  toggle: () => void\r\n  /** Seek to time in seconds */\r\n  seek: (time: number) => void\r\n  /** Get current time in seconds */\r\n  getCurrentTime: () => number\r\n  /** Get duration in seconds */\r\n  getDuration: () => number\r\n  /** Check if video is playing */\r\n  isPlaying: () => boolean\r\n  /** Get the underlying video element */\r\n  getElement: () => HTMLVideoElement | null\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Video = forwardRef<VideoRef, VideoProps>(function Video(\r\n  {\r\n    src,\r\n    poster,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    preload = 'metadata',\r\n    autoPlay = false,\r\n    loop = false,\r\n    controls = true,\r\n    muted,\r\n    playsInline = true,\r\n    radius = 'none',\r\n    onPlay,\r\n    onPause,\r\n    onEnded,\r\n    onCanPlay,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const videoRef = useRef<HTMLVideoElement>(null)\r\n  const [isPlaying, setIsPlaying] = useState(false)\r\n  const [hasError, setHasError] = useState(false)\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  // Determine if autoplay should be enabled\r\n  const shouldAutoPlay = (() => {\r\n    // Never autoplay if user prefers reduced motion\r\n    if (prefersReducedMotion) return false\r\n    if (autoPlay === false) return false\r\n    return true\r\n  })()\r\n\r\n  // Autoplay must be muted to work in most browsers\r\n  const shouldMute = muted ?? (shouldAutoPlay || autoPlay === 'muted')\r\n\r\n  // Expose imperative handle\r\n  useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      play: async () => {\r\n        if (videoRef.current) {\r\n          await videoRef.current.play()\r\n        }\r\n      },\r\n      pause: () => {\r\n        videoRef.current?.pause()\r\n      },\r\n      toggle: () => {\r\n        if (videoRef.current) {\r\n          if (videoRef.current.paused) {\r\n            videoRef.current.play()\r\n          } else {\r\n            videoRef.current.pause()\r\n          }\r\n        }\r\n      },\r\n      seek: (time: number) => {\r\n        if (videoRef.current) {\r\n          videoRef.current.currentTime = time\r\n        }\r\n      },\r\n      getCurrentTime: () => videoRef.current?.currentTime ?? 0,\r\n      getDuration: () => videoRef.current?.duration ?? 0,\r\n      isPlaying: () => !videoRef.current?.paused,\r\n      getElement: () => videoRef.current,\r\n    }),\r\n    []\r\n  )\r\n\r\n  // Handle autoplay on mount\r\n  useEffect(() => {\r\n    if (shouldAutoPlay && videoRef.current) {\r\n      // Use a small delay to ensure video is ready\r\n      const attemptAutoplay = async () => {\r\n        try {\r\n          await videoRef.current?.play()\r\n        } catch {\r\n          // Autoplay was blocked - this is expected in many browsers\r\n          // The video will remain paused with poster visible\r\n        }\r\n      }\r\n      attemptAutoplay()\r\n    }\r\n  }, [shouldAutoPlay])\r\n\r\n  const handlePlay = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(true)\r\n      onPlay?.(event)\r\n    },\r\n    [onPlay]\r\n  )\r\n\r\n  const handlePause = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onPause?.(event)\r\n    },\r\n    [onPause]\r\n  )\r\n\r\n  const handleEnded = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onEnded?.(event)\r\n    },\r\n    [onEnded]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setHasError(true)\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n    ...style,\r\n  }\r\n\r\n  const videoStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: '100%',\r\n          height: 'auto',\r\n        }),\r\n  }\r\n\r\n  const errorOverlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    fontSize: 'var(--brycks-font-size-sm)',\r\n    borderRadius,\r\n  }\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cx('brycks-video', 'brycks-video--error', className)}\r\n        style={containerStyle}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label=\"Video failed to load\"\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        <div style={errorOverlayStyle}>\r\n          <span>Unable to load video</span>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-video',\r\n        isPlaying && 'brycks-video--playing',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      <video\r\n        ref={videoRef}\r\n        src={src}\r\n        poster={poster}\r\n        preload={preload}\r\n        loop={loop}\r\n        controls={controls}\r\n        muted={shouldMute}\r\n        playsInline={playsInline}\r\n        onPlay={handlePlay}\r\n        onPause={handlePause}\r\n        onEnded={handleEnded}\r\n        onCanPlay={onCanPlay}\r\n        onError={handleError}\r\n        style={videoStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nVideo.displayName = 'Video'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Video","forwardRef","src","poster","aspectRatio","fit","preload","autoPlay","loop","controls","muted","playsInline","radius","onPlay","onPause","onEnded","onCanPlay","onError","className","style","testId","props","ref","videoRef","useRef","isPlaying","setIsPlaying","useState","hasError","setHasError","prefersReducedMotion","usePrefersReducedMotion","shouldAutoPlay","shouldMute","useImperativeHandle","time","useEffect","handlePlay","useCallback","event","handlePause","handleEnded","handleError","parsedRatio","borderRadius","containerStyle","videoStyle","errorOverlayStyle","jsxs","cx","jsx"],"mappings":";;;;AAyFA,MAAMA,IAAoC;AAAA,EACxC,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,SAASC,EAAiBC,GAAwD;AAChF,MAAIA,MAAU,OAAW;AACzB,MAAI,OAAOA,KAAU,SAAU,QAAOA;AAEtC,QAAMC,IAAQD,EAAM,MAAM,MAAM;AAChC,MAAIC,EAAM,WAAW,GAAG;AACtB,UAAMC,IAAQ,WAAWD,EAAM,CAAC,CAAC,GAC3BE,IAAS,WAAWF,EAAM,CAAC,CAAC;AAClC,QAAI,CAAC,MAAMC,CAAK,KAAK,CAAC,MAAMC,CAAM,KAAKA,MAAW;AAChD,aAAOD,IAAQC;AAAA,EAEnB;AAEA,QAAMC,IAAS,WAAWJ,CAAK;AAC/B,SAAO,MAAMI,CAAM,IAAI,SAAYA;AACrC;AAEO,MAAMC,IAAQC,EAAiC,SACpD;AAAA,EACE,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GACxCG,IAAuBC,EAAA,GAGvBC,IAEA,EAAAF,KACAvB,MAAa,KAKb0B,IAAavB,MAAUsB,KAAkBzB,MAAa;AAG5D,EAAA2B;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,MAAM,YAAY;AAChB,QAAIC,EAAS,WACX,MAAMA,EAAS,QAAQ,KAAA;AAAA,MAE3B;AAAA,MACA,OAAO,MAAM;AACX,QAAAA,EAAS,SAAS,MAAA;AAAA,MACpB;AAAA,MACA,QAAQ,MAAM;AACZ,QAAIA,EAAS,YACPA,EAAS,QAAQ,SACnBA,EAAS,QAAQ,KAAA,IAEjBA,EAAS,QAAQ,MAAA;AAAA,MAGvB;AAAA,MACA,MAAM,CAACY,MAAiB;AACtB,QAAIZ,EAAS,YACXA,EAAS,QAAQ,cAAcY;AAAA,MAEnC;AAAA,MACA,gBAAgB,MAAMZ,EAAS,SAAS,eAAe;AAAA,MACvD,aAAa,MAAMA,EAAS,SAAS,YAAY;AAAA,MACjD,WAAW,MAAM,CAACA,EAAS,SAAS;AAAA,MACpC,YAAY,MAAMA,EAAS;AAAA,IAAA;AAAA,IAE7B,CAAA;AAAA,EAAC,GAIHa,EAAU,MAAM;AACd,IAAIJ,KAAkBT,EAAS,YAEL,YAAY;AAClC,UAAI;AACF,cAAMA,EAAS,SAAS,KAAA;AAAA,MAC1B,QAAQ;AAAA,MAGR;AAAA,IACF,GACA;AAAA,EAEJ,GAAG,CAACS,CAAc,CAAC;AAEnB,QAAMK,IAAaC;AAAA,IACjB,CAACC,MAA4C;AAC3C,MAAAb,EAAa,EAAI,GACjBb,IAAS0B,CAAK;AAAA,IAChB;AAAA,IACA,CAAC1B,CAAM;AAAA,EAAA,GAGH2B,IAAcF;AAAA,IAClB,CAACC,MAA4C;AAC3C,MAAAb,EAAa,EAAK,GAClBZ,IAAUyB,CAAK;AAAA,IACjB;AAAA,IACA,CAACzB,CAAO;AAAA,EAAA,GAGJ2B,IAAcH;AAAA,IAClB,CAACC,MAA4C;AAC3C,MAAAb,EAAa,EAAK,GAClBX,IAAUwB,CAAK;AAAA,IACjB;AAAA,IACA,CAACxB,CAAO;AAAA,EAAA,GAGJ2B,IAAcJ;AAAA,IAClB,CAACC,MAA4C;AAC3C,MAAAV,EAAY,EAAI,GAChBZ,IAAUsB,CAAK;AAAA,IACjB;AAAA,IACA,CAACtB,CAAO;AAAA,EAAA,GAGJ0B,IAAcjD,EAAiBU,CAAW,GAC1CwC,IAAenD,EAAUmB,CAAM,KAAKnB,EAAU,MAE9CoD,IAAgC;AAAA,IACpC,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAAD;AAAA,IACA,iBAAiB;AAAA,IACjB,GAAID,IACA;AAAA,MACE,OAAO;AAAA,MACP,eAAe,GAAI,IAAIA,IAAe,GAAG;AAAA,IAAA,IAE3C,CAAA;AAAA,IACJ,GAAGxB;AAAA,EAAA,GAGC2B,IAA4B;AAAA,IAChC,SAAS;AAAA,IACT,WAAWzC;AAAA,IACX,cAAAuC;AAAA,IACA,GAAID,IACA;AAAA,MACE,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA,IAEV;AAAA,MACE,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV,GAGAI,IAAmC;AAAA,IACvC,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAAH;AAAA,EAAA;AAGF,SAAIhB,IAEA,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,gBAAgB,uBAAuB/B,CAAS;AAAA,MAC9D,OAAO2B;AAAA,MACP,eAAazB;AAAA,MACb,MAAK;AAAA,MACL,cAAW;AAAA,MAEV,UAAA;AAAA,QAAAuB,KAAe,gBAAAO,EAAC,OAAA,EAAI,OAAO,EAAE,eAAe,GAAI,IAAIP,IAAe,GAAG,IAAA,EAAI,CAAG;AAAA,0BAC7E,OAAA,EAAI,OAAOI,GACV,UAAA,gBAAAG,EAAC,QAAA,EAAK,kCAAoB,EAAA,CAC5B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD;AAAA,QACT;AAAA,QACAxB,KAAa;AAAA,QACbP;AAAA,MAAA;AAAA,MAEF,OAAOyB,IAAcE,IAAiB,EAAE,UAAU,YAAY,cAAAD,EAAA;AAAA,MAC9D,eAAaxB;AAAA,MAEb,UAAA,gBAAA8B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK3B;AAAA,UACL,KAAArB;AAAA,UACA,QAAAC;AAAA,UACA,SAAAG;AAAA,UACA,MAAAE;AAAA,UACA,UAAAC;AAAA,UACA,OAAOwB;AAAA,UACP,aAAAtB;AAAA,UACA,QAAQ0B;AAAA,UACR,SAASG;AAAA,UACT,SAASC;AAAA,UACT,WAAAzB;AAAA,UACA,SAAS0B;AAAA,UACT,OAAOI;AAAA,UACN,GAAGzB;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN,CAAC;AAEDrB,EAAM,cAAc;"}

package/dist/components/navigation/Accordion/Accordion.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),p=require("../../../utils/styles.cjs"),v=c.createContext(null);function h(){const o=c.useContext(v);if(!o)throw new Error("AccordionItem must be used within an Accordion");return o}const A=c.forwardRef(function({value:t,defaultValue:l=[],onChange:a,allowMultiple:i=!1,variant:d="default",className:s,style:u,children:f,testId:n,...e},x){const[k,g]=c.useState(l),m=t??k,N=c.useCallback(b=>{const E=m.includes(b);let y;E?y=m.filter(R=>R!==b):i?y=[...m,b]:y=[b],t===void 0&&g(y),a?.(y)},[m,i,t,a]),T={display:"flex",flexDirection:"column",gap:d==="separated"?8:0,...u};return r.jsx(v.Provider,{value:{expandedItems:m,toggleItem:N,allowMultiple:i,variant:d},children:r.jsx("div",{ref:x,className:p.cx("brycks-accordion",`brycks-accordion--${d}`,s),style:T,"data-testid":n,...e,children:f})})});A.displayName="Accordion";const C=c.createContext(null);function w(){const o=c.useContext(C);if(!o)throw new Error("AccordionTrigger/AccordionContent must be used within an AccordionItem");return o}const j=c.forwardRef(function({value:t,disabled:l=!1,className:a,style:i,children:d,...s},u){const{expandedItems:f,variant:n}=h(),e=f.includes(t),x={borderBottom:n==="default"?"1px solid var(--brycks-border-muted)":void 0,border:n==="bordered"||n==="separated"?"1px solid var(--brycks-border-default)":void 0,borderRadius:n==="separated"?"var(--brycks-radius-lg)":void 0,overflow:"hidden",...i};return n==="bordered"&&!e&&(x.borderBottom="1px solid var(--brycks-border-default)"),r.jsx(C.Provider,{value:{value:t,isExpanded:e,disabled:l},children:r.jsx("div",{ref:u,className:p.cx("brycks-accordion-item",e&&"brycks-accordion-item--expanded",a),style:x,...s,children:d})})});j.displayName="AccordionItem";function L({isExpanded:o}){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",style:{transform:o?"rotate(180deg)":"rotate(0deg)",transition:"transform 200ms ease-out"},children:r.jsx("path",{d:"M4 6l4 4 4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const I=c.forwardRef(function({icon:t,className:l,style:a,children:i,...d},s){const{toggleItem:u}=h(),{value:f,isExpanded:n,disabled:e}=w(),x=()=>{e||u(f)},k={display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",padding:"16px",fontSize:15,fontWeight:500,color:e?"var(--brycks-foreground-muted)":"var(--brycks-foreground-default)",backgroundColor:"transparent",border:"none",cursor:e?"not-allowed":"pointer",textAlign:"left",transition:"background-color 150ms ease-out",outline:"none",...a};return r.jsxs("button",{ref:s,type:"button","aria-expanded":n,"aria-disabled":e,disabled:e,className:p.cx("brycks-accordion-trigger",l),style:k,onClick:x,onMouseEnter:g=>{e||(g.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:g=>{g.currentTarget.style.backgroundColor="transparent"},...d,children:[i,r.jsx("span",{style:{color:"var(--brycks-foreground-muted)",flexShrink:0,marginLeft:12},children:t??r.jsx(L,{isExpanded:n})})]})});I.displayName="AccordionTrigger";const S=c.forwardRef(function({className:t,style:l,children:a,...i},d){const{isExpanded:s}=w(),u={overflow:"hidden",transition:"max-height 200ms ease-out, opacity 200ms ease-out",maxHeight:s?"1000px":"0",opacity:s?1:0},f={padding:"0 16px 16px 16px",color:"var(--brycks-foreground-muted)",fontSize:14,lineHeight:1.6,...l};return r.jsx("div",{ref:d,role:"region","aria-hidden":!s,className:p.cx("brycks-accordion-content",t),style:u,...i,children:r.jsx("div",{style:f,children:a})})});S.displayName="AccordionContent";exports.Accordion=A;exports.AccordionContent=S;exports.AccordionItem=j;exports.AccordionTrigger=I;
+//# sourceMappingURL=Accordion.cjs.map