@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/components/data-table.js

@@ -1,2 +1 @@
-export{D as DataTable}from"../chunks/data-table.Dn7VQJFo.js";
-//# sourceMappingURL=data-table.js.map
+export { DataTable } from './data-table/data-table.js';

package/dist/esm/components/date-picker/date-picker.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { format } from 'date-fns';
+import { CalendarBlank } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import { Calendar } from '../ui/calendar.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover.js';
+import '../ui/calendar.css';/* empty css                 */
+
+function DatePicker({ date, setDate, className, placeholder = "Select date" }) {
+  return /* @__PURE__ */ React.createElement(Popover, null, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "outline",
+      className: cn(
+        "w-full justify-start text-left font-normal text-base",
+        !date && "text-muted-foreground",
+        className
+      )
+    },
+    /* @__PURE__ */ React.createElement(CalendarBlank, { className: "mr-2 !w-5 !h-5" }),
+    date ? format(date, "PPP") : placeholder
+  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-auto p-0 z-[9999]" }, /* @__PURE__ */ React.createElement(Calendar, { mode: "single", selected: date, onSelect: setDate, className: "single-date-picker-calendar" })));
+}
+
+export { DatePicker };

package/dist/esm/components/date-picker.js

@@ -1,2 +1 @@
-export{D as DatePicker}from"../chunks/date-picker.GRONonNX.js";
-//# sourceMappingURL=date-picker.js.map
+export { DatePicker } from './date-picker/date-picker.js';

package/dist/esm/components/discoveries-created/discoveries-created.js

@@ -0,0 +1,64 @@
+import React__default from 'react';
+import { LineChart, CartesianGrid, XAxis, Line } from 'recharts';
+import { TrendValue } from '../trend-value/trend-value.js';
+import { Card, CardHeader, CardContent } from '../ui/card.js';
+import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from '../ui/chart.js';
+import { formatNumber } from '../../lib/formatNumber.js';
+import { useChartDateFormatters } from '../../lib/useChartDateFormatters.js';
+import { cn } from '../../lib/utils.js';
+
+const formatWhole = (value) => formatNumber(value, {});
+function DiscoveriesCreated({
+  total,
+  trend,
+  trendValue,
+  subBreakdowns,
+  sourceTotals,
+  data,
+  chartConfig,
+  locale,
+  className
+}) {
+  const { tickFormatter, formatXLabel } = useChartDateFormatters(locale);
+  const lineKeys = Object.keys(chartConfig);
+  return /* @__PURE__ */ React__default.createElement(Card, { className: cn("shadow-none border border-dark-300 rounded-lg", className) }, /* @__PURE__ */ React__default.createElement(CardHeader, { className: "p-0 space-y-0 border-b border-dark-300" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-stretch justify-between" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-1 justify-center py-4 px-4" }, /* @__PURE__ */ React__default.createElement("p", { className: "uppercase heading-xxxs font-semibold text-dark tracking-normal" }, "Discoveries created"), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement("span", { className: "font-mono text-3xl leading-10 text-dark" }, formatWhole(total)), /* @__PURE__ */ React__default.createElement(TrendValue, { trend, trendValue }), subBreakdowns.map((item, i) => /* @__PURE__ */ React__default.createElement("span", { key: item.label, className: "text-xs leading-4 text-dark-600" }, i > 0 && /* @__PURE__ */ React__default.createElement("span", { className: "mr-2" }, "·"), formatWhole(item.value), " ", item.label)))), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center self-stretch" }, sourceTotals.map((source) => /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      key: source.key,
+      className: "border-l border-dark-300 flex flex-col justify-center px-4 py-2 self-stretch"
+    },
+    /* @__PURE__ */ React__default.createElement("span", { className: "text-xs leading-4 text-dark-700" }, source.label),
+    /* @__PURE__ */ React__default.createElement("span", { className: "font-mono text-3xl leading-10 text-dark" }, formatWhole(source.value))
+  ))))), /* @__PURE__ */ React__default.createElement(CardContent, { className: "px-4 pt-4 pb-0" }, /* @__PURE__ */ React__default.createElement(ChartContainer, { config: chartConfig, className: "h-48 w-full" }, /* @__PURE__ */ React__default.createElement(LineChart, { data, margin: { top: 8, left: 0, right: 0, bottom: 0 } }, /* @__PURE__ */ React__default.createElement(CartesianGrid, { horizontal: true, vertical: false, className: "stroke-dark-300" }), /* @__PURE__ */ React__default.createElement(
+    XAxis,
+    {
+      dataKey: "date",
+      tickLine: false,
+      axisLine: false,
+      tickMargin: 8,
+      minTickGap: 32,
+      interval: "preserveStartEnd",
+      tickFormatter,
+      tick: ({ x, y, payload }) => /* @__PURE__ */ React__default.createElement("text", { x, y, dy: 12, textAnchor: "middle", className: "text-xs fill-dark-600" }, tickFormatter(payload.value))
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ChartTooltip,
+    {
+      cursor: false,
+      content: ({ active, payload, label }) => /* @__PURE__ */ React__default.createElement(ChartTooltipContent, { active, payload, label: formatXLabel(label) })
+    }
+  ), lineKeys.map((key) => /* @__PURE__ */ React__default.createElement(
+    Line,
+    {
+      key,
+      dataKey: key,
+      type: "monotone",
+      stroke: `var(--color-${key})`,
+      strokeWidth: 2,
+      dot: false,
+      activeDot: { r: 4, strokeWidth: 0 }
+    }
+  )), /* @__PURE__ */ React__default.createElement(ChartLegend, { content: /* @__PURE__ */ React__default.createElement(ChartLegendContent, null) })))));
+}
+
+export { DiscoveriesCreated };

