@sytechui/theme 3.0.2 → 3.0.3

package/dist/components/tabs.d.mts

@@ -0,0 +1,413 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+
+/**
+ * Tabs wrapper **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base, tabList, tab, panel} = tabs({...})
+ *
+ * <div className={base())}>
+ *  <div className={tabList())}>
+ *    <div className={tab())} data-selected="boolean">Tab 1</div>
+ *    <div className={tab())} data-selected="boolean" data-disabled="boolean">Tab 2</div>
+ *    <div className={tab())} data-selected="boolean">Tab 3</div>
+ *  </div>
+ *  <div className={panel())}>Selected panel</div>
+ * </div>
+ * ```
+ */
+declare const tabs: tailwind_variants.TVReturnType<{
+    variant: {
+        solid: {};
+        light: {
+            base: string;
+        };
+        underlined: {
+            base: string;
+            cursor: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        md: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        lg: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+    };
+    radius: {
+        none: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        sm: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        md: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        lg: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        full: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            scroller: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            tabList: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            tab: string;
+            tabContent: string;
+        };
+    };
+    placement: {
+        top: {
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        start: {
+            scroller: string;
+            tabList: string;
+            panel: string;
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        end: {
+            scroller: string;
+            tabList: string;
+            panel: string;
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        bottom: {
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+    };
+}, {
+    base: string;
+    scroller: string;
+    tabList: string[];
+    scrollPrev: string[];
+    scrollNext: string[];
+    tab: string[];
+    tabContent: string[];
+    cursor: string[];
+    panel: string[];
+    tabWrapper: never[];
+}, undefined, {
+    variant: {
+        solid: {};
+        light: {
+            base: string;
+        };
+        underlined: {
+            base: string;
+            cursor: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        md: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        lg: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+    };
+    radius: {
+        none: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        sm: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        md: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        lg: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        full: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            scroller: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            tabList: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            tab: string;
+            tabContent: string;
+        };
+    };
+    placement: {
+        top: {
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        start: {
+            scroller: string;
+            tabList: string;
+            panel: string;
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        end: {
+            scroller: string;
+            tabList: string;
+            panel: string;
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        bottom: {
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+    };
+}, {
+    base: string;
+    scroller: string;
+    tabList: string[];
+    scrollPrev: string[];
+    scrollNext: string[];
+    tab: string[];
+    tabContent: string[];
+    cursor: string[];
+    panel: string[];
+    tabWrapper: never[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        solid: {};
+        light: {
+            base: string;
+        };
+        underlined: {
+            base: string;
+            cursor: string;
+        };
+        bordered: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    size: {
+        sm: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        md: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        lg: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+    };
+    radius: {
+        none: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        sm: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        md: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        lg: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+        full: {
+            base: string;
+            tabList: string;
+            tab: string;
+            cursor: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+            scroller: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            tabList: string;
+        };
+    };
+    disableAnimation: {
+        true: {
+            tab: string;
+            tabContent: string;
+        };
+    };
+    placement: {
+        top: {
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        start: {
+            scroller: string;
+            tabList: string;
+            panel: string;
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        end: {
+            scroller: string;
+            tabList: string;
+            panel: string;
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+        bottom: {
+            tabWrapper: string;
+            scrollPrev: string;
+            scrollNext: string;
+        };
+    };
+}, {
+    base: string;
+    scroller: string;
+    tabList: string[];
+    scrollPrev: string[];
+    scrollNext: string[];
+    tab: string[];
+    tabContent: string[];
+    cursor: string[];
+    panel: string[];
+    tabWrapper: never[];
+}, undefined, unknown, unknown, undefined>>;
+type TabsVariantProps = VariantProps<typeof tabs>;
+type TabsSlots = keyof ReturnType<typeof tabs>;
+type TabsReturnType = ReturnType<typeof tabs>;
+
+export { type TabsReturnType, type TabsSlots, type TabsVariantProps, tabs };