@bearmenu/ui 0.1.0

package/dist/components/empty-state.js

@@ -0,0 +1,81 @@
+import { Text } from '../chunk-4KOMHDZD.js';
+import { Button } from '../chunk-2CUFS5LF.js';
+import '../chunk-R47NEOSI.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { FileX, AlertCircle, Search } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeStyles = {
+  sm: "py-8 px-4",
+  md: "py-12 px-6",
+  lg: "py-16 px-8"
+};
+var EmptyState = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      title,
+      description,
+      icon,
+      illustration,
+      action,
+      secondaryAction,
+      variant = "default",
+      size = "md",
+      className
+    } = _b, props = __objRest(_b, [
+      "title",
+      "description",
+      "icon",
+      "illustration",
+      "action",
+      "secondaryAction",
+      "variant",
+      "size",
+      "className"
+    ]);
+    const getDefaultIcon = () => {
+      switch (variant) {
+        case "search":
+          return /* @__PURE__ */ jsx(Search, { className: "h-12 w-12 text-muted-foreground/50" });
+        case "error":
+          return /* @__PURE__ */ jsx(AlertCircle, { className: "h-12 w-12 text-destructive/50" });
+        default:
+          return /* @__PURE__ */ jsx(FileX, { className: "h-12 w-12 text-muted-foreground/50" });
+      }
+    };
+    const textColor = variant === "error" ? "destructive" : "muted";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "status",
+        className: cn(
+          "flex flex-col items-center justify-center text-center",
+          sizeStyles[size],
+          className
+        )
+      }, props), {
+        children: [
+          illustration ? /* @__PURE__ */ jsx("div", { className: "mb-6", children: illustration }) : /* @__PURE__ */ jsx("div", { className: "mb-4", children: icon || getDefaultIcon() }),
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", color: textColor, className: "text-lg mb-2", children: title }),
+          /* @__PURE__ */ jsx(Text, { as: "p", color: textColor, className: "text-sm max-w-md mb-6", children: description }),
+          (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            action && /* @__PURE__ */ jsx(Button, { onClick: action.onClick, variant: "default", className: "glass-hover", children: action.label }),
+            secondaryAction && /* @__PURE__ */ jsx(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: secondaryAction.label })
+          ] })
+        ]
+      })
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+var SearchEmptyState = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(EmptyState, __spreadValues({ ref, variant: "search" }, props)));
+SearchEmptyState.displayName = "SearchEmptyState";
+var ErrorEmptyState = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(EmptyState, __spreadValues({ ref, variant: "error" }, props))
+);
+ErrorEmptyState.displayName = "ErrorEmptyState";
+
+export { EmptyState, ErrorEmptyState, SearchEmptyState };

package/dist/components/form.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): react_jsx_runtime.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element | null;
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/components/form.js

