@forgedevstack/bear 1.2.1 → 1.2.2

package/dist/components/Heatmap/Heatmap.js

@@ -0,0 +1,103 @@
+import { jsxs as N, jsx as s } from "react/jsx-runtime";
+import { useState as D, useRef as I, useMemo as K, useCallback as g } from "react";
+import { cn as V } from "../../utils/cn.js";
+import { Popover as $ } from "../Popover/Popover.js";
+import { Typography as k } from "../Typography/Typography.js";
+import { DEFAULT_EMPTY_COLOR as Z, DEFAULT_COLOR_SCALE as q, DAYS_IN_WEEK as J, MONTH_LABELS as Q, DEFAULT_CELL_SIZE as S, DEFAULT_CELL_GAP as X, DAY_LABELS as G, LABEL_PAD as z } from "./Heatmap.const.js";
+import { getWeeks as ee, toKey as te } from "./Heatmap.utils.js";
+const le = ({
+  data: x,
+  startDate: p,
+  endDate: d,
+  colorScale: i = q,
+  cellSize: l = S,
+  cellGap: c = X,
+  showDayLabels: v = !0,
+  showMonthLabels: O = !0,
+  emptyColor: L,
+  tooltipFormat: y,
+  onCellClick: f,
+  renderTooltip: m,
+  testId: b,
+  className: P,
+  ...F
+}) => {
+  const [h, E] = D(null), [R, u] = D(!1), U = I(/* @__PURE__ */ new Map()), { weeks: w, dataMap: Y, maxValue: _ } = K(() => {
+    const e = d ? new Date(d) : /* @__PURE__ */ new Date(), a = p ? new Date(p) : new Date(e.getFullYear() - 1, e.getMonth(), e.getDate()), o = /* @__PURE__ */ new Map();
+    let n = 0;
+    for (const r of x)
+      o.set(r.date, r), r.value > n && (n = r.value);
+    return { weeks: ee(a, e), dataMap: o, maxValue: n };
+  }, [x, p, d]), j = g(
+    (e) => {
+      if (e === 0 || _ === 0) return L ?? Z;
+      const a = Math.min(Math.floor(e / _ * (i.length - 1)), i.length - 1);
+      return i[a];
+    },
+    [_, L, i]
+  ), A = v ? 28 : 0, C = g((e) => {
+    !e || !m || (E(e), u(!0));
+  }, [m]), T = g(() => {
+    u(!1), E(null);
+  }, []);
+  return /* @__PURE__ */ N("div", { className: V("Bear-Heatmap relative inline-block", P), "data-testid": b, ...F, children: [
+    O && /* @__PURE__ */ s("div", { className: "Bear-Heatmap__months flex mb-1", style: { paddingLeft: A }, children: w.map((e, a) => {
+      const o = e[0], n = a === 0 || o.getDate() <= J;
+      return /* @__PURE__ */ s(
+        k,
+        {
+          variant: "caption",
+          className: "Bear-Heatmap__month text-gray-400 dark:text-gray-500 text-[10px]",
+          style: { width: l + c, textAlign: "left" },
+          children: n ? Q[o.getMonth()] : ""
+        },
+        a
+      );
+    }) }),
+    /* @__PURE__ */ N("div", { className: "Bear-Heatmap__grid flex", children: [
+      v && /* @__PURE__ */ s("div", { className: "Bear-Heatmap__days flex flex-col mr-1", style: { gap: c }, children: G.map((e, a) => /* @__PURE__ */ s(
+        k,
+        {
+          variant: "caption",
+          className: "Bear-Heatmap__day text-gray-400 dark:text-gray-500 text-[10px] flex items-center justify-end",
+          style: { height: l, width: A - z },
+          children: e
+        },
+        a
+      )) }),
+      /* @__PURE__ */ s("div", { className: "Bear-Heatmap__weeks flex", style: { gap: c }, children: w.map((e, a) => /* @__PURE__ */ s("div", { className: "Bear-Heatmap__week flex flex-col", style: { gap: c }, children: e.map((o, n) => {
+        const r = te(o), t = Y.get(r), M = (t == null ? void 0 : t.value) ?? 0, W = j(M), B = /* @__PURE__ */ s(
+          "div",
+          {
+            ref: (H) => {
+              H && U.current.set(r, H);
+            },
+            className: "Bear-Heatmap__cell rounded-sm cursor-pointer transition-transform hover:scale-125",
+            style: { width: l, height: l, backgroundColor: W },
+            title: m ? void 0 : t ? y ? y(t) : `${r}: ${M}` : r,
+            onClick: () => t && (f == null ? void 0 : f(t)),
+            onMouseEnter: () => C(t),
+            onMouseLeave: T
+          },
+          n
+        );
+        return m && t && (h == null ? void 0 : h.date) === t.date ? /* @__PURE__ */ s(
+          $,
+          {
+            content: m(t),
+            trigger: "hover",
+            placement: "top",
+            open: R,
+            onOpenChange: u,
+            arrow: !1,
+            children: B
+          },
+          n
+        ) : B;
+      }) }, a)) })
+    ] })
+  ] });
+};
+export {
+  le as Heatmap
+};