package/dist/esm/components/discoveries-created.js

@@ -1,5 +1 @@
-import e from"react";import{LineChart as t,CartesianGrid as a,XAxis as r,Line as l}from"recharts";import{a as s}from"../chunks/trend-value.lSWHqdkm.js";import{Card as c,CardHeader as n,CardContent as m}from"./ui/card.js";import{C as o,a as i,b as d,c as p,d as x}from"../chunks/chart.D9xvsrKX.js";import{f}from"../chunks/formatNumber.DhVn228t.js";import{u as k}from"../chunks/useChartDateFormatters.Dx2h5AAm.js";import{c as u}from"../chunks/utils.DtKoarLP.js";const E=e=>f(e,{});function b({total:f,trend:b,trendValue:h,subBreakdowns:y,sourceTotals:N,data:v,chartConfig:g,locale:j,className:w}){const{tickFormatter:C,formatXLabel:D}=k(j),F=Object.keys(g);/* @__PURE__ */
-return e.createElement(c,{className:u("shadow-none border border-dark-300 rounded-lg",w)},/* @__PURE__ */e.createElement(n,{className:"p-0 space-y-0 border-b border-dark-300"},/* @__PURE__ */e.createElement("div",{className:"flex items-stretch justify-between"},/* @__PURE__ */e.createElement("div",{className:"flex flex-col gap-1 justify-center py-4 px-4"},/* @__PURE__ */e.createElement("p",{className:"uppercase heading-xxxs font-semibold text-dark tracking-normal"},"Discoveries created"),/* @__PURE__ */e.createElement("div",{className:"flex items-center gap-2"},/* @__PURE__ */e.createElement("span",{className:"font-mono text-3xl leading-10 text-dark"},E(f)),/* @__PURE__ */e.createElement(s,{trend:b,trendValue:h}),y.map((t,a)=>/* @__PURE__ */e.createElement("span",{key:t.label,className:"text-xs leading-4 text-dark-600"},a>0&&/* @__PURE__ */e.createElement("span",{className:"mr-2"},"·"),E(t.value)," ",t.label)))),/* @__PURE__ */e.createElement("div",{className:"flex items-center self-stretch"},N.map(t=>/* @__PURE__ */e.createElement("div",{key:t.key,className:"border-l border-dark-300 flex flex-col justify-center px-4 py-2 self-stretch"},
-/* @__PURE__ */e.createElement("span",{className:"text-xs leading-4 text-dark-700"},t.label),
-/* @__PURE__ */e.createElement("span",{className:"font-mono text-3xl leading-10 text-dark"},E(t.value))))))),/* @__PURE__ */e.createElement(m,{className:"px-4 pt-4 pb-0"},/* @__PURE__ */e.createElement(o,{config:g,className:"h-48 w-full"},/* @__PURE__ */e.createElement(t,{data:v,margin:{top:8,left:0,right:0,bottom:0}},/* @__PURE__ */e.createElement(a,{horizontal:!0,vertical:!1,className:"stroke-dark-300"}),/* @__PURE__ */e.createElement(r,{dataKey:"date",tickLine:!1,axisLine:!1,tickMargin:8,minTickGap:32,interval:"preserveStartEnd",tickFormatter:C,tick:({x:t,y:a,payload:r})=>/* @__PURE__ */e.createElement("text",{x:t,y:a,dy:12,textAnchor:"middle",className:"text-xs fill-dark-600"},C(r.value))}),/* @__PURE__ */e.createElement(i,{cursor:!1,content:({active:t,payload:a,label:r})=>/* @__PURE__ */e.createElement(d,{active:t,payload:a,label:D(r)})}),F.map(t=>/* @__PURE__ */e.createElement(l,{key:t,dataKey:t,type:"monotone",stroke:`var(--color-${t})`,strokeWidth:2,dot:!1,activeDot:{r:4,strokeWidth:0}})),/* @__PURE__ */e.createElement(p,{content:/* @__PURE__ */e.createElement(x,null)})))))}export{b as DiscoveriesCreated};
-//# sourceMappingURL=discoveries-created.js.map
+export { DiscoveriesCreated } from './discoveries-created/discoveries-created.js';

