@alkimi.org/ui-kit 0.11.4 → 0.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alkimi.org/ui-kit",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "packageManager": "pnpm@10.26.0",
   "description": "A React component library built with shadcn/ui and Tailwind CSS",
   "main": "./dist/index.js",

package/dist/chunk-XSJKREFJ.mjs

@@ -1,3 +0,0 @@
-"use client";
-import{a as P,b as O,c as S}from"./chunk-FZ3NXOFK.mjs";import{a as M,c as G,d as R,e as E,f,h as D}from"./chunk-DATWXRPT.mjs";import{a as b}from"./chunk-S5TKCF6T.mjs";import*as d from"react";import{Check as K,ChevronDown as Q,Plus as U,X as I}from"lucide-react";import{Fragment as V,jsx as o,jsxs as n}from"react/jsx-runtime";function oe({options:m=[],groups:l,value:i,onValueChange:T,placeholder:p="Select option...",searchPlaceholder:L="Search...",emptyMessage:W="No option found.",disabled:X=!1,className:$,error:j=!1,multiple:q=!1,values:s=[],onValuesChange:g,variant:z="default",searchable:A=!0}){let[v,x]=d.useState(!1),t=z==="metrics",c=t?!0:q,h=d.useMemo(()=>l?l.flatMap(e=>e.options):m,[l,m]),C=h.find(e=>e.value===i),a=h.filter(e=>s.includes(e.value)),B=e=>{if(c){let r=s.includes(e)?s.filter(u=>u!==e):[...s,e];g?.(r)}else T?.(e===i?"":e),x(!1)},y=(e,r)=>{r.preventDefault(),r.stopPropagation();let u=s.filter(J=>J!==e);g?.(u)},F=()=>t?p:c?a.length===0?p:a.length===1?a[0].label:`${a.length} selected`:C?C.label:p,N=e=>{let r=c?s.includes(e.value):i===e.value;return n(D,{value:e.value,onSelect:B,className:"rounded-[12px]",children:[o("span",{className:"truncate",children:e.label}),o(K,{className:b("ml-auto h-4 w-4 shrink-0",r?"opacity-100":"opacity-0")})]},e.value)},w=()=>t||!c||a.length===0?null:o("div",{className:"px-2 py-1.5",children:o("div",{className:"flex flex-wrap gap-1",children:a.map(e=>n("div",{className:"inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs",children:[o("span",{className:"truncate",children:e.label}),o(I,{className:"h-3 w-3 cursor-pointer",onClick:r=>y(e.value,r)})]},e.value))})}),H=()=>!t||a.length===0?null:a.map(e=>n("div",{className:"inline-flex items-center gap-2 rounded-3xl border bg-transparent px-3 py-1.5 text-sm",style:{borderColor:e.color||"var(--border)"},children:[o("span",{className:"truncate",style:{color:e.color},children:e.label}),o(I,{className:"h-3.5 w-3.5 cursor-pointer opacity-70 hover:opacity-100",style:{color:e.color},onClick:r=>y(e.value,r)})]},e.value)),k=n(P,{open:v,onOpenChange:x,children:[o(O,{asChild:!0,children:n("button",{type:"button",role:"combobox","aria-expanded":v,disabled:X,className:b("cursor-pointer flex h-9 items-center justify-between rounded-3xl border border-border bg-background hover:bg-secondary px-4 py-2 text-sm text-primary-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:opacity-50 disabled:cursor-not-allowed disabled:opacity-50",!t&&"my-2 w-full",t&&"w-auto gap-2",!i&&!s.length&&"text-secondary-text",j&&"border-destructive-foreground focus-visible:ring-destructive-foreground",t&&"bg-muted text-primary-accent hover:bg-muted/20 border-muted",$),children:[t&&o(U,{className:"h-4 w-4 shrink-0"}),o("span",{className:"truncate",children:F()}),!t&&o(Q,{className:"ml-2 h-4 w-4 shrink-0 opacity-50"})]})}),o(S,{className:"overflow-hidden rounded-xl p-0",align:"start",style:t?{minWidth:200}:{width:"var(--radix-popover-trigger-width)"},children:n(M,{children:[A&&o(G,{placeholder:L}),n(R,{children:[o(E,{children:W}),l?n(V,{children:[w(),l.map(e=>o(f,{heading:e.label,children:e.options.map(N)},e.label))]}):n(f,{children:[w(),m.map(N)]})]})]})})]});return t?n("div",{className:"flex flex-wrap items-center gap-2",children:[k,H()]}):k}export{oe as a};
-//# sourceMappingURL=chunk-XSJKREFJ.mjs.map