package/dist/components/Heatmap/Heatmap.types.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface HeatmapCell {
+    date: string;
+    value: number;
+    label?: string;
+}
+export interface HeatmapProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Data points with date strings (YYYY-MM-DD) and values */
+    data: HeatmapCell[];
+    /** Start date (defaults to 1 year ago) */
+    startDate?: string;
+    /** End date (defaults to today) */
+    endDate?: string;
+    /** Color scale: array of colors from low to high */
+    colorScale?: string[];
+    /** Cell size in px */
+    cellSize?: number;
+    /** Gap between cells in px */
+    cellGap?: number;
+    /** Show day-of-week labels */
+    showDayLabels?: boolean;
+    /** Show month labels */
+    showMonthLabels?: boolean;
+    /** Empty cell color */
+    emptyColor?: string;
+    /** Tooltip formatter */
+    tooltipFormat?: (cell: HeatmapCell) => string;
+    /** Callback when a cell is clicked */
+    onCellClick?: (cell: HeatmapCell) => void;
+    /** Render custom hover content per cell */
+    renderTooltip?: (cell: HeatmapCell) => ReactNode;
+    /** Test ID */
+    testId?: string;
+}

package/dist/components/Heatmap/Heatmap.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./Heatmap.const.cjs");function c(t,r){const n=[],e=new Date(t);for(e.setDate(e.getDate()-e.getDay());e<=r;){const o=[];for(let s=0;s<a.DAYS_IN_WEEK;s++)o.push(new Date(e)),e.setDate(e.getDate()+1);n.push(o)}return n}function u(t){return t.toISOString().slice(0,10)}exports.getWeeks=c;exports.toKey=u;

package/dist/components/Heatmap/Heatmap.utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getWeeks(start: Date, end: Date): Date[][];
+export declare function toKey(d: Date): string;

package/dist/components/Heatmap/Heatmap.utils.js

@@ -0,0 +1,18 @@
+import { DAYS_IN_WEEK as D } from "./Heatmap.const.js";
+function c(t, s) {
+  const n = [], e = new Date(t);
+  for (e.setDate(e.getDate() - e.getDay()); e <= s; ) {
+    const o = [];
+    for (let r = 0; r < D; r++)
+      o.push(new Date(e)), e.setDate(e.getDate() + 1);
+    n.push(o);
+  }
+  return n;
+}
+function u(t) {
+  return t.toISOString().slice(0, 10);
+}
+export {
+  c as getWeeks,
+  u as toKey
+};

package/dist/components/Heatmap/index.d.ts

@@ -0,0 +1,2 @@
+export { Heatmap } from './Heatmap';
+export type { HeatmapProps, HeatmapCell } from './Heatmap.types';