package/dist/esm/components/editable-label/editable-label.js

@@ -0,0 +1,73 @@
+import React__default, { useState } from 'react';
+import { PencilSimple } from '@phosphor-icons/react';
+import clsx from 'clsx';
+
+const hasNoLabelText = (children) => children == null || typeof children === "string" && children.trim() === "";
+const EditableLabel = React__default.forwardRef(
+  ({ className, children, onKeyDown, onBlur, onInput, placeholder, required, ...props }, ref) => {
+    const [invalid, setInvalid] = useState(false);
+    const isEmpty = (element) => !(element.textContent?.trim() ?? "");
+    return /* @__PURE__ */ React__default.createElement("span", { className: "group flex items-center" }, /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        ...props,
+        ref,
+        role: "textbox",
+        tabIndex: 0,
+        "aria-placeholder": placeholder,
+        "aria-multiline": false,
+        "aria-required": required || void 0,
+        "aria-invalid": invalid || void 0,
+        contentEditable: "plaintext-only",
+        suppressContentEditableWarning: true,
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            event.currentTarget.blur();
+          }
+          onKeyDown?.(event);
+        },
+        onInput: (event) => {
+          if (event.currentTarget.textContent === "") {
+            event.currentTarget.textContent = "";
+          }
+          if (!isEmpty(event.currentTarget)) {
+            setInvalid(false);
+          }
+          onInput?.(event);
+        },
+        onBlur: (event) => {
+          if (required && isEmpty(event.currentTarget)) {
+            event.currentTarget.textContent = "";
+            setInvalid(true);
+          } else {
+            setInvalid(false);
+          }
+          onBlur?.(event);
+        },
+        className: clsx(
+          "whitespace-nowrap overflow-hidden",
+          "inline-grid grid-cols-1",
+          "empty:before:pointer-events-none empty:before:content-[attr(aria-placeholder)] empty:before:text-muted-foreground empty:before:col-start-1 empty:before:row-start-1 empty:before:z-10",
+          invalid && "text-destructive empty:before:text-destructive",
+          className
+        )
+      },
+      hasNoLabelText(children) ? null : children
+    ), /* @__PURE__ */ React__default.createElement(
+      PencilSimple,
+      {
+        size: 16,
+        className: clsx(
+          "ml-2 opacity-0 -translate-x-1 transition-[opacity,transform] duration-300",
+          "group-hover:opacity-100 group-hover:translate-x-0",
+          "group-focus-within:opacity-100 group-focus-within:translate-x-0"
+        ),
+        role: "presentation"
+      }
+    ));
+  }
+);
+EditableLabel.displayName = "EditableLabel";
+
+export { EditableLabel };

package/dist/esm/components/editable-label.js

