@nuralyui/tabs 0.0.13 → 0.0.16

package/index.d.ts

@@ -1,2 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 export * from './tabs.component.js';
+export * from './tabs.types.js';
+export { NrTabsElement as TabsComponent } from './tabs.component.js';
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -1,2 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 export * from './tabs.component.js';
+export * from './tabs.types.js';
+// For backward compatibility - will be removed in next major version
+export { NrTabsElement as TabsComponent } from './tabs.component.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './tabs.component.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,qEAAqE;AACrE,OAAO,EAAE,aAAa,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './tabs.component.js';\nexport * from './tabs.types.js';\n\n// For backward compatibility - will be removed in next major version\nexport { NrTabsElement as TabsComponent } from './tabs.component.js';\n"]}

package/package.json

@@ -1,12 +1,40 @@
 {
     "name": "@nuralyui/tabs",
-    "version": "0.0.13",
-    "description": "",
+    "version": "0.0.16",
+    "description": "Versatile tabs component with support for multiple orientations, editable tabs, and drag & drop functionality",
     "main": "index.js",
     "type": "module",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
+    "keywords": [
+        "tabs",
+        "web-components",
+        "lit-element",
+        "typescript",
+        "drag-drop",
+        "editable",
+        "accessibility"
+    ],
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "MIT",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        },
+        "./react": {
+            "import": "./react.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map",
+        "react.js",
+        "react.d.ts"
+    ]
 }

package/react.d.ts