package/dist/components/ImageAnnotation/ImageAnnotation.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),n=require("react"),q=require("../../utils/cn.cjs"),k=require("../Icon/index.cjs"),P=require("../Popover/Popover.cjs"),R=require("../Input/Input.cjs"),_=require("./ImageAnnotation.const.cjs");let T=1;function L(o,a,r,t){return c.jsx("div",{className:"Bear-ImageAnnotation__edit min-w-[160px]",children:c.jsx(R.Input,{autoFocus:!0,size:"sm",value:o,onChange:s=>a(s.target.value),onKeyDown:s=>{s.key==="Enter"&&r(),s.key==="Escape"&&t()},placeholder:"Add note..."})})}function O(o,a,r,t){return c.jsxs("div",{className:"Bear-ImageAnnotation__label text-xs text-gray-700 dark:text-gray-200 whitespace-nowrap flex items-center gap-1",children:[t??o.text,a&&c.jsx("button",{type:"button",className:"text-red-400 hover:text-red-600 ml-1",onClick:s=>{s.stopPropagation(),r(o.id)},children:c.jsx(k.BearIcons.XIcon,{size:12})})]})}const D=({src:o,alt:a="",annotations:r,onChange:t,editable:s=!0,pinColor:A=_.DEFAULT_PIN_COLOR,pinSize:x=_.DEFAULT_PIN_SIZE,renderPopover:f,testId:j,className:y,...b})=>{const p=n.useRef(null),[i,u]=n.useState(null),[d,v]=n.useState(""),h=n.useCallback(e=>{if(!s||!t||!p.current||e.target.closest(".Bear-ImageAnnotation__pin"))return;const l=p.current.getBoundingClientRect(),I=(e.clientX-l.left)/l.width*100,g=(e.clientY-l.top)/l.height*100,m=`ann-${T++}`,B={id:m,x:I,y:g,text:""};t([...r,B]),u(m),v("")},[s,t,r]),N=n.useCallback(()=>{!i||!t||(d.trim()?t(r.map(e=>e.id===i?{...e,text:d}:e)):t(r.filter(e=>e.id!==i)),u(null))},[i,d,t,r]),w=n.useCallback(()=>u(null),[]),E=n.useCallback(e=>{t==null||t(r.filter(l=>l.id!==e)),i===e&&u(null)},[t,r,i]);return c.jsxs("div",{ref:p,className:q.cn("Bear-ImageAnnotation relative inline-block select-none",s&&"cursor-crosshair",y),onClick:h,"data-testid":j,...b,children:[c.jsx("img",{src:o,alt:a,className:"w-full h-auto block rounded-lg",draggable:!1}),r.map(e=>{const l=i===e.id,I=!!e.text,g=f==null?void 0:f(e),m=l?L(d,v,N,w):I?O(e,s,E,g):null;return c.jsx("div",{className:"Bear-ImageAnnotation__pin absolute transform -translate-x-1/2 -translate-y-full z-10",style:{left:`${e.x}%`,top:`${e.y}%`},children:c.jsx(P.Popover,{content:m,trigger:l?"click":"hover",placement:"top",open:l||void 0,arrow:!1,children:c.jsx("div",{className:"Bear-ImageAnnotation__marker flex items-center justify-center rounded-full shadow-lg cursor-pointer transition-transform hover:scale-110",style:{width:x,height:x,backgroundColor:e.color??A},children:c.jsx(k.BearIcons.MapPinIcon,{size:x*_.PIN_ICON_RATIO,className:"text-white"})})})},e.id)})]})};exports.ImageAnnotation=D;

package/dist/components/ImageAnnotation/ImageAnnotation.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I="#ec4899",_=24,t=.6;exports.DEFAULT_PIN_COLOR=I;exports.DEFAULT_PIN_SIZE=_;exports.PIN_ICON_RATIO=t;

package/dist/components/ImageAnnotation/ImageAnnotation.const.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_PIN_COLOR = "#ec4899";
+export declare const DEFAULT_PIN_SIZE = 24;
+export declare const PIN_ICON_RATIO = 0.6;

package/dist/components/ImageAnnotation/ImageAnnotation.const.js

@@ -0,0 +1,6 @@
+const I = "#ec4899", _ = 24, c = 0.6;
+export {
+  I as DEFAULT_PIN_COLOR,
+  _ as DEFAULT_PIN_SIZE,
+  c as PIN_ICON_RATIO
+};

package/dist/components/ImageAnnotation/ImageAnnotation.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ImageAnnotationProps } from './ImageAnnotation.types';
+export declare const ImageAnnotation: FC<ImageAnnotationProps>;

package/dist/components/ImageAnnotation/ImageAnnotation.js