@@ -1,3 +1 @@
-import e,{useState as t}from"react";import{PencilSimple as r}from"@phosphor-icons/react";import n from"clsx";const o=e.forwardRef(({className:o,children:a,onKeyDown:i,onBlur:l,onInput:p,placeholder:c,required:s,...u},m)=>{const[d,f]=t(!1),x=e=>!e.textContent?.trim();/* @__PURE__ */
-return e.createElement("span",{className:"group flex items-center"},/* @__PURE__ */e.createElement("span",{...u,ref:m,role:"textbox",tabIndex:0,"aria-placeholder":c,"aria-multiline":!1,"aria-required":s||void 0,"aria-invalid":d||void 0,contentEditable:"plaintext-only",suppressContentEditableWarning:!0,onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),e.currentTarget.blur()),i?.(e)},onInput:e=>{""===e.currentTarget.textContent&&(e.currentTarget.textContent=""),x(e.currentTarget)||f(!1),p?.(e)},onBlur:e=>{s&&x(e.currentTarget)?(e.currentTarget.textContent="",f(!0)):f(!1),l?.(e)},className:n("whitespace-nowrap overflow-hidden","inline-grid grid-cols-1","empty:before:pointer-events-none empty:before:content-[attr(aria-placeholder)] empty:before:text-muted-foreground empty:before:col-start-1 empty:before:row-start-1 empty:before:z-10",d&&"text-destructive empty:before:text-destructive",o)},(e=>null==e||"string"==typeof e&&""===e.trim())(a)?null:a),/* @__PURE__ */e.createElement(r,{size:16,className:n("ml-2 opacity-0 -translate-x-1 transition-[opacity,transform] duration-300","group-hover:opacity-100 group-hover:translate-x-0","group-focus-within:opacity-100 group-focus-within:translate-x-0"),role:"presentation"}))});o.displayName="EditableLabel";export{o as EditableLabel};
-//# sourceMappingURL=editable-label.js.map
+export { EditableLabel } from './editable-label/editable-label.js';

package/dist/esm/components/feedback/feedback-reason.js

@@ -0,0 +1,81 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { PaperPlaneRight, X } from '@phosphor-icons/react';
+import { Card, CardContent, CardFooter } from '../ui/card.js';
+import { Textarea } from '../ui/textarea.js';
+import { Button } from '../ui/button.js';
+
+function FeedbackReason({
+  open,
+  onSubmit,
+  thankYouText = "Thank you for your feedback!",
+  placeholder = "What could we have done better? Your feedback is valuable to us...",
+  maxLength = 500
+}) {
+  const [reason, setReason] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      setReason("");
+      setSubmitted(false);
+      setTimeout(() => textareaRef.current?.focus(), 0);
+    }
+  }, [open]);
+  const handleSubmit = () => {
+    if (reason.trim()) {
+      onSubmit?.(reason);
+      setSubmitted(true);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(AnimatePresence, null, open && !submitted && /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 12 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 12 },
+      transition: { duration: 0.25, ease: [0.4, 0, 0.2, 1] }
+    },
+    /* @__PURE__ */ React__default.createElement(Card, { className: "gap-2 p-3" }, /* @__PURE__ */ React__default.createElement(CardContent, { className: "px-0" }, /* @__PURE__ */ React__default.createElement(
+      Textarea,
+      {
+        ref: textareaRef,
+        placeholder,
+        className: "w-full border-none shadow-none focus-visible:ring-0 p-0",
+        maxLength,
+        value: reason,
+        rows: 4,
+        onChange: (e) => setReason(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+          }
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-end mt-1" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-muted-foreground select-none" }, maxLength - reason.length, " characters remaining"))), /* @__PURE__ */ React__default.createElement(CardFooter, { className: "p-0 gap-2 flex-row-reverse" }, /* @__PURE__ */ React__default.createElement(Button, { size: "icon", onClick: handleSubmit, disabled: !reason.length, "aria-label": "Submit feedback" }, /* @__PURE__ */ React__default.createElement(PaperPlaneRight, { "aria-hidden": "true", weight: "bold" })), /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "icon",
+        variant: "ghost",
+        onClick: () => {
+          setReason("");
+          textareaRef.current?.focus();
+        },
+        "aria-label": "Cancel feedback"
+      },
+      /* @__PURE__ */ React__default.createElement(X, { "aria-hidden": "true", weight: "bold" })
+    )))
+  ), open && submitted && /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 12 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 12 },
+      transition: { duration: 0.25, ease: [0.4, 0, 0.2, 1] }
+    },
+    /* @__PURE__ */ React__default.createElement(Card, { className: "gap-2 p-3" }, /* @__PURE__ */ React__default.createElement(CardContent, { className: "px-0" }, /* @__PURE__ */ React__default.createElement("p", null, thankYouText)))
+  ));
+}
+
+export { FeedbackReason };

