@tomo-inc/tomo-ui 0.0.11 → 0.0.13

package/dist/theme/components/listbox.mjs

@@ -0,0 +1,24 @@
+import "../chunk-YJLQTC7L.mjs";
+import {
+  menu,
+  menuItem,
+  menuSection
+} from "../chunk-CAM646RT.mjs";
+import "../chunk-CWYZ2GEH.mjs";
+import "../chunk-CT4RPJWF.mjs";
+import "../chunk-GQT3YUX3.mjs";
+import "../chunk-DOGZ47O4.mjs";
+import "../chunk-TX3FPB7D.mjs";
+import "../chunk-UFVD3L5A.mjs";
+import "../chunk-JGY6VQQQ.mjs";
+import "../chunk-6JJPIEK7.mjs";
+import "../chunk-POSTVCTR.mjs";
+import "../chunk-MPVWW3DX.mjs";
+import "../chunk-WH6SPIFG.mjs";
+import "../chunk-RUIUXVZ4.mjs";
+import "../chunk-GSRZWDGA.mjs";
+export {
+  menu as listbox,
+  menuItem as listboxItem,
+  menuSection as listboxSection
+};

package/dist/theme/components/menu.d.mts

@@ -0,0 +1,324 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+
+/**
+ * Menu wrapper **Tailwind Variants** component
+ *
+ * const classNames = menu({...})
+
+ */
+declare const menu: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            base?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            emptyContent?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            base?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            emptyContent?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+    emptyContent: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            base?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            emptyContent?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+    emptyContent: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    base: string;
+    list: string;
+    emptyContent: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * MenuItem wrapper **Tailwind Variants** component
+ *
+ * const {base, heading, indicator, trigger, leftIndicator, title, subtitle, content } = menuItem({...})
+ *
+ * @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 menuItem: 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: {};
+    };
+    showDivider: {
+        true: {
+            base: string[];
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    hasTitleTextChild: {
+        true: {
+            title: string;
+        };
+    };
+    hasDescriptionTextChild: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    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: {};
+    };
+    showDivider: {
+        true: {
+            base: string[];
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    hasTitleTextChild: {
+        true: {
+            title: string;
+        };
+    };
+    hasDescriptionTextChild: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    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: {};
+    };
+    showDivider: {
+        true: {
+            base: string[];
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    hasTitleTextChild: {
+        true: {
+            title: string;
+        };
+    };
+    hasDescriptionTextChild: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string;
+    title: string;
+    description: string[];
+    selectedIcon: string[];
+    shortcut: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Menu section wrapper **Tailwind Variants** component
+ *
+ * const { base, section, heading } = menuSection({...})
+ *
+ * @example
+ * <div className={base()}>
+ *  <button className={trigger()} aria-expanded="true/false">your trigger</button>
+ *  <div className={section()}>
+ *    // menu content
+ *    <span className={arrow()} data-placement="top/bottom/left/right..." /> // arrow
+ *  </div>
+ * </div>
+ */
+declare const menuSection: 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>>;
+type MenuVariantProps = VariantProps<typeof menu>;
+type MenuSlots = keyof ReturnType<typeof menu>;
+type MenuSectionVariantProps = VariantProps<typeof menuSection>;
+type MenuSectionSlots = keyof ReturnType<typeof menuSection>;
+type MenuItemVariantProps = VariantProps<typeof menuItem>;
+type MenuItemSlots = keyof ReturnType<typeof menuItem>;
+
+export { type MenuItemSlots, type MenuItemVariantProps, type MenuSectionSlots, type MenuSectionVariantProps, type MenuSlots, type MenuVariantProps, menu, menuItem, menuSection };

package/dist/theme/components/menu.d.ts

@@ -0,0 +1,324 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+
+/**
+ * Menu wrapper **Tailwind Variants** component
+ *
+ * const classNames = menu({...})
+
+ */
+declare const menu: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            base?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            emptyContent?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            base?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            emptyContent?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+    emptyContent: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            base?: tailwind_merge.ClassNameValue;
+            list?: tailwind_merge.ClassNameValue;
+            emptyContent?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+    emptyContent: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    base: string;
+    list: string;
+    emptyContent: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * MenuItem wrapper **Tailwind Variants** component
+ *
+ * const {base, heading, indicator, trigger, leftIndicator, title, subtitle, content } = menuItem({...})
+ *
+ * @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 menuItem: 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: {};
+    };
+    showDivider: {
+        true: {
+            base: string[];
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    hasTitleTextChild: {
+        true: {
+            title: string;
+        };
+    };
+    hasDescriptionTextChild: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    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: {};
+    };
+    showDivider: {
+        true: {
+            base: string[];
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    hasTitleTextChild: {
+        true: {
+            title: string;
+        };
+    };
+    hasDescriptionTextChild: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    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: {};
+    };
+    showDivider: {
+        true: {
+            base: string[];
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    disableAnimation: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    hasTitleTextChild: {
+        true: {
+            title: string;
+        };
+    };
+    hasDescriptionTextChild: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string;
+    title: string;
+    description: string[];
+    selectedIcon: string[];
+    shortcut: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Menu section wrapper **Tailwind Variants** component
+ *
+ * const { base, section, heading } = menuSection({...})
+ *
+ * @example
+ * <div className={base()}>
+ *  <button className={trigger()} aria-expanded="true/false">your trigger</button>
+ *  <div className={section()}>
+ *    // menu content
+ *    <span className={arrow()} data-placement="top/bottom/left/right..." /> // arrow
+ *  </div>
+ * </div>
+ */
+declare const menuSection: 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>>;
+type MenuVariantProps = VariantProps<typeof menu>;
+type MenuSlots = keyof ReturnType<typeof menu>;
+type MenuSectionVariantProps = VariantProps<typeof menuSection>;
+type MenuSectionSlots = keyof ReturnType<typeof menuSection>;
+type MenuItemVariantProps = VariantProps<typeof menuItem>;
+type MenuItemSlots = keyof ReturnType<typeof menuItem>;
+
+export { type MenuItemSlots, type MenuItemVariantProps, type MenuSectionSlots, type MenuSectionVariantProps, type MenuSlots, type MenuVariantProps, menu, menuItem, menuSection };