@plusui/library 0.1.0

package/dist/components/tab/styles.d.ts

@@ -0,0 +1,363 @@
+export declare const tabStyle: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            tab: string[];
+        };
+        md: {
+            tab: string[];
+        };
+        lg: {
+            tab: string[];
+        };
+    };
+    orientation: {
+        vertical: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+        horizontal: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+    };
+    active: {
+        true: {
+            tab: string[];
+            tabPanel: string[];
+        };
+        false: {
+            tab: string[];
+            tabPanel: string[];
+        };
+    };
+    disabled: {
+        true: {
+            tab: string[];
+        };
+    };
+    truncated: {
+        true: {
+            tab: string[];
+        };
+    };
+    animated: {
+        true: {
+            tab: never[];
+        };
+    };
+}, {
+    tab: string[];
+    tabHeader: string[];
+    tabGroup: string[];
+    tabPanel: string[];
+    tabDismiss: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            tab: string[];
+        };
+        md: {
+            tab: string[];
+        };
+        lg: {
+            tab: string[];
+        };
+    };
+    orientation: {
+        vertical: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+        horizontal: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+    };
+    active: {
+        true: {
+            tab: string[];
+            tabPanel: string[];
+        };
+        false: {
+            tab: string[];
+            tabPanel: string[];
+        };
+    };
+    disabled: {
+        true: {
+            tab: string[];
+        };
+    };
+    truncated: {
+        true: {
+            tab: string[];
+        };
+    };
+    animated: {
+        true: {
+            tab: never[];
+        };
+    };
+}, {
+    size: {
+        sm: {
+            tab: string[];
+        };
+        md: {
+            tab: string[];
+        };
+        lg: {
+            tab: string[];
+        };
+    };
+    orientation: {
+        vertical: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+        horizontal: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+    };
+    active: {
+        true: {
+            tab: string[];
+            tabPanel: string[];
+        };
+        false: {
+            tab: string[];
+            tabPanel: string[];
+        };
+    };
+    disabled: {
+        true: {
+            tab: string[];
+        };
+    };
+    truncated: {
+        true: {
+            tab: string[];
+        };
+    };
+    animated: {
+        true: {
+            tab: never[];
+        };
+    };
+}>, {
+    size: {
+        sm: {
+            tab: string[];
+        };
+        md: {
+            tab: string[];
+        };
+        lg: {
+            tab: string[];
+        };
+    };
+    orientation: {
+        vertical: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+        horizontal: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+    };
+    active: {
+        true: {
+            tab: string[];
+            tabPanel: string[];
+        };
+        false: {
+            tab: string[];
+            tabPanel: string[];
+        };
+    };
+    disabled: {
+        true: {
+            tab: string[];
+        };
+    };
+    truncated: {
+        true: {
+            tab: string[];
+        };
+    };
+    animated: {
+        true: {
+            tab: never[];
+        };
+    };
+}, {
+    tab: string[];
+    tabHeader: string[];
+    tabGroup: string[];
+    tabPanel: string[];
+    tabDismiss: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            tab: string[];
+        };
+        md: {
+            tab: string[];
+        };
+        lg: {
+            tab: string[];
+        };
+    };
+    orientation: {
+        vertical: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+        horizontal: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+    };
+    active: {
+        true: {
+            tab: string[];
+            tabPanel: string[];
+        };
+        false: {
+            tab: string[];
+            tabPanel: string[];
+        };
+    };
+    disabled: {
+        true: {
+            tab: string[];
+        };
+    };
+    truncated: {
+        true: {
+            tab: string[];
+        };
+    };
+    animated: {
+        true: {
+            tab: never[];
+        };
+    };
+}, {
+    tab: string[];
+    tabHeader: string[];
+    tabGroup: string[];
+    tabPanel: string[];
+    tabDismiss: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            tab: string[];
+        };
+        md: {
+            tab: string[];
+        };
+        lg: {
+            tab: string[];
+        };
+    };
+    orientation: {
+        vertical: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+        horizontal: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+    };
+    active: {
+        true: {
+            tab: string[];
+            tabPanel: string[];
+        };
+        false: {
+            tab: string[];
+            tabPanel: string[];
+        };
+    };
+    disabled: {
+        true: {
+            tab: string[];
+        };
+    };
+    truncated: {
+        true: {
+            tab: string[];
+        };
+    };
+    animated: {
+        true: {
+            tab: never[];
+        };
+    };
+}, {
+    size: {
+        sm: {
+            tab: string[];
+        };
+        md: {
+            tab: string[];
+        };
+        lg: {
+            tab: string[];
+        };
+    };
+    orientation: {
+        vertical: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+        horizontal: {
+            tabHeader: string[];
+            tabGroup: string[];
+            tab: string[];
+        };
+    };
+    active: {
+        true: {
+            tab: string[];
+            tabPanel: string[];
+        };
+        false: {
+            tab: string[];
+            tabPanel: string[];
+        };
+    };
+    disabled: {
+        true: {
+            tab: string[];
+        };
+    };
+    truncated: {
+        true: {
+            tab: string[];
+        };
+    };
+    animated: {
+        true: {
+            tab: never[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/tab/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/tab/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAkInB,CAAC"}

package/dist/components/tab/styles.js

@@ -0,0 +1,134 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const tabStyle = ce({
+    slots: {
+        tab: [
+            'plus-ui-element',
+            'tab',
+            'flex items-center gap-2',
+            'font-sans',
+            'cursor-pointer',
+            'border-0',
+            'transition-all duration-200',
+            'focus-visible:outline-none focus-visible:ring-default',
+            'whitespace-nowrap',
+        ],
+        tabHeader: ['flex'],
+        tabGroup: ['flex w-full'],
+        tabPanel: [
+            'w-full',
+            'focus-visible:outline-none focus-visible:ring-default',
+        ],
+        tabDismiss: [
+            'tab-dismiss',
+            'ml-1 p-0.5',
+            'text-color-muted',
+            'hover:text-color-default',
+            'focus:outline-none focus:ring-1 focus:ring-offset-1',
+            'rounded-full',
+            'transition-colors',
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                tab: ['text-sm', 'px-3 py-1.5'],
+            },
+            md: {
+                tab: ['text-base', 'px-4 py-2'],
+            },
+            lg: {
+                tab: ['text-lg', 'px-5 py-2.5'],
+            },
+        },
+        orientation: {
+            vertical: {
+                tabHeader: ['flex-col'],
+                tabGroup: ['flex-row gap-4'],
+                tab: [
+                    'justify-start text-left',
+                    'border-r-2 border-r-transparent',
+                    'hover:bg-color-subtle',
+                ],
+            },
+            horizontal: {
+                tabHeader: ['flex-row'],
+                tabGroup: ['flex-col gap-4'],
+                tab: [
+                    'justify-center text-center',
+                    'border-b-2 border-b-transparent',
+                    'hover:bg-color-subtle',
+                ],
+            },
+        },
+        active: {
+            true: {
+                tab: ['text-color-primary', 'border-color-primary'],
+                tabPanel: ['block'],
+            },
+            false: {
+                tab: ['text-color-default', 'border-color-default'],
+                tabPanel: ['hidden'],
+            },
+        },
+        disabled: {
+            true: {
+                tab: ['cursor-not-allowed', 'opacity-60', 'hover:bg-transparent'],
+            },
+        },
+        truncated: {
+            true: {
+                tab: ['truncate'],
+            },
+        },
+        animated: {
+            true: {
+                tab: [],
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        orientation: 'horizontal',
+        active: false,
+        disabled: false,
+        truncated: false,
+        animated: false,
+    },
+    compoundVariants: [
+        {
+            orientation: 'horizontal',
+            active: true,
+            animated: false,
+            class: {
+                tab: 'border-b-2 border-b-color-primary',
+            },
+        },
+        {
+            orientation: 'vertical',
+            active: true,
+            animated: false,
+            class: {
+                tab: 'border-r-2 border-r-color-primary',
+            },
+        },
+        {
+            orientation: 'horizontal',
+            active: true,
+            animated: true,
+            class: {
+                tab: 'border-b-transparent z-10',
+            },
+        },
+        {
+            orientation: 'vertical',
+            active: true,
+            animated: true,
+            class: {
+                tab: 'border-r-transparent z-10',
+            },
+        },
+    ],
+});
+
+export { tabStyle };

package/dist/components/tab/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/tab/styles.ts"],"names":[],"mappings":"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"}

package/dist/components/tab/tab.d.ts

@@ -0,0 +1,83 @@
+import Tailwind from '../base/tailwind-base';
+/**
+ * @tag plus-tab
+ * @summary Tab component that represents a single tab in a tab group.
+ *
+ * @slot - The default slot for tab content
+ * @slot prefix - Content to be placed before the tab content
+ * @slot suffix - Content to be placed after the tab content
+ *
+ * @csspart tab - The component's base wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the tab
+ * @cssproperty --active-color - Controls the color of the active indicator
+ * @cssproperty --bg-default - Controls the default background color
+ * @cssproperty --bg-hovered - Controls the background color when hovered
+ *
+ * @example
+ * ```html
+ * <plus-tab value="tab1">Tab 1</plus-tab>
+ * ```
+ */
+export default class PlusTab extends Tailwind {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Sets the value of the tab, used for identification and selection
+     */
+    value: string;
+    /**
+     * Indicates if the tab is currently selected
+     * @default false
+     */
+    active: boolean;
+    /**
+     * Sets the size of the tab
+     * - sm: Small size
+     * - md: Medium size
+     * - lg: Large size
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Disables the tab interaction
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the orientation of the tabs
+     * - horizontal: Tabs arranged horizontally
+     * - vertical: Tabs arranged vertically
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Icon to display before the tab content
+     */
+    prefixIcon?: string;
+    /**
+     * Icon to display after the tab content
+     */
+    suffixIcon?: string;
+    /**
+     * Enables the dismiss button to remove the tab
+     * @default false
+     */
+    dismissible: boolean;
+    /**
+     * Truncates the text if it's too long
+     * @default false
+     */
+    truncate: boolean;
+    /**
+     * Use animated indicator instead of border for active tab
+     * This is controlled by the parent tab-group
+     * @default false
+     */
+    animated: boolean;
+    constructor();
+    private handleClick;
+    private handleDismiss;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusTab };
+//# sourceMappingURL=tab.d.ts.map

package/dist/components/tab/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tab/tab.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAI7C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,QAAQ;IAC3C,OAAgB,MAAM,4BAiBpB;IAEF;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,MAAM,UAAS;IAEf;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;OAGG;IAMH,QAAQ,UAAS;IAEjB;;;;;OAKG;IAEH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEtD;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IAKH,WAAW,UAAS;IAEpB;;;OAGG;IAKH,QAAQ,UAAS;IAEjB;;;;OAIG;IAKH,QAAQ,UAAS;;IAOjB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,aAAa;IAKZ,MAAM;CA4EhB;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}