@@ -0,0 +1,113 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+import { useRef as R, useState as v, useCallback as u } from "react";
+import { cn as T } from "../../utils/cn.js";
+import { BearIcons as A } from "../Icon/index.js";
+import { Popover as O } from "../Popover/Popover.js";
+import { Input as j } from "../Input/Input.js";
+import { DEFAULT_PIN_COLOR as D, DEFAULT_PIN_SIZE as F, PIN_ICON_RATIO as $ } from "./ImageAnnotation.const.js";
+let z = 1;
+function U(s, n, r, e) {
+  return /* @__PURE__ */ l("div", { className: "Bear-ImageAnnotation__edit min-w-[160px]", children: /* @__PURE__ */ l(
+    j,
+    {
+      autoFocus: !0,
+      size: "sm",
+      value: s,
+      onChange: (o) => n(o.target.value),
+      onKeyDown: (o) => {
+        o.key === "Enter" && r(), o.key === "Escape" && e();
+      },
+      placeholder: "Add note..."
+    }
+  ) });
+}
+function X(s, n, r, e) {
+  return /* @__PURE__ */ h("div", { className: "Bear-ImageAnnotation__label text-xs text-gray-700 dark:text-gray-200 whitespace-nowrap flex items-center gap-1", children: [
+    e ?? s.text,
+    n && /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: "text-red-400 hover:text-red-600 ml-1",
+        onClick: (o) => {
+          o.stopPropagation(), r(s.id);
+        },
+        children: /* @__PURE__ */ l(A.XIcon, { size: 12 })
+      }
+    )
+  ] });
+}
+const J = ({
+  src: s,
+  alt: n = "",
+  annotations: r,
+  onChange: e,
+  editable: o = !0,
+  pinColor: k = D,
+  pinSize: f = F,
+  renderPopover: p,
+  testId: y,
+  className: N,
+  ...w
+}) => {
+  const x = R(null), [c, a] = v(null), [d, _] = v(""), E = u(
+    (t) => {
+      if (!o || !e || !x.current || t.target.closest(".Bear-ImageAnnotation__pin")) return;
+      const i = x.current.getBoundingClientRect(), I = (t.clientX - i.left) / i.width * 100, g = (t.clientY - i.top) / i.height * 100, m = `ann-${z++}`, P = { id: m, x: I, y: g, text: "" };
+      e([...r, P]), a(m), _("");
+    },
+    [o, e, r]
+  ), B = u(() => {
+    !c || !e || (d.trim() ? e(r.map((t) => t.id === c ? { ...t, text: d } : t)) : e(r.filter((t) => t.id !== c)), a(null));
+  }, [c, d, e, r]), b = u(() => a(null), []), L = u(
+    (t) => {
+      e == null || e(r.filter((i) => i.id !== t)), c === t && a(null);
+    },
+    [e, r, c]
+  );
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: x,
+      className: T("Bear-ImageAnnotation relative inline-block select-none", o && "cursor-crosshair", N),
+      onClick: E,
+      "data-testid": y,
+      ...w,
+      children: [
+        /* @__PURE__ */ l("img", { src: s, alt: n, className: "w-full h-auto block rounded-lg", draggable: !1 }),
+        r.map((t) => {
+          const i = c === t.id, I = !!t.text, g = p == null ? void 0 : p(t), m = i ? U(d, _, B, b) : I ? X(t, o, L, g) : null;
+          return /* @__PURE__ */ l(
+            "div",
+            {
+              className: "Bear-ImageAnnotation__pin absolute transform -translate-x-1/2 -translate-y-full z-10",
+              style: { left: `${t.x}%`, top: `${t.y}%` },
+              children: /* @__PURE__ */ l(
+                O,
+                {
+                  content: m,
+                  trigger: i ? "click" : "hover",
+                  placement: "top",
+                  open: i || void 0,
+                  arrow: !1,
+                  children: /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: "Bear-ImageAnnotation__marker flex items-center justify-center rounded-full shadow-lg cursor-pointer transition-transform hover:scale-110",
+                      style: { width: f, height: f, backgroundColor: t.color ?? k },
+                      children: /* @__PURE__ */ l(A.MapPinIcon, { size: f * $, className: "text-white" })
+                    }
+                  )
+                }
+              )
+            },
+            t.id
+          );
+        })
+      ]
+    }
+  );
+};
+export {
+  J as ImageAnnotation
+};

