@fluencypassdevs/cycle 0.1.0

package/dist/chunk-R4LITCVX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/file-card.tsx"],"names":[],"mappings":"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","file":"chunk-R4LITCVX.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { FileText } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst fileCardVariants = cva(\n  \"inline-flex w-full items-start gap-3 border border-border bg-secondary text-left transition-all select-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:opacity-50 disabled:pointer-events-none hover:bg-accent active:scale-[0.98]\",\n  {\n    variants: {\n      size: {\n        sm: \"rounded-lg px-3 py-4\",\n        md: \"rounded-xl px-4 py-6\",\n        lg: \"rounded-2xl px-6 py-8\",\n      },\n    },\n    defaultVariants: {\n      size: \"lg\",\n    },\n  }\n)\n\nconst titleVariants = cva(\"font-medium text-foreground truncate\", {\n  variants: {\n    size: {\n      sm: \"text-xs leading-3\",\n      md: \"text-sm leading-3.5\",\n      lg: \"text-sm leading-3.5\",\n    },\n  },\n  defaultVariants: {\n    size: \"lg\",\n  },\n})\n\nconst iconVariants = cva(\"shrink-0 text-muted-foreground\", {\n  variants: {\n    size: {\n      sm: \"size-4\",\n      md: \"size-6\",\n      lg: \"size-6\",\n    },\n  },\n  defaultVariants: {\n    size: \"lg\",\n  },\n})\n\nexport interface FileCardProps\n  extends Omit<React.ComponentProps<\"button\">, \"children\" | \"size\">,\n    VariantProps<typeof fileCardVariants> {\n  /** Nome do arquivo exibido como titulo */\n  title: string\n  /** Tipo do arquivo (ex: \"PDF\", \"DOCX\", \"PNG\") */\n  fileType?: string\n  /** Tamanho do arquivo (ex: \"180 KB\", \"2.4 MB\") */\n  fileSize?: string\n  /** URL de download — se fornecido, renderiza como <a> */\n  href?: string\n  /** Exibir icone de arquivo */\n  icon?: boolean\n  /** Exibir linha de descricao (tipo + tamanho) */\n  showDescription?: boolean\n  /** Exibir peso do arquivo na descricao */\n  showFileSize?: boolean\n}\n\nfunction FileCard({\n  title,\n  fileType,\n  fileSize,\n  href,\n  icon = true,\n  showDescription = true,\n  showFileSize = true,\n  size = \"lg\",\n  disabled = false,\n  className,\n  ...props\n}: FileCardProps) {\n  const content = (\n    <>\n      {icon && (\n        <FileText className={cn(iconVariants({ size }))} />\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span className={cn(titleVariants({ size }))}>{title}</span>\n        {showDescription && fileType && (\n          <span className=\"flex items-center gap-2 text-xs text-[#a1a1a1] whitespace-nowrap\">\n            <span>{fileType}</span>\n            {showFileSize && fileSize && (\n              <>\n                <span>•</span>\n                <span>{fileSize}</span>\n              </>\n            )}\n          </span>\n        )}\n      </div>\n    </>\n  )\n\n  const classes = cn(fileCardVariants({ size }), className)\n\n  if (href && !disabled) {\n    return (\n      <a\n        href={href}\n        download\n        className={classes}\n        aria-label={`Download ${title}`}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      data-slot=\"file-card\"\n      type=\"button\"\n      disabled={disabled}\n      className={classes}\n      {...props}\n    >\n      {content}\n    </button>\n  )\n}\n\nexport { FileCard, fileCardVariants }\n"]}

package/dist/chunk-TYCPXAXF.js

@@ -0,0 +1,10 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };
+//# sourceMappingURL=chunk-TYCPXAXF.js.map
+//# sourceMappingURL=chunk-TYCPXAXF.js.map

package/dist/chunk-TYCPXAXF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"names":[],"mappings":";;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-TYCPXAXF.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"]}

package/dist/chunk-UEJLA7Q6.js

