@nextui-org/theme 0.0.0-dev-v2-20230517011642 → 0.0.0-dev-v2-20230518012432

package/dist/{chunk-XSFH4S4Y.mjs → chunk-7CTZKPXG.mjs}

@@ -1,12 +1,30 @@
-// src/components/accordion-item.ts
+// src/components/accordion.ts
 import { tv } from "tailwind-variants";
+var accordion = tv({
+  base: "px-2",
+  variants: {
+    variant: {
+      light: "",
+      shadow: "px-4 shadow-lg rounded-xl bg-background dark:bg-content1 border border-neutral-100",
+      bordered: "px-4 border border-neutral rounded-lg",
+      splitted: "group is-splitted flex flex-col gap-2"
+    },
+    fullWidth: {
+      true: "w-full"
+    }
+  },
+  defaultVariants: {
+    variant: "light",
+    fullWidth: true
+  }
+});
 var accordionItem = tv({
   slots: {
     base: [
-      "py-2",
       "border-neutral",
       "[&:not(:last-of-type)]:border-b",
       "group-[.is-splitted]:px-4",
+      "group-[.is-splitted]:bg-background",
       "dark:group-[.is-splitted]:bg-content1",
       "group-[.is-splitted]:shadow-lg",
       "group-[.is-splitted]:rounded-lg",
@@ -15,7 +33,7 @@ var accordionItem = tv({
     ],
     heading: "",
     trigger: [
-      "py-2 flex w-full gap-3 outline-none items-center",
+      "flex py-4 w-full h-full gap-3 outline-none items-center",
       "data-[focus-visible=true]:outline-none",
       "data-[focus-visible=true]:ring-2",
       "data-[focus-visible=true]:ring-primary",
@@ -33,8 +51,7 @@ var accordionItem = tv({
   variants: {
     isCompact: {
       true: {
-        base: "py-1",
-        trigger: "py-1",
+        trigger: "py-2",
         title: "text-base",
         subtitle: "text-xs",
         indicator: "text-base",
@@ -85,5 +102,6 @@ var accordionItem = tv({
 });
 
 export {
+  accordion,
   accordionItem
 };

package/dist/{chunk-Z6VEZVD6.mjs → chunk-7EC2WH7W.mjs}

@@ -1,5 +1,18 @@
-// src/components/dropdown-item.ts
+// src/components/dropdown.ts
 import { tv } from "tailwind-variants";
+var dropdown = tv({
+  base: [
+    "w-full",
+    "p-1",
+    "min-w-[200px]",
+    "shadow",
+    "shadow-lg",
+    "bg-white",
+    "dark:bg-content1",
+    "border",
+    "border-neutral-100"
+  ]
+});
 var dropdownItem = tv({
   slots: {
     base: [
@@ -354,7 +367,35 @@ var dropdownItem = tv({
     }
   ]
 });
+var dropdownSection = tv({
+  slots: {
+    section: "relative mb-2",
+    heading: "pl-1 text-xs text-neutral-500"
+  },
+  variants: {
+    showDivider: {
+      true: {
+        heading: [
+          "mt-2",
+          "before-content-['']",
+          "before:absolute",
+          "before:-top-1",
+          "before:left-0",
+          "before:right-0",
+          "before:h-px",
+          "before:bg-neutral-200"
+        ]
+      }
+    }
+  }
+});
+var dropdownMenu = tv({
+  base: "w-full flex flex-col p-1"
+});
 
 export {
-  dropdownItem
+  dropdown,
+  dropdownItem,
+  dropdownSection,
+  dropdownMenu
 };

package/dist/{chunk-7EKGN7JP.mjs → chunk-B2N536X5.mjs}

@@ -151,7 +151,15 @@ var checkbox = tv({
     disableAnimation: false
   }
 });
+var checkboxGroup = tv({
+  slots: {
+    base: "relative flex flex-col gap-2",
+    label: "relative text-neutral-500",
+    wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row "
+  }
+});
 
 export {
-  checkbox
+  checkbox,
+  checkboxGroup
 };

package/dist/{chunk-35A3FHL7.mjs → chunk-HAR22HFA.mjs}

@@ -384,7 +384,19 @@ var button = tv({
     }
   ]
 });
+var buttonGroup = tv({
+  base: "inline-flex items-center justify-center h-auto",
+  variants: {
+    fullWidth: {
+      true: "w-full"
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
 
 export {
-  button
+  button,
+  buttonGroup
 };

package/dist/{chunk-JCRQ3XNM.mjs → chunk-NFNV2TXA.mjs}

@@ -7,7 +7,6 @@ var card = tv({
       "flex-col",
       "relative",
       "overflow-hidden",
-      "w-full",
       "height-auto",
       "outline-none",
       "text-foreground",
@@ -26,10 +25,10 @@ var card = tv({
       "flex",
       "p-3",
       "z-10",
+      "w-full",
       "justify-start",
       "items-center",
       "shrink-0",
-      "w-full",
       "overflow-inherit",
       "color-inherit",
       "subpixel-antialiased"
@@ -37,12 +36,13 @@ var card = tv({
     body: [
       "relative",
       "flex",
+      "flex-1",
+      "w-full",
       "p-5",
       "flex-auto",
       "flex-col",
       "place-content-inherit",
       "align-items-inherit",
-      "w-full",
       "h-auto",
       "break-words",
       "text-left",
@@ -51,9 +51,9 @@ var card = tv({
     ],
     footer: [
       "p-3",
-      "w-full",
       "h-auto",
       "flex",
+      "w-full",
       "items-center",
       "overflow-hidden",
       "color-inherit",

package/dist/{chunk-OZPCO5UB.mjs → chunk-WLLBJIBU.mjs}

@@ -160,7 +160,15 @@ var radio = tv({
     disableAnimation: false
   }
 });
+var radioGroup = tv({
+  slots: {
+    base: "relative flex flex-col gap-2",
+    label: "relative text-neutral-500",
+    wrapper: "flex flex-col flex-wrap gap-2 data-[orientation=horizontal]:flex-row "
+  }
+});
 
 export {
-  radio
+  radio,
+  radioGroup
 };

package/dist/{chunk-74YO36XH.mjs → chunk-Y43NAEAT.mjs}

@@ -196,7 +196,16 @@ var avatar = tv({
     }
   ]
 });
+var avatarGroup = tv({
+  base: "flex items-center justify-center h-auto w-max-content",
+  variants: {
+    isGrid: {
+      true: "inline-grid grid-cols-4 gap-3"
+    }
+  }
+});
 
 export {
-  avatar
+  avatar,
+  avatarGroup
 };

package/dist/components/accordion.d.ts

@@ -5,26 +5,151 @@ import * as tailwind_variants_dist_config from 'tailwind-variants/dist/config';
 /**
  * Accordion wrapper **Tailwind Variants** component
  *
- * const classNames = accordion({...})
+ * const styles = accordion({...})
  *
  * @example
- * <div role="group" className={classNames())}>
- *   // avatar elements
+ * <div role="group" className={styles())}>
+ *   // accordion elements
  * </div>
  */
 declare const accordion: tailwind_variants.TVReturnType<{
     variant: {
+        light: string;
         shadow: string;
         bordered: string;
         splitted: string;
     };
+    fullWidth: {
+        true: string;
+    };
 }, unknown, undefined, undefined, "px-2", tailwind_variants_dist_config.TVConfig<{
     variant: {
+        light: string;
         shadow: string;
         bordered: string;
         splitted: string;
     };
+    fullWidth: {
+        true: string;
+    };
+}, unknown>>;
+/**
+ * AccordionItem wrapper **Tailwind Variants** component
+ *
+ * const {base, heading, indicator, trigger, startContent, title, subtitle, content } = accordionItem({...})
+ *
+ * @example
+ * <div className={base())}>
+ *   <div className={heading())}>
+ *    <button className={trigger())}>
+ *      <div className={startContent()}>
+ *         // content
+ *      </div>
+ *      <div className={titleWrapper()}>
+ *        <h3 className={title())}>Title</h3>
+ *        <span className={subtitle())}>Subtitle</span>
+ *      </div>
+ *      <span className={indicator())}>Indicator</span>
+ *    </button>
+ *  </div>
+ *  <div className={content())}>Content</div>
+ * </div>
+ */
+declare const accordionItem: tailwind_variants.TVReturnType<{
+    isCompact: {
+        true: {
+            trigger: string;
+            title: string;
+            subtitle: string;
+            indicator: string;
+            content: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    hideDivider: {
+        true: {
+            base: string;
+        };
+    };
+    hideIndicator: {
+        true: {
+            indicator: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            content: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+    disableIndicatorAnimation: {
+        true: {
+            indicator: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+}, unknown, {
+    base: string[];
+    heading: string;
+    trigger: string[];
+    startContent: string;
+    indicator: string;
+    titleWrapper: string;
+    title: string;
+    subtitle: string;
+    content: string;
+}, undefined, undefined, tailwind_variants_dist_config.TVConfig<{
+    isCompact: {
+        true: {
+            trigger: string;
+            title: string;
+            subtitle: string;
+            indicator: string;
+            content: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    hideDivider: {
+        true: {
+            base: string;
+        };
+    };
+    hideIndicator: {
+        true: {
+            indicator: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            content: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
+    disableIndicatorAnimation: {
+        true: {
+            indicator: string;
+        };
+        false: {
+            indicator: string;
+        };
+    };
 }, unknown>>;
 type AccordionGroupVariantProps = VariantProps<typeof accordion>;
+type AccordionItemVariantProps = VariantProps<typeof accordionItem>;
+type AccordionItemSlots = keyof ReturnType<typeof accordionItem>;
 
-export { AccordionGroupVariantProps, accordion };
+export { AccordionGroupVariantProps, AccordionItemSlots, AccordionItemVariantProps, accordion, accordionItem };

package/dist/components/accordion.js

@@ -20,7 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/accordion.ts
 var accordion_exports = {};
 __export(accordion_exports, {
-  accordion: () => accordion
+  accordion: () => accordion,
+  accordionItem: () => accordionItem
 });
 module.exports = __toCommonJS(accordion_exports);
 var import_tailwind_variants = require("tailwind-variants");
@@ -28,13 +29,104 @@ var accordion = (0, import_tailwind_variants.tv)({
   base: "px-2",
   variants: {
     variant: {
-      shadow: "px-4 shadow-lg rounded-xl dark:bg-content1 border border-neutral-100",
+      light: "",
+      shadow: "px-4 shadow-lg rounded-xl bg-background dark:bg-content1 border border-neutral-100",
       bordered: "px-4 border border-neutral rounded-lg",
       splitted: "group is-splitted flex flex-col gap-2"
+    },
+    fullWidth: {
+      true: "w-full"
     }
+  },
+  defaultVariants: {
+    variant: "light",
+    fullWidth: true
+  }
+});
+var accordionItem = (0, import_tailwind_variants.tv)({
+  slots: {
+    base: [
+      "border-neutral",
+      "[&:not(:last-of-type)]:border-b",
+      "group-[.is-splitted]:px-4",
+      "group-[.is-splitted]:bg-background",
+      "dark:group-[.is-splitted]:bg-content1",
+      "group-[.is-splitted]:shadow-lg",
+      "group-[.is-splitted]:rounded-lg",
+      "group-[.is-splitted]:border",
+      "group-[.is-splitted]:border-neutral-100"
+    ],
+    heading: "",
+    trigger: [
+      "flex py-4 w-full h-full gap-3 outline-none items-center",
+      "data-[focus-visible=true]:outline-none",
+      "data-[focus-visible=true]:ring-2",
+      "data-[focus-visible=true]:ring-primary",
+      "data-[focus-visible=true]:ring-offset-2",
+      "data-[focus-visible=true]:ring-offset-background",
+      "data-[focus-visible=true]:dark:ring-offset-background-dark"
+    ],
+    startContent: "flex-shrink-0",
+    indicator: "text-neutral-400",
+    titleWrapper: "flex-1 flex flex-col text-left",
+    title: "text-foreground text-lg",
+    subtitle: "text-sm text-neutral-500 font-normal",
+    content: "py-2"
+  },
+  variants: {
+    isCompact: {
+      true: {
+        trigger: "py-2",
+        title: "text-base",
+        subtitle: "text-xs",
+        indicator: "text-base",
+        content: "py-1"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-50 pointer-events-none"
+      }
+    },
+    hideDivider: {
+      true: {
+        base: "!border-b-0"
+      }
+    },
+    hideIndicator: {
+      true: {
+        indicator: "hidden"
+      }
+    },
+    disableAnimation: {
+      true: {
+        content: "hidden data-[open=true]:block"
+      },
+      false: {
+        indicator: "transition-transform"
+      }
+    },
+    disableIndicatorAnimation: {
+      true: {
+        indicator: "transition-none"
+      },
+      false: {
+        indicator: "rotate-0 data-[open=true]:-rotate-90"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    radius: "lg",
+    isDisabled: false,
+    hideDivider: false,
+    hideIndicator: false,
+    disableAnimation: false,
+    disableIndicatorAnimation: false
   }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  accordion
+  accordion,
+  accordionItem
 });

package/dist/components/accordion.mjs

@@ -1,6 +1,8 @@
 import {
-  accordion
-} from "../chunk-YYBLBQIV.mjs";
+  accordion,
+  accordionItem
+} from "../chunk-7CTZKPXG.mjs";
 export {
-  accordion
+  accordion,
+  accordionItem
 };

package/dist/components/avatar.d.ts

@@ -195,7 +195,27 @@ declare const avatar: tailwind_variants.TVReturnType<{
         };
     };
 }, unknown>>;
+/**
+ * AvatarGroup wrapper **Tailwind Variants** component
+ *
+ * const classNames = avatarGroup({...})
+ *
+ * @example
+ * <div role="group" className={classNames())}>
+ *   // avatar elements
+ * </div>
+ */
+declare const avatarGroup: tailwind_variants.TVReturnType<{
+    isGrid: {
+        true: string;
+    };
+}, unknown, undefined, undefined, "flex items-center justify-center h-auto w-max-content", tailwind_variants_dist_config.TVConfig<{
+    isGrid: {
+        true: string;
+    };
+}, unknown>>;
+type AvatarGroupVariantProps = VariantProps<typeof avatarGroup>;
 type AvatarVariantProps = VariantProps<typeof avatar>;
 type AvatarSlots = keyof ReturnType<typeof avatar>;
 
-export { AvatarSlots, AvatarVariantProps, avatar };
+export { AvatarGroupVariantProps, AvatarSlots, AvatarVariantProps, avatar, avatarGroup };

package/dist/components/avatar.js

@@ -20,7 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/avatar.ts
 var avatar_exports = {};
 __export(avatar_exports, {
-  avatar: () => avatar
+  avatar: () => avatar,
+  avatarGroup: () => avatarGroup
 });
 module.exports = __toCommonJS(avatar_exports);
 var import_tailwind_variants = require("tailwind-variants");
@@ -298,7 +299,16 @@ var avatar = (0, import_tailwind_variants.tv)({
     }
   ]
 });
+var avatarGroup = (0, import_tailwind_variants.tv)({
+  base: "flex items-center justify-center h-auto w-max-content",
+  variants: {
+    isGrid: {
+      true: "inline-grid grid-cols-4 gap-3"
+    }
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  avatar
+  avatar,
+  avatarGroup
 });

package/dist/components/avatar.mjs

@@ -1,10 +1,12 @@
 import {
-  avatar
-} from "../chunk-74YO36XH.mjs";
+  avatar,
+  avatarGroup
+} from "../chunk-Y43NAEAT.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-RO3WUCFF.mjs";
 import "../chunk-INZK6TTL.mjs";
 export {
-  avatar
+  avatar,
+  avatarGroup
 };

package/dist/components/button.d.ts

@@ -131,6 +131,26 @@ declare const button: tailwind_variants.TVReturnType<{
         false: string;
     };
 }, unknown>>;
+/**
+ * ButtonGroup wrapper **Tailwind Variants** component
+ *
+ * const classNames = buttonGroup({...})
+ *
+ * @example
+ * <div role="group" className={classNames())}>
+ *   // button elements
+ * </div>
+ */
+declare const buttonGroup: tailwind_variants.TVReturnType<{
+    fullWidth: {
+        true: string;
+    };
+}, unknown, undefined, undefined, "inline-flex items-center justify-center h-auto", tailwind_variants_dist_config.TVConfig<{
+    fullWidth: {
+        true: string;
+    };
+}, unknown>>;
+type ButtonGroupVariantProps = VariantProps<typeof buttonGroup>;
 type ButtonVariantProps = VariantProps<typeof button>;
 
-export { ButtonVariantProps, button };
+export { ButtonGroupVariantProps, ButtonVariantProps, button, buttonGroup };

package/dist/components/button.js

@@ -20,7 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/button.ts
 var button_exports = {};
 __export(button_exports, {
-  button: () => button
+  button: () => button,
+  buttonGroup: () => buttonGroup
 });
 module.exports = __toCommonJS(button_exports);
 var import_tailwind_variants = require("tailwind-variants");
@@ -480,7 +481,19 @@ var button = (0, import_tailwind_variants.tv)({
     }
   ]
 });
+var buttonGroup = (0, import_tailwind_variants.tv)({
+  base: "inline-flex items-center justify-center h-auto",
+  variants: {
+    fullWidth: {
+      true: "w-full"
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  button
+  button,
+  buttonGroup
 });

package/dist/components/button.mjs

@@ -1,10 +1,12 @@
 import {
-  button
-} from "../chunk-35A3FHL7.mjs";
+  button,
+  buttonGroup
+} from "../chunk-HAR22HFA.mjs";
 import "../chunk-CMYR6AOY.mjs";
 import "../chunk-K7LK7NCE.mjs";
 import "../chunk-RO3WUCFF.mjs";
 import "../chunk-INZK6TTL.mjs";
 export {
-  button
+  button,
+  buttonGroup
 };