package/dist/esm/components/feedback/feedback.js

@@ -0,0 +1,90 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { ThumbsUp, ThumbsDown } from '@phosphor-icons/react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FeedbackReason } from './feedback-reason.js';
+import { Button } from '../ui/button.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip.js';
+import { Love } from '../love/love.js';
+
+function Feedback({
+  feedback,
+  onFeedback,
+  textConfig = {},
+  disabled = false,
+  feedbackReasonLength = 500,
+  feedbackReasonPlaceholder = "What could we have done better? Your feedback is valuable to us...",
+  onFeedbackReasonSubmit,
+  feedbackReasonThankYouText = "Thank you for your feedback!"
+}) {
+  const [showHearts, setShowHearts] = useState(false);
+  const [showFeedbackReason, setShowFeedbackReason] = useState(false);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    if (showFeedbackReason && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [showFeedbackReason]);
+  const handleFeedback = (response) => {
+    if (onFeedback) {
+      if (response === "accept") {
+        setShowHearts(true);
+        setTimeout(() => setShowHearts(false), 2e3);
+      }
+      onFeedback(response);
+      if (response === "reject") {
+        setShowFeedbackReason(true);
+      }
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-end gap-2", "data-name": "Feedback" }, /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Love, { doAnimation: showHearts }, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: `rounded-md size-9 flex items-center justify-center transition-all duration-200 transform hover:scale-105 active:scale-95 ${feedback === "accept" ? "bg-green-100 text-green-600 hover:bg-green-200" : "text-dark-500"}`,
+      onClick: () => {
+        handleFeedback("accept");
+        setShowFeedbackReason(false);
+      },
+      disabled
+    },
+    /* @__PURE__ */ React__default.createElement(
+      motion.div,
+      {
+        initial: { scale: 1 },
+        animate: { scale: feedback === "accept" ? [1, 1.2, 1] : 1 },
+        transition: { duration: 0.3 }
+      },
+      /* @__PURE__ */ React__default.createElement(ThumbsUp, { weight: "bold" })
+    )
+  )), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, textConfig.positiveAnswerText || "Helpful"))))), /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: `rounded-md size-9 flex items-center justify-center transition-all duration-200 transform hover:scale-105 active:scale-95 ${feedback === "reject" ? "bg-red-100 text-red-600 hover:bg-red-200" : "text-dark-500"}`,
+      onClick: () => handleFeedback("reject"),
+      disabled
+    },
+    /* @__PURE__ */ React__default.createElement(
+      motion.div,
+      {
+        initial: { scale: 1 },
+        animate: { scale: feedback === "reject" ? [1, 1.2, 1] : 1 },
+        transition: { duration: 0.3 }
+      },
+      /* @__PURE__ */ React__default.createElement(ThumbsDown, { weight: "bold" })
+    )
+  )), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, textConfig.negativeAnswerText || "Not helpful"))))), /* @__PURE__ */ React__default.createElement(AnimatePresence, null, showFeedbackReason && /* @__PURE__ */ React__default.createElement(
+    FeedbackReason,
+    {
+      open: showFeedbackReason,
+      onSubmit: onFeedbackReasonSubmit,
+      thankYouText: feedbackReasonThankYouText,
+      placeholder: feedbackReasonPlaceholder,
+      maxLength: feedbackReasonLength
+    }
+  )));
+}
+
+export { Feedback };

package/dist/esm/components/feedback.js

@@ -1,2 +1 @@
-export{F as Feedback}from"../chunks/feedback.nVBNjdPh.js";
-//# sourceMappingURL=feedback.js.map
+export { Feedback } from './feedback/feedback.js';

package/dist/esm/components/file-upload/file-upload-status.js