@@ -1,9 +1,50 @@
-import { TabsComponent } from './tabs.component.js';
-export declare const HyTabsComponent: import("@lit-labs/react").ReactWebComponent<TabsComponent, {
-    removeTab: string;
-    tabEdited: string;
-    tabTilteClick: string;
-    tabOrderChange: string;
-    addTab: string;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { NrTabsElement } from './tabs.component.js';
+/**
+ * React wrapper for the nr-tabs component.
+ *
+ * @example
+ * ```jsx
+ * import { NrTabs } from '@nuralyui/tabs/react';
+ *
+ * const tabs = [
+ *   { label: 'Tab 1', content: <div>Content 1</div> },
+ *   { label: 'Tab 2', content: <div>Content 2</div> }
+ * ];
+ *
+ * function MyComponent() {
+ *   return (
+ *     <NrTabs
+ *       tabs={tabs}
+ *       activeTab={0}
+ *       orientation="horizontal"
+ *       onNrTabClick={(e) => console.log('Tab clicked:', e.detail)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const NrTabs: import("@lit-labs/react").ReactWebComponent<NrTabsElement, {
+    onNrTabClick: string;
+    onNrTabChange: string;
+    onNrTabAdd: string;
+    onNrTabRemove: string;
+    onNrTabEdit: string;
+    onNrTabOrderChange: string;
+}>;
+/**
+ * @deprecated Use NrTabs instead. Will be removed in next major version.
+ */
+export declare const HyTabsComponent: import("@lit-labs/react").ReactWebComponent<NrTabsElement, {
+    onNrTabClick: string;
+    onNrTabChange: string;
+    onNrTabAdd: string;
+    onNrTabRemove: string;
+    onNrTabEdit: string;
+    onNrTabOrderChange: string;
 }>;
 //# sourceMappingURL=react.d.ts.map

package/react.js

@@ -1,16 +1,50 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
-import { TabsComponent } from './tabs.component.js';
-export const HyTabsComponent = createComponent({
-    tagName: 'hy-tabs',
-    elementClass: TabsComponent,
+import { NrTabsElement } from './tabs.component.js';
+/**
+ * React wrapper for the nr-tabs component.
+ *
+ * @example
+ * ```jsx
+ * import { NrTabs } from '@nuralyui/tabs/react';
+ *
+ * const tabs = [
+ *   { label: 'Tab 1', content: <div>Content 1</div> },
+ *   { label: 'Tab 2', content: <div>Content 2</div> }
+ * ];
+ *
+ * function MyComponent() {
+ *   return (
+ *     <NrTabs
+ *       tabs={tabs}
+ *       activeTab={0}
+ *       orientation="horizontal"
+ *       onNrTabClick={(e) => console.log('Tab clicked:', e.detail)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const NrTabs = createComponent({
+    tagName: 'nr-tabs',
+    elementClass: NrTabsElement,
     react: React,
     events: {
-        removeTab: 'removeTab',
-        tabEdited: 'tabEdited',
-        tabTilteClick: 'tabTilteClick',
-        tabOrderChange: 'tabOrderChange',
-        addTab: 'addTab',
+        onNrTabClick: 'nr-tab-click',
+        onNrTabChange: 'nr-tab-change',
+        onNrTabAdd: 'nr-tab-add',
+        onNrTabRemove: 'nr-tab-remove',
+        onNrTabEdit: 'nr-tab-edit',
+        onNrTabOrderChange: 'nr-tab-order-change',
     },
 });
+/**
+ * @deprecated Use NrTabs instead. Will be removed in next major version.
+ */
+export const HyTabsComponent = NrTabs;
 //# sourceMappingURL=react.js.map

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/tabs/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,SAAS,EAAE,WAAW;QACtB,SAAS,EAAE,WAAW;QACtB,aAAa,EAAE,eAAe;QAC9B,cAAc,EAAE,gBAAgB;QAChC,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {TabsComponent} from './tabs.component.js';\nexport const HyTabsComponent = createComponent({\n  tagName: 'hy-tabs',\n  elementClass: TabsComponent,\n  react: React,\n  events: {\n    removeTab: 'removeTab',\n    tabEdited: 'tabEdited',\n    tabTilteClick: 'tabTilteClick',\n    tabOrderChange: 'tabOrderChange',\n    addTab: 'addTab',\n  },\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/tabs/react.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,YAAY,EAAE,cAAc;QAC5B,aAAa,EAAE,eAAe;QAC9B,UAAU,EAAE,YAAY;QACxB,aAAa,EAAE,eAAe;QAC9B,WAAW,EAAE,aAAa;QAC1B,kBAAkB,EAAE,qBAAqB;KAC1C;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrTabsElement } from './tabs.component.js';\n\n/**\n * React wrapper for the nr-tabs component.\n * \n * @example\n * ```jsx\n * import { NrTabs } from '@nuralyui/tabs/react';\n * \n * const tabs = [\n *   { label: 'Tab 1', content: <div>Content 1</div> },\n *   { label: 'Tab 2', content: <div>Content 2</div> }\n * ];\n * \n * function MyComponent() {\n *   return (\n *     <NrTabs \n *       tabs={tabs}\n *       activeTab={0}\n *       orientation=\"horizontal\"\n *       onNrTabClick={(e) => console.log('Tab clicked:', e.detail)}\n *     />\n *   );\n * }\n * ```\n */\nexport const NrTabs = createComponent({\n  tagName: 'nr-tabs',\n  elementClass: NrTabsElement,\n  react: React,\n  events: {\n    onNrTabClick: 'nr-tab-click',\n    onNrTabChange: 'nr-tab-change',\n    onNrTabAdd: 'nr-tab-add',\n    onNrTabRemove: 'nr-tab-remove',\n    onNrTabEdit: 'nr-tab-edit',\n    onNrTabOrderChange: 'nr-tab-order-change',\n  },\n});\n\n/**\n * @deprecated Use NrTabs instead. Will be removed in next major version.\n */\nexport const HyTabsComponent = NrTabs;\n"]}

package/tabs.component.d.ts

@@ -1,39 +1,72 @@
-import { LitElement, PropertyValueMap, nothing } from 'lit';
-import { TabEditable, TabOrientation, TabsAlign } from './tabs.constant.js';
 /**
- * `hy-tabs` is a LitElement that provides a customizable tabs.
- * @customElement 'hy-tabs'
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValueMap } from 'lit';
+import { TabOrientation, TabsAlign, TabSize, TabType, TabEditable, TabItem } from './tabs.types.js';
+import '../icon/icon.component.js';
+import { type TabsKeyboardHost, type TabsDragDropHost, type TabsEditableHost, type TabsEventHost } from './controllers/index.js';
+declare const NrTabsElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Versatile tabs component with support for multiple orientations, editable tabs, and drag & drop.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <nr-tabs .tabs=${tabs} activeTab="0"></nr-tabs>
+ *
+ * <!-- With editing capabilities -->
+ * <nr-tabs .tabs=${tabs} .editable=${{canAddTab: true, canDeleteTab: true}}></nr-tabs>
+ *
+ * <!-- Vertical orientation -->
+ * <nr-tabs .tabs=${tabs} orientation="vertical" align="left"></nr-tabs>
+ * ```
  *
- * Attributes
- * @attr activeTab
- * @attr orientation
- * @attr tabsAlign
- * @attr editable
- * Events
- * @fires tabEdited - Indicates when tab edited
- * @fires removeTab - Indicates when tab removed
- * @fires addTab - Indicates when tab added
+ * @fires nr-tab-click - Tab clicked
+ * @fires nr-tab-change - Active tab changed
+ * @fires nr-tab-add - New tab requested
+ * @fires nr-tab-remove - Tab removal requested
+ * @fires nr-tab-edit - Tab edited
+ * @fires nr-tab-order-change - Tab order changed via drag & drop
+ *
+ * @slot default - Tab content
  */
-export declare class TabsComponent extends LitElement {
+export declare class NrTabsElement extends NrTabsElement_base implements TabsKeyboardHost, TabsDragDropHost, TabsEditableHost, TabsEventHost {
+    static styles: import("lit").CSSResult;
+    /** Currently active tab index */
     activeTab: number;
+    /** Tab orientation (horizontal, vertical) */
     orientation: TabOrientation;
-    tabsAlign: TabsAlign;
-    editable: TabEditable;
-    tabs: any[];
-    static styles: import("lit").CSSResult;
-    constructor();
-    render(): import("lit").TemplateResult<1>;
+    /** Tab alignment (left, center, right) */
+    align: TabsAlign;
+    /** Tab size (small, medium, large) */
+    tabSize: TabSize;
+    /** Tab type/variant */
+    variant: TabType;
+    /** Editable configuration */
+    editable?: TabEditable;
+    /** Array of tab items */
+    tabs: TabItem[];
+    /** Whether tabs are animated */
+    animated: boolean;
+    /** Whether to destroy inactive tab content */
+    destroyInactiveTabPane: boolean;
+    /** Custom aria-label for the tabs container */
+    tabsAriaLabel: string;
+    requiredComponents: string[];
+    private keyboardController;
+    private dragDropController;
+    private editableController;
+    private eventController;
     connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
     private observeChildrenChanges;
-    private handleDragStart;
-    private handleDragOver;
-    private handleDragEnter;
-    private handleDragLeave;
-    private handleDrop;
-    renderDeleteIcon(tab: any): typeof nothing | import("lit").TemplateResult<1>;
+    private renderDeleteIcon;
     private renderTabs;
     updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private renderActiveTab;
-    private setActiveTab;
+    setActiveTab(index: number, event?: Event): void;
 }
+export {};
 //# sourceMappingURL=tabs.component.d.ts.map