@cnc-ti/layout-basic 8.3.12 → 8.3.14

package/dist/index.js

@@ -43,6 +43,7 @@ __export(src_exports, {
   CardFooter: () => CardFooter,
   CardFooterItem: () => CardFooterItem,
   CardHeader: () => CardHeader,
+  Checkbox: () => Checkbox,
   Collapsible: () => Collapsible,
   CollapsibleContent: () => AnimatedCollapsibleContent,
   CollapsibleTrigger: () => CollapsibleTrigger2,
@@ -2764,17 +2765,16 @@ function cn(...inputs) {
 // src/components/Button/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariants = cva(
-  "cnc-inline-flex cnc-items-center cnc-justify-center cnc-border cnc-text-white cnc-whitespace-nowrap cnc-rounded-md cnc-text-sm cnc-font-medium cnc-ring-offset-background cnc-transition-colors focus-visible:cnc-outline-none focus-visible:cnc-ring-2 focus-visible:cnc-ring-ring focus-visible:cnc-ring-offset-2 disabled:cnc-pointer-events-none disabled:cnc-opacity-50",
+  "cnc-inline-flex cnc-items-center cnc-justify-center cnc-border cnc-whitespace-nowrap cnc-rounded-md cnc-text-sm cnc-font-medium cnc-ring-offset-background cnc-transition-colors focus-visible:cnc-outline-none focus-visible:cnc-ring-2 focus-visible:cnc-ring-ring focus-visible:cnc-ring-offset-2 disabled:cnc-pointer-events-none disabled:cnc-opacity-50",
   {
     variants: {
       variant: {
-        default: "cnc-bg-primary cnc-text-primary-foreground hover:cnc-bg-primary/90",
-        confirm: "cnc-bg-brand-blue-400 cnc-border-brand-blue-500 hover:cnc-bg-brand-blue-400/90",
-        create: "cnc-bg-brand-green-100 cnc-border-brand-green-200 hover:cnc-bg-brand-green-100/80",
-        secondary: "cnc-bg-brand-gray-20 cnc-text-secondary-foreground hover:cnc-brightness-95",
-        danger: "cnc-bg-brand-red-500 cnc-border-brand-red-600 hover:cnc-bg-brand-red-500/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        confirm: "cnc-bg-brand-blue-400 cnc-border-brand-blue-500 hover:cnc-bg-brand-blue-400/90 cnc-text-white",
+        create: "cnc-bg-brand-green-100 cnc-border-brand-green-200 hover:cnc-bg-brand-green-100/80 cnc-text-white",
+        secondary: "cnc-bg-brand-gray-20 cnc-text-secondary-foreground hover:cnc-brightness-95 cnc-text-white",
+        danger: "cnc-bg-brand-red-500 cnc-border-brand-red-600 hover:cnc-bg-brand-red-500/80 cnc-text-white",
+        outline: "cnc-border cnc-border-input cnc-text-brand-gray-200 cnc-bg-background cnc-shadow-sm hover:cnc-bg-brand-blue-50 hover:cnc-text-accent-foreground",
+        default: "cnc-bg-primary cnc-text-primary-foreground hover:cnc-bg-primary/90 cnc-text-white"
       },
       size: {
         default: "cnc-h-10 cnc-px-4 cnc-py-2",
@@ -10175,7 +10175,7 @@ function Sidebar({ children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Accordion.Root, { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
-      className: "cnc-w-full cnc-h-screen-minus-70 cnc-flex cnc-flex-col cnc-py-8 cnc-bg-primary-800 cnc-px-5 \r\n                cnc-scroll-smooth cnc-overflow-y-auto\r\n                [&::-webkit-scrollbar]:cnc-w-1\r\n                [&::-webkit-scrollbar-track]:cnc-bg-brand-blue-500\r\n                [&::-webkit-scrollbar-thumb]:cnc-rounded\r\n                [&::-webkit-scrollbar-thumb]:cnc-border\r\n                [&::-webkit-scrollbar-thumb]:cnc-border-solid\r\n                [&::-webkit-scrollbar-thumb]:cnc-border-brand-gray-400\r\n                [&::-webkit-scrollbar-thumb]:cnc-bg-brand-gray-200\r\n                cnc-sidebar-child-w-0",
+      className: "cnc-w-full cnc-h-screen-minus-70 cnc-flex cnc-flex-col cnc-py-8 cnc-bg-primary-800 cnc-px-5 \n                cnc-scroll-smooth cnc-overflow-y-auto\n                [&::-webkit-scrollbar]:cnc-w-1\n                [&::-webkit-scrollbar-track]:cnc-bg-brand-blue-500\n                [&::-webkit-scrollbar-thumb]:cnc-rounded\n                [&::-webkit-scrollbar-thumb]:cnc-border\n                [&::-webkit-scrollbar-thumb]:cnc-border-solid\n                [&::-webkit-scrollbar-thumb]:cnc-border-brand-gray-400\n                [&::-webkit-scrollbar-thumb]:cnc-bg-brand-gray-200\n                cnc-sidebar-child-w-0",
       children
     }
   ) });
@@ -12207,8 +12207,39 @@ var Input = React74.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/components/atoms/display/badge.tsx
+// src/components/atoms/forms/checkbox.tsx
+var React75 = __toESM(require("react"));
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var Checkbox = React75.forwardRef(
+  ({ className, id, label, ...props }, ref) => {
+    console.log();
+    const idGenerate = id ? id : label && `field-${Date.now()}-${Math.random() * 1e5}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "cnc-w-full cnc-flex cnc-flex-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          id: idGenerate,
+          className: cn("cnc-w-6 cnc-h-6", className),
+          ref,
+          ...props
+        }
+      ),
+      label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "label",
+        {
+          htmlFor: idGenerate,
+          className: "cnc-block cnc-text-sm cnc-font-medium cnc-text-brand-gray-600 cnc-ml-2",
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/atoms/display/badge.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Badge = ({
   variant = "default",
   rounded = true,
@@ -12230,7 +12261,7 @@ var Badge = ({
     md: "cnc-text-sm cnc-px-3 cnc-py-1",
     lg: "cnc-text-base cnc-px-4 cnc-py-2"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "span",
     {
       className: cn(
@@ -12246,12 +12277,12 @@ var Badge = ({
 };
 
 // src/components/molecules/card.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Card({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       className: cn(
@@ -12266,7 +12297,7 @@ function CardHeader({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "cnc-px-6 cnc-pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "cnc-px-6 cnc-pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       className: cn(
@@ -12281,13 +12312,13 @@ function CardContent({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("cnc-px-6 cnc-py-2", className), ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("cnc-px-6 cnc-py-2", className), ...rest });
 }
 function CardFooter({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       className: cn(
@@ -12302,7 +12333,7 @@ function CardFooterItem({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       className: cn(
@@ -12316,7 +12347,7 @@ function CardFooterItem({
 
 // src/components/molecules/collapsible.tsx
 var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
@@ -12324,16 +12355,16 @@ var AnimatedCollapsibleContent = ({
   className,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CollapsibleContent2, { className: "cnc-collapsible-content", ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CollapsibleContent2, { className: "cnc-collapsible-content", ...rest });
 };
 
 // src/components/molecules/display/page-header.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function PageHeader({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "header",
     {
       className: cn(
@@ -12348,7 +12379,7 @@ function PageHeaderTitleContent({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
       className: cn(
@@ -12365,16 +12396,16 @@ function PageHeaderTitle({
   titleAs = "h1"
 }) {
   const ComponentTitle = titleAs;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ComponentTitle, { className: "cnc-text-2xl cnc-font-semibold cnc-text-brand-blue-600", children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "cnc-text-sm cnc-text-brand-gray-500", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ComponentTitle, { className: "cnc-text-2xl cnc-font-semibold cnc-text-brand-blue-600", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "cnc-text-sm cnc-text-brand-gray-500", children: description })
   ] });
 }
 function PageHeaderActionsContainer({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
       className: cn(
@@ -12386,14 +12417,14 @@ function PageHeaderActionsContainer({
   );
 }
 function Title2({ title, as: Component = "h1" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Component, { className: "cnc-text-[24px] cnc-text-[#1F2C4D] cnc-font-bold cnc-mt-2 cnc-mb-4 text-center md:cnc-text-[28px] md:cnc-text-left", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Component, { className: "cnc-text-[24px] cnc-text-[#1F2C4D] cnc-font-bold cnc-mt-2 cnc-mb-4 text-center md:cnc-text-[28px] md:cnc-text-left", children: title });
 }
 
 // src/components/molecules/forms/combobox.tsx
-var React79 = __toESM(require("react"));
+var React80 = __toESM(require("react"));
 
 // src/components/molecules/overlay/command.tsx
-var React77 = __toESM(require("react"));
+var React78 = __toESM(require("react"));
 
 // ../../node_modules/cmdk/dist/chunk-NZJY6EH4.mjs
 var U = 1;
@@ -12426,10 +12457,10 @@ function W(_, C, h) {
 var t = __toESM(require("react"), 1);
 
 // ../../node_modules/cmdk/node_modules/@radix-ui/react-primitive/dist/index.mjs
-var React75 = __toESM(require("react"), 1);
+var React76 = __toESM(require("react"), 1);
 var ReactDOM8 = __toESM(require("react-dom"), 1);
 var import_react_slot10 = require("@radix-ui/react-slot");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var NODES4 = [
   "a",
   "button",
@@ -12451,20 +12482,20 @@ var NODES4 = [
 ];
 var Primitive4 = NODES4.reduce((primitive, node) => {
   const Slot8 = (0, import_react_slot10.createSlot)(`Primitive.${node}`);
-  const Node2 = React75.forwardRef((props, forwardedRef) => {
+  const Node2 = React76.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot8 : node;
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
 
 // ../../node_modules/cmdk/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-var React76 = __toESM(require("react"), 1);
+var React77 = __toESM(require("react"), 1);
 function setRef4(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -12814,8 +12845,8 @@ function B2({ asChild: r2, children: o }, n) {
 var Te = { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0, 0, 0, 0)", whiteSpace: "nowrap", borderWidth: "0" };
 
 // src/components/molecules/overlay/command.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Command = React77.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var Command = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   _e,
   {
     ref,
@@ -12828,16 +12859,16 @@ var Command = React77.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = _e.displayName;
 var CommandDialog = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Dialog2, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DialogContent2, { className: "cnc-overflow-hidden cnc-p-0", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Command, { className: "cnc-[&_cmdk-group-heading]:cnc-px-2 cnc-[&_cmdk-group-heading]:cnc-font-medium cnc-[&_cmdk-group-heading]:cnc-text-muted-foreground cnc-[&_cmdk-group]:not([hidden])~[cmdk-group]:cnc-pt-0 cnc-[&_cmdk-group]:cnc-px-2 cnc-[&_cmdk-input-wrapper]_svg:cnc-h-5 cnc-[&_cmdk-input-wrapper]_svg:cnc-w-5 cnc-[&_cmdk-input]:cnc-h-12 cnc-[&_cmdk-item]:cnc-px-2 cnc-[&_cmdk-item]:cnc-py-3 cnc-[&_cmdk-item]_svg:cnc-h-5 cnc-[&_cmdk-item]_svg:cnc-w-5", children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Dialog2, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogContent2, { className: "cnc-overflow-hidden cnc-p-0", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Command, { className: "cnc-[&_cmdk-group-heading]:cnc-px-2 cnc-[&_cmdk-group-heading]:cnc-font-medium cnc-[&_cmdk-group-heading]:cnc-text-muted-foreground cnc-[&_cmdk-group]:not([hidden])~[cmdk-group]:cnc-pt-0 cnc-[&_cmdk-group]:cnc-px-2 cnc-[&_cmdk-input-wrapper]_svg:cnc-h-5 cnc-[&_cmdk-input-wrapper]_svg:cnc-w-5 cnc-[&_cmdk-input]:cnc-h-12 cnc-[&_cmdk-item]:cnc-px-2 cnc-[&_cmdk-item]:cnc-py-3 cnc-[&_cmdk-item]_svg:cnc-h-5 cnc-[&_cmdk-item]_svg:cnc-w-5", children }) }) });
 };
-var CommandInput = React77.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+var CommandInput = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
   "div",
   {
     className: "cnc-flex cnc-items-center cnc-border-b cnc-px-3",
     "cmdk-input-wrapper": "",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Search, { className: "cnc-mr-2 cnc-h-4 cnc-w-4 cnc-shrink-0 cnc-opacity-50" }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Search, { className: "cnc-mr-2 cnc-h-4 cnc-w-4 cnc-shrink-0 cnc-opacity-50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         _e.Input,
         {
           ref,
@@ -12852,7 +12883,7 @@ var CommandInput = React77.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandInput.displayName = _e.Input.displayName;
-var CommandList = React77.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var CommandList = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   _e.List,
   {
     ref,
@@ -12864,7 +12895,7 @@ var CommandList = React77.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = _e.List.displayName;
-var CommandEmpty = React77.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var CommandEmpty = React78.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   _e.Empty,
   {
     ref,
@@ -12873,7 +12904,7 @@ var CommandEmpty = React77.forwardRef((props, ref) => /* @__PURE__ */ (0, import
   }
 ));
 CommandEmpty.displayName = _e.Empty.displayName;
-var CommandGroup = React77.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var CommandGroup = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   _e.Group,
   {
     ref,
@@ -12885,7 +12916,7 @@ var CommandGroup = React77.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = _e.Group.displayName;
-var CommandSeparator = React77.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var CommandSeparator = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   _e.Separator,
   {
     ref,
@@ -12894,7 +12925,7 @@ var CommandSeparator = React77.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = _e.Separator.displayName;
-var CommandItem = React77.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+var CommandItem = React78.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
   _e.Item,
   {
     ref,
@@ -12910,7 +12941,7 @@ var CommandShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "span",
     {
       className: cn(
@@ -12924,11 +12955,11 @@ var CommandShortcut = ({
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/molecules/overlay/popover.tsx
-var React78 = __toESM(require("react"));
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var React79 = __toESM(require("react"));
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Popover3 = Root24;
 var PopoverTrigger3 = Trigger4;
-var PopoverContent3 = React78.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Portal6, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+var PopoverContent3 = React79.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Portal6, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   Content23,
   {
     ref,
@@ -12944,7 +12975,7 @@ var PopoverContent3 = React78.forwardRef(({ className, align = "center", sideOff
 PopoverContent3.displayName = Content23.displayName;
 
 // src/components/molecules/forms/combobox.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Combobox({
   options,
   placeholder = "",
@@ -12952,30 +12983,31 @@ function Combobox({
   onChange,
   value = ""
 }) {
-  const [open, setOpen] = React79.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Popover3, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PopoverTrigger3, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-      "button",
+  const [open, setOpen] = React80.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Popover3, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PopoverTrigger3, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      Button,
       {
+        variant: "outline",
         role: "combobox",
         "aria-expanded": open,
-        className: "cnc-h-10 cnc-px-4 cnc-py-2 cnc-inline-flex cnc-items-center cnc-justify-between cnc-border cnc-border-input cnc-text-brand-gray-200 cnc-bg-background cnc-shadow-sm hover:cnc-bg-brand-blue-50 hover:cnc-text-accent-foreground cnc-rounded-md cnc-text-sm cnc-font-medium cnc-ring-offset-background cnc-transition-colors focus-visible:cnc-outline-none focus-visible:cnc-ring-2 focus-visible:cnc-ring-ring focus-visible:cnc-ring-offset-2 disabled:cnc-pointer-events-none disabled:cnc-opacity-50 cnc-w-full",
+        className: "cnc-w-full cnc-justify-between",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "cnc-truncate cnc-flex-1 cnc-text-left", children: value ? options?.find((framework) => framework.value === value)?.label : placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChevronsUpDown, { className: "cnc-ml-2 cnc-h-4 cnc-w-4 cnc-shrink-0 cnc-opacity-50" })
+          value ? options?.find((framework) => framework.value === value)?.label : placeholder,
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChevronsUpDown, { className: "cnc-ml-2 cnc-h-4 cnc-w-4 cnc-shrink-0 cnc-opacity-50" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       PopoverContent3,
       {
         align: "start",
         className: "cnc-w-[--radix-popover-trigger-width] cnc-p-0",
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Command, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CommandInput, { placeholder: command?.placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(CommandList, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CommandEmpty, { children: command?.emptyMessage ?? "Nenhum item encontrado" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CommandGroup, { children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Command, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CommandInput, { placeholder: command?.placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(CommandList, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CommandEmpty, { children: command?.emptyMessage ?? "Nenhum item encontrado" }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(CommandGroup, { children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
               CommandItem,
               {
                 value: option.value,
@@ -12986,7 +13018,7 @@ function Combobox({
                 },
                 keywords: [option.value, option.label],
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     Check,
                     {
                       className: cn(
@@ -13016,6 +13048,7 @@ function Combobox({
   CardFooter,
   CardFooterItem,
   CardHeader,
+  Checkbox,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,