@@ -0,0 +1,78 @@
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { CaretDown, CaretUp, FileVideo, Circle, CheckCircle } from '@phosphor-icons/react';
+import { formatFileSize } from './utils.js';
+import { Card, CardContent } from '../ui/card.js';
+import { Button } from '../ui/button.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../ui/collapsible.js';
+import { cn } from '../../lib/utils.js';
+
+const CheckCircleIcon = React__default.memo(({ className }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React__default.createElement(CheckCircle, { className: "absolute size-6 text-green-400", weight: "fill" }), /* @__PURE__ */ React__default.createElement(CheckCircle, { className: "absolute size-6 text-black", weight: "regular" }));
+});
+CheckCircleIcon.displayName = "CheckCircleIcon";
+const FileUploadStatus = ({
+  uploads,
+  className,
+  onCancelUpload,
+  steps = [
+    { id: "upload", label: "Uploading video", status: "current" },
+    { id: "analyze", label: "Analyzing content", status: "pending" },
+    { id: "create", label: "Creating help articles", status: "pending" }
+  ],
+  timeRemaining,
+  title = "Video Processing"
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const cancelButtonLabel = useCallback((uploadState) => {
+    if (uploadState.status === "success") return "Uploaded";
+    if (uploadState.status === "error") return "Retry upload";
+    return "Cancel upload";
+  }, []);
+  if (!mounted || uploads.length === 0) return null;
+  if (typeof document === "undefined") return null;
+  const statusCard = /* @__PURE__ */ React__default.createElement(
+    Collapsible,
+    {
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      className: cn(
+        "fixed bottom-3 right-3 w-96 shadow-lg border z-50 transition-all duration-200 h-auto p-0 gap-4 bg-dark-100 rounded-lg overflow-hidden",
+        className
+      )
+    },
+    /* @__PURE__ */ React__default.createElement(CollapsibleTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between py-4 px-6 bg-foreground text-background cursor-pointer" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-0" }, /* @__PURE__ */ React__default.createElement("span", { className: "font-semibold" }, title), timeRemaining && /* @__PURE__ */ React__default.createElement("span", { className: "text-sm text-muted-foreground" }, timeRemaining)), /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "sm", className: "size-6 p-0" }, isOpen ? /* @__PURE__ */ React__default.createElement(CaretDown, { className: "size-4" }) : /* @__PURE__ */ React__default.createElement(CaretUp, { className: "size-4" })))),
+    /* @__PURE__ */ React__default.createElement(CollapsibleContent, null, uploads.map((upload) => /* @__PURE__ */ React__default.createElement(Card, { key: upload.id, className: cn("rounded-none p-0") }, /* @__PURE__ */ React__default.createElement(CardContent, { className: "p-0" }, /* @__PURE__ */ React__default.createElement("div", { className: "px-6 py-4 border-b" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement("div", { className: "size-12 bg-yellow-400 border border-dark rounded-lg flex items-center justify-center text-dark shrink-0" }, /* @__PURE__ */ React__default.createElement(FileVideo, { className: "size-6" })), /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 flex flex-col gap-0" }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-base font-medium flex items-center gap-1 whitespace-nowrap" }, /* @__PURE__ */ React__default.createElement("span", { className: "truncate max-w-56" }, upload.file.name), /* @__PURE__ */ React__default.createElement("span", { className: "shrink-0" }, " • ", formatFileSize(upload.file.size))), /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        variant: "dark",
+        size: "sm",
+        className: "self-start h-6 text-xs bg-foreground text-background",
+        onClick: onCancelUpload,
+        "data-id": upload.id,
+        disabled: upload.status === "success" || upload.progress === 100,
+        "data-status": upload.status
+      },
+      cancelButtonLabel(upload)
+    )))), /* @__PURE__ */ React__default.createElement("ol", { className: "py-2" }, steps.map((step) => /* @__PURE__ */ React__default.createElement(
+      "li",
+      {
+        key: step.id,
+        className: cn(
+          "flex items-center gap-4 px-6 py-3 relative",
+          "after:absolute after:w-[1px] after:bg-foreground after:top-[38px] after:-bottom-[10px] after:left-[35px]",
+          "last-of-type:after:hidden"
+        )
+      },
+      step.status === "completed" ? /* @__PURE__ */ React__default.createElement(CheckCircleIcon, { className: "size-6" }) : /* @__PURE__ */ React__default.createElement(Circle, { className: "size-6" }),
+      /* @__PURE__ */ React__default.createElement("span", { className: "flex items-center gap-1" }, `${step.label} ${step.id === "upload" ? `— ${Math.round(upload.progress)}%` : ""}`)
+    )))))))
+  );
+  return createPortal(statusCard, document.body);
+};
+
+export { FileUploadStatus };

package/dist/esm/components/file-upload/file-upload.js