package/dist/chunk-XSJKREFJ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/combobox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Check, ChevronDown, Plus, X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/components/command\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\"\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  color?: string\n}\n\nexport interface ComboboxGroup {\n  label: string\n  options: ComboboxOption[]\n}\n\nexport interface ComboboxProps {\n  options?: ComboboxOption[]\n  groups?: ComboboxGroup[]\n  value?: string\n  onValueChange?: (value: string) => void\n  placeholder?: string\n  searchPlaceholder?: string\n  emptyMessage?: string\n  disabled?: boolean\n  className?: string\n  error?: boolean\n  multiple?: boolean\n  values?: string[]\n  onValuesChange?: (values: string[]) => void\n  variant?: \"default\" | \"metrics\"\n  searchable?: boolean\n}\n\nexport function Combobox({\n  options = [],\n  groups,\n  value,\n  onValueChange,\n  placeholder = \"Select option...\",\n  searchPlaceholder = \"Search...\",\n  emptyMessage = \"No option found.\",\n  disabled = false,\n  className,\n  error = false,\n  multiple = false,\n  values = [],\n  onValuesChange,\n  variant = \"default\",\n  searchable = true,\n}: ComboboxProps) {\n  const [open, setOpen] = React.useState(false)\n  const isMetrics = variant === \"metrics\"\n  const effectiveMultiple = isMetrics ? true : multiple\n\n  const allOptions = React.useMemo(() => {\n    if (groups) return groups.flatMap((g) => g.options)\n    return options\n  }, [groups, options])\n\n  const selectedOption = allOptions.find((option) => option.value === value)\n  const selectedOptions = allOptions.filter((option) =>\n    values.includes(option.value)\n  )\n\n  const handleSelect = (currentValue: string) => {\n    if (effectiveMultiple) {\n      const newValues = values.includes(currentValue)\n        ? values.filter((v) => v !== currentValue)\n        : [...values, currentValue]\n      onValuesChange?.(newValues)\n    } else {\n      onValueChange?.(currentValue === value ? \"\" : currentValue)\n      setOpen(false)\n    }\n  }\n\n  const handleRemoveValue = (valueToRemove: string, e: React.MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    const newValues = values.filter((v) => v !== valueToRemove)\n    onValuesChange?.(newValues)\n  }\n\n  const getDisplayText = () => {\n    if (isMetrics) return placeholder\n    if (effectiveMultiple) {\n      if (selectedOptions.length === 0) return placeholder\n      if (selectedOptions.length === 1) return selectedOptions[0].label\n      return `${selectedOptions.length} selected`\n    }\n    return selectedOption ? selectedOption.label : placeholder\n  }\n\n  const renderOption = (option: ComboboxOption) => {\n    const isSelected = effectiveMultiple\n      ? values.includes(option.value)\n      : value === option.value\n\n    return (\n      <CommandItem\n        key={option.value}\n        value={option.value}\n        onSelect={handleSelect}\n        className=\"rounded-[12px]\"\n      >\n        <span className=\"truncate\">{option.label}</span>\n        <Check\n          className={cn(\n            \"ml-auto h-4 w-4 shrink-0\",\n            isSelected ? \"opacity-100\" : \"opacity-0\"\n          )}\n        />\n      </CommandItem>\n    )\n  }\n\n  const renderSelectedChips = () => {\n    if (isMetrics || !effectiveMultiple || selectedOptions.length === 0)\n      return null\n\n    return (\n      <div className=\"px-2 py-1.5\">\n        <div className=\"flex flex-wrap gap-1\">\n          {selectedOptions.map((option) => (\n            <div\n              key={option.value}\n              className=\"inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs\"\n            >\n              <span className=\"truncate\">{option.label}</span>\n              <X\n                className=\"h-3 w-3 cursor-pointer\"\n                onClick={(e) => handleRemoveValue(option.value, e)}\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  const renderExternalChips = () => {\n    if (!isMetrics || selectedOptions.length === 0) return null\n\n    return selectedOptions.map((option) => (\n      <div\n        key={option.value}\n        className=\"inline-flex items-center gap-2 rounded-3xl border bg-transparent px-3 py-1.5 text-sm\"\n        style={{ borderColor: option.color || \"var(--border)\" }}\n      >\n        <span className=\"truncate\" style={{ color: option.color }}>\n          {option.label}\n        </span>\n        <X\n          className=\"h-3.5 w-3.5 cursor-pointer opacity-70 hover:opacity-100\"\n          style={{ color: option.color }}\n          onClick={(e) => handleRemoveValue(option.value, e)}\n        />\n      </div>\n    ))\n  }\n\n  const popover = (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          role=\"combobox\"\n          aria-expanded={open}\n          disabled={disabled}\n          className={cn(\n            \"cursor-pointer flex h-9 items-center justify-between rounded-3xl border border-border bg-background hover:bg-secondary px-4 py-2 text-sm text-primary-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:opacity-50 disabled:cursor-not-allowed disabled:opacity-50\",\n            !isMetrics && \"my-2 w-full\",\n            isMetrics && \"w-auto gap-2\",\n            !value && !values.length && \"text-secondary-text\",\n            error &&\n              \"border-destructive-foreground focus-visible:ring-destructive-foreground\",\n            isMetrics &&\n              \"bg-muted text-primary-accent hover:bg-muted/20 border-muted\",\n            className\n          )}\n        >\n          {isMetrics && <Plus className=\"h-4 w-4 shrink-0\" />}\n          <span className=\"truncate\">{getDisplayText()}</span>\n          {!isMetrics && (\n            <ChevronDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n          )}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"overflow-hidden rounded-xl p-0\"\n        align=\"start\"\n        style={\n          isMetrics\n            ? { minWidth: 200 }\n            : { width: \"var(--radix-popover-trigger-width)\" }\n        }\n      >\n        <Command>\n          {searchable && <CommandInput placeholder={searchPlaceholder} />}\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            {groups ? (\n              <>\n                {renderSelectedChips()}\n                {groups.map((group) => (\n                  <CommandGroup key={group.label} heading={group.label}>\n                    {group.options.map(renderOption)}\n                  </CommandGroup>\n                ))}\n              </>\n            ) : (\n              <CommandGroup>\n                {renderSelectedChips()}\n                {options.map(renderOption)}\n              </CommandGroup>\n            )}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n\n  if (isMetrics) {\n    return (\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {popover}\n        {renderExternalChips()}\n      </div>\n    )\n  }\n\n  return popover\n}\n"],"mappings":"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","names":["React","Check","ChevronDown","Plus","X","Fragment","jsx","jsxs","Combobox","options","groups","value","onValueChange","placeholder","searchPlaceholder","emptyMessage","disabled","className","error","multiple","values","onValuesChange","variant","searchable","open","setOpen","isMetrics","effectiveMultiple","allOptions","g","selectedOption","option","selectedOptions","handleSelect","currentValue","newValues","v","handleRemoveValue","valueToRemove","e","getDisplayText","renderOption","isSelected","CommandItem","Check","cn","renderSelectedChips","X","renderExternalChips","popover","Popover","PopoverTrigger","Plus","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","group","CommandGroup"]}

