@entry-ui/qwik 0.5.0 → 0.7.0

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

@@ -0,0 +1,137 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useComputed$, $, sync$, useContextProvider, Slot } from "@qwik.dev/core";
+import { isDev } from "@qwik.dev/core/build";
+import { useControllable } from "../../../../hooks/use-controllable/use-controllable.qwik.mjs";
+import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { warn } from "../../../../_internal/utilities/warn/warn.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { AccordionRootContext } from "../../contexts/accordion-root-context/accordion-root-context.qwik.mjs";
+const AccordionRoot = component$((props) => {
+  const { as = "div", defaultValue, value: _value, onValueChange$, multiple = false, loopFocus = true, hiddenUntilFound: _hiddenUntilFound = false, disabled: _disabled = false, onKeyDown$, style, ...others } = props;
+  const { state: value, setState$: setValue$ } = useControllable({
+    defaultValue: defaultValue ?? [],
+    controlledSignal: _value,
+    onChange$: onValueChange$
+  });
+  const hiddenUntilFound = useComputed$(() => _hiddenUntilFound);
+  const disabled = useComputed$(() => _disabled);
+  if (isDev && !multiple && value.value.length > 1) {
+    warn([
+      `The 'Accordion.Root' component is in single-selection mode,`,
+      `but received ${value.value.length} open items in 'value' or 'defaultValue'.`,
+      `This may lead to unpredictable behavior.`
+    ]);
+  }
+  const onItemOpen$ = $((itemValue) => {
+    if (!multiple) {
+      setValue$([
+        itemValue
+      ]);
+    }
+    if (multiple) {
+      setValue$([
+        ...value.value,
+        itemValue
+      ]);
+    }
+  });
+  const onItemClose$ = $((itemValue) => {
+    if (!multiple) {
+      setValue$([]);
+    }
+    if (multiple) {
+      setValue$(value.value.filter((value2) => value2 !== itemValue));
+    }
+  });
+  const handleKeyDownSync$ = sync$((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented && [
+      "ArrowDown",
+      "ArrowUp",
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      event.preventDefault();
+    }
+  });
+  const handleKeyDown$ = $((event, currentTarget) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented && [
+      "ArrowDown",
+      "ArrowUp",
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      const target = event.target;
+      const ENABLED_TRIGGERS_SELECTOR = "[data-entry-ui-qwik-accordion-item-trigger]:not([disabled])";
+      const enabledTriggers = Array.from(currentTarget.querySelectorAll(ENABLED_TRIGGERS_SELECTOR));
+      const thisIndex = enabledTriggers.indexOf(target);
+      const lastIndex = enabledTriggers.length - 1;
+      let nextIndex = -1;
+      switch (event.key) {
+        case "ArrowDown":
+          if (loopFocus) {
+            nextIndex = thisIndex + 1 > lastIndex ? 0 : thisIndex + 1;
+          } else {
+            nextIndex = Math.min(thisIndex + 1, lastIndex);
+          }
+          break;
+        case "ArrowUp":
+          if (loopFocus) {
+            nextIndex = thisIndex === 0 ? lastIndex : thisIndex - 1;
+          } else {
+            nextIndex = thisIndex - 1;
+          }
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = lastIndex;
+          break;
+      }
+      if (nextIndex > -1) {
+        enabledTriggers[nextIndex]?.focus();
+      }
+    }
+  });
+  useContextProvider(AccordionRootContext, {
+    value,
+    setValue$,
+    hiddenUntilFound,
+    disabled,
+    onItemOpen$,
+    onItemClose$
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    "data-entry-ui-qwik-accordion-root": "",
+    "data-disabled": disabled.value ? "" : void 0,
+    onKeyDown$: [
+      onKeyDown$,
+      handleKeyDownSync$,
+      handleKeyDown$
+    ],
+    style: mergeStyles([
+      {
+        // Performance optimization
+        // The `contain: layout style;` CSS property is used here to improve rendering performance.
+        // `contain: layout;` tells the browser that the internal layout of this accordion
+        // is self-contained and does not affect the layout of elements outside of it. This prevents
+        // costly re-calculations of the entire page layout when an accordion item expands or collapses,
+        // which is especially beneficial during animations.
+        // `contain: style;` ensures that CSS properties that can affect the rest of the page,
+        // like counters, are isolated to this element.
+        // Together, these properties create a performance "bubble", allowing the browser to optimize
+        // rendering by treating the accordion component as an independent unit.
+        contain: "layout style"
+      },
+      style
+    ]),
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  AccordionRoot
+};

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

@@ -0,0 +1,68 @@
+import { PropsOf, Component, Signal, QRL } from '@qwik.dev/core';
+/**
+ * Props for the `Accordion.Root` component.
+ * Extends the standard HTML attributes for a `<div>` element.
+ */
+export interface AccordionRootProps 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 accordion item or items to expand when initially rendered.
+     * When `multiple` is `false`, this array should contain at most one element.
+     * Use when you do not need to control the state of the accordion items.
+     *
+     * @default []
+     */
+    defaultValue?: string[];
+    /**
+     * The controlled value of the accordion item or items to expand.
+     * When `multiple` is `false`, this array should contain at most one element.
+     * Must be used in conjunction with `onValueChange$`.
+     *
+     * @default undefined
+     */
+    value?: Signal<string[]>;
+    /**
+     * A `QRL` callback function that is called when the expanded state of an accordion item or items changes.
+     *
+     * @default undefined
+     */
+    onValueChange$?: QRL<(value: string[]) => void>;
+    /**
+     * Whether or not multiple accordion items can be expanded at the same time.
+     * When `false`, expanding one item will automatically collapse the others.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Whether the keyboard focus should wrap back to the first or last item trigger
+     * when navigating through the accordion.
+     * When `true`, pressing `ArrowDown` on the last enabled trigger moves focus to the
+     * first one, and `ArrowUp` on the first enabled trigger moves focus to the last one.
+     *
+     * @default true
+     */
+    loopFocus?: boolean;
+    /**
+     * When `true`, all collapsed accordion panels will use the `hidden="until-found"`
+     * attribute. This allows the browser's "Find in page" feature to
+     * search through collapsed content and automatically expand the item when
+     * a match is found.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * When `true`, prevents the user from interacting with the accordion and all its items.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export type { AccordionRootProps } from './accordion-root.types';
+export { AccordionRoot } from './accordion-root';

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

@@ -0,0 +1,12 @@
+export type { AccordionRootProps as RootProps } from './accordion-root';
+export type { AccordionItemProps as ItemProps } from './accordion-item';
+export type { AccordionItemHeaderProps as ItemHeaderProps } from './accordion-item-header';
+export type { AccordionItemTriggerProps as ItemTriggerProps } from './accordion-item-trigger';
+export type { AccordionItemPanelProps as ItemPanelProps } from './accordion-item-panel';
+export type { AccordionItemIndicatorProps as ItemIndicatorProps } from './accordion-item-indicator';
+export { AccordionRoot as Root } from './accordion-root';
+export { AccordionItem as Item } from './accordion-item';
+export { AccordionItemHeader as ItemHeader } from './accordion-item-header';
+export { AccordionItemTrigger as ItemTrigger } from './accordion-item-trigger';
+export { AccordionItemPanel as ItemPanel } from './accordion-item-panel';
+export { AccordionItemIndicator as ItemIndicator } from './accordion-item-indicator';

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

@@ -0,0 +1,14 @@
+import { AccordionRoot } from "./accordion-root/accordion-root.qwik.mjs";
+import { AccordionItem } from "./accordion-item/accordion-item.qwik.mjs";
+import { AccordionItemHeader } from "./accordion-item-header/accordion-item-header.qwik.mjs";
+import { AccordionItemTrigger } from "./accordion-item-trigger/accordion-item-trigger.qwik.mjs";
+import { AccordionItemPanel } from "./accordion-item-panel/accordion-item-panel.qwik.mjs";
+import { AccordionItemIndicator } from "./accordion-item-indicator/accordion-item-indicator.qwik.mjs";
+export {
+  AccordionItem as Item,
+  AccordionItemHeader as ItemHeader,
+  AccordionItemIndicator as ItemIndicator,
+  AccordionItemPanel as ItemPanel,
+  AccordionItemTrigger as ItemTrigger,
+  AccordionRoot as Root
+};

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

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

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

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

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

@@ -0,0 +1,58 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value provided by the `CollapsibleRootContext` context.
+ * Contains the readonly signals and `QRL` functions shared with descendant components.
+ */
+export interface CollapsibleRootContextValue {
+    /**
+     * A readonly signal whose value indicates the collapsible's current open state.
+     * It is `true` when the collapsible is open, and `false` when closed.
+     */
+    open: ReadonlySignal<boolean>;
+    /**
+     * A `QRL` function used to programmatically set the open state of the collapsible.
+     * When invoked with `true`, the collapsible will open; with `false`, it will close.
+     */
+    setOpen$: QRL<(open: boolean) => void>;
+    /**
+     * A readonly signal whose value indicates the collapsible's current disabled state.
+     * It is `true` when the collapsible is prevented from user interaction.
+     */
+    disabled: ReadonlySignal<boolean>;
+    /**
+     * An object containing the identifier state and management `QRL` functions for the trigger element.
+     * This is used to link the trigger and the collapsible panel for accessibility purposes (WAI-ARIA).
+     */
+    triggerId: {
+        /**
+         * A readonly signal representing the unique identifier of the trigger.
+         */
+        id: ReadonlySignal<string | undefined>;
+        /**
+         * A `QRL` function to manually set or update the trigger's identifier.
+         */
+        set$: QRL<(value: string | undefined) => void>;
+        /**
+         * A `QRL` function to clear the trigger's identifier.
+         */
+        delete$: QRL<() => void>;
+    };
+    /**
+     * An object containing the identifier state and management functions for the panel element.
+     * This ensures the content panel can be correctly referenced by the trigger's `aria-controls` attribute.
+     */
+    panelId: {
+        /**
+         * A readonly signal representing the unique identifier of the collapsible panel.
+         */
+        id: ReadonlySignal<string | undefined>;
+        /**
+         * A `QRL` function to manually set or update the panel's identifier.
+         */
+        set$: QRL<(value: string | undefined) => void>;
+        /**
+         * A `QRL` function to clear the panel's identifier.
+         */
+        delete$: QRL<() => void>;
+    };
+}

package/lib/components/collapsible/contexts/collapsible-root-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsibleRootContextValue } from './collapsible-root-context.types';
+export { CollapsibleRootContext, useCollapsibleRootContext } from './collapsible-root-context';

package/lib/components/collapsible/contexts/collapsible-trigger-context/collapsible-trigger-context.d.ts

@@ -0,0 +1,6 @@
+import type { CollapsibleTriggerContextValue } from './collapsible-trigger-context.types';
+/**
+ * Provides the context for the `Collapsible.Trigger` component, allowing descendant
+ * components to access readonly signal without prop drilling.
+ */
+export declare const CollapsibleTriggerContext: import("@qwik.dev/core").ContextId<CollapsibleTriggerContextValue>;

package/lib/components/collapsible/contexts/collapsible-trigger-context/collapsible-trigger-context.qwik.mjs

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

package/lib/components/collapsible/contexts/collapsible-trigger-context/collapsible-trigger-context.types.d.ts

@@ -0,0 +1,13 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value provided by the `CollapsibleTriggerContext` context.
+ * Contains the readonly signal shared with descendant components.
+ */
+export interface CollapsibleTriggerContextValue {
+    /**
+     * A readonly signal representing the effective disabled state of the trigger.
+     * This value is computed by prioritizing the trigger's own `disabled` prop,
+     * falling back to the `Collapsible.Root` disabled state if not explicitly set.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

package/lib/components/collapsible/contexts/collapsible-trigger-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsibleTriggerContextValue } from './collapsible-trigger-context.types';
+export { CollapsibleTriggerContext } from './collapsible-trigger-context';

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

@@ -0,0 +1,2 @@
+export * from './collapsible-root-context';
+export * from './collapsible-trigger-context';

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

@@ -0,0 +1,2 @@
+export * from './use-collapsible-root-context';
+export * from './use-collapsible-trigger-context';

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

@@ -0,0 +1,2 @@
+export type { UseCollapsibleRootContextReturnValue } from './use-collapsible-root-context.types';
+export { useCollapsibleRootContext } from './use-collapsible-root-context';

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

@@ -0,0 +1,7 @@
+import type { UseCollapsibleRootContextReturnValue } from './use-collapsible-root-context.types';
+/**
+ * A hook that provides access to the `Collapsible.Root` component's internal state.
+ * It exposes readonly signals and `QRL` function to interact with the collapsible's state,
+ * allowing descendant components to control or react to its expanded/collapsed state.
+ */
+export declare const useCollapsibleRootContext: () => UseCollapsibleRootContextReturnValue;

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

@@ -0,0 +1,13 @@
+import { useContext } from "@qwik.dev/core";
+import { CollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
+const useCollapsibleRootContext = () => {
+  const { open, setOpen$, disabled } = useContext(CollapsibleRootContext);
+  return {
+    open,
+    setOpen$,
+    disabled
+  };
+};
+export {
+  useCollapsibleRootContext
+};

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

@@ -0,0 +1,22 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value returned by the `useCollapsibleRootContext` hook.
+ * Provides access to the collapsible's readonly signals and `QRL` function for descendant components.
+ */
+export interface UseCollapsibleRootContextReturnValue {
+    /**
+     * A readonly signal whose value indicates the collapsible's current open state.
+     * It is `true` when the collapsible is open, and `false` when closed.
+     */
+    open: ReadonlySignal<boolean>;
+    /**
+     * A `QRL` function used to programmatically set the open state of the collapsible.
+     * When invoked with `true`, the collapsible will open; with `false`, it will close.
+     */
+    setOpen$: QRL<(open: boolean) => void>;
+    /**
+     * A readonly signal whose value indicates the collapsible's current disabled state.
+     * It is `true` when the collapsible is prevented from user interaction.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

package/lib/components/collapsible/hooks/use-collapsible-trigger-context/index.d.ts

@@ -0,0 +1,2 @@
+export type { UseCollapsibleTriggerContextReturnValue } from './use-collapsible-trigger-context.types';
+export { useCollapsibleTriggerContext } from './use-collapsible-trigger-context';

package/lib/components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.d.ts

@@ -0,0 +1,7 @@
+import type { UseCollapsibleTriggerContextReturnValue } from './use-collapsible-trigger-context.types';
+/**
+ * A hook that provides access to the `Collapsible.Trigger` component's internal state.
+ * It exposes readonly signal to interact with the trigger's state,
+ * allowing descendant components to react to its disabled/enabled state.
+ */
+export declare const useCollapsibleTriggerContext: () => UseCollapsibleTriggerContextReturnValue;

package/lib/components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.qwik.mjs

@@ -0,0 +1,11 @@
+import { useContext } from "@qwik.dev/core";
+import { CollapsibleTriggerContext } from "../../contexts/collapsible-trigger-context/collapsible-trigger-context.qwik.mjs";
+const useCollapsibleTriggerContext = () => {
+  const { disabled } = useContext(CollapsibleTriggerContext);
+  return {
+    disabled
+  };
+};
+export {
+  useCollapsibleTriggerContext
+};

package/lib/components/collapsible/hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.types.d.ts

@@ -0,0 +1,13 @@
+import type { ReadonlySignal } from '@qwik.dev/core';
+/**
+ * The value returned by the `useCollapsibleTriggerContext` hook.
+ * Provides access to the trigger's readonly signal for descendant components.
+ */
+export interface UseCollapsibleTriggerContextReturnValue {
+    /**
+     * A readonly signal representing the effective disabled state of the trigger.
+     * This value is computed by prioritizing the trigger's own `disabled` prop,
+     * falling back to the `Collapsible.Root` disabled state if not explicitly set.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

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

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

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

@@ -0,0 +1,8 @@
+import * as index from "./parts/index.qwik.mjs";
+import { useCollapsibleRootContext } from "./hooks/use-collapsible-root-context/use-collapsible-root-context.qwik.mjs";
+import { useCollapsibleTriggerContext } from "./hooks/use-collapsible-trigger-context/use-collapsible-trigger-context.qwik.mjs";
+export {
+  index as Collapsible,
+  useCollapsibleRootContext,
+  useCollapsibleTriggerContext
+};

package/lib/components/collapsible/parts/collapsible-indicator/collapsible-indicator.d.ts

@@ -0,0 +1,8 @@
+import type { CollapsibleIndicatorProps } from './collapsible-indicator.types';
+/**
+ * An optional visual indicator that reflects the collapsible's open or closed state.
+ * It typically displays an icon or other visual cue to show the current status.
+ *
+ * Renders a `<span>` element.
+ */
+export declare const CollapsibleIndicator: import("@qwik.dev/core").Component<CollapsibleIndicatorProps>;

package/lib/components/collapsible/parts/collapsible-indicator/collapsible-indicator.qwik.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, 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 { useCollapsibleRootContext } from "../../contexts/collapsible-root-context/collapsible-root-context.qwik.mjs";
+const CollapsibleIndicator = component$((props) => {
+  const { style, ...others } = props;
+  const { open, disabled } = useCollapsibleRootContext();
+  return /* @__PURE__ */ jsx(Primitive.span, {
+    "aria-hidden": "true",
+    "data-entry-ui-qwik-collapsible-indicator": "",
+    "data-state": open.value ? "open" : "closed",
+    "data-disabled": disabled.value ? "" : void 0,
+    style: mergeStyles([
+      {
+        pointerEvents: "none",
+        userSelect: "none"
+      },
+      style
+    ]),
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  CollapsibleIndicator
+};

package/lib/components/collapsible/parts/collapsible-indicator/collapsible-indicator.types.d.ts

@@ -0,0 +1,15 @@
+import { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the `Collapsible.Indicator` component.
+ * Extends the standard HTML attributes for a `<span>` element.
+ */
+export interface CollapsibleIndicatorProps extends PropsOf<'span'> {
+    /**
+     * 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 "span"
+     */
+    as?: string | Component;
+}

package/lib/components/collapsible/parts/collapsible-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export type { CollapsibleIndicatorProps } from './collapsible-indicator.types';
+export { CollapsibleIndicator } from './collapsible-indicator';

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

@@ -0,0 +1,7 @@
+import type { CollapsiblePanelProps } from './collapsible-panel.types';
+/**
+ * A panel with the collapsible contents.
+ *
+ * Renders a `<div>` element.
+ */
+export declare const CollapsiblePanel: import("@qwik.dev/core").Component<CollapsiblePanelProps>;