@@ -0,0 +1,97 @@
+import { Label } from '../chunk-4JOV7FXW.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
+import { jsx } from 'react/jsx-runtime';
+
+var Form = FormProvider;
+var FormFieldContext = React.createContext({});
+var FormField = (_a) => {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, __spreadValues({}, props)) });
+};
+var useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return __spreadValues({
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`
+  }, fieldState);
+};
+var FormItemContext = React.createContext({});
+function FormItem(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "form-item", className: cn("grid gap-2", className) }, props)) });
+}
+function FormLabel(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    __spreadValues({
+      "data-slot": "form-label",
+      "data-error": !!error,
+      className: cn("data-[error=true]:text-destructive", className),
+      htmlFor: formItemId
+    }, props)
+  );
+}
+function FormControl(_a) {
+  var props = __objRest(_a, []);
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    __spreadValues({
+      "data-slot": "form-control",
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error
+    }, props)
+  );
+}
+function FormDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    __spreadValues({
+      "data-slot": "form-description",
+      id: formDescriptionId,
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+function FormMessage(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _a2;
+  const { error, formMessageId } = useFormField();
+  const body = error ? String((_a2 = error == null ? void 0 : error.message) != null ? _a2 : "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    __spreadProps(__spreadValues({
+      "data-slot": "form-message",
+      id: formMessageId,
+      className: cn("text-destructive text-sm", className)
+    }, props), {
+      children: body
+    })
+  );
+}
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/components/haptic-button.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';
+
+interface HapticButtonProps extends ButtonProps {
+    hapticStyle?: "light" | "medium" | "heavy";
+}
+declare function HapticButton({ hapticStyle, onClick, ...props }: HapticButtonProps): react_jsx_runtime.JSX.Element;
+
+export { HapticButton };

package/dist/components/haptic-button.js

@@ -0,0 +1,17 @@
+import { Button } from '../chunk-2CUFS5LF.js';
+import { useHaptic } from '../chunk-R47NEOSI.js';
+import '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { jsx } from 'react/jsx-runtime';
+
+function HapticButton(_a) {
+  var _b = _a, { hapticStyle = "light", onClick } = _b, props = __objRest(_b, ["hapticStyle", "onClick"]);
+  const { trigger } = useHaptic();
+  const handleClick = (e) => {
+    trigger(hapticStyle);
+    onClick == null ? void 0 : onClick(e);
+  };
+  return /* @__PURE__ */ jsx(Button, __spreadValues({ onClick: handleClick }, props));
+}
+
+export { HapticButton };

package/dist/components/input-otp.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { OTPInput } from 'input-otp';
+
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    index: number;
+}): react_jsx_runtime.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp.js

@@ -0,0 +1,62 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function InputOTP(_a) {
+  var _b = _a, {
+    className,
+    containerClassName
+  } = _b, props = __objRest(_b, [
+    "className",
+    "containerClassName"
+  ]);
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    __spreadValues({
+      "data-slot": "input-otp",
+      containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
+      className: cn("disabled:cursor-not-allowed", className)
+    }, props)
+  );
+}
+function InputOTPGroup(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "input-otp-group", className: cn("flex items-center", className) }, props));
+}
+function InputOTPSlot(_a) {
+  var _b = _a, {
+    index,
+    className
+  } = _b, props = __objRest(_b, [
+    "index",
+    "className"
+  ]);
+  var _a2;
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = (_a2 = inputOTPContext == null ? void 0 : inputOTPContext.slots[index]) != null ? _a2 : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "input-otp-slot",
+      "data-active": isActive,
+      className: cn(
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-base shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        className
+      )
+    }, props), {
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" }) })
+      ]
+    })
+  );
+}
+function InputOTPSeparator(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ "data-slot": "input-otp-separator", role: "separator" }, props), { children: /* @__PURE__ */ jsx(MinusIcon, {}) }));
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/components/input.js

@@ -0,0 +1,3 @@
+export { Input } from '../chunk-CW24PLDW.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/label.d.ts

@@ -0,0 +1,8 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { VariantProps } from 'class-variance-authority';
+
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+
+export { Label };

package/dist/components/label.js

@@ -0,0 +1,3 @@
+export { Label } from '../chunk-4JOV7FXW.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/lazy-markdown.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Components } from 'react-markdown';
+
+type LazyMarkdownProps = {
+    content: string;
+    className?: string;
+    components?: Components;
+};
+declare function LazyMarkdown(props: LazyMarkdownProps): react_jsx_runtime.JSX.Element;
+
+export { LazyMarkdown };

package/dist/components/lazy-markdown.js

@@ -0,0 +1,13 @@
+import { __spreadValues } from '../chunk-3GWWZKX7.js';
+import dynamic from 'next/dynamic';
+import { jsx } from 'react/jsx-runtime';
+
+var MarkdownRendererDynamic = dynamic(
+  () => import('./markdown-renderer.js').then((m) => m.MarkdownRenderer),
+  { ssr: false }
+);
+function LazyMarkdown(props) {
+  return /* @__PURE__ */ jsx(MarkdownRendererDynamic, __spreadValues({}, props));
+}
+
+export { LazyMarkdown };

package/dist/components/link-button.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface LinkButtonProps extends Omit<ButtonProps, "asChild"> {
+    href: string;
+    children: React.ReactNode;
+}
+/**
+ * LinkButton - A semantically correct button that navigates using Next.js Link
+ *
+ * @description
+ * Combines the visual styling of Button with proper link semantics for navigation.
+ * Use this instead of Button with onClick for navigation to get:
+ * - Proper HTML semantics (<a> tag)
+ * - Right-click "Open in new tab"
+ * - Cmd/Ctrl+click to open in new tab
+ * - Better SEO and accessibility
+ *
+ * @example
+ * ```tsx
+ * <LinkButton href="/menu/dishes/123" variant="default" size="sm">
+ *   View Details
+ * </LinkButton>
+ * ```
+ */
+declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+
+export { LinkButton, type LinkButtonProps };

package/dist/components/link-button.js

@@ -0,0 +1,17 @@
+import { Button } from '../chunk-2CUFS5LF.js';
+import '../chunk-R47NEOSI.js';
+import '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import Link from 'next/link';
+import { jsx } from 'react/jsx-runtime';
+
+var LinkButton = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { href, children } = _b, buttonProps = __objRest(_b, ["href", "children"]);
+    return /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({}, buttonProps), { asChild: true, children: /* @__PURE__ */ jsx(Link, { href, ref, children }) }));
+  }
+);
+LinkButton.displayName = "LinkButton";
+
+export { LinkButton };

package/dist/components/markdown-renderer.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Components } from 'react-markdown';
+
+type MarkdownRendererProps = {
+    content: string;
+    className?: string;
+    components?: Components;
+};
+declare function MarkdownRenderer({ content, className, components }: MarkdownRendererProps): react_jsx_runtime.JSX.Element;
+
+export { MarkdownRenderer };

package/dist/components/markdown-renderer.js

@@ -0,0 +1,10 @@
+import '../chunk-3GWWZKX7.js';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { jsx } from 'react/jsx-runtime';
+
+function MarkdownRenderer({ content, className, components }) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children: content }) });
+}
+
+export { MarkdownRenderer };

package/dist/components/multi-select-combobox.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+interface MultiSelectComboboxProps {
+    options: MultiSelectOption[];
+    selected: string[];
+    onSelectionChange: (values: string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    className?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    maxDisplay?: number;
+    onSearchChange?: (value: string) => void;
+    shouldFilter?: boolean;
+}
+declare function MultiSelectCombobox({ options, selected, onSelectionChange, placeholder, searchPlaceholder, emptyText, className, disabled, loading, maxDisplay, onSearchChange, shouldFilter, }: MultiSelectComboboxProps): react_jsx_runtime.JSX.Element;
+
+export { MultiSelectCombobox, type MultiSelectOption };

package/dist/components/multi-select-combobox.js

@@ -0,0 +1,114 @@
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-4UO73SKC.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-7H54PTVH.js';
+import '../chunk-4AVS6CV4.js';
+import { Badge } from '../chunk-NKHH23YK.js';
+import { Button } from '../chunk-2CUFS5LF.js';
+import '../chunk-R47NEOSI.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { X, ChevronsUpDown, Check } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function MultiSelectCombobox({
+  options,
+  selected,
+  onSelectionChange,
+  placeholder = "Select items...",
+  searchPlaceholder = "Search...",
+  emptyText = "No items found.",
+  className,
+  disabled = false,
+  loading = false,
+  maxDisplay = 3,
+  onSearchChange,
+  shouldFilter = true
+}) {
+  const [open, setOpen] = React.useState(false);
+  const handleSelect = (value) => {
+    const newSelected = selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value];
+    onSelectionChange(newSelected);
+  };
+  const handleRemove = (value, e) => {
+    e.stopPropagation();
+    onSelectionChange(selected.filter((item) => item !== value));
+  };
+  const selectedLabels = selected.map((value) => {
+    var _a;
+    return ((_a = options.find((opt) => opt.value === value)) == null ? void 0 : _a.label) || value;
+  }).slice(0, maxDisplay);
+  const remainingCount = selected.length - maxDisplay;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        className: cn(
+          "w-full justify-between h-auto min-h-10 py-2",
+          selected.length === 0 && "text-muted-foreground",
+          className
+        ),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 flex-1 text-left", children: selected.length === 0 ? /* @__PURE__ */ jsx("span", { children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            selectedLabels.map((label, i) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs", children: [
+              label,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  className: "ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer",
+                  onClick: (e) => handleRemove(selected[i], e),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleRemove(selected[i], e);
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                }
+              )
+            ] }, selected[i])),
+            remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs", children: [
+              "+",
+              remainingCount,
+              " more"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-full p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { shouldFilter, children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, onValueChange: onSearchChange }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: loading ? "Loading..." : emptyText }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: option.value,
+            onSelect: () => handleSelect(option.value),
+            children: [
+              /* @__PURE__ */ jsx(
+                Check,
+                {
+                  className: cn(
+                    "mr-2 h-4 w-4",
+                    selected.includes(option.value) ? "opacity-100" : "opacity-0"
+                  )
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+
+export { MultiSelectCombobox };

package/dist/components/pagination.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Button } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
+declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
+declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };