lecom-ui 5.2.74 → 5.2.76

package/dist/components/Combobox/Combobox.js

@@ -1,116 +0,0 @@
-import * as React from 'react';
-import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react';
-import { cn } from '../../lib/utils.js';
-import { Button } from '../Button/Button.js';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
-import { Typography } from '../Typography/Typography.js';
-
-function Combobox({
-  options,
-  value,
-  onChange,
-  placeholder = "Selecione...",
-  disabled = false,
-  notFoundContent = "Nenhuma op\xE7\xE3o encontrada.",
-  status = "default",
-  searchTerm = "Pesquisar...",
-  triggerClassName,
-  contentClassName
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [search, setSearch] = React.useState("");
-  const filterOptions = React.useCallback(
-    (opts) => {
-      const searchLower = search.toLowerCase();
-      return opts.map((item) => {
-        if ("options" in item) {
-          const filtered = item.options.filter(
-            (opt) => opt.label.toLowerCase().includes(searchLower) || opt.value.toLowerCase().includes(searchLower)
-          );
-          if (!filtered.length) return null;
-          return { ...item, options: filtered };
-        }
-        return item.label.toLowerCase().includes(searchLower) || item.value.toLowerCase().includes(searchLower) ? item : null;
-      }).filter(Boolean);
-    },
-    [search]
-  );
-  const filteredOptions = React.useMemo(
-    () => !search ? options : filterOptions(options),
-    [options, search, filterOptions]
-  );
-  const selectedLabel = options.flatMap((opt) => "options" in opt ? opt.options : [opt]).find((opt) => opt.value === value)?.label || placeholder;
-  React.useEffect(() => {
-    if (!open) setSearch("");
-  }, [open]);
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true, className: cn(contentClassName) }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      role: "combobox",
-      "aria-expanded": open,
-      className: cn(
-        triggerClassName,
-        "w-full h-10 bg-white rounded-md px-3 text-left shadow-sm flex items-center justify-between transition",
-        status === "error" ? "border border-red-500 hover:ring-1 hover:ring-red-500 focus:ring-1 focus:ring-red-500" : "border border-gray-300 hover:ring-1 hover:ring-blue-600 focus:ring-1 focus:ring-blue-600",
-        !value && "text-gray-400",
-        disabled && "opacity-50 pointer-events-none",
-        "hover:bg-white focus:!bg-white active:!bg-white"
-      ),
-      disabled
-    },
-    /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        className: cn(
-          value ? "text-black" : "text-gray-400",
-          "font-normal truncate max-w-[calc(100%-2.5rem)]"
-        )
-      },
-      /* @__PURE__ */ React.createElement(Typography, { variant: "body-medium-400" }, selectedLabel)
-    ),
-    open ? /* @__PURE__ */ React.createElement(ChevronUpIcon, { className: "ml-2 h-4 w-4 shrink-0 text-gray-400" }) : /* @__PURE__ */ React.createElement(ChevronDownIcon, { className: "ml-2 h-4 w-4 shrink-0 text-gray-400" })
-  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0" }, /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
-    CommandInput,
-    {
-      placeholder: searchTerm,
-      value: search,
-      onValueChange: setSearch
-    }
-  ), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent), filteredOptions.map(
-    (item, idx) => "options" in item ? /* @__PURE__ */ React.createElement(CommandGroup, { key: `${item.label}-${idx}`, heading: item.label }, item.options.map((opt) => /* @__PURE__ */ React.createElement(
-      CommandItem,
-      {
-        key: opt.value,
-        onSelect: () => {
-          if (opt.disabled) return;
-          onChange(opt.value === value ? null : opt.value);
-          setOpen(false);
-        },
-        className: cn(
-          opt.value === value ? "bg-blue-100 font-semibold text-black" : "hover:bg-gray-100",
-          opt.disabled && "opacity-50 pointer-events-none"
-        )
-      },
-      opt.label
-    ))) : /* @__PURE__ */ React.createElement(
-      CommandItem,
-      {
-        key: item.value,
-        onSelect: () => {
-          if (item.disabled) return;
-          onChange(item.value === value ? null : item.value);
-          setOpen(false);
-        },
-        className: cn(
-          item.value === value ? "bg-blue-100 font-semibold text-black" : "hover:bg-gray-100",
-          item.disabled && "opacity-50 pointer-events-none"
-        )
-      },
-      item.label
-    )
-  )))));
-}
-
-export { Combobox };

package/dist/components/CustomDivider/CustomDivider.js

@@ -1,207 +0,0 @@
-import * as React from 'react';
-import { useFormContext, Controller } from 'react-hook-form';
-import { cn } from '../../lib/utils.js';
-import { Button } from '../Button/Button.js';
-
-function DividerLine({
-  dashed,
-  plain,
-  isGroupDivider,
-  isActive,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "w-full",
-        isGroupDivider ? "my-4" : "my-2",
-        isActive ? "opacity-100" : "opacity-50",
-        className
-      ),
-      style
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "w-full border-t",
-          dashed ? "border-dashed" : "border-solid",
-          plain ? "border-gray-200" : "border-gray-300"
-        )
-      }
-    )
-  );
-}
-function OptionButtons({
-  value,
-  onChange,
-  isActive,
-  plain,
-  optionLabels,
-  ButtonComponent,
-  buttonSize,
-  buttonClassName
-}) {
-  const [labelAnd, labelOr] = optionLabels;
-  const Btn = ButtonComponent;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "relative z-10 inline-flex overflow-hidden",
-        plain ? "bg-white" : "rounded-md border border-gray-300 bg-white shadow-sm"
-      )
-    },
-    /* @__PURE__ */ React.createElement(
-      Btn,
-      {
-        type: "button",
-        variant: "ghost",
-        color: "grey",
-        size: buttonSize,
-        onClick: () => onChange("AND"),
-        disabled: !isActive,
-        className: cn(
-          "px-4 py-1 text-sm transition !rounded-none",
-          value === "AND" ? "bg-blue-600 text-white hover:bg-blue-500" : "bg-white text-gray-700 hover:bg-blue-50",
-          buttonClassName
-        )
-      },
-      labelAnd
-    ),
-    /* @__PURE__ */ React.createElement(
-      Btn,
-      {
-        type: "button",
-        variant: "ghost",
-        color: "grey",
-        size: buttonSize,
-        onClick: () => onChange("OR"),
-        disabled: !isActive,
-        className: cn(
-          "px-4 py-1 text-sm transition !rounded-none",
-          value === "OR" ? "bg-blue-600 text-white hover:bg-blue-500" : "bg-white text-gray-700 hover:bg-blue-50",
-          buttonClassName
-        )
-      },
-      labelOr
-    )
-  );
-}
-function CustomDivider({
-  name,
-  control,
-  isActive = true,
-  isGroupDivider = false,
-  orientation = "center",
-  dashed = false,
-  plain = false,
-  lineOnly = false,
-  optionLabels = ["E", "OU"],
-  ButtonComponent = Button,
-  buttonSize = "medium",
-  buttonClassName,
-  className,
-  style,
-  children
-}) {
-  const formContext = useFormContext();
-  const controlToUse = control ?? formContext?.control;
-  const justifyMap = {
-    left: "justify-start",
-    center: "justify-center",
-    right: "justify-end"
-  };
-  if (lineOnly && !children) {
-    return /* @__PURE__ */ React.createElement(
-      DividerLine,
-      {
-        dashed,
-        plain,
-        isGroupDivider,
-        isActive,
-        className,
-        style
-      }
-    );
-  }
-  if (children) {
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "relative w-full flex items-center",
-          isGroupDivider ? "my-4" : "my-2",
-          isActive ? "opacity-100" : "opacity-50",
-          justifyMap[orientation],
-          className
-        ),
-        style
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: cn(
-            "absolute inset-x-0 border-t",
-            dashed ? "border-dashed" : "border-solid",
-            plain ? "border-gray-200" : "border-gray-300"
-          )
-        }
-      ),
-      /* @__PURE__ */ React.createElement("span", { className: "relative z-10 px-2 bg-white" }, children)
-    );
-  }
-  if (!name) {
-    throw new Error(
-      "CustomDivider: prop `name` \xE9 obrigat\xF3ria se `lineOnly` for false."
-    );
-  }
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "relative w-full flex items-center",
-        isGroupDivider ? "my-4" : "my-2",
-        isActive ? "opacity-100" : "opacity-50",
-        justifyMap[orientation],
-        className
-      ),
-      style
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "absolute inset-x-0 border-t",
-          dashed ? "border-dashed" : "border-solid",
-          plain ? "border-gray-200" : "border-gray-300"
-        )
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      Controller,
-      {
-        name,
-        control: controlToUse,
-        render: ({ field: { value, onChange } }) => /* @__PURE__ */ React.createElement(
-          OptionButtons,
-          {
-            value,
-            onChange,
-            isActive,
-            plain,
-            optionLabels,
-            ButtonComponent,
-            buttonSize,
-            buttonClassName
-          }
-        )
-      }
-    )
-  );
-}
-CustomDivider.displayName = "CustomDivider";
-
-export { CustomDivider };

package/dist/components/CustomIcon/Icons/SairModoTeste.js

@@ -1,31 +0,0 @@
-import * as React from 'react';
-
-const SairModoTeste = ({
-  color = "currentColor",
-  strokeWidth = 1.5,
-  width = 20,
-  height = 20,
-  ...props
-}) => /* @__PURE__ */ React.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width,
-    height,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      stroke: color,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth,
-      d: "M4.75 2h7.875L17 6.5v.9h-3.5c-.464 0-.91-.19-1.237-.527A1.83 1.83 0 0 1 11.75 5.6V2M3 7.5v10.7c0 .477.184.935.513 1.273.328.337.773.527 1.237.527h6.75M8 11.9H6.5m4.5 3.6H6.5M19 10v6m-5-6v1m-1-1h7m-6 8v3.375c0 .91 1.1 1.625 2.5 1.625.567 0 1.085-.117 1.5-.317.259-.125.478-.281.644-.462M1 2l11 10.5L23 23"
-    }
-  )
-);
-
-export { SairModoTeste };

package/dist/components/ResizablePanel/ResizablePanel.js

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import * as ResizablePrimitive from 'react-resizable-panels';
-import { cn } from '../../lib/utils.js';
-import { GripVertical } from 'lucide-react';
-
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ React.createElement(
-  ResizablePrimitive.PanelGroup,
-  {
-    className: cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    ),
-    ...props
-  }
-);
-const ResizablePanel = ResizablePrimitive.Panel;
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}) => /* @__PURE__ */ React.createElement(
-  ResizablePrimitive.PanelResizeHandle,
-  {
-    className: cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    ),
-    ...props
-  },
-  withHandle && /* @__PURE__ */ React.createElement("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border" }, /* @__PURE__ */ React.createElement(GripVertical, { className: "h-2.5 w-2.5" }))
-);
-
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/components/Steps/Steps.js

@@ -1,102 +0,0 @@
-import * as React from 'react';
-import { cn } from '../../lib/utils.js';
-
-const Steps = ({
-  items,
-  current = 0,
-  className,
-  dotSize = "medium",
-  color = "blue"
-}) => {
-  const getStepStatus = (index, item) => {
-    if (item.status) return item.status;
-    if (index < current) return "completed";
-    if (index === current) return "current";
-    return "pending";
-  };
-  const getDotSizeClasses = () => {
-    const outerDotSizeClasses = {
-      small: "w-[10px] h-[10px]",
-      medium: "w-6 h-6",
-      large: "w-8 h-8"
-    };
-    const innerDotSizeClasses = {
-      small: "",
-      medium: "w-2 h-2",
-      large: "w-3 h-3"
-    };
-    return {
-      outer: outerDotSizeClasses[dotSize],
-      inner: innerDotSizeClasses[dotSize]
-    };
-  };
-  const getStepIcon = () => dotSize !== "small" ? /* @__PURE__ */ React.createElement("div", { className: cn("rounded-full", getDotSizeClasses().inner) }) : null;
-  const getStepColors = () => {
-    const colorOptions = {
-      blue: "bg-blue-600 border-blue-600",
-      red: "bg-red-600 border-red-600",
-      green: "bg-green-600 border-green-600",
-      purple: "bg-purple-600 border-purple-600",
-      orange: "bg-orange-500 border-orange-500"
-    };
-    return colorOptions[color] || colorOptions.blue;
-  };
-  return /* @__PURE__ */ React.createElement("div", { className: cn("relative", className) }, items.map((item, index) => {
-    const status = getStepStatus(index, item);
-    const isCurrent = index === current;
-    const isLast = index === items.length - 1;
-    return /* @__PURE__ */ React.createElement("div", { key: index, className: "relative flex items-baseline" }, !isLast && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn("absolute border-l border-dashed -z-10", {
-          "left-[4.5px]": dotSize === "small",
-          "left-3": dotSize === "medium",
-          "left-4": dotSize === "large",
-          "border-blue-300": color === "blue",
-          "border-red-300": color === "red",
-          "border-green-300": color === "green",
-          "border-purple-300": color === "purple",
-          "border-orange-300": color === "orange"
-        }),
-        style: {
-          top: dotSize === "small" ? "10px" : dotSize === "medium" ? "16px" : "24px",
-          height: dotSize === "small" ? "calc(100% - 10px)" : dotSize === "medium" ? "calc(100% - 24px)" : "calc(100% - 32px)"
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "relative z-10 flex items-center justify-center rounded-full",
-          getDotSizeClasses().outer,
-          getStepColors(),
-          dotSize === "small" ? "" : "border"
-        )
-      },
-      getStepIcon()
-    ), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn("pb-6 flex-1 mt-0", {
-          "ml-[14px]": dotSize === "small",
-          "ml-4": dotSize === "medium",
-          "ml-5": dotSize === "large"
-        })
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: cn(
-            "text-sm font-medium",
-            status === "completed" || isCurrent ? "text-gray-900" : "text-gray-500"
-          )
-        },
-        item.title
-      ),
-      item.description && /* @__PURE__ */ React.createElement("div", { className: "mt-1" }, typeof item.description === "string" ? /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-600" }, item.description) : item.description)
-    ));
-  }));
-};
-Steps.displayName = "Steps";
-
-export { Steps };

package/dist/components/TagInput/TagInput.js

@@ -1,107 +0,0 @@
-import * as React from 'react';
-import { X } from 'lucide-react';
-import { cn } from '../../lib/utils.js';
-import { Tag } from '../Tag/Tag.js';
-import { textareaVariants } from '../Textarea/Textarea.js';
-import { Typography } from '../Typography/Typography.js';
-
-function TagInput({
-  value,
-  onRemove,
-  placeholder = "Nenhum item selecionado",
-  disabled = false,
-  readOnly = false,
-  className = "",
-  size = "default",
-  variant = "default",
-  radius = "default",
-  ...props
-}) {
-  const ref = React.useRef(null);
-  const [maxVisibleCount, setMaxVisibleCount] = React.useState(
-    null
-  );
-  const [hiddenCount, setHiddenCount] = React.useState(0);
-  const calculateMaxVisible = React.useCallback(() => {
-    const container = ref.current;
-    if (!container) return;
-    const children = Array.from(container.children).filter(
-      (el) => el.dataset.tag === "true"
-    );
-    const lines = [];
-    children.forEach((c) => {
-      const t = c.offsetTop;
-      if (!lines.includes(t)) lines.push(t);
-    });
-    if (lines.length <= 2) {
-      setMaxVisibleCount(children.length);
-      setHiddenCount(0);
-      return;
-    }
-    const second = lines[1];
-    let count = 0;
-    for (const c of children) {
-      if (c.offsetTop > second) break;
-      count++;
-    }
-    setMaxVisibleCount(count);
-    setHiddenCount(children.length - count);
-  }, []);
-  React.useLayoutEffect(() => {
-    if (maxVisibleCount === null) {
-      const id = window.requestAnimationFrame(calculateMaxVisible);
-      return () => window.cancelAnimationFrame(id);
-    }
-  }, [maxVisibleCount, calculateMaxVisible]);
-  const visibleCount = maxVisibleCount === null ? value.length : maxVisibleCount;
-  const displayTags = value.slice(0, visibleCount);
-  const currentHiddenCount = Math.max(value.length - visibleCount, 0);
-  React.useEffect(() => {
-    setHiddenCount(currentHiddenCount);
-  }, [currentHiddenCount]);
-  const textareaRadius = radius === "full" ? "large" : radius;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref,
-      className: cn(
-        textareaVariants({ variant, radius: textareaRadius }),
-        "flex flex-wrap items-start min-h-10 gap-1 py-2 px-3",
-        disabled && "opacity-50 pointer-events-none",
-        className
-      ),
-      tabIndex: 0,
-      "aria-disabled": disabled,
-      style: { resize: "none", cursor: disabled ? "not-allowed" : "text" },
-      ...props
-    },
-    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-400" }, placeholder),
-    displayTags.map((item) => /* @__PURE__ */ React.createElement(Tag, { key: item.value, "data-tag": "true", color: "blue" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
-      X,
-      {
-        className: "w-4 h-4 cursor-pointer",
-        onClick: (e) => {
-          e.stopPropagation();
-          onRemove(item.value);
-        },
-        "aria-label": `Remover ${item.label}`,
-        tabIndex: 0
-      }
-    ))),
-    hiddenCount > 0 && /* @__PURE__ */ React.createElement(Tag, { color: "grey", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-600" }, "+", hiddenCount), !readOnly && /* @__PURE__ */ React.createElement(
-      X,
-      {
-        className: "w-4 h-4 cursor-pointer text-grey-500 hover:text-grey-700",
-        onClick: (e) => {
-          e.stopPropagation();
-          const next = value[visibleCount]?.value;
-          if (next) onRemove(next);
-        },
-        "aria-label": "Remover pr\xF3xima tag oculta",
-        tabIndex: 0
-      }
-    ))
-  );
-}
-
-export { TagInput };

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import { cn } from '../../lib/utils.js';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { cva } from 'class-variance-authority';
-
-const toggleVariants = cva(
-  "flex items-center justify-center gap-2 body-medium-500 rounded-full disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none transition-[color,box-shadow] whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        outline: "border border-input bg-transparent hover:bg-grey-100"
-      },
-      color: {
-        grey: "border-grey-800 text-grey-800 hover:bg-grey-100 data-[state=on]:bg-grey-800 data-[state=on]:text-white",
-        blue: "border-blue-600 text-blue-600 hover:bg-blue-100 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
-      },
-      size: {
-        default: "h-8 px-2 min-w-8",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "outline",
-      size: "default",
-      color: "blue"
-    }
-  }
-);
-const ToggleGroupContext = React.createContext({
-  size: "default",
-  variant: "outline",
-  color: "blue"
-});
-function ToggleGroup({
-  className,
-  size,
-  color,
-  children,
-  ...props
-}) {
-  const valueProps = React.useMemo(() => ({ variant: "outline", size, color }), [color, size]);
-  return /* @__PURE__ */ React.createElement(
-    ToggleGroupPrimitive.Root,
-    {
-      "data-slot": "toggle-group",
-      "data-variant": "outline",
-      "data-size": size,
-      className: cn(
-        "group/toggle-group flex w-fit items-center rounded-full",
-        className
-      ),
-      ...props
-    },
-    /* @__PURE__ */ React.createElement(ToggleGroupContext.Provider, { value: valueProps }, children)
-  );
-}
-function ToggleGroupItem({
-  className,
-  children,
-  size,
-  color,
-  ...props
-}) {
-  const context = React.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ React.createElement(
-    ToggleGroupPrimitive.Item,
-    {
-      "data-slot": "toggle-group-item",
-      "data-variant": "outline",
-      "data-size": context.size || size,
-      className: cn(
-        toggleVariants({
-          variant: "outline",
-          size: context.size || size,
-          color: context.color || color
-        }),
-        "min-w-max flex-1 shrink-0 rounded-none shadow-none first:p-3 first:rounded-l-full last:p-3 last:rounded-r-full focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        className
-      ),
-      ...props
-    },
-    children
-  );
-}
-
-export { ToggleGroup, ToggleGroupItem };