@@ -0,0 +1,70 @@
+import { cn } from './chunk-TYCPXAXF.js';
+import { __objRest, __spreadValues, __spreadProps } from './chunk-YINJ5YZ5.js';
+import { ChevronDownIcon } from 'lucide-react';
+import { Accordion as Accordion$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Accordion(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(Accordion$1.Root, __spreadValues({ "data-slot": "accordion" }, props));
+}
+function AccordionItem(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    __spreadValues({
+      "data-slot": "accordion-item",
+      className: cn("border-b last:border-b-0", className)
+    }, props)
+  );
+}
+function AccordionTrigger(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    __spreadProps(__spreadValues({
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })
+      ]
+    })
+  ) });
+}
+function AccordionContent(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Content,
+    __spreadProps(__spreadValues({
+      "data-slot": "accordion-content",
+      className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    }, props), {
+      children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
+    })
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+//# sourceMappingURL=chunk-UEJLA7Q6.js.map
+//# sourceMappingURL=chunk-UEJLA7Q6.js.map

package/dist/chunk-UEJLA7Q6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/accordion.tsx"],"names":["AccordionPrimitive"],"mappings":";;;;;;AAQA,SAAS,UAAU,EAAA,EAEsC;AAFtC,EAAA,IACd,kBADc,EAAA,EACd,EAAA,CAAA;AAEH,EAAA,2BAAQA,WAAA,CAAmB,IAAA,EAAnB,cAAA,CAAA,EAAwB,WAAA,EAAU,eAAgB,KAAA,CAAO,CAAA;AACnE;AAEA,SAAS,cAAc,EAAA,EAGkC;AAHlC,EAAA,IAAA,EAAA,GAAA,EAAA,EACrB;AAAA,IAAA;AAAA,GAfF,GAcuB,EAAA,EAElB,KAAA,GAAA,SAAA,CAFkB,EAAA,EAElB;AAAA,IADH;AAAA,GAAA,CAAA;AAGA,EAAA,uBACE,GAAA;AAAA,IAACA,WAAA,CAAmB,IAAA;AAAA,IAAnB,cAAA,CAAA;AAAA,MACC,WAAA,EAAU,gBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,0BAAA,EAA4B,SAAS;AAAA,KAAA,EAC/C,KAAA;AAAA,GACN;AAEJ;AAEA,SAAS,iBAAiB,EAAA,EAIkC;AAJlC,EAAA,IAAA,EAAA,GAAA,EAAA,EACxB;AAAA,IAAA,SAAA;AAAA,IACA;AAAA,GA7BF,GA2B0B,EAAA,EAGrB,KAAA,GAAA,SAAA,CAHqB,EAAA,EAGrB;AAAA,IAFH,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBACE,GAAA,CAACA,WAAA,CAAmB,MAAA,EAAnB,EAA0B,WAAU,MAAA,EACnC,QAAA,kBAAA,IAAA;AAAA,IAACA,WAAA,CAAmB,OAAA;AAAA,IAAnB,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,4SAAA;AAAA,QACA;AAAA;AACF,KAAA,EACI,KAAA,CAAA,EANL;AAAA,MAQE,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAU,6GAAA,EAA8G;AAAA;AAAA,KAAA;AAAA,GAC3I,EACF,CAAA;AAEJ;AAEA,SAAS,iBAAiB,EAAA,EAIkC;AAJlC,EAAA,IAAA,EAAA,GAAA,EAAA,EACxB;AAAA,IAAA,SAAA;AAAA,IACA;AAAA,GAnDF,GAiD0B,EAAA,EAGrB,KAAA,GAAA,SAAA,CAHqB,EAAA,EAGrB;AAAA,IAFH,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBACE,GAAA;AAAA,IAACA,WAAA,CAAmB,OAAA;AAAA,IAAnB,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAU;AAAA,KAAA,EACN,KAAA,CAAA,EAHL;AAAA,MAKC,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,WAAA,EAAa,SAAS,GAAI,QAAA,EAAS;AAAA,KAAA;AAAA,GACxD;AAEJ","file":"chunk-UEJLA7Q6.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n"]}

package/dist/chunk-UVCEQOQR.js

@@ -0,0 +1,104 @@
+import { ChatBubble } from './chunk-HZJRM5EK.js';
+import { CycleIcon } from './chunk-OT2HCBR2.js';
+import { ScrollArea } from './chunk-3LXU5C35.js';
+import { Button } from './chunk-7UMEJDC3.js';
+import { cn } from './chunk-TYCPXAXF.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-YINJ5YZ5.js';
+import * as React from 'react';
+import { SendIcon } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ChatPanel(_a) {
+  var _b = _a, {
+    messages,
+    onSendMessage,
+    disabled = false,
+    placeholder = "Envie uma mensagem...",
+    title = "Chat",
+    className
+  } = _b, props = __objRest(_b, [
+    "messages",
+    "onSendMessage",
+    "disabled",
+    "placeholder",
+    "title",
+    "className"
+  ]);
+  const [input, setInput] = React.useState("");
+  const scrollRef = React.useRef(null);
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [messages.length]);
+  function handleSubmit(e) {
+    e.preventDefault();
+    const trimmed = input.trim();
+    if (!trimmed || disabled) return;
+    onSendMessage == null ? void 0 : onSendMessage(trimmed);
+    setInput("");
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "chat-panel",
+      className: cn(
+        "flex flex-col bg-background border-l border-border",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center h-12 px-4 border-b border-border", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }) }),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: "flex flex-col gap-3 p-4", children: [
+          messages.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: "Nenhuma mensagem ainda." }),
+          messages.map((msg) => /* @__PURE__ */ jsx(
+            ChatBubble,
+            {
+              author: msg.author,
+              avatar: msg.avatar,
+              message: msg.message,
+              timestamp: msg.timestamp,
+              variant: msg.variant
+            },
+            msg.id
+          ))
+        ] }) }),
+        onSendMessage && /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: handleSubmit,
+            className: "shrink-0 flex items-center gap-2 p-3 border-t border-border",
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: input,
+                  onChange: (e) => setInput(e.target.value),
+                  placeholder,
+                  disabled,
+                  className: "flex-1 min-w-0 h-9 rounded-lg border border-input bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "submit",
+                  size: "icon-sm",
+                  disabled: disabled || !input.trim(),
+                  className: "shrink-0",
+                  children: /* @__PURE__ */ jsx(CycleIcon, { icon: SendIcon, size: "xs", decorative: true })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    })
+  );
+}
+
+export { ChatPanel };
+//# sourceMappingURL=chunk-UVCEQOQR.js.map
+//# sourceMappingURL=chunk-UVCEQOQR.js.map

package/dist/chunk-UVCEQOQR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/chat-panel.tsx"],"names":[],"mappings":"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","file":"chunk-UVCEQOQR.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { SendIcon } from \"lucide-react\"\nimport { CycleIcon } from \"@/components/icons/CycleIcon\"\nimport { Button } from \"@/components/ui/button\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { ChatBubble, type ChatBubbleProps } from \"@/components/ui/chat-bubble\"\nimport { cn } from \"@/lib/utils\"\n\n/* ─── Types ─── */\n\nexport interface ChatMessage {\n  /** Unique message ID */\n  id: string\n  /** Author display name */\n  author: string\n  /** Avatar URL */\n  avatar?: string\n  /** Message text */\n  message: string\n  /** Timestamp label (e.g. \"14:32\") */\n  timestamp?: string\n  /** Message variant */\n  variant?: ChatBubbleProps[\"variant\"]\n}\n\nexport interface ChatPanelProps extends React.ComponentProps<\"div\"> {\n  /** Chat messages array */\n  messages: ChatMessage[]\n  /** Callback when the user sends a message */\n  onSendMessage?: (message: string) => void\n  /** Disable the input (e.g. when chat is read-only or ended) */\n  disabled?: boolean\n  /** Input placeholder text */\n  placeholder?: string\n  /** Title shown at the top of the panel */\n  title?: string\n}\n\n/* ─── Component ─── */\n\nfunction ChatPanel({\n  messages,\n  onSendMessage,\n  disabled = false,\n  placeholder = \"Envie uma mensagem...\",\n  title = \"Chat\",\n  className,\n  ...props\n}: ChatPanelProps) {\n  const [input, setInput] = React.useState(\"\")\n  const scrollRef = React.useRef<HTMLDivElement>(null)\n\n  /* Auto-scroll to bottom on new messages */\n  React.useEffect(() => {\n    const el = scrollRef.current\n    if (el) {\n      el.scrollTop = el.scrollHeight\n    }\n  }, [messages.length])\n\n  function handleSubmit(e: React.FormEvent) {\n    e.preventDefault()\n    const trimmed = input.trim()\n    if (!trimmed || disabled) return\n    onSendMessage?.(trimmed)\n    setInput(\"\")\n  }\n\n  return (\n    <div\n      data-slot=\"chat-panel\"\n      className={cn(\n        \"flex flex-col bg-background border-l border-border\",\n        className\n      )}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"shrink-0 flex items-center h-12 px-4 border-b border-border\">\n        <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n      </div>\n\n      {/* Messages */}\n      <ScrollArea className=\"flex-1 min-h-0\">\n        <div ref={scrollRef} className=\"flex flex-col gap-3 p-4\">\n          {messages.length === 0 && (\n            <p className=\"text-sm text-muted-foreground text-center py-8\">\n              Nenhuma mensagem ainda.\n            </p>\n          )}\n          {messages.map((msg) => (\n            <ChatBubble\n              key={msg.id}\n              author={msg.author}\n              avatar={msg.avatar}\n              message={msg.message}\n              timestamp={msg.timestamp}\n              variant={msg.variant}\n            />\n          ))}\n        </div>\n      </ScrollArea>\n\n      {/* Input */}\n      {onSendMessage && (\n        <form\n          onSubmit={handleSubmit}\n          className=\"shrink-0 flex items-center gap-2 p-3 border-t border-border\"\n        >\n          <input\n            type=\"text\"\n            value={input}\n            onChange={(e) => setInput(e.target.value)}\n            placeholder={placeholder}\n            disabled={disabled}\n            className=\"flex-1 min-w-0 h-9 rounded-lg border border-input bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed\"\n          />\n          <Button\n            type=\"submit\"\n            size=\"icon-sm\"\n            disabled={disabled || !input.trim()}\n            className=\"shrink-0\"\n          >\n            <CycleIcon icon={SendIcon} size=\"xs\" decorative />\n          </Button>\n        </form>\n      )}\n    </div>\n  )\n}\n\nexport { ChatPanel }\n"]}