package/dist/chunk-YKXP3INY.js

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
-var _chunkULIOO55Ijs = require('./chunk-ULIOO55I.js');var _chunk7J2ETVGKjs = require('./chunk-7J2ETVGK.js');var _chunkFUYXCJOQjs = require('./chunk-FUYXCJOQ.js');var _react = require('react'); var d = _interopRequireWildcard(_react);var _lucidereact = require('lucide-react');var _jsxruntime = require('react/jsx-runtime');function oe({options:m=[],groups:l,value:i,onValueChange:T,placeholder:p="Select option...",searchPlaceholder:L="Search...",emptyMessage:W="No option found.",disabled:X=!1,className:$,error:j=!1,multiple:q=!1,values:s=[],onValuesChange:g,variant:z="default",searchable:A=!0}){let[v,x]=d.useState(!1),t=z==="metrics",c=t?!0:q,h=d.useMemo(()=>l?l.flatMap(e=>e.options):m,[l,m]),C=h.find(e=>e.value===i),a=h.filter(e=>s.includes(e.value)),B=e=>{if(c){let r=s.includes(e)?s.filter(u=>u!==e):[...s,e];_optionalChain([g, 'optionalCall', _ => _(r)])}else _optionalChain([T, 'optionalCall', _2 => _2(e===i?"":e)]),x(!1)},y=(e,r)=>{r.preventDefault(),r.stopPropagation();let u=s.filter(J=>J!==e);_optionalChain([g, 'optionalCall', _3 => _3(u)])},F=()=>t?p:c?a.length===0?p:a.length===1?a[0].label:`${a.length} selected`:C?C.label:p,N=e=>{let r=c?s.includes(e.value):i===e.value;return _jsxruntime.jsxs.call(void 0, _chunk7J2ETVGKjs.h,{value:e.value,onSelect:B,className:"rounded-[12px]",children:[_jsxruntime.jsx.call(void 0, "span",{className:"truncate",children:e.label}),_jsxruntime.jsx.call(void 0, _lucidereact.Check,{className:_chunkFUYXCJOQjs.a.call(void 0, "ml-auto h-4 w-4 shrink-0",r?"opacity-100":"opacity-0")})]},e.value)},w=()=>t||!c||a.length===0?null:_jsxruntime.jsx.call(void 0, "div",{className:"px-2 py-1.5",children:_jsxruntime.jsx.call(void 0, "div",{className:"flex flex-wrap gap-1",children:a.map(e=>_jsxruntime.jsxs.call(void 0, "div",{className:"inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs",children:[_jsxruntime.jsx.call(void 0, "span",{className:"truncate",children:e.label}),_jsxruntime.jsx.call(void 0, _lucidereact.X,{className:"h-3 w-3 cursor-pointer",onClick:r=>y(e.value,r)})]},e.value))})}),H=()=>!t||a.length===0?null:a.map(e=>_jsxruntime.jsxs.call(void 0, "div",{className:"inline-flex items-center gap-2 rounded-3xl border bg-transparent px-3 py-1.5 text-sm",style:{borderColor:e.color||"var(--border)"},children:[_jsxruntime.jsx.call(void 0, "span",{className:"truncate",style:{color:e.color},children:e.label}),_jsxruntime.jsx.call(void 0, _lucidereact.X,{className:"h-3.5 w-3.5 cursor-pointer opacity-70 hover:opacity-100",style:{color:e.color},onClick:r=>y(e.value,r)})]},e.value)),k=_jsxruntime.jsxs.call(void 0, _chunkULIOO55Ijs.a,{open:v,onOpenChange:x,children:[_jsxruntime.jsx.call(void 0, _chunkULIOO55Ijs.b,{asChild:!0,children:_jsxruntime.jsxs.call(void 0, "button",{type:"button",role:"combobox","aria-expanded":v,disabled:X,className:_chunkFUYXCJOQjs.a.call(void 0, "cursor-pointer flex h-9 items-center justify-between rounded-3xl border border-border bg-background hover:bg-secondary px-4 py-2 text-sm text-primary-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:opacity-50 disabled:cursor-not-allowed disabled:opacity-50",!t&&"my-2 w-full",t&&"w-auto gap-2",!i&&!s.length&&"text-secondary-text",j&&"border-destructive-foreground focus-visible:ring-destructive-foreground",t&&"bg-muted text-primary-accent hover:bg-muted/20 border-muted",$),children:[t&&_jsxruntime.jsx.call(void 0, _lucidereact.Plus,{className:"h-4 w-4 shrink-0"}),_jsxruntime.jsx.call(void 0, "span",{className:"truncate",children:F()}),!t&&_jsxruntime.jsx.call(void 0, _lucidereact.ChevronDown,{className:"ml-2 h-4 w-4 shrink-0 opacity-50"})]})}),_jsxruntime.jsx.call(void 0, _chunkULIOO55Ijs.c,{className:"overflow-hidden rounded-xl p-0",align:"start",style:t?{minWidth:200}:{width:"var(--radix-popover-trigger-width)"},children:_jsxruntime.jsxs.call(void 0, _chunk7J2ETVGKjs.a,{children:[A&&_jsxruntime.jsx.call(void 0, _chunk7J2ETVGKjs.c,{placeholder:L}),_jsxruntime.jsxs.call(void 0, _chunk7J2ETVGKjs.d,{children:[_jsxruntime.jsx.call(void 0, _chunk7J2ETVGKjs.e,{children:W}),l?_jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment,{children:[w(),l.map(e=>_jsxruntime.jsx.call(void 0, _chunk7J2ETVGKjs.f,{heading:e.label,children:e.options.map(N)},e.label))]}):_jsxruntime.jsxs.call(void 0, _chunk7J2ETVGKjs.f,{children:[w(),m.map(N)]})]})]})})]});return t?_jsxruntime.jsxs.call(void 0, "div",{className:"flex flex-wrap items-center gap-2",children:[k,H()]}):k}exports.a = oe;
-//# sourceMappingURL=chunk-YKXP3INY.js.map