@@ -0,0 +1,62 @@
+import React__default from 'react';
+import { useDropzone } from 'react-dropzone';
+import { CloudArrowUp } from '@phosphor-icons/react';
+import { formatFileSize } from './utils.js';
+import { Card } from '../ui/card.js';
+import { cn } from '../../lib/utils.js';
+
+function FileUpload({
+  onDropAccepted,
+  onDropRejected,
+  accept = {
+    "image/*": [".png", ".jpg", ".jpeg", ".gif", ".mp4"],
+    "application/pdf": [".pdf"],
+    "text/*": [".txt", ".csv"]
+  },
+  maxSize = 5 * 1024 * 1024,
+  // 5MB
+  maxFiles = 5,
+  multiple = true,
+  className,
+  disabled = false,
+  title = "Drag & drop files here, or click to select",
+  description = "",
+  supportsMessage = "",
+  children
+}) {
+  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
+    onDropAccepted,
+    onDropRejected,
+    accept,
+    maxSize,
+    multiple,
+    disabled,
+    maxFiles
+  });
+  return /* @__PURE__ */ React__default.createElement("div", { "data-testid": "file-upload", className: "w-full space-y-4" }, /* @__PURE__ */ React__default.createElement("div", { className: cn("group", className, "focus-visible:outline-none"), ...getRootProps() }, /* @__PURE__ */ React__default.createElement(
+    Card,
+    {
+      className: cn(
+        "custom-dashed-border shadow-none p-8 text-center cursor-pointer",
+        "group-focus:custom-dashed-border-hover",
+        "group-hover:custom-dashed-border-hover",
+        isDragActive && !isDragReject && "border-primary bg-primary/5",
+        isDragReject && "border-destructive bg-destructive/5",
+        disabled && "cursor-not-allowed opacity-50"
+      )
+    },
+    /* @__PURE__ */ React__default.createElement("input", { ...getInputProps() }),
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ React__default.createElement(
+      CloudArrowUp,
+      {
+        className: cn(
+          "size-12",
+          isDragActive && !isDragReject && "text-primary",
+          isDragReject && "text-destructive"
+        )
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-lg font-medium" }, isDragActive ? isDragReject ? "Some files will be rejected" : "Drop files here" : title), description && /* @__PURE__ */ React__default.createElement("p", { className: "text-sm" }, description), supportsMessage ? /* @__PURE__ */ React__default.createElement("p", { className: "text-sm" }, supportsMessage) : /* @__PURE__ */ React__default.createElement("p", { className: "text-sm" }, `Supports: ${Object.values(accept).flat().join(", ")} • Max size: ${formatFileSize(maxSize)}${maxFiles > 1 ? ` • Max files: ${maxFiles}` : ""}`)))
+  )), children);
+}
+
+export { FileUpload };

package/dist/esm/components/file-upload/utils.js

@@ -0,0 +1,9 @@
+const formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+
+export { formatFileSize };

package/dist/esm/components/file-upload.js

@@ -1,2 +1,3 @@
-export{F as FileUpload,a as FileUploadStatus,f as formatFileSize}from"../chunks/file-upload-status.znDE1kUC.js";
-//# sourceMappingURL=file-upload.js.map
+export { FileUpload } from './file-upload/file-upload.js';
+export { FileUploadStatus } from './file-upload/file-upload-status.js';
+export { formatFileSize } from './file-upload/utils.js';

package/dist/esm/components/filter/components/CustomValueInput.js

@@ -0,0 +1,49 @@
+import React__default, { useRef } from 'react';
+import { Button } from '../../ui/button.js';
+import { Input } from '../../ui/input.js';
+
+const CustomValueInput = ({
+  inputValue,
+  setInputValue,
+  customValuePlaceholder,
+  customValueButtonLabel,
+  onSubmit,
+  handleKeyDown
+}) => {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ React__default.createElement(
+    "form",
+    {
+      className: "p-3",
+      onSubmit: (e) => {
+        e.preventDefault();
+        onSubmit();
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Input,
+      {
+        ref: inputRef,
+        type: "text",
+        value: inputValue,
+        onChange: (e) => setInputValue(e.target.value),
+        placeholder: customValuePlaceholder,
+        className: "mb-2",
+        onKeyDown: (e) => handleKeyDown(e, true)
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        type: "submit",
+        variant: "dark",
+        className: "w-full",
+        onKeyDown: (e) => handleKeyDown(e, false),
+        "data-custom-submit-button": true
+      },
+      customValueButtonLabel
+    )
+  );
+};
+
+export { CustomValueInput };