@entry-ui/qwik 0.7.0 → 0.9.0

package/lib/components/tabs/contexts/tabs-tab-context/tabs-tab-context.d.ts

@@ -0,0 +1,6 @@
+import type { TabsTabContextValue } from './tabs-tab-context.types';
+/**
+ * Provides the context for the `Tabs.Tab` component, allowing descendant
+ * components to access readonly signals without prop drilling.
+ */
+export declare const TabsTabContext: import("@qwik.dev/core").ContextId<TabsTabContextValue>;

package/lib/components/tabs/contexts/tabs-tab-context/tabs-tab-context.qwik.mjs

@@ -0,0 +1,5 @@
+import { createContextId } from "@qwik.dev/core";
+const TabsTabContext = createContextId("entry-ui-qwik-tabs-tab-context");
+export {
+  TabsTabContext
+};

package/lib/components/tabs/contexts/tabs-tab-context/tabs-tab-context.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value provided by the `TabsTabContext` context.
+ * Contains the readonly signals shared with descendant components.
+ */
+export interface TabsTabContextValue {
+    /**
+     * A readonly signal containing the unique value associated with the tab.
+     * This value connects the tab to its corresponding panel.
+     */
+    value: ReadonlySignal<string>;
+    /**
+     * A readonly signal whose value indicates whether the tab is currently active,
+     * meaning its associated panel is being displayed.
+     */
+    active: ReadonlySignal<boolean>;
+    /**
+     * A readonly signal that indicates whether the tab is disabled.
+     * Its value is `true` if the tab is disabled, preventing user interaction.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

package/lib/components/tabs/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './use-tabs-root-context';
+export * from './use-tabs-tab-context';
+export * from './use-tabs-panel-context';

package/lib/components/tabs/hooks/use-tabs-panel-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseTabsPanelContextReturnValue } from './use-tabs-panel-context.types';
+export { useTabsPanelContext } from './use-tabs-panel-context';

package/lib/components/tabs/hooks/use-tabs-panel-context/use-tabs-panel-context.d.ts

@@ -0,0 +1,8 @@
+import type { UseTabsPanelContextReturnValue } from './use-tabs-panel-context.types';
+/**
+ * A hook that provides access to the `Tabs.Panel` component's internal state.
+ * It exposes a readonly signal that allows descendant components to react to
+ * the panel's activation state, synchronizing their behavior or styles based
+ * on whether the panel is currently visible.
+ */
+export declare const useTabsPanelContext: () => UseTabsPanelContextReturnValue;

package/lib/components/tabs/hooks/use-tabs-panel-context/use-tabs-panel-context.qwik.mjs

@@ -0,0 +1,11 @@
+import { useContext } from "@qwik.dev/core";
+import { TabsPanelContext } from "../../contexts/tabs-panel-context/tabs-panel-context.qwik.mjs";
+const useTabsPanelContext = () => {
+  const { active } = useContext(TabsPanelContext);
+  return {
+    active
+  };
+};
+export {
+  useTabsPanelContext
+};

package/lib/components/tabs/hooks/use-tabs-panel-context/use-tabs-panel-context.types.d.ts

@@ -0,0 +1,12 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value returned by the `useTabsPanelContext` hook.
+ * Provides access to the specific tab panel's readonly signal for descendant components.
+ */
+export interface UseTabsPanelContextReturnValue {
+    /**
+     * A readonly signal whose value indicates whether the panel is currently active
+     * and visible to the user, based on the selection state of its associated tab.
+     */
+    active: ReadonlySignal<boolean>;
+}

package/lib/components/tabs/hooks/use-tabs-root-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseTabsRootContextReturnValue } from './use-tabs-root-context.types';
+export { useTabsRootContext } from './use-tabs-root-context';

package/lib/components/tabs/hooks/use-tabs-root-context/use-tabs-root-context.d.ts

@@ -0,0 +1,8 @@
+import type { UseTabsRootContextReturnValue } from './use-tabs-root-context.types';
+/**
+ * A hook that provides access to the `Tabs.Root` component's internal state.
+ * It exposes readonly signals and a `QRL` function to interact with the tabs state,
+ * allowing descendant components to synchronize with or programmatically control
+ * which tab is currently active, while respecting the defined orientation.
+ */
+export declare const useTabsRootContext: () => UseTabsRootContextReturnValue;

