@sytechui/theme 3.0.2 → 3.0.3

package/dist/components/dropdown.d.mts

@@ -0,0 +1,247 @@
+import * as tailwind_merge from 'tailwind-merge';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+/**
+ * Dropdown wrapper **Tailwind Variants** component
+ *
+ * const { base, menu } = dropdown({...})
+ *
+ * @example
+ * <div>
+ *  <button className={trigger()} aria-expanded="true/false">your trigger</button>
+ *  <div className={base()}>
+ *    // dropdown content
+ *    <span className={arrow()} data-placement="top/bottom/left/right..." /> // arrow
+ *  </div>
+ * </div>
+ */
+declare const dropdown: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * DropdownItem wrapper **Tailwind Variants** component
+ *
+ * const {base, heading, indicator, trigger, leftIndicator, title, subtitle, content } = dropdownItem({...})
+ *
+ * @example
+ * <div className={base())} data-focus-visible={boolean} data-hover={boolean}>
+ *   <div className={heading())}>
+ *    <button className={trigger())}>
+ *      <div className={leftIndicator()}>
+ *         // 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 dropdownItem: tailwind_variants.TVReturnType<{
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        light: {
+            base: string;
+        };
+        faded: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        shadow: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    wrapper: string;
+    title: string;
+    description: string[];
+    selectedIcon: string[];
+    shortcut: string[];
+}, undefined, {
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        light: {
+            base: string;
+        };
+        faded: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        shadow: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    wrapper: string;
+    title: string;
+    description: string[];
+    selectedIcon: string[];
+    shortcut: string[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        light: {
+            base: string;
+        };
+        faded: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        shadow: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    wrapper: string;
+    title: string;
+    description: string[];
+    selectedIcon: string[];
+    shortcut: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Dropdown wrapper **Tailwind Variants** component
+ *
+ * const { base, section, heading } = dropdownSection({...})
+ *
+ * @example
+ * <div className={base()}>
+ *  <button className={trigger()} aria-expanded="true/false">your trigger</button>
+ *  <div className={section()}>
+ *    // dropdown content
+ *    <span className={arrow()} data-placement="top/bottom/left/right..." /> // arrow
+ *  </div>
+ * </div>
+ */
+declare const dropdownSection: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            divider?: tailwind_merge.ClassNameValue;
+            base?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            heading?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            divider?: tailwind_merge.ClassNameValue;
+            base?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            heading?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    heading: string;
+    group: string;
+    divider: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            divider?: tailwind_merge.ClassNameValue;
+            base?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            heading?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    heading: string;
+    group: string;
+    divider: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    base: string;
+    heading: string;
+    group: string;
+    divider: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Dropdown Menu wrapper **Tailwind Variants** component
+ *
+ * const classNames = dropdownMenu({...})
+
+ */
+declare const dropdownMenu: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "w-full flex flex-col gap-0.5 p-1", {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "w-full flex flex-col gap-0.5 p-1", unknown, unknown, undefined>>;
+type DropdownSectionVariantProps = VariantProps<typeof dropdownSection>;
+type DropdownSectionSlots = keyof ReturnType<typeof dropdownSection>;
+type DropdownItemVariantProps = VariantProps<typeof dropdownItem>;
+type DropdownItemSlots = keyof ReturnType<typeof dropdownItem>;
+
+export { type DropdownItemSlots, type DropdownItemVariantProps, type DropdownSectionSlots, type DropdownSectionVariantProps, dropdown, dropdownItem, dropdownMenu, dropdownSection };

package/dist/components/dropdown.d.ts

@@ -0,0 +1,247 @@
+import * as tailwind_merge from 'tailwind-merge';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+/**
+ * Dropdown wrapper **Tailwind Variants** component
+ *
+ * const { base, menu } = dropdown({...})
+ *
+ * @example
+ * <div>
+ *  <button className={trigger()} aria-expanded="true/false">your trigger</button>
+ *  <div className={base()}>
+ *    // dropdown content
+ *    <span className={arrow()} data-placement="top/bottom/left/right..." /> // arrow
+ *  </div>
+ * </div>
+ */
+declare const dropdown: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * DropdownItem wrapper **Tailwind Variants** component
+ *
+ * const {base, heading, indicator, trigger, leftIndicator, title, subtitle, content } = dropdownItem({...})
+ *
+ * @example
+ * <div className={base())} data-focus-visible={boolean} data-hover={boolean}>
+ *   <div className={heading())}>
+ *    <button className={trigger())}>
+ *      <div className={leftIndicator()}>
+ *         // 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 dropdownItem: tailwind_variants.TVReturnType<{
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        light: {
+            base: string;
+        };
+        faded: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        shadow: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    wrapper: string;
+    title: string;
+    description: string[];
+    selectedIcon: string[];
+    shortcut: string[];
+}, undefined, {
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        light: {
+            base: string;
+        };
+        faded: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        shadow: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    wrapper: string;
+    title: string;
+    description: string[];
+    selectedIcon: string[];
+    shortcut: string[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        light: {
+            base: string;
+        };
+        faded: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        shadow: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    wrapper: string;
+    title: string;
+    description: string[];
+    selectedIcon: string[];
+    shortcut: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Dropdown wrapper **Tailwind Variants** component
+ *
+ * const { base, section, heading } = dropdownSection({...})
+ *
+ * @example
+ * <div className={base()}>
+ *  <button className={trigger()} aria-expanded="true/false">your trigger</button>
+ *  <div className={section()}>
+ *    // dropdown content
+ *    <span className={arrow()} data-placement="top/bottom/left/right..." /> // arrow
+ *  </div>
+ * </div>
+ */
+declare const dropdownSection: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            divider?: tailwind_merge.ClassNameValue;
+            base?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            heading?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            divider?: tailwind_merge.ClassNameValue;
+            base?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            heading?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    heading: string;
+    group: string;
+    divider: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            divider?: tailwind_merge.ClassNameValue;
+            base?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            heading?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    heading: string;
+    group: string;
+    divider: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    base: string;
+    heading: string;
+    group: string;
+    divider: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Dropdown Menu wrapper **Tailwind Variants** component
+ *
+ * const classNames = dropdownMenu({...})
+
+ */
+declare const dropdownMenu: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "w-full flex flex-col gap-0.5 p-1", {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "w-full flex flex-col gap-0.5 p-1", unknown, unknown, undefined>>;
+type DropdownSectionVariantProps = VariantProps<typeof dropdownSection>;
+type DropdownSectionSlots = keyof ReturnType<typeof dropdownSection>;
+type DropdownItemVariantProps = VariantProps<typeof dropdownItem>;
+type DropdownItemSlots = keyof ReturnType<typeof dropdownItem>;
+
+export { type DropdownItemSlots, type DropdownItemVariantProps, type DropdownSectionSlots, type DropdownSectionVariantProps, dropdown, dropdownItem, dropdownMenu, dropdownSection };

package/dist/components/dropdown.mjs

@@ -3,39 +3,39 @@ import {
   dropdownItem,
   dropdownMenu,
   dropdownSection
-} from "../chunk-CV2E4DI2.mjs";
+} from "../chunk-FUQEL335.mjs";
+import "../chunk-XWHXIFLL.mjs";
+import "../chunk-HF2LJVZX.mjs";
+import "../chunk-XV7LJG6E.mjs";
+import "../chunk-IVAVJ7ZU.mjs";
+import "../chunk-D2TQCDY4.mjs";
+import "../chunk-APF6RSVD.mjs";
+import "../chunk-M4FWEMJZ.mjs";
+import "../chunk-OC45BUIA.mjs";
+import "../chunk-4LAQM2VM.mjs";
+import "../chunk-QQZDCYMA.mjs";
+import "../chunk-FPG5J5ZJ.mjs";
+import "../chunk-U4D7XSGV.mjs";
+import "../chunk-L26ZWPVZ.mjs";
+import "../chunk-AAPQ76Q7.mjs";
+import "../chunk-EIZCYQZJ.mjs";
+import "../chunk-IFDUGF3P.mjs";
+import "../chunk-ATGLNP24.mjs";
+import "../chunk-UL4VFH3Z.mjs";
+import "../chunk-IURX3VEE.mjs";
 import "../chunk-GQT3YUX3.mjs";
-import "../chunk-7ARJ2TQM.mjs";
-import "../chunk-W37Q6YFS.mjs";
-import "../chunk-BF4542X6.mjs";
-import "../chunk-47BB6GL3.mjs";
-import "../chunk-WH4ODSEM.mjs";
-import "../chunk-XBJNS5SU.mjs";
-import "../chunk-OSP4OLTO.mjs";
-import "../chunk-4N2PLITL.mjs";
-import "../chunk-EZ47UJPD.mjs";
-import "../chunk-5DJU5KUL.mjs";
-import "../chunk-2QZDAFQ3.mjs";
-import "../chunk-MTBQ5EO5.mjs";
-import "../chunk-AL5UNXQI.mjs";
-import "../chunk-USGOG5QI.mjs";
-import "../chunk-AGSAOCCR.mjs";
-import "../chunk-ZWG2GMCI.mjs";
-import "../chunk-P5HLCB43.mjs";
-import "../chunk-PY74IHS4.mjs";
-import "../chunk-I5YZBAB3.mjs";
-import "../chunk-KKEJLP4U.mjs";
-import "../chunk-ECD4ABCS.mjs";
-import "../chunk-2TFOWOJL.mjs";
-import "../chunk-D2XMP2NC.mjs";
+import "../chunk-HFD73SWH.mjs";
+import "../chunk-DFZLOLJU.mjs";
+import "../chunk-Z2UCLPEC.mjs";
 import "../chunk-ZHIADCEL.mjs";
-import "../chunk-ROFEKAS6.mjs";
+import "../chunk-3C7AZEID.mjs";
+import "../chunk-FJOYYPB2.mjs";
+import "../chunk-RUIUXVZ4.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.mjs";
 import "../chunk-7FAFG773.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
+import "../chunk-D2XMP2NC.mjs";
 import "../chunk-WQEDQHKX.mjs";
 import "../chunk-CPSLANMP.mjs";
 import "../chunk-FFKHVGFX.mjs";

package/dist/components/form.d.mts

@@ -0,0 +1,19 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+/**
+ * Card **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const classNames = form({...})
+ *
+ * <form className={base()}>
+ *    // form content
+ * </form>
+ * ```
+ */
+declare const form: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "flex flex-col gap-2 items-start", {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "flex flex-col gap-2 items-start", unknown, unknown, undefined>>;
+type FormVariantProps = VariantProps<typeof form>;
+
+export { type FormVariantProps, form };

package/dist/components/form.d.ts

@@ -0,0 +1,19 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+/**
+ * Card **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const classNames = form({...})
+ *
+ * <form className={base()}>
+ *    // form content
+ * </form>
+ * ```
+ */
+declare const form: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "flex flex-col gap-2 items-start", {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "flex flex-col gap-2 items-start", unknown, unknown, undefined>>;
+type FormVariantProps = VariantProps<typeof form>;
+
+export { type FormVariantProps, form };

package/dist/components/form.mjs

@@ -1,15 +1,15 @@
 import {
   form
-} from "../chunk-USGOG5QI.mjs";
-import "../chunk-KKEJLP4U.mjs";
-import "../chunk-ECD4ABCS.mjs";
-import "../chunk-ROFEKAS6.mjs";
+} from "../chunk-IFDUGF3P.mjs";
+import "../chunk-IURX3VEE.mjs";
+import "../chunk-DFZLOLJU.mjs";
+import "../chunk-3C7AZEID.mjs";
+import "../chunk-FJOYYPB2.mjs";
+import "../chunk-RUIUXVZ4.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.mjs";
 import "../chunk-7FAFG773.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
 export {
   form
 };