package/dist/components/ImageAnnotation/ImageAnnotation.types.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface Annotation {
+    id: string;
+    x: number;
+    y: number;
+    text: string;
+    color?: string;
+}
+export interface ImageAnnotationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** Image source URL */
+    src: string;
+    /** Alt text */
+    alt?: string;
+    /** Current annotations */
+    annotations: Annotation[];
+    /** Called when annotations change (add/edit/delete) */
+    onChange?: (annotations: Annotation[]) => void;
+    /** Whether the user can add new annotations by clicking */
+    editable?: boolean;
+    /** Pin color */
+    pinColor?: string;
+    /** Pin size in px */
+    pinSize?: number;
+    /** Render custom popover content for each annotation */
+    renderPopover?: (annotation: Annotation) => ReactNode;
+    /** Test ID */
+    testId?: string;
+}

package/dist/components/ImageAnnotation/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageAnnotation } from './ImageAnnotation';
+export type { ImageAnnotationProps, Annotation } from './ImageAnnotation.types';

package/dist/components/MediaPlayer/MediaPlayer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),m=require("../../utils/cn.cjs"),r=require("../Icon/index.cjs"),j=require("./MediaPlayer.const.cjs"),C=require("./MediaPlayer.utils.cjs"),Te=require("../../hooks/useBearStyles.cjs"),Re=320,le=16,ze=({src:D,type:T="video",poster:R,autoPlay:z=!1,loop:L=!1,muted:G=!1,nativeControls:k=!1,width:A,height:H,size:ce="md",accentColor:u=j.DEFAULT_ACCENT,playIcon:Y,pauseIcon:Z,muteIcon:de,unmuteIcon:ue,fullscreenIcon:xe,centerOverlay:me=!1,sticky:q=!1,stickyPosition:$="right",stickySize:U=Re,airPlay:he=!1,playlist:w,onTrackChange:I,bis:fe,testId:ye,className:ge,style:ve,...pe})=>{const h=s.useRef(null),W=s.useRef(null),K=s.useRef(null),[b,F]=s.useState(z),[N,V]=s.useState(0),[g,X]=s.useState(0),[S,be]=s.useState(G),[f,J]=s.useState(L),[M,je]=s.useState(!1),[Q,ke]=s.useState(0),[Ne,_]=s.useState(!z),[l,we]=s.useState(0),O=Te.useBearStyles(fe,ve),x=s.useMemo(()=>w&&w.length>0?w:[{src:D,poster:R,type:T,title:void 0,artist:void 0}],[w,D,R,T]),o=x[l],Ie=o.src,B=o.poster??R,c=o.type??T,d=x.length>1,i=j.SIZE_MAP[ce];s.useEffect(()=>{J(L)},[L]),s.useEffect(()=>{const t=h.current;if(!t)return;const n=()=>V(t.currentTime),a=()=>X(t.duration),p=()=>{d&&l<x.length-1?v(l+1):f?d&&v(0):(F(!1),_(!0))};return t.addEventListener("timeupdate",n),t.addEventListener("loadedmetadata",a),t.addEventListener("ended",p),()=>{t.removeEventListener("timeupdate",n),t.removeEventListener("loadedmetadata",a),t.removeEventListener("ended",p)}},[f,d,l,x.length]),s.useEffect(()=>{if(!q||c!=="video")return;const t=K.current;if(!t)return;const n=()=>{const p=t.getBoundingClientRect().bottom<0;je(p),p&&ke(le)};return window.addEventListener("scroll",n,{passive:!0}),n(),()=>window.removeEventListener("scroll",n)},[q,c]);const v=s.useCallback(t=>{const n=Math.max(0,Math.min(x.length-1,t));we(n),V(0),X(0),_(!1),I==null||I(n,x[n]),setTimeout(()=>{const a=h.current;a&&(a.load(),a.play().catch(()=>{}),F(!0))},50)},[x,I]),E=s.useCallback(()=>{const t=h.current;t&&(b?(t.pause(),_(!0)):(t.play().catch(()=>{}),_(!1)),F(!b))},[b]),ee=s.useCallback(t=>{const n=h.current;if(!n||!g)return;const a=t.currentTarget.getBoundingClientRect(),p=Math.max(0,Math.min(1,(t.clientX-a.left)/a.width));n.currentTime=p*g},[g]),te=s.useCallback(()=>{const t=h.current;t&&(t.muted=!S,be(!S))},[S]),se=s.useCallback(()=>{const t=!f;J(t);const n=h.current;n&&(n.loop=t)},[f]),Se=s.useCallback(()=>{var n;const t=W.current;t&&(document.fullscreenElement?document.exitFullscreen():(n=t.requestFullscreen)==null||n.call(t))},[]),Me=s.useCallback(()=>{const t=h.current;t!=null&&t.webkitShowPlaybackTargetPicker&&t.webkitShowPlaybackTargetPicker()},[]),ne=s.useCallback(()=>{if(N>3){const t=h.current;t&&(t.currentTime=0)}else l>0&&v(l-1)},[N,l,v]),ae=s.useCallback(()=>{l<x.length-1&&v(l+1)},[l,x.length,v]),re=g?N/g*100:0,y=i.iconSm,P=i.iconMd,ie=b?Z??e.jsx(r.BearIcons.PauseIcon,{size:P}):Y??e.jsx(r.BearIcons.PlayIcon,{size:P}),oe=S?de??e.jsx(r.BearIcons.VolumeOffIcon,{size:y}):ue??e.jsx(r.BearIcons.VolumeUpIcon,{size:y}),_e=xe??e.jsx(r.BearIcons.MaximizeIcon,{size:y}),Be=c==="video"?"video":"audio",Ee=s.useMemo(()=>M&&c==="video"?{...O,position:"fixed",top:Q,[$==="left"?"left":"right"]:le,width:U,zIndex:50,boxShadow:"0 8px 32px rgba(0,0,0,0.45)",borderRadius:12,transition:"top 0.15s ease-out"}:{...O,width:A??"100%",height:H,maxWidth:A?void 0:i.maxWidth},[M,c,O,A,H,i.maxWidth,Q,$,U]),Pe=s.useMemo(()=>{if(!M)return{aspectRatio:i.aspectRatio}},[M,i.aspectRatio]),Ce=`${u}20`;return e.jsxs(e.Fragment,{children:[q&&e.jsx("div",{ref:K,style:{height:1}}),e.jsxs("div",{ref:W,className:m.cn("Bear-MediaPlayer relative rounded-xl overflow-hidden bg-black",ge),style:Ee,"data-testid":ye,...pe,children:[e.jsx(Be,{ref:h,src:Ie,poster:B,autoPlay:z,loop:f&&!d,muted:G,controls:k,playsInline:!0,className:m.cn(c==="video"?"Bear-MediaPlayer__video w-full object-cover":"hidden"),style:c==="video"?Pe:void 0,onClick:c==="video"?E:void 0}),me&&c==="video"&&Ne&&!k&&e.jsx("button",{type:"button",onClick:E,className:"Bear-MediaPlayer__overlay absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity",children:e.jsx("div",{className:"w-16 h-16 rounded-full bg-white/90 flex items-center justify-center shadow-lg",children:b?Z??e.jsx(r.BearIcons.PauseIcon,{size:j.CENTER_ICON_SIZE,className:"text-gray-900"}):Y??e.jsx(r.BearIcons.PlayIcon,{size:j.CENTER_ICON_SIZE,className:"text-gray-900"})})}),!k&&c==="video"&&e.jsxs("div",{className:m.cn("Bear-MediaPlayer__controls absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent pt-8",i.padding),children:[e.jsx("div",{className:"Bear-MediaPlayer__progress w-full cursor-pointer mb-2 group",style:{height:j.PROGRESS_HEIGHT},onClick:ee,children:e.jsx("div",{className:"w-full h-full bg-white/30 rounded-full relative overflow-hidden",children:e.jsx("div",{className:"h-full rounded-full transition-all",style:{width:`${re}%`,backgroundColor:u}})})}),e.jsxs("div",{className:m.cn("Bear-MediaPlayer__bar flex items-center",i.gap),children:[d&&e.jsx("button",{type:"button",onClick:ne,className:"text-white hover:text-pink-400 transition-colors",children:e.jsx(r.BearIcons.SkipBackIcon,{size:y})}),e.jsx("button",{type:"button",onClick:E,className:"text-white hover:text-pink-400 transition-colors",children:ie}),d&&e.jsx("button",{type:"button",onClick:ae,className:"text-white hover:text-pink-400 transition-colors",children:e.jsx(r.BearIcons.SkipForwardIcon,{size:y})}),e.jsx("button",{type:"button",onClick:te,className:"text-white hover:text-pink-400 transition-colors",children:oe}),e.jsxs("span",{className:m.cn("Bear-MediaPlayer__time text-white font-mono",i.text),children:[C.formatTime(N)," / ",C.formatTime(g)]}),e.jsx("div",{className:"flex-1"}),e.jsx("button",{type:"button",onClick:se,className:"transition-colors",style:{color:f?u:void 0},title:"Loop",children:e.jsx(r.BearIcons.RepeatIcon,{size:y,className:f?void 0:"text-white/60 hover:text-white"})}),he&&e.jsx("button",{type:"button",onClick:Me,className:"text-white hover:text-pink-400 transition-colors",title:"AirPlay",children:e.jsx(r.BearIcons.CastIcon,{size:y})}),e.jsx("button",{type:"button",onClick:Se,className:"text-white hover:text-pink-400 transition-colors",children:_e})]}),d&&o.title&&e.jsxs("div",{className:"mt-1 flex items-center gap-2 truncate",children:[e.jsx("span",{className:"text-white text-xs font-medium truncate",children:o.title}),o.artist&&e.jsxs("span",{className:"text-white/50 text-xs truncate",children:["— ",o.artist]})]})]}),c==="audio"&&!k&&e.jsxs("div",{className:m.cn("Bear-MediaPlayer__audio bg-gray-100 dark:bg-zinc-800 rounded-xl",i.padding),children:[d&&(B||o.title)&&e.jsxs("div",{className:"flex items-center gap-3 mb-3",children:[B&&e.jsx("img",{src:B,alt:"",className:"w-12 h-12 rounded-lg object-cover shrink-0"}),e.jsxs("div",{className:"min-w-0 flex-1",children:[o.title&&e.jsx("p",{className:"text-sm font-semibold text-gray-900 dark:text-white truncate",children:o.title}),o.artist&&e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 truncate",children:o.artist})]})]}),e.jsx("div",{className:"Bear-MediaPlayer__progress w-full cursor-pointer mb-1",style:{height:j.PROGRESS_HEIGHT},onClick:ee,children:e.jsx("div",{className:"w-full h-full bg-gray-300 dark:bg-zinc-600 rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full rounded-full",style:{width:`${re}%`,backgroundColor:u}})})}),e.jsxs("div",{className:"flex justify-between mb-2",children:[e.jsx("span",{className:m.cn("text-gray-500 font-mono",i.text),children:C.formatTime(N)}),e.jsx("span",{className:m.cn("text-gray-500 font-mono",i.text),children:C.formatTime(g)})]}),e.jsxs("div",{className:m.cn("flex items-center justify-center",i.gap),children:[e.jsx("button",{type:"button",onClick:se,className:"transition-colors",style:{color:f?u:void 0},title:"Loop",children:e.jsx(r.BearIcons.RepeatIcon,{size:y,className:f?void 0:"text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"})}),d&&e.jsx("button",{type:"button",onClick:ne,className:"text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors",children:e.jsx(r.BearIcons.SkipBackIcon,{size:P})}),e.jsx("button",{type:"button",onClick:E,className:"Bear-MediaPlayer__play w-10 h-10 rounded-full flex items-center justify-center text-white transition-colors",style:{backgroundColor:u},children:ie}),d&&e.jsx("button",{type:"button",onClick:ae,className:"text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors",children:e.jsx(r.BearIcons.SkipForwardIcon,{size:P})}),e.jsx("button",{type:"button",onClick:te,className:"text-gray-500 hover:text-gray-700 dark:hover:text-gray-300",children:oe})]})]}),d&&!k&&e.jsx("div",{className:"Bear-MediaPlayer__playlist bg-gray-50 dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-700 max-h-48 overflow-y-auto",children:x.map((t,n)=>{const a=n===l;return e.jsxs("button",{type:"button",onClick:()=>v(n),className:m.cn("w-full flex items-center gap-3 px-3 py-2 text-left transition-colors",!a&&"hover:bg-gray-100 dark:hover:bg-zinc-800"),style:a?{backgroundColor:Ce}:void 0,children:[t.poster&&e.jsx("img",{src:t.poster,alt:"",className:"w-8 h-8 rounded object-cover shrink-0"}),e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsx("p",{className:"text-xs font-medium truncate",style:a?{color:u}:void 0,children:t.title??`Track ${n+1}`}),t.artist&&e.jsx("p",{className:"text-[10px] text-gray-400 truncate",children:t.artist})]}),a&&b&&e.jsxs("div",{className:"flex items-end gap-0.5 h-3",children:[e.jsx("span",{className:"w-0.5 rounded-full animate-pulse",style:{height:"60%",backgroundColor:u}}),e.jsx("span",{className:"w-0.5 rounded-full animate-pulse",style:{height:"100%",backgroundColor:u,animationDelay:"0.2s"}}),e.jsx("span",{className:"w-0.5 rounded-full animate-pulse",style:{height:"40%",backgroundColor:u,animationDelay:"0.4s"}})]}),e.jsx("span",{className:"text-[10px] text-gray-400 tabular-nums shrink-0",children:n+1})]},n)})})]})]})};exports.MediaPlayer=ze;

package/dist/components/MediaPlayer/MediaPlayer.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="#ec4899",a=4,i=48,e={sm:{maxWidth:360,aspectRatio:"4 / 3",padding:"p-2",gap:"gap-2",text:"text-[10px]",iconSm:14,iconMd:16},md:{maxWidth:640,aspectRatio:"16 / 9",padding:"p-3",gap:"gap-3",text:"text-xs",iconSm:18,iconMd:20},lg:{maxWidth:960,aspectRatio:"21 / 9",padding:"p-4",gap:"gap-4",text:"text-sm",iconSm:20,iconMd:24}};exports.CENTER_ICON_SIZE=i;exports.DEFAULT_ACCENT=t;exports.PROGRESS_HEIGHT=a;exports.SIZE_MAP=e;

package/dist/components/MediaPlayer/MediaPlayer.const.d.ts

@@ -0,0 +1,36 @@
+export declare const DEFAULT_ACCENT = "#ec4899";
+export declare const PROGRESS_HEIGHT = 4;
+export declare const ICON_SM = 18;
+export declare const ICON_MD = 20;
+export declare const STICKY_WIDTH = 340;
+export declare const STICKY_OFFSET = 16;
+export declare const CENTER_ICON_SIZE = 48;
+export declare const SIZE_MAP: {
+    readonly sm: {
+        readonly maxWidth: 360;
+        readonly aspectRatio: "4 / 3";
+        readonly padding: "p-2";
+        readonly gap: "gap-2";
+        readonly text: "text-[10px]";
+        readonly iconSm: 14;
+        readonly iconMd: 16;
+    };
+    readonly md: {
+        readonly maxWidth: 640;
+        readonly aspectRatio: "16 / 9";
+        readonly padding: "p-3";
+        readonly gap: "gap-3";
+        readonly text: "text-xs";
+        readonly iconSm: 18;
+        readonly iconMd: 20;
+    };
+    readonly lg: {
+        readonly maxWidth: 960;
+        readonly aspectRatio: "21 / 9";
+        readonly padding: "p-4";
+        readonly gap: "gap-4";
+        readonly text: "text-sm";
+        readonly iconSm: 20;
+        readonly iconMd: 24;
+    };
+};

package/dist/components/MediaPlayer/MediaPlayer.const.js

@@ -0,0 +1,11 @@
+const t = "#ec4899", a = 4, p = 48, i = {
+  sm: { maxWidth: 360, aspectRatio: "4 / 3", padding: "p-2", gap: "gap-2", text: "text-[10px]", iconSm: 14, iconMd: 16 },
+  md: { maxWidth: 640, aspectRatio: "16 / 9", padding: "p-3", gap: "gap-3", text: "text-xs", iconSm: 18, iconMd: 20 },
+  lg: { maxWidth: 960, aspectRatio: "21 / 9", padding: "p-4", gap: "gap-4", text: "text-sm", iconSm: 20, iconMd: 24 }
+};
+export {
+  p as CENTER_ICON_SIZE,
+  t as DEFAULT_ACCENT,
+  a as PROGRESS_HEIGHT,
+  i as SIZE_MAP
+};

package/dist/components/MediaPlayer/MediaPlayer.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MediaPlayerProps } from './MediaPlayer.types';
+export declare const MediaPlayer: FC<MediaPlayerProps>;