package/lib/components/tabs/hooks/use-tabs-root-context/use-tabs-root-context.qwik.mjs

@@ -0,0 +1,13 @@
+import { useContext } from "@qwik.dev/core";
+import { TabsRootContext } from "../../contexts/tabs-root-context/tabs-root-context.qwik.mjs";
+const useTabsRootContext = () => {
+  const { value, setValue$, orientation } = useContext(TabsRootContext);
+  return {
+    value,
+    setValue$,
+    orientation
+  };
+};
+export {
+  useTabsRootContext
+};

package/lib/components/tabs/hooks/use-tabs-root-context/use-tabs-root-context.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value returned by the `useTabsRootContext` hook.
+ * Provides access to the tabs readonly signals and `QRL` function for descendant components.
+ */
+export interface UseTabsRootContextReturnValue {
+    /**
+     * A readonly signal whose value represents the unique identifier of the currently active tab.
+     * This signal reflects the internal state and determines which tab panel is currently visible.
+     */
+    value: ReadonlySignal<string>;
+    /**
+     * A `QRL` function used to programmatically set the active value of the tabs.
+     * This function takes a string representing the value of the tab to be activated.
+     */
+    setValue$: QRL<(value: string) => void>;
+    /**
+     * A readonly signal whose value represents the orientation of the tabs.
+     * This value (either `"horizontal"` or `"vertical"`) determines how keyboard navigation and focus management are handled.
+     */
+    orientation: ReadonlySignal<'horizontal' | 'vertical'>;
+}

package/lib/components/tabs/hooks/use-tabs-tab-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseTabsTabContextReturnValue } from './use-tabs-tab-context.types';
+export { useTabsTabContext } from './use-tabs-tab-context';

package/lib/components/tabs/hooks/use-tabs-tab-context/use-tabs-tab-context.d.ts

@@ -0,0 +1,7 @@
+import type { UseTabsTabContextReturnValue } from './use-tabs-tab-context.types';
+/**
+ * A hook that provides access to the `Tabs.Tab` component's internal state.
+ * It exposes readonly signals that allow descendant components to react to the tab's
+ * unique value, its current activation state, and its disabled status.
+ */
+export declare const useTabsTabContext: () => UseTabsTabContextReturnValue;

package/lib/components/tabs/hooks/use-tabs-tab-context/use-tabs-tab-context.qwik.mjs

@@ -0,0 +1,13 @@
+import { useContext } from "@qwik.dev/core";
+import { TabsTabContext } from "../../contexts/tabs-tab-context/tabs-tab-context.qwik.mjs";
+const useTabsTabContext = () => {
+  const { value, active, disabled } = useContext(TabsTabContext);
+  return {
+    value,
+    active,
+    disabled
+  };
+};
+export {
+  useTabsTabContext
+};

package/lib/components/tabs/hooks/use-tabs-tab-context/use-tabs-tab-context.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value returned by the `useTabsTabContext` hook.
+ * Provides access to the specific tab's readonly signals for descendant components.
+ */
+export interface UseTabsTabContextReturnValue {
+    /**
+     * A readonly signal containing the unique value associated with the tab.
+     * This value connects the tab to its corresponding panel.
+     */
+    value: ReadonlySignal<string>;
+    /**
+     * A readonly signal whose value indicates whether the tab is currently active,
+     * meaning its associated panel is being displayed.
+     */
+    active: ReadonlySignal<boolean>;
+    /**
+     * A readonly signal that indicates whether the tab is disabled.
+     * Its value is `true` if the tab is disabled, preventing user interaction.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

package/lib/components/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * as Tabs from './parts';
+export * from './hooks';

package/lib/components/tabs/index.qwik.mjs

@@ -0,0 +1,10 @@
+import * as index from "./parts/index.qwik.mjs";
+import { useTabsRootContext } from "./hooks/use-tabs-root-context/use-tabs-root-context.qwik.mjs";
+import { useTabsTabContext } from "./hooks/use-tabs-tab-context/use-tabs-tab-context.qwik.mjs";
+import { useTabsPanelContext } from "./hooks/use-tabs-panel-context/use-tabs-panel-context.qwik.mjs";
+export {
+  index as Tabs,
+  useTabsPanelContext,
+  useTabsRootContext,
+  useTabsTabContext
+};

package/lib/components/tabs/parts/index.d.ts

@@ -0,0 +1,8 @@
+export type { TabsRootProps as RootProps } from './tabs-root';
+export type { TabsListProps as ListProps } from './tabs-list';
+export type { TabsTabProps as TabProps } from './tabs-tab';
+export type { TabsPanelProps as PanelProps } from './tabs-panel';
+export { TabsRoot as Root } from './tabs-root';
+export { TabsList as List } from './tabs-list';
+export { TabsTab as Tab } from './tabs-tab';
+export { TabsPanel as Panel } from './tabs-panel';

package/lib/components/tabs/parts/index.qwik.mjs

@@ -0,0 +1,10 @@
+import { TabsRoot } from "./tabs-root/tabs-root.qwik.mjs";
+import { TabsList } from "./tabs-list/tabs-list.qwik.mjs";
+import { TabsTab } from "./tabs-tab/tabs-tab.qwik.mjs";
+import { TabsPanel } from "./tabs-panel/tabs-panel.qwik.mjs";
+export {
+  TabsList as List,
+  TabsPanel as Panel,
+  TabsRoot as Root,
+  TabsTab as Tab
+};

package/lib/components/tabs/parts/tabs-list/index.d.ts

@@ -0,0 +1,2 @@
+export type { TabsListProps } from './tabs-list.types';
+export { TabsList } from './tabs-list';

package/lib/components/tabs/parts/tabs-list/tabs-list.d.ts

@@ -0,0 +1,7 @@
+import type { TabsListProps } from './tabs-list.types';
+/**
+ * Groups the individual tab buttons.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const TabsList: import("@qwik.dev/core").Component<TabsListProps>;

package/lib/components/tabs/parts/tabs-list/tabs-list.qwik.mjs

@@ -0,0 +1,37 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useComputed$, useTask$, $, useContextProvider, Slot } from "@qwik.dev/core";
+import { useTabsRootContext } from "../../contexts/tabs-root-context/tabs-root-context.qwik.mjs";
+import { TabsListContext } from "../../contexts/tabs-list-context/tabs-list-context.qwik.mjs";
+import { RovingFocusGroupRoot } from "../../../roving-focus-group/parts/roving-focus-group-root/roving-focus-group-root.qwik.mjs";
+const TabsList = component$((props) => {
+  const { as = "div", activationMode: _activationMode = "automatic", loopFocus = true, ...others } = props;
+  const { value, dir, orientation } = useTabsRootContext();
+  const currentTabStopId = useSignal(value.value);
+  const activationMode = useComputed$(() => _activationMode);
+  useTask$(({ track }) => {
+    const activeTabValue = track(() => value.value);
+    currentTabStopId.value = activeTabValue;
+  });
+  const handleCurrentTabStopIdChange$ = $((tabStopId) => {
+    currentTabStopId.value = tabStopId;
+  });
+  useContextProvider(TabsListContext, {
+    activationMode
+  });
+  return /* @__PURE__ */ jsx(RovingFocusGroupRoot, {
+    as,
+    currentTabStopId,
+    onCurrentTabStopIdChange$: handleCurrentTabStopIdChange$,
+    loopFocus,
+    dir: dir.value,
+    orientation: orientation.value,
+    role: "tablist",
+    "aria-orientation": orientation.value,
+    "data-entry-ui-qwik-tabs-list": "",
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  TabsList
+};

package/lib/components/tabs/parts/tabs-list/tabs-list.types.d.ts

@@ -0,0 +1,30 @@
+import type { Component, PropsOf } from '@qwik.dev/core';
+/**
+ * Props for the `Tabs.List` component.
+ * Extends the standard HTML attributes for a `div` element.
+ */
+export interface TabsListProps extends Omit<PropsOf<'div'>, 'dir'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "div"
+     */
+    as?: string | Component;
+    /**
+     * Whether the tabs should be activated automatically on focus or manually on click.
+     *
+     * - When `"automatic"`, tabs are activated when receiving focus.
+     * - When `"manual"`, tabs are activated only when clicked or via keyboard selection (`Enter` or `Space`).
+     *
+     * @default "automatic"
+     */
+    activationMode?: 'automatic' | 'manual';
+    /**
+     * When `true`, keyboard navigation will loop from last tab to first, and vice versa.
+     *
+     * @default true
+     */
+    loopFocus?: boolean;
+}

package/lib/components/tabs/parts/tabs-panel/index.d.ts

@@ -0,0 +1,2 @@
+export type { TabsPanelProps } from './tabs-panel.types';
+export { TabsPanel } from './tabs-panel';

package/lib/components/tabs/parts/tabs-panel/tabs-panel.d.ts

@@ -0,0 +1,7 @@
+import type { TabsPanelProps } from './tabs-panel.types';
+/**
+ * A panel displayed when the corresponding tab is active.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const TabsPanel: import("@qwik.dev/core").Component<TabsPanelProps>;

package/lib/components/tabs/parts/tabs-panel/tabs-panel.qwik.mjs

@@ -0,0 +1,39 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useComputed$, useContextProvider, Slot } from "@qwik.dev/core";
+import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useTabsRootContext } from "../../contexts/tabs-root-context/tabs-root-context.qwik.mjs";
+import { TabsPanelContext } from "../../contexts/tabs-panel-context/tabs-panel-context.qwik.mjs";
+const TabsPanel = component$((props) => {
+  const { as = "div", value, containsFocusableContent = false, style, ...others } = props;
+  const { value: activeTabValue, orientation, id } = useTabsRootContext();
+  const tabId = useComputed$(() => `entry-ui-qwik-tabs-${id}-tab-${value}`);
+  const panelId = useComputed$(() => `entry-ui-qwik-tabs-${id}-panel-${value}`);
+  const active = useComputed$(() => activeTabValue.value === value);
+  const mergedStyles = useComputed$(() => mergeStyles([
+    {
+      display: !active.value ? "none !important" : void 0
+    },
+    style
+  ]));
+  useContextProvider(TabsPanelContext, {
+    active
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    role: "tabpanel",
+    id: panelId.value,
+    hidden: !active.value,
+    tabIndex: !active.value ? -1 : containsFocusableContent ? void 0 : 0,
+    "aria-labelledby": tabId.value,
+    "data-entry-ui-qwik-tabs-panel": "",
+    "data-state": active.value ? "active" : "inactive",
+    "data-orientation": orientation.value,
+    style: mergedStyles.value,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  TabsPanel
+};

package/lib/components/tabs/parts/tabs-panel/tabs-panel.types.d.ts

@@ -0,0 +1,27 @@
+import type { Component, PropsOf } from '@qwik.dev/core';
+/**
+ * Props for the `Tabs.Panel` component.
+ * Extends the standard HTML attributes for a `div` element.
+ */
+export interface TabsPanelProps extends PropsOf<'div'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "div"
+     */
+    as?: string | Component;
+    /**
+     * A unique value that associates the panel with a tab.
+     */
+    value: string;
+    /**
+     * When `true`, indicates the panel contains focusable elements (like inputs or links).
+     * This removes the panel from the tab order (`tabIndex`) to avoid redundant focus stops,
+     * allowing focus to move directly to the internal content.
+     *
+     * @default false
+     */
+    containsFocusableContent?: boolean;
+}

package/lib/components/tabs/parts/tabs-root/index.d.ts

@@ -0,0 +1,2 @@
+export type { TabsRootProps } from './tabs-root.types';
+export { TabsRoot } from './tabs-root';

package/lib/components/tabs/parts/tabs-root/tabs-root.d.ts

@@ -0,0 +1,7 @@
+import type { TabsRootProps } from './tabs-root.types';
+/**
+ * Groups the tabs and the corresponding panels.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const TabsRoot: import("@qwik.dev/core").Component<TabsRootProps>;

package/lib/components/tabs/parts/tabs-root/tabs-root.qwik.mjs

@@ -0,0 +1,34 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useId, useComputed$, useContextProvider, Slot } from "@qwik.dev/core";
+import { useControllable } from "../../../../hooks/use-controllable/use-controllable.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { TabsRootContext } from "../../contexts/tabs-root-context/tabs-root-context.qwik.mjs";
+const TabsRoot = component$((props) => {
+  const { as = "div", defaultValue, value: _value, onValueChange$, dir: _dir = "ltr", orientation: _orientation = "horizontal", ...others } = props;
+  const { state: value, setState$: setValue$ } = useControllable({
+    defaultValue: defaultValue ?? "",
+    controlledSignal: _value,
+    onChange$: onValueChange$
+  });
+  const id = useId();
+  const dir = useComputed$(() => _dir);
+  const orientation = useComputed$(() => _orientation);
+  useContextProvider(TabsRootContext, {
+    value,
+    setValue$,
+    id,
+    dir,
+    orientation
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    dir: dir.value,
+    "data-entry-ui-qwik-tabs-root": "",
+    "data-orientation": orientation.value,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  TabsRoot
+};

package/lib/components/tabs/parts/tabs-root/tabs-root.types.d.ts

@@ -0,0 +1,50 @@
+import type { Component, PropsOf, Signal, QRL } from '@qwik.dev/core';
+/**
+ * Props for the `Tabs.Root` component.
+ * Extends the standard HTML attributes for a `div` element.
+ */
+export interface TabsRootProps extends PropsOf<'div'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "div"
+     */
+    as?: string | Component;
+    /**
+     * The value of the tab that should be active when initially rendered.
+     * Use when you do not need to control the state of the tabs.
+     *
+     * @default undefined
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the tab to activate.
+     * Should be used in conjunction with `onValueChange$`.
+     *
+     * @default undefined
+     */
+    value?: Signal<string>;
+    /**
+     * A `QRL` callback function that is called when the value changes.
+     *
+     * @default undefined
+     */
+    onValueChange$?: QRL<(value: string) => void>;
+    /**
+     * The reading direction of the tabs.
+     * When set to `"rtl"`, keyboard navigation is reversed and visual alignment is adjusted for right-to-left languages.
+     *
+     * @default "ltr"
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * The orientation of the tabs.
+     * This value determines whether the tabs are laid out horizontally or vertically,
+     * and adjusts keyboard navigation (arrow keys) to match the visual orientation.
+     *
+     * @default "horizontal"
+     */
+    orientation?: 'horizontal' | 'vertical';
+}

package/lib/components/tabs/parts/tabs-tab/index.d.ts

@@ -0,0 +1,2 @@
+export type { TabsTabProps } from './tabs-tab.types';
+export { TabsTab } from './tabs-tab';

package/lib/components/tabs/parts/tabs-tab/tabs-tab.d.ts

@@ -0,0 +1,7 @@
+import type { TabsTabProps } from './tabs-tab.types';
+/**
+ * An individual interactive tab button that toggles the corresponding panel.
+ *
+ * Renders a `<button>` element.
+ */
+export declare const TabsTab: import("@qwik.dev/core").Component<TabsTabProps>;

package/lib/components/tabs/parts/tabs-tab/tabs-tab.qwik.mjs

@@ -0,0 +1,87 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useComputed$, sync$, $, useContextProvider, Slot } from "@qwik.dev/core";
+import { useTabsRootContext } from "../../contexts/tabs-root-context/tabs-root-context.qwik.mjs";
+import { useTabsListContext } from "../../contexts/tabs-list-context/tabs-list-context.qwik.mjs";
+import { TabsTabContext } from "../../contexts/tabs-tab-context/tabs-tab-context.qwik.mjs";
+import { RovingFocusGroupItem } from "../../../roving-focus-group/parts/roving-focus-group-item/roving-focus-group-item.qwik.mjs";
+const TabsTab = component$((props) => {
+  const { as = "button", value: _value, disabled: _disabled = false, onMouseDown$, onKeyDown$, onFocus$, ...others } = props;
+  const { value: activeTabValue, setValue$: setActiveTabValue$, id } = useTabsRootContext();
+  const { activationMode } = useTabsListContext();
+  const tabId = useComputed$(() => `entry-ui-qwik-tabs-${id}-tab-${_value}`);
+  const panelId = useComputed$(() => `entry-ui-qwik-tabs-${id}-panel-${_value}`);
+  const value = useComputed$(() => _value);
+  const active = useComputed$(() => activeTabValue.value === _value);
+  const disabled = useComputed$(() => _disabled);
+  const handleMouseDownSync$ = sync$((event, currentTarget) => {
+    const entryUIQwikEvent = event;
+    const isDisabled = currentTarget.hasAttribute("disabled") || currentTarget.hasAttribute("data-disabled");
+    if (entryUIQwikEvent.entryUIQwikHandlerPrevented) return;
+    if (isDisabled || event.button !== 0 || event.ctrlKey !== false) {
+      event.preventDefault();
+    }
+  });
+  const handleMouseDown$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (entryUIQwikEvent.entryUIQwikHandlerPrevented) return;
+    if (!disabled.value && event.button === 0 && event.ctrlKey === false) {
+      setActiveTabValue$(value.value);
+    }
+  });
+  const handleKeyDown$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (entryUIQwikEvent.entryUIQwikHandlerPrevented) return;
+    if (!disabled.value && [
+      " ",
+      "Enter"
+    ].includes(event.key)) {
+      setActiveTabValue$(value.value);
+    }
+  });
+  const handleFocus$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (entryUIQwikEvent.entryUIQwikHandlerPrevented) return;
+    if (!active.value && !disabled.value && activationMode.value === "automatic") {
+      setActiveTabValue$(value.value);
+    }
+  });
+  useContextProvider(TabsTabContext, {
+    value,
+    active,
+    disabled
+  });
+  return /* @__PURE__ */ jsx(RovingFocusGroupItem, {
+    as,
+    tabStopId: value.value,
+    focusable: !disabled.value,
+    id: tabId.value,
+    role: "tab",
+    disabled: disabled.value,
+    "aria-selected": active.value,
+    "aria-controls": panelId.value,
+    "data-entry-ui-qwik-tabs-tab": "",
+    "data-state": active.value ? "active" : "inactive",
+    "data-active": void 0,
+    // @ts-expect-error - The event handler element types differ, but the runtime correctly handles the `as` prop polymorphism.
+    onMouseDown$: [
+      onMouseDown$,
+      handleMouseDownSync$,
+      handleMouseDown$
+    ],
+    // @ts-expect-error - The event handler element types differ, but the runtime correctly handles the `as` prop polymorphism.
+    onKeyDown$: [
+      onKeyDown$,
+      handleKeyDown$
+    ],
+    // @ts-expect-error - The event handler element types differ, but the runtime correctly handles the `as` prop polymorphism.
+    onFocus$: [
+      onFocus$,
+      handleFocus$
+    ],
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  TabsTab
+};

package/lib/components/tabs/parts/tabs-tab/tabs-tab.types.d.ts

@@ -0,0 +1,25 @@
+import type { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the `Tabs.Tab` component.
+ * Extends the standard HTML attributes for a `button` element.
+ */
+export interface TabsTabProps extends PropsOf<'button'> {
+    /**
+     * The element or component this component should render as.
+     *
+     * @see {@link https://github.com/ZAHON/entry-ui/tree/main/packages/qwik/docs/guides/composition.md Composition} guide for more details.
+     *
+     * @default "button"
+     */
+    as?: string | Component;
+    /**
+     * A unique value that associates the tab with a panel.
+     */
+    value: string;
+    /**
+     * When `true`, prevents the user from interacting with the tab.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}

package/lib/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './use-boolean';
+export * from './use-clipboard';
 export * from './use-controllable';
 export * from './use-counter';
 export * from './use-cycle';

package/lib/hooks/use-clipboard/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseClipboardParams, UseClipboardReturnValue } from './use-clipboard.types';
+export { useClipboard } from './use-clipboard';

package/lib/hooks/use-clipboard/index.qwik.mjs

@@ -0,0 +1,4 @@
+import { useClipboard } from "./use-clipboard.qwik.mjs";
+export {
+  useClipboard
+};