package/dist/chunk-VECLN5AT.js

@@ -0,0 +1,202 @@
+import { CycleIcon } from './chunk-OT2HCBR2.js';
+import { cn } from './chunk-TYCPXAXF.js';
+import * as React from 'react';
+import { MediaPlayer, MediaProvider, Time, TimeSlider, SeekButton, useMediaState, PlayButton, useMediaRemote, MuteButton, VolumeSlider } from '@vidstack/react';
+import '@vidstack/react/player/styles/base.css';
+import { RotateCcw, Play, Pause, RotateCw, Gauge, Check, VolumeX, Volume1, Volume2 } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var controlBtnClass = "group/btn inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring group-data-[filled]:text-primary-foreground group-data-[filled]:hover:bg-primary-foreground/10";
+var filledIconClass = "fill-current !stroke-transparent text-foreground group-data-[filled]:text-primary-foreground";
+var outlineIconClass = "text-foreground group-data-[filled]:text-primary-foreground";
+function AudioPlayControl() {
+  const isPaused = useMediaState("paused");
+  return /* @__PURE__ */ jsx(PlayButton, { className: controlBtnClass, children: isPaused ? /* @__PURE__ */ jsx(CycleIcon, { icon: Play, size: "sm", decorative: true, className: filledIconClass }) : /* @__PURE__ */ jsx(CycleIcon, { icon: Pause, size: "sm", decorative: true, className: filledIconClass }) });
+}
+function AudioSeekBackwardControl() {
+  return /* @__PURE__ */ jsx(SeekButton, { className: controlBtnClass, seconds: -10, children: /* @__PURE__ */ jsx(CycleIcon, { icon: RotateCcw, size: "sm", decorative: true, className: outlineIconClass }) });
+}
+function AudioSeekForwardControl() {
+  return /* @__PURE__ */ jsx(SeekButton, { className: controlBtnClass, seconds: 10, children: /* @__PURE__ */ jsx(CycleIcon, { icon: RotateCw, size: "sm", decorative: true, className: outlineIconClass }) });
+}
+function AudioMuteControl() {
+  const volume = useMediaState("volume");
+  const isMuted = useMediaState("muted");
+  const Icon = isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;
+  return /* @__PURE__ */ jsx(MuteButton, { className: controlBtnClass, children: /* @__PURE__ */ jsx(CycleIcon, { icon: Icon, size: "sm", decorative: true, className: filledIconClass }) });
+}
+function AudioVolumeControl() {
+  return /* @__PURE__ */ jsxs(VolumeSlider.Root, { className: "group relative hidden h-9 w-20 cursor-pointer touch-none select-none items-center outline-none sm:inline-flex", children: [
+    /* @__PURE__ */ jsx(VolumeSlider.Track, { className: "relative h-[4px] w-full rounded-full bg-accent group-data-[filled]/root:bg-primary-foreground/30", children: /* @__PURE__ */ jsx(VolumeSlider.TrackFill, { className: "absolute h-full w-[var(--slider-fill)] rounded-full bg-primary group-data-[filled]/root:bg-primary-foreground" }) }),
+    /* @__PURE__ */ jsx(VolumeSlider.Thumb, { className: "absolute left-[var(--slider-fill)] top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:opacity-100 group-data-[filled]/root:bg-primary-foreground" })
+  ] });
+}
+function AudioSeekBar() {
+  return /* @__PURE__ */ jsxs(TimeSlider.Root, { className: "group relative inline-flex h-9 w-full cursor-pointer touch-none select-none items-center outline-none", children: [
+    /* @__PURE__ */ jsxs(TimeSlider.Track, { className: "relative h-[4px] w-full rounded-full bg-accent group-data-[filled]/root:bg-primary-foreground/30", children: [
+      /* @__PURE__ */ jsx(TimeSlider.Progress, { className: "absolute h-full w-[var(--slider-progress)] rounded-full bg-accent-foreground/20 group-data-[filled]/root:bg-primary-foreground/20" }),
+      /* @__PURE__ */ jsx(TimeSlider.TrackFill, { className: "absolute h-full w-[var(--slider-fill)] rounded-full bg-primary group-data-[filled]/root:bg-primary-foreground" })
+    ] }),
+    /* @__PURE__ */ jsx(TimeSlider.Thumb, { className: "absolute left-[var(--slider-fill)] top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:opacity-100 group-data-[filled]/root:bg-primary-foreground" }),
+    /* @__PURE__ */ jsx(TimeSlider.Preview, { className: "pointer-events-none flex flex-col items-center opacity-0 transition-opacity duration-200 data-[visible]:opacity-100", children: /* @__PURE__ */ jsx(TimeSlider.Value, { className: "rounded bg-popover px-1.5 py-0.5 text-[11px] font-mono text-popover-foreground border border-border shadow-sm" }) })
+  ] });
+}
+function AudioTimeDisplay() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs font-mono text-muted-foreground tabular-nums group-data-[filled]:text-primary-foreground/80", children: [
+    /* @__PURE__ */ jsx(Time, { type: "current" }),
+    /* @__PURE__ */ jsx("span", { children: "/" }),
+    /* @__PURE__ */ jsx(Time, { type: "duration" })
+  ] });
+}
+function AudioSpeedControl() {
+  const playbackRate = useMediaState("playbackRate");
+  const remote = useMediaRemote();
+  const [open, setOpen] = React.useState(false);
+  const rates = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: controlBtnClass,
+        children: playbackRate === 1 ? /* @__PURE__ */ jsx(CycleIcon, { icon: Gauge, size: "sm", decorative: true, className: outlineIconClass }) : /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono font-semibold text-foreground group-data-[filled]:text-primary-foreground", children: [
+          playbackRate,
+          "x"
+        ] })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-full right-0 z-50 mb-2 min-w-[120px] rounded-lg border border-border bg-popover p-1 shadow-lg", children: rates.map((rate) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            remote.changePlaybackRate(rate);
+            setOpen(false);
+          },
+          className: cn(
+            "flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm text-popover-foreground/80 transition-colors hover:bg-accent hover:text-popover-foreground",
+            playbackRate === rate && "text-popover-foreground font-medium"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "size-4 flex items-center justify-center", children: playbackRate === rate && /* @__PURE__ */ jsx(CycleIcon, { icon: Check, size: "2xs", decorative: true, className: "text-popover-foreground" }) }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: rate === 1 ? "Normal" : `${rate}x` })
+          ]
+        },
+        rate
+      )) })
+    ] })
+  ] });
+}
+function AudioPlayer({
+  src,
+  title,
+  subtitle,
+  coverArt,
+  coverArtAlt = "",
+  variant = "default",
+  filled = false,
+  autoPlay = false,
+  muted = false,
+  loop = false,
+  showSpeed = true,
+  className
+}) {
+  const player = React.useRef(null);
+  if (variant === "card") {
+    return /* @__PURE__ */ jsxs(
+      MediaPlayer,
+      {
+        ref: player,
+        src,
+        autoPlay,
+        muted,
+        loop,
+        viewType: "audio",
+        "data-filled": filled ? "" : void 0,
+        style: filled ? { "--primary-foreground": "var(--secondary-foreground)" } : void 0,
+        className: cn(
+          "group/root group !block w-full rounded-xl border border-border bg-card p-4 shadow-sm md:p-6",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(MediaProvider, { className: "!hidden" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-4 mb-4 md:gap-5 md:mb-6", children: [
+            coverArt && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: coverArt,
+                alt: coverArtAlt,
+                className: "size-16 shrink-0 rounded-lg object-cover bg-muted md:size-24 md:rounded-xl"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col justify-center", children: [
+              /* @__PURE__ */ jsx("p", { className: cn(
+                "truncate text-sm font-semibold md:text-base",
+                filled ? "text-primary-foreground" : "text-card-foreground"
+              ), children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: cn(
+                "truncate text-xs md:text-sm md:mt-0.5",
+                filled ? "text-primary-foreground/70" : "text-muted-foreground"
+              ), children: subtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex w-full items-center", children: /* @__PURE__ */ jsx(AudioSeekBar, {}) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-0.5 -mt-1 mb-1 md:mb-2", children: [
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "text-[11px] font-mono tabular-nums md:text-xs",
+              filled ? "text-primary-foreground/80" : "text-muted-foreground"
+            ), children: /* @__PURE__ */ jsx(Time, { type: "current" }) }),
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "text-[11px] font-mono tabular-nums md:text-xs",
+              filled ? "text-primary-foreground/80" : "text-muted-foreground"
+            ), children: /* @__PURE__ */ jsx(Time, { type: "duration" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-2", children: [
+            /* @__PURE__ */ jsx(AudioSeekBackwardControl, {}),
+            /* @__PURE__ */ jsx(AudioPlayControl, {}),
+            /* @__PURE__ */ jsx(AudioSeekForwardControl, {}),
+            /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+            showSpeed && /* @__PURE__ */ jsx(AudioSpeedControl, {}),
+            /* @__PURE__ */ jsx(AudioMuteControl, {}),
+            /* @__PURE__ */ jsx(AudioVolumeControl, {})
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    MediaPlayer,
+    {
+      ref: player,
+      src,
+      autoPlay,
+      muted,
+      loop,
+      viewType: "audio",
+      "data-filled": filled ? "" : void 0,
+      style: filled ? { "--primary-foreground": "var(--secondary-foreground)" } : void 0,
+      className: cn(
+        "group/root group !flex w-full items-center gap-1.5 rounded-xl border border-border bg-card px-2 py-1.5 shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(MediaProvider, { className: "!hidden" }),
+        /* @__PURE__ */ jsx(AudioSeekBackwardControl, {}),
+        /* @__PURE__ */ jsx(AudioPlayControl, {}),
+        /* @__PURE__ */ jsx(AudioSeekForwardControl, {}),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 px-1", children: /* @__PURE__ */ jsx(AudioSeekBar, {}) }),
+        /* @__PURE__ */ jsx(AudioTimeDisplay, {}),
+        showSpeed && /* @__PURE__ */ jsx(AudioSpeedControl, {}),
+        /* @__PURE__ */ jsx(AudioMuteControl, {}),
+        /* @__PURE__ */ jsx(AudioVolumeControl, {})
+      ]
+    }
+  );
+}
+
+export { AudioPlayer };
+//# sourceMappingURL=chunk-VECLN5AT.js.map
+//# sourceMappingURL=chunk-VECLN5AT.js.map

package/dist/chunk-VECLN5AT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/audio-player.tsx"],"names":[],"mappings":"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","file":"chunk-VECLN5AT.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  MediaPlayer,\n  MediaProvider,\n  TimeSlider,\n  VolumeSlider,\n  Time,\n  PlayButton,\n  MuteButton,\n  SeekButton,\n  useMediaState,\n  useMediaRemote,\n  type MediaPlayerInstance,\n} from \"@vidstack/react\"\nimport \"@vidstack/react/player/styles/base.css\"\nimport {\n  Play,\n  Pause,\n  Volume2,\n  VolumeX,\n  Volume1,\n  RotateCcw,\n  RotateCw,\n  Gauge,\n  Check,\n} from \"lucide-react\"\nimport { CycleIcon } from \"@/components/icons\"\nimport { cn } from \"@/lib/utils\"\n\n/* ─── Types ─── */\n\nexport interface AudioPlayerProps {\n  /** URL do audio (mp3, ogg, m3u8) */\n  src: string\n  /** Nome da track/aula */\n  title: string\n  /** Subtitulo / nome do curso */\n  subtitle?: string\n  /** URL da imagem de capa (variante card) */\n  coverArt?: string\n  /** Alt text da imagem de capa */\n  coverArtAlt?: string\n  /** Variante de layout */\n  variant?: \"default\" | \"card\"\n  /** Icones, textos e sliders em primary-foreground — usar com .theme-* */\n  filled?: boolean\n  /** Iniciar automaticamente */\n  autoPlay?: boolean\n  /** Iniciar mutado */\n  muted?: boolean\n  /** Repetir ao terminar */\n  loop?: boolean\n  /** Exibir controle de velocidade (default: true — EdTech) */\n  showSpeed?: boolean\n  className?: string\n}\n\n/* ─── Shared styles ─── */\n\nconst controlBtnClass =\n  \"group/btn inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-foreground outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring group-data-[filled]:text-primary-foreground group-data-[filled]:hover:bg-primary-foreground/10\"\n\n/** Play, Pause e Volume usam icones filled (solid) — igual YouTube */\nconst filledIconClass =\n  \"fill-current !stroke-transparent text-foreground group-data-[filled]:text-primary-foreground\"\n\nconst outlineIconClass =\n  \"text-foreground group-data-[filled]:text-primary-foreground\"\n\n/* ─── Sub-components ─── */\n\nfunction AudioPlayControl() {\n  const isPaused = useMediaState(\"paused\")\n  return (\n    <PlayButton className={controlBtnClass}>\n      {isPaused ? (\n        <CycleIcon icon={Play} size=\"sm\" decorative className={filledIconClass} />\n      ) : (\n        <CycleIcon icon={Pause} size=\"sm\" decorative className={filledIconClass} />\n      )}\n    </PlayButton>\n  )\n}\n\nfunction AudioSeekBackwardControl() {\n  return (\n    <SeekButton className={controlBtnClass} seconds={-10}>\n      <CycleIcon icon={RotateCcw} size=\"sm\" decorative className={outlineIconClass} />\n    </SeekButton>\n  )\n}\n\nfunction AudioSeekForwardControl() {\n  return (\n    <SeekButton className={controlBtnClass} seconds={10}>\n      <CycleIcon icon={RotateCw} size=\"sm\" decorative className={outlineIconClass} />\n    </SeekButton>\n  )\n}\n\nfunction AudioMuteControl() {\n  const volume = useMediaState(\"volume\")\n  const isMuted = useMediaState(\"muted\")\n\n  const Icon = isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2\n\n  return (\n    <MuteButton className={controlBtnClass}>\n      <CycleIcon icon={Icon} size=\"sm\" decorative className={filledIconClass} />\n    </MuteButton>\n  )\n}\n\nfunction AudioVolumeControl() {\n  return (\n    <VolumeSlider.Root className=\"group relative hidden h-9 w-20 cursor-pointer touch-none select-none items-center outline-none sm:inline-flex\">\n      <VolumeSlider.Track className=\"relative h-[4px] w-full rounded-full bg-accent group-data-[filled]/root:bg-primary-foreground/30\">\n        <VolumeSlider.TrackFill className=\"absolute h-full w-[var(--slider-fill)] rounded-full bg-primary group-data-[filled]/root:bg-primary-foreground\" />\n      </VolumeSlider.Track>\n      <VolumeSlider.Thumb className=\"absolute left-[var(--slider-fill)] top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:opacity-100 group-data-[filled]/root:bg-primary-foreground\" />\n    </VolumeSlider.Root>\n  )\n}\n\nfunction AudioSeekBar() {\n  return (\n    <TimeSlider.Root className=\"group relative inline-flex h-9 w-full cursor-pointer touch-none select-none items-center outline-none\">\n      <TimeSlider.Track className=\"relative h-[4px] w-full rounded-full bg-accent group-data-[filled]/root:bg-primary-foreground/30\">\n        <TimeSlider.Progress className=\"absolute h-full w-[var(--slider-progress)] rounded-full bg-accent-foreground/20 group-data-[filled]/root:bg-primary-foreground/20\" />\n        <TimeSlider.TrackFill className=\"absolute h-full w-[var(--slider-fill)] rounded-full bg-primary group-data-[filled]/root:bg-primary-foreground\" />\n      </TimeSlider.Track>\n      <TimeSlider.Thumb className=\"absolute left-[var(--slider-fill)] top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary opacity-0 transition-opacity group-data-[active]:opacity-100 group-data-[dragging]:opacity-100 group-data-[filled]/root:bg-primary-foreground\" />\n\n      {/* Time preview on hover */}\n      <TimeSlider.Preview className=\"pointer-events-none flex flex-col items-center opacity-0 transition-opacity duration-200 data-[visible]:opacity-100\">\n        <TimeSlider.Value className=\"rounded bg-popover px-1.5 py-0.5 text-[11px] font-mono text-popover-foreground border border-border shadow-sm\" />\n      </TimeSlider.Preview>\n    </TimeSlider.Root>\n  )\n}\n\nfunction AudioTimeDisplay() {\n  return (\n    <div className=\"flex items-center gap-1 text-xs font-mono text-muted-foreground tabular-nums group-data-[filled]:text-primary-foreground/80\">\n      <Time type=\"current\" />\n      <span>/</span>\n      <Time type=\"duration\" />\n    </div>\n  )\n}\n\nfunction AudioSpeedControl() {\n  const playbackRate = useMediaState(\"playbackRate\")\n  const remote = useMediaRemote()\n  const [open, setOpen] = React.useState(false)\n\n  const rates = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen(!open)}\n        className={controlBtnClass}\n      >\n        {playbackRate === 1 ? (\n          <CycleIcon icon={Gauge} size=\"sm\" decorative className={outlineIconClass} />\n        ) : (\n          <span className=\"text-xs font-mono font-semibold text-foreground group-data-[filled]:text-primary-foreground\">{playbackRate}x</span>\n        )}\n      </button>\n\n      {open && (\n        <>\n          {/* Backdrop to close */}\n          <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\n\n          <div className=\"absolute bottom-full right-0 z-50 mb-2 min-w-[120px] rounded-lg border border-border bg-popover p-1 shadow-lg\">\n            {rates.map((rate) => (\n              <button\n                key={rate}\n                type=\"button\"\n                onClick={() => {\n                  remote.changePlaybackRate(rate)\n                  setOpen(false)\n                }}\n                className={cn(\n                  \"flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-sm text-popover-foreground/80 transition-colors hover:bg-accent hover:text-popover-foreground\",\n                  playbackRate === rate && \"text-popover-foreground font-medium\"\n                )}\n              >\n                <span className=\"size-4 flex items-center justify-center\">\n                  {playbackRate === rate && <CycleIcon icon={Check} size=\"2xs\" decorative className=\"text-popover-foreground\" />}\n                </span>\n                <span className=\"font-mono\">{rate === 1 ? \"Normal\" : `${rate}x`}</span>\n              </button>\n            ))}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n\n/* ─── Main component ─── */\n\nexport function AudioPlayer({\n  src,\n  title,\n  subtitle,\n  coverArt,\n  coverArtAlt = \"\",\n  variant = \"default\",\n  filled = false,\n  autoPlay = false,\n  muted = false,\n  loop = false,\n  showSpeed = true,\n  className,\n}: AudioPlayerProps) {\n  const player = React.useRef<MediaPlayerInstance>(null)\n\n  if (variant === \"card\") {\n    return (\n      <MediaPlayer\n        ref={player}\n        src={src}\n        autoPlay={autoPlay}\n        muted={muted}\n        loop={loop}\n        viewType=\"audio\"\n        data-filled={filled ? \"\" : undefined}\n        style={filled ? { '--primary-foreground': 'var(--secondary-foreground)' } as Record<string, string> : undefined}\n        className={cn(\n          \"group/root group !block w-full rounded-xl border border-border bg-card p-4 shadow-sm md:p-6\",\n          className\n        )}\n      >\n        <MediaProvider className=\"!hidden\" />\n\n        {/* Top: cover art + text */}\n        <div className=\"flex gap-4 mb-4 md:gap-5 md:mb-6\">\n          {coverArt && (\n            <img\n              src={coverArt}\n              alt={coverArtAlt}\n              className=\"size-16 shrink-0 rounded-lg object-cover bg-muted md:size-24 md:rounded-xl\"\n            />\n          )}\n          <div className=\"flex min-w-0 flex-col justify-center\">\n            <p className={cn(\n              \"truncate text-sm font-semibold md:text-base\",\n              filled ? \"text-primary-foreground\" : \"text-card-foreground\"\n            )}>{title}</p>\n            {subtitle && (\n              <p className={cn(\n                \"truncate text-xs md:text-sm md:mt-0.5\",\n                filled ? \"text-primary-foreground/70\" : \"text-muted-foreground\"\n              )}>{subtitle}</p>\n            )}\n          </div>\n        </div>\n\n        {/* Seek bar */}\n        <div className=\"flex w-full items-center\">\n          <AudioSeekBar />\n        </div>\n\n        {/* Time */}\n        <div className=\"flex items-center justify-between px-0.5 -mt-1 mb-1 md:mb-2\">\n          <div className={cn(\n            \"text-[11px] font-mono tabular-nums md:text-xs\",\n            filled ? \"text-primary-foreground/80\" : \"text-muted-foreground\"\n          )}>\n            <Time type=\"current\" />\n          </div>\n          <div className={cn(\n            \"text-[11px] font-mono tabular-nums md:text-xs\",\n            filled ? \"text-primary-foreground/80\" : \"text-muted-foreground\"\n          )}>\n            <Time type=\"duration\" />\n          </div>\n        </div>\n\n        {/* Controls */}\n        <div className=\"flex items-center gap-1 md:gap-2\">\n          <AudioSeekBackwardControl />\n          <AudioPlayControl />\n          <AudioSeekForwardControl />\n\n          <div className=\"flex-1\" />\n\n          {showSpeed && <AudioSpeedControl />}\n          <AudioMuteControl />\n          <AudioVolumeControl />\n        </div>\n      </MediaPlayer>\n    )\n  }\n\n  // Default variant (compact bar)\n  return (\n    <MediaPlayer\n      ref={player}\n      src={src}\n      autoPlay={autoPlay}\n      muted={muted}\n      loop={loop}\n      viewType=\"audio\"\n      data-filled={filled ? \"\" : undefined}\n      style={filled ? { '--primary-foreground': 'var(--secondary-foreground)' } as Record<string, string> : undefined}\n      className={cn(\n        \"group/root group !flex w-full items-center gap-1.5 rounded-xl border border-border bg-card px-2 py-1.5 shadow-sm\",\n        className\n      )}\n    >\n      <MediaProvider className=\"!hidden\" />\n\n      {/* Left controls */}\n      <AudioSeekBackwardControl />\n      <AudioPlayControl />\n      <AudioSeekForwardControl />\n\n      {/* Seek bar */}\n      <div className=\"flex-1 px-1\">\n        <AudioSeekBar />\n      </div>\n\n      {/* Time */}\n      <AudioTimeDisplay />\n\n      {/* Right controls */}\n      {showSpeed && <AudioSpeedControl />}\n      <AudioMuteControl />\n      <AudioVolumeControl />\n    </MediaPlayer>\n  )\n}\n"]}