package/dist/chunk-YKXP3INY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-YKXP3INY.js","../src/components/combobox.tsx"],"names":["Combobox","options","groups","value","onValueChange","placeholder","searchPlaceholder","emptyMessage","disabled","className","error","multiple","values","onValuesChange","variant","searchable","open","setOpen","isMetrics","effectiveMultiple","allOptions","g","selectedOption","option","selectedOptions","handleSelect","currentValue","newValues","v","handleRemoveValue","valueToRemove","e","getDisplayText"],"mappings":"AAAA,22BAAY;AACZ,sDAAqD,sDAAsE,sDAAwC,uECD5I,2CACqB,+CA4GtC,SAlEUA,EAAAA,CAAS,CACvB,OAAA,CAAAC,CAAAA,CAAU,CAAC,CAAA,CACX,MAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CACA,aAAA,CAAAC,CAAAA,CACA,WAAA,CAAAC,CAAAA,CAAc,kBAAA,CACd,iBAAA,CAAAC,CAAAA,CAAoB,WAAA,CACpB,YAAA,CAAAC,CAAAA,CAAe,kBAAA,CACf,QAAA,CAAAC,CAAAA,CAAW,CAAA,CAAA,CACX,SAAA,CAAAC,CAAAA,CACA,KAAA,CAAAC,CAAAA,CAAQ,CAAA,CAAA,CACR,QAAA,CAAAC,CAAAA,CAAW,CAAA,CAAA,CACX,MAAA,CAAAC,CAAAA,CAAS,CAAC,CAAA,CACV,cAAA,CAAAC,CAAAA,CACA,OAAA,CAAAC,CAAAA,CAAU,SAAA,CACV,UAAA,CAAAC,CAAAA,CAAa,CAAA,CACf,CAAA,CAAkB,CAChB,GAAM,CAACC,CAAAA,CAAMC,CAAO,CAAA,CAAU,CAAA,CAAA,QAAA,CAAS,CAAA,CAAK,CAAA,CACtCC,CAAAA,CAAYJ,CAAAA,GAAY,SAAA,CACxBK,CAAAA,CAAoBD,CAAAA,CAAY,CAAA,CAAA,CAAOP,CAAAA,CAEvCS,CAAAA,CAAmB,CAAA,CAAA,OAAA,CAAQ,CAAA,CAAA,EAC3BlB,CAAAA,CAAeA,CAAAA,CAAO,OAAA,CAASmB,CAAAA,EAAMA,CAAAA,CAAE,OAAO,CAAA,CAC3CpB,CAAAA,CACN,CAACC,CAAAA,CAAQD,CAAO,CAAC,CAAA,CAEdqB,CAAAA,CAAiBF,CAAAA,CAAW,IAAA,CAAMG,CAAAA,EAAWA,CAAAA,CAAO,KAAA,GAAUpB,CAAK,CAAA,CACnEqB,CAAAA,CAAkBJ,CAAAA,CAAW,MAAA,CAAQG,CAAAA,EACzCX,CAAAA,CAAO,QAAA,CAASW,CAAAA,CAAO,KAAK,CAC9B,CAAA,CAEME,CAAAA,CAAgBC,CAAAA,EAAyB,CAC7C,EAAA,CAAIP,CAAAA,CAAmB,CACrB,IAAMQ,CAAAA,CAAYf,CAAAA,CAAO,QAAA,CAASc,CAAY,CAAA,CAC1Cd,CAAAA,CAAO,MAAA,CAAQgB,CAAAA,EAAMA,CAAAA,GAAMF,CAAY,CAAA,CACvC,CAAC,GAAGd,CAAAA,CAAQc,CAAY,CAAA,iBAC5Bb,CAAAA,wBAAAA,CAAiBc,CAAS,GAC5B,CAAA,qBACEvB,CAAAA,0BAAAA,CAAgBsB,CAAAA,GAAiBvB,CAAAA,CAAQ,EAAA,CAAKuB,CAAY,GAAA,CAC1DT,CAAAA,CAAQ,CAAA,CAAK,CAEjB,CAAA,CAEMY,CAAAA,CAAoB,CAACC,CAAAA,CAAuBC,CAAAA,CAAAA,EAAwB,CACxEA,CAAAA,CAAE,cAAA,CAAe,CAAA,CACjBA,CAAAA,CAAE,eAAA,CAAgB,CAAA,CAClB,IAAMJ,CAAAA,CAAYf,CAAAA,CAAO,MAAA,CAAQgB,CAAAA,EAAMA,CAAAA,GAAME,CAAa,CAAA,iBAC1DjB,CAAAA,0BAAAA,CAAiBc,CAAS,GAC5B,CAAA,CAEMK,CAAAA,CAAiB,CAAA,CAAA,EACjBd,CAAAA,CAAkBb,CAAAA,CAClBc,CAAAA,CACEK,CAAAA,CAAgB,MAAA,GAAW,CAAA,CAAUnB,CAAAA,CACrCmB,CAAAA,CAAgB,MAAA,GAAW,CAAA,CAAUA,CAAAA,CAAgB,CAAC,CAAA,CAAE,KAAA,CACrD,CAAA,EAAA","file":"/Users/admin/Desktop/PROJECTS/alkimi-ui-kit/dist/chunk-YKXP3INY.js","sourcesContent":[null,"import * as React from \"react\"\nimport { Check, ChevronDown, Plus, X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/components/command\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\"\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  color?: string\n}\n\nexport interface ComboboxGroup {\n  label: string\n  options: ComboboxOption[]\n}\n\nexport interface ComboboxProps {\n  options?: ComboboxOption[]\n  groups?: ComboboxGroup[]\n  value?: string\n  onValueChange?: (value: string) => void\n  placeholder?: string\n  searchPlaceholder?: string\n  emptyMessage?: string\n  disabled?: boolean\n  className?: string\n  error?: boolean\n  multiple?: boolean\n  values?: string[]\n  onValuesChange?: (values: string[]) => void\n  variant?: \"default\" | \"metrics\"\n  searchable?: boolean\n}\n\nexport function Combobox({\n  options = [],\n  groups,\n  value,\n  onValueChange,\n  placeholder = \"Select option...\",\n  searchPlaceholder = \"Search...\",\n  emptyMessage = \"No option found.\",\n  disabled = false,\n  className,\n  error = false,\n  multiple = false,\n  values = [],\n  onValuesChange,\n  variant = \"default\",\n  searchable = true,\n}: ComboboxProps) {\n  const [open, setOpen] = React.useState(false)\n  const isMetrics = variant === \"metrics\"\n  const effectiveMultiple = isMetrics ? true : multiple\n\n  const allOptions = React.useMemo(() => {\n    if (groups) return groups.flatMap((g) => g.options)\n    return options\n  }, [groups, options])\n\n  const selectedOption = allOptions.find((option) => option.value === value)\n  const selectedOptions = allOptions.filter((option) =>\n    values.includes(option.value)\n  )\n\n  const handleSelect = (currentValue: string) => {\n    if (effectiveMultiple) {\n      const newValues = values.includes(currentValue)\n        ? values.filter((v) => v !== currentValue)\n        : [...values, currentValue]\n      onValuesChange?.(newValues)\n    } else {\n      onValueChange?.(currentValue === value ? \"\" : currentValue)\n      setOpen(false)\n    }\n  }\n\n  const handleRemoveValue = (valueToRemove: string, e: React.MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    const newValues = values.filter((v) => v !== valueToRemove)\n    onValuesChange?.(newValues)\n  }\n\n  const getDisplayText = () => {\n    if (isMetrics) return placeholder\n    if (effectiveMultiple) {\n      if (selectedOptions.length === 0) return placeholder\n      if (selectedOptions.length === 1) return selectedOptions[0].label\n      return `${selectedOptions.length} selected`\n    }\n    return selectedOption ? selectedOption.label : placeholder\n  }\n\n  const renderOption = (option: ComboboxOption) => {\n    const isSelected = effectiveMultiple\n      ? values.includes(option.value)\n      : value === option.value\n\n    return (\n      <CommandItem\n        key={option.value}\n        value={option.value}\n        onSelect={handleSelect}\n        className=\"rounded-[12px]\"\n      >\n        <span className=\"truncate\">{option.label}</span>\n        <Check\n          className={cn(\n            \"ml-auto h-4 w-4 shrink-0\",\n            isSelected ? \"opacity-100\" : \"opacity-0\"\n          )}\n        />\n      </CommandItem>\n    )\n  }\n\n  const renderSelectedChips = () => {\n    if (isMetrics || !effectiveMultiple || selectedOptions.length === 0)\n      return null\n\n    return (\n      <div className=\"px-2 py-1.5\">\n        <div className=\"flex flex-wrap gap-1\">\n          {selectedOptions.map((option) => (\n            <div\n              key={option.value}\n              className=\"inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs\"\n            >\n              <span className=\"truncate\">{option.label}</span>\n              <X\n                className=\"h-3 w-3 cursor-pointer\"\n                onClick={(e) => handleRemoveValue(option.value, e)}\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n\n  const renderExternalChips = () => {\n    if (!isMetrics || selectedOptions.length === 0) return null\n\n    return selectedOptions.map((option) => (\n      <div\n        key={option.value}\n        className=\"inline-flex items-center gap-2 rounded-3xl border bg-transparent px-3 py-1.5 text-sm\"\n        style={{ borderColor: option.color || \"var(--border)\" }}\n      >\n        <span className=\"truncate\" style={{ color: option.color }}>\n          {option.label}\n        </span>\n        <X\n          className=\"h-3.5 w-3.5 cursor-pointer opacity-70 hover:opacity-100\"\n          style={{ color: option.color }}\n          onClick={(e) => handleRemoveValue(option.value, e)}\n        />\n      </div>\n    ))\n  }\n\n  const popover = (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          role=\"combobox\"\n          aria-expanded={open}\n          disabled={disabled}\n          className={cn(\n            \"cursor-pointer flex h-9 items-center justify-between rounded-3xl border border-border bg-background hover:bg-secondary px-4 py-2 text-sm text-primary-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:opacity-50 disabled:cursor-not-allowed disabled:opacity-50\",\n            !isMetrics && \"my-2 w-full\",\n            isMetrics && \"w-auto gap-2\",\n            !value && !values.length && \"text-secondary-text\",\n            error &&\n              \"border-destructive-foreground focus-visible:ring-destructive-foreground\",\n            isMetrics &&\n              \"bg-muted text-primary-accent hover:bg-muted/20 border-muted\",\n            className\n          )}\n        >\n          {isMetrics && <Plus className=\"h-4 w-4 shrink-0\" />}\n          <span className=\"truncate\">{getDisplayText()}</span>\n          {!isMetrics && (\n            <ChevronDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n          )}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"overflow-hidden rounded-xl p-0\"\n        align=\"start\"\n        style={\n          isMetrics\n            ? { minWidth: 200 }\n            : { width: \"var(--radix-popover-trigger-width)\" }\n        }\n      >\n        <Command>\n          {searchable && <CommandInput placeholder={searchPlaceholder} />}\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            {groups ? (\n              <>\n                {renderSelectedChips()}\n                {groups.map((group) => (\n                  <CommandGroup key={group.label} heading={group.label}>\n                    {group.options.map(renderOption)}\n                  </CommandGroup>\n                ))}\n              </>\n            ) : (\n              <CommandGroup>\n                {renderSelectedChips()}\n                {options.map(renderOption)}\n              </CommandGroup>\n            )}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n\n  if (isMetrics) {\n    return (\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {popover}\n        {renderExternalChips()}\n      </div>\n    )\n  }\n\n  return popover\n}\n"]}