@entry-ui/qwik 0.8.0 → 0.9.0

package/lib/components/roving-focus-group/parts/roving-focus-group-item/roving-focus-group-item.qwik.mjs

@@ -0,0 +1,160 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useComputed$, useTask$, sync$, $, useContextProvider, Slot } from "@qwik.dev/core";
+import { wrapArray } from "@entry-ui/utilities/wrap-array";
+import { getWindow } from "@entry-ui/utilities/get-window";
+import { focusFirstElement } from "@entry-ui/utilities/focus-first-element";
+import { useId } from "../../../../_internal/hooks/use-id/use-id.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useRovingFocusGroupRootContext } from "../../contexts/roving-focus-group-root-context/roving-focus-group-root-context.qwik.mjs";
+import { RovingFocusGroupItemContext } from "../../contexts/roving-focus-group-item-context/roving-focus-group-item-context.qwik.mjs";
+const RovingFocusGroupItem = component$((props) => {
+  const { as = "div", tabStopId: _tabStopId, focusable: _focusable = true, onMouseDown$, onFocus$, onKeyDown$, ...others } = props;
+  const { currentTabStopId, setCurrentTabStopId$, getItems$, loopFocus, dir, orientation } = useRovingFocusGroupRootContext();
+  const fallbackTabStopId = useId({
+    prefix: "entry-ui-qwik-roving-focus-group-item-"
+  });
+  const tabStopId = useComputed$(() => _tabStopId ?? fallbackTabStopId);
+  const active = useComputed$(() => currentTabStopId.value === tabStopId.value);
+  const focusable = useComputed$(() => _focusable);
+  useTask$(() => {
+    if (!currentTabStopId.value && focusable.value) {
+      setCurrentTabStopId$(tabStopId.value);
+    }
+  });
+  const handleMouseDownSync$ = sync$((event, currentTarget) => {
+    const entryUIQwikEvent = event;
+    const isNotFocusable = currentTarget.hasAttribute("disabled") || currentTarget.hasAttribute("data-disabled");
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented && isNotFocusable) {
+      event.preventDefault();
+    }
+  });
+  const handleMouseDown$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented && focusable.value) {
+      setCurrentTabStopId$(tabStopId.value);
+    }
+  });
+  const handleFocus$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented && focusable.value) {
+      setCurrentTabStopId$(tabStopId.value);
+    }
+  });
+  const handleKeyDownSync$ = sync$((event, currentTarget) => {
+    const entryUIQwikEvent = event;
+    const isNotFocusable = currentTarget.hasAttribute("disabled") || currentTarget.hasAttribute("data-disabled");
+    if (entryUIQwikEvent.entryUIQwikHandlerPrevented) return;
+    if (isNotFocusable) return;
+    if (event.target !== currentTarget) return;
+    if (event.key === "Tab" && event.shiftKey) return;
+    const ORIENTATION_KEYS = {
+      horizontal: [
+        "ArrowLeft",
+        "ArrowRight"
+      ],
+      vertical: [
+        "ArrowUp",
+        "ArrowDown"
+      ],
+      both: [
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown"
+      ]
+    };
+    const orientation2 = currentTarget.getAttribute("data-orientation");
+    if (ORIENTATION_KEYS[orientation2 ?? ""]?.includes(event.key) || [
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+      event.preventDefault();
+    }
+  });
+  const handleKeyDown$ = $(async (event, currentTarget) => {
+    const entryUIQwikEvent = event;
+    if (entryUIQwikEvent.entryUIQwikHandlerPrevented) return;
+    if (!focusable.value) return;
+    if (event.target !== currentTarget) return;
+    if (event.key === "Tab" && event.shiftKey) return;
+    let key;
+    if (dir.value !== "rtl") {
+      key = event.key;
+    } else {
+      key = event.key === "ArrowLeft" ? "ArrowRight" : event.key === "ArrowRight" ? "ArrowLeft" : event.key;
+    }
+    if (orientation.value === "horizontal" && [
+      "ArrowUp",
+      "ArrowDown"
+    ].includes(key)) return;
+    if (orientation.value === "vertical" && [
+      "ArrowLeft",
+      "ArrowRight"
+    ].includes(key)) return;
+    const MAP_KEY_TO_FOCUS_INTENT = {
+      ArrowLeft: "prev",
+      ArrowUp: "prev",
+      ArrowRight: "next",
+      ArrowDown: "next",
+      Home: "first",
+      End: "last"
+    };
+    const focusIntent = MAP_KEY_TO_FOCUS_INTENT[key];
+    if (focusIntent !== void 0) {
+      if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+      let items = await getItems$();
+      if (focusIntent === "last") {
+        items.reverse();
+      } else if (focusIntent === "prev" || focusIntent === "next") {
+        if (focusIntent === "prev") {
+          items.reverse();
+        }
+        const currentIndex = items.indexOf(currentTarget);
+        items = loopFocus.value ? wrapArray({
+          array: items,
+          startIndex: currentIndex + 1
+        }) : items.slice(currentIndex + 1);
+      }
+      const win = getWindow(currentTarget);
+      win.setTimeout(() => {
+        focusFirstElement({
+          candidates: items,
+          focusVisible: true
+        });
+      }, 0);
+    }
+  });
+  useContextProvider(RovingFocusGroupItemContext, {
+    tabStopId,
+    active,
+    focusable
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    tabIndex: active.value ? 0 : -1,
+    "data-entry-ui-qwik-roving-focus-group-item": "",
+    "data-active": active.value ? "" : void 0,
+    "data-disabled": !focusable.value ? "" : void 0,
+    "data-orientation": orientation.value,
+    onMouseDown$: [
+      onMouseDown$,
+      handleMouseDownSync$,
+      handleMouseDown$
+    ],
+    onFocus$: [
+      onFocus$,
+      handleFocus$
+    ],
+    onKeyDown$: [
+      onKeyDown$,
+      handleKeyDownSync$,
+      handleKeyDown$
+    ],
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  RovingFocusGroupItem
+};

package/lib/components/roving-focus-group/parts/roving-focus-group-item/roving-focus-group-item.types.d.ts

@@ -0,0 +1,29 @@
+import type { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the `RovingFocusGroup.Item` component.
+ * Extends the standard HTML attributes for a `div` element.
+ */
+export interface RovingFocusGroupItemProps 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 identifies this item within the roving focus group.
+     * If no value is provided, a unique ID will be generated automatically.
+     *
+     * @default undefined
+     */
+    tabStopId?: string;
+    /**
+     * When `false`, prevents the item from becoming active and skips it
+     * during keyboard navigation.
+     *
+     * @default true
+     */
+    focusable?: boolean;
+}

package/lib/components/roving-focus-group/parts/roving-focus-group-root/index.d.ts

@@ -0,0 +1,2 @@
+export type { RovingFocusGroupRootProps } from './roving-focus-group-root.types';
+export { RovingFocusGroupRoot } from './roving-focus-group-root';

package/lib/components/roving-focus-group/parts/roving-focus-group-root/roving-focus-group-root.d.ts

@@ -0,0 +1,7 @@
+import type { RovingFocusGroupRootProps } from './roving-focus-group-root.types';
+/**
+ * Groups all parts of the roving focus group.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const RovingFocusGroupRoot: import("@qwik.dev/core").Component<RovingFocusGroupRootProps>;

package/lib/components/roving-focus-group/parts/roving-focus-group-root/roving-focus-group-root.qwik.mjs

@@ -0,0 +1,49 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useComputed$, $, useContextProvider, Slot } from "@qwik.dev/core";
+import { useControllable } from "../../../../hooks/use-controllable/use-controllable.qwik.mjs";
+import { mergeRefs } from "../../../../utilities/merge-refs/merge-refs.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { RovingFocusGroupRootContext } from "../../contexts/roving-focus-group-root-context/roving-focus-group-root-context.qwik.mjs";
+const RovingFocusGroupRoot = component$((props) => {
+  const { as = "div", ref: _ref, defaultCurrentTabStopId, currentTabStopId: _currentTabStopId, onCurrentTabStopIdChange$, loopFocus: _loopFocus = false, dir: _dir = "ltr", orientation: _orientation = "both", ...others } = props;
+  const { state: currentTabStopId, setState$: setCurrentTabStopId$ } = useControllable({
+    defaultValue: defaultCurrentTabStopId ?? "",
+    controlledSignal: _currentTabStopId,
+    onChange$: onCurrentTabStopIdChange$
+  });
+  const ref = useSignal(void 0);
+  const loopFocus = useComputed$(() => _loopFocus);
+  const dir = useComputed$(() => _dir);
+  const orientation = useComputed$(() => _orientation);
+  const getItems$ = $(() => {
+    const rootRef = ref.value;
+    if (!rootRef) return [];
+    const ITEM_SELECTOR = "[data-entry-ui-qwik-roving-focus-group-item]";
+    const orderedNodes = Array.from(rootRef.querySelectorAll(ITEM_SELECTOR));
+    const items = orderedNodes.filter((item) => !(item.hasAttribute("disabled") || item.hasAttribute("data-disabled")));
+    return items;
+  });
+  useContextProvider(RovingFocusGroupRootContext, {
+    currentTabStopId,
+    setCurrentTabStopId$,
+    getItems$,
+    loopFocus,
+    dir,
+    orientation
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    ref: mergeRefs([
+      _ref,
+      ref
+    ]),
+    dir: dir.value,
+    "data-entry-ui-qwik-roving-focus-group-root": "",
+    "data-orientation": orientation.value,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  RovingFocusGroupRoot
+};

package/lib/components/roving-focus-group/parts/roving-focus-group-root/roving-focus-group-root.types.d.ts

@@ -0,0 +1,59 @@
+import type { Component, Signal, QRL, PropsOf } from '@qwik.dev/core';
+/**
+ * Props for the `RovingFocusGroup.Root` component.
+ * Extends the standard HTML attributes for a `div` element.
+ */
+export interface RovingFocusGroupRootProps 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 ID of the item that should be active when initially rendered.
+     * Use when you do not need to control the state of the active item.
+     *
+     * @default undefined
+     */
+    defaultCurrentTabStopId?: string;
+    /**
+     * The controlled value of the item ID to activate.
+     * Must be used in conjunction with `onCurrentTabStopIdChange$`.
+     *
+     * @default undefined
+     */
+    currentTabStopId?: Signal<string>;
+    /**
+     * A `QRL` callback function that is called when the active tab stop changes.
+     *
+     * @default undefined
+     */
+    onCurrentTabStopIdChange$?: QRL<(tabStopId: string) => void>;
+    /**
+     * Whether the keyboard focus should wrap around to the first or last item
+     * when navigating past the boundaries of the group.
+     *
+     * @default false
+     */
+    loopFocus?: boolean;
+    /**
+     * The reading direction of the group.
+     * When set to `"rtl"`, the behavior of the left and right arrow keys is swapped.
+     *
+     * @default "ltr"
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * The orientation of the group, which determines which arrow keys can be used for navigation.
+     *
+     * - `"horizontal"`: Only `ArrowLeft` and `ArrowRight` are active.
+     * - `"vertical"`: Only `ArrowUp` and `ArrowDown` are active.
+     * - `"both"`: All arrow keys are active.
+     *
+     * @default "both"
+     */
+    orientation?: 'horizontal' | 'vertical' | 'both';
+}

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

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

package/lib/components/tabs/contexts/tabs-list-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { TabsListContextValue } from './tabs-list-context.types';
+export { TabsListContext, useTabsListContext } from './tabs-list-context';

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

@@ -0,0 +1,11 @@
+import type { TabsListContextValue } from './tabs-list-context.types';
+/**
+ * Provides the context for the `Tabs.List` component, allowing descendant
+ * components to access readonly signal without prop drilling.
+ */
+export declare const TabsListContext: import("@qwik.dev/core").ContextId<TabsListContextValue>;
+/**
+ * A hook that provides access to the `Tabs.List` component's internal state.
+ * It exposes readonly signal to interact with the component's state,
+ */
+export declare const useTabsListContext: () => TabsListContextValue;

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

@@ -0,0 +1,10 @@
+import { createContextId, useContext } from "@qwik.dev/core";
+const TabsListContext = createContextId("entry-ui-qwik-tabs-list-context");
+const useTabsListContext = () => {
+  const context = useContext(TabsListContext);
+  return context;
+};
+export {
+  TabsListContext,
+  useTabsListContext
+};

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

@@ -0,0 +1,12 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value provided by the `TabsListContext` context.
+ * Contains the readonly signal shared with descendant components.
+ */
+export interface TabsListContextValue {
+    /**
+     * A readonly signal whose value determines whether tabs are activated
+     * automatically on focus or manually on click/selection.
+     */
+    activationMode: ReadonlySignal<'automatic' | 'manual'>;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value provided by the `TabsPanelContext` context.
+ * Contains the readonly signal shared with descendant components.
+ */
+export interface TabsPanelContextValue {
+    /**
+     * 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/contexts/tabs-root-context/index.d.ts

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

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

@@ -0,0 +1,11 @@
+import type { TabsRootContextValue } from './tabs-root-context.types';
+/**
+ * Provides the context for the `Tabs.Root` component, allowing descendant
+ * components to access readonly signals and `QRL` function without prop drilling.
+ */
+export declare const TabsRootContext: import("@qwik.dev/core").ContextId<TabsRootContextValue>;
+/**
+ * A hook that provides access to the `Tabs.Root` component's internal state.
+ * It exposes readonly signals and `QRL` function to interact with the component's state,
+ */
+export declare const useTabsRootContext: () => TabsRootContextValue;

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

@@ -0,0 +1,10 @@
+import { createContextId, useContext } from "@qwik.dev/core";
+const TabsRootContext = createContextId("entry-ui-qwik-tabs-root-context");
+const useTabsRootContext = () => {
+  const context = useContext(TabsRootContext);
+  return context;
+};
+export {
+  TabsRootContext,
+  useTabsRootContext
+};

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

@@ -0,0 +1,33 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value provided by the `TabsRootContext` context.
+ * Contains the readonly signals and `QRL` function shared with descendant components.
+ */
+export interface TabsRootContextValue {
+    /**
+     * 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 unique identifier for the tabs.
+     * This ID is used to generate consistent, unique sub-identifiers for child components
+     * (e.g., tabs and panels) to ensure proper WAI-ARIA accessibility mapping.
+     */
+    id: string;
+    /**
+     * A readonly signal whose value represents the reading direction of the tabs.
+     * This value (either `"ltr"` or `"rtl"`) affects keyboard navigation and visual layout.
+     */
+    dir: ReadonlySignal<'ltr' | 'rtl'>;
+    /**
+     * 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/contexts/tabs-tab-context/index.d.ts

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

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';