@entry-ui/qwik 0.8.0 → 0.9.0

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/use-clipboard/use-clipboard.qwik.mjs

@@ -20,10 +20,13 @@ const useClipboard = (params = {}) => {
     await copyToClipboard({
       value,
       onSuccess: () => {
-        win.clearTimeout(copyTimeout.value);
+        if (copyTimeout.value !== -1) {
+          win.clearTimeout(copyTimeout.value);
+        }
         copyTimeout.value = win.setTimeout(() => {
           copied.value = false;
           error$1.value = null;
+          copyTimeout.value = -1;
           onStatusChange$?.({
             copied: false,
             error: null
@@ -69,7 +72,10 @@ const useClipboard = (params = {}) => {
     copied.value = false;
     error$1.value = null;
     const win = document.defaultView || window;
-    win.clearTimeout(copyTimeout.value);
+    if (copyTimeout.value !== -1) {
+      win.clearTimeout(copyTimeout.value);
+      copyTimeout.value = -1;
+    }
     onStatusChange$?.({
       copied: false,
       error: null

package/lib/index.qwik.mjs

@@ -8,8 +8,15 @@ import { useCollapsibleRootContext } from "./components/collapsible/hooks/use-co
 import { useCollapsibleTriggerContext } from "./components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.qwik.mjs";
 import * as index$3 from "./components/copy-button/parts/index.qwik.mjs";
 import { useCopyButtonRootContext } from "./components/copy-button/hooks/use-copy-button-root-context/use-copy-button-root-context.qwik.mjs";
-import * as index$4 from "./components/separator/parts/index.qwik.mjs";
-import * as index$5 from "./components/toggle/parts/index.qwik.mjs";
+import * as index$4 from "./components/roving-focus-group/parts/index.qwik.mjs";
+import { useRovingFocusGroupRootContext } from "./components/roving-focus-group/hooks/use-roving-focus-group-root-context/use-roving-focus-group-root-context.qwik.mjs";
+import { useRovingFocusGroupItemContext } from "./components/roving-focus-group/hooks/use-roving-focus-group-item-context/use-roving-focus-group-item-context.qwik.mjs";
+import * as index$5 from "./components/separator/parts/index.qwik.mjs";
+import * as index$6 from "./components/tabs/parts/index.qwik.mjs";
+import { useTabsRootContext } from "./components/tabs/hooks/use-tabs-root-context/use-tabs-root-context.qwik.mjs";
+import { useTabsTabContext } from "./components/tabs/hooks/use-tabs-tab-context/use-tabs-tab-context.qwik.mjs";
+import { useTabsPanelContext } from "./components/tabs/hooks/use-tabs-panel-context/use-tabs-panel-context.qwik.mjs";
+import * as index$7 from "./components/toggle/parts/index.qwik.mjs";
 import { useToggleRootContext } from "./components/toggle/hooks/use-toggle-root-context/use-toggle-root-context.qwik.mjs";
 import { useBoolean } from "./hooks/use-boolean/use-boolean.qwik.mjs";
 import { useClipboard } from "./hooks/use-clipboard/use-clipboard.qwik.mjs";
@@ -25,8 +32,10 @@ export {
   index$1 as Alert,
   index$2 as Collapsible,
   index$3 as CopyButton,
-  index$4 as Separator,
-  index$5 as Toggle,
+  index$4 as RovingFocusGroup,
+  index$5 as Separator,
+  index$6 as Tabs,
+  index$7 as Toggle,
   makeEventPreventable,
   mergeRefs,
   mergeStyles,
@@ -42,5 +51,10 @@ export {
   useCounter,
   useCycle,
   useLifecycle,
+  useRovingFocusGroupItemContext,
+  useRovingFocusGroupRootContext,
+  useTabsPanelContext,
+  useTabsRootContext,
+  useTabsTabContext,
   useToggleRootContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entry-ui/qwik",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/ZAHON/entry-ui#readme",
@@ -31,10 +31,18 @@
       "types": "./lib/components/copy-button/index.d.ts",
       "import": "./lib/components/copy-button/index.qwik.mjs"
     },
+    "./roving-focus-group": {
+      "types": "./lib/components/roving-focus-group/index.d.ts",
+      "import": "./lib/components/roving-focus-group/index.qwik.mjs"
+    },
     "./separator": {
       "types": "./lib/components/separator/index.d.ts",
       "import": "./lib/components/separator/index.qwik.mjs"
     },
+    "./tabs": {
+      "types": "./lib/components/tabs/index.d.ts",
+      "import": "./lib/components/tabs/index.qwik.mjs"
+    },
     "./toggle": {
       "types": "./lib/components/toggle/index.d.ts",
       "import": "./lib/components/toggle/index.qwik.mjs"
@@ -116,7 +124,7 @@
     "qwik": "qwik"
   },
   "dependencies": {
-    "@entry-ui/utilities": "^0.7.0"
+    "@entry-ui/utilities": "^0.8.0"
   },
   "devDependencies": {
     "@entry-ui/eslint": "workspace:*",