@entry-ui/qwik 0.5.0 → 0.7.0

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

@@ -0,0 +1,49 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useComputed$, $, useContextProvider, Slot } from "@qwik.dev/core";
+import { useId } from "../../../../_internal/hooks/use-id/use-id.qwik.mjs";
+import { useIdManager } from "../../../../_internal/hooks/use-id-manager/use-id-manager.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useAccordionRootContext } from "../../contexts/accordion-root-context/accordion-root-context.qwik.mjs";
+import { AccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
+const AccordionItem = component$((props) => {
+  const { as = "div", value: _value, disabled: _disabled = false, ...others } = props;
+  const { value: rootValue, disabled: rootDisabled, onItemOpen$, onItemClose$ } = useAccordionRootContext();
+  const fallbackValue = useId({
+    prefix: "entry-ui-qwik-accordion-item-"
+  });
+  const value = useComputed$(() => _value ?? fallbackValue);
+  const open = useComputed$(() => rootValue.value.includes(value.value));
+  const disabled = useComputed$(() => _disabled || rootDisabled.value);
+  const triggerId = useIdManager({
+    prefix: "entry-ui-qwik-accordion-item-trigger-"
+  });
+  const panelId = useIdManager({
+    prefix: "entry-ui-qwik-accordion-item-panel-"
+  });
+  const setOpen$ = $((open2) => {
+    if (open2) {
+      onItemOpen$(value.value);
+    } else {
+      onItemClose$(value.value);
+    }
+  });
+  useContextProvider(AccordionItemContext, {
+    value,
+    open,
+    setOpen$,
+    disabled,
+    triggerId,
+    panelId
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    "data-entry-ui-qwik-accordion-item": "",
+    "data-state": open.value ? "open" : "closed",
+    "data-disabled": disabled.value ? "" : void 0,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  AccordionItem
+};

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

@@ -0,0 +1,29 @@
+import { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the `Accordion.Item` component.
+ * Extends the standard HTML attributes for a `<div>` element.
+ */
+export interface AccordionItemProps 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 accordion item.
+     * If no value is provided, a unique ID will be generated automatically.
+     * Use when controlling the accordion programmatically, or to set an initial open state.
+     *
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * When `true`, prevents the user from interacting with the accordion item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export type { AccordionItemProps } from './accordion-item.types';
+export { AccordionItem } from './accordion-item';

package/lib/components/accordion/parts/accordion-item-header/accordion-item-header.d.ts

@@ -0,0 +1,11 @@
+import type { AccordionItemHeaderProps } from './accordion-item-header.types';
+/**
+ * A heading that labels the corresponding panel.
+ *
+ * It provides a semantic structure to the collapsible section,
+ * ensuring it follows accessibility best practices by wrapping
+ * the interactive trigger in a heading element.
+ *
+ * Renders an `<h3>` element.
+ */
+export declare const AccordionItemHeader: import("@qwik.dev/core").Component<AccordionItemHeaderProps>;

package/lib/components/accordion/parts/accordion-item-header/accordion-item-header.qwik.mjs

@@ -0,0 +1,19 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, Slot } from "@qwik.dev/core";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useAccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
+const AccordionItemHeader = component$((props) => {
+  const { as = "h3", ...others } = props;
+  const { open, disabled } = useAccordionItemContext();
+  return /* @__PURE__ */ jsx(Primitive.h3, {
+    as,
+    "data-entry-ui-qwik-accordion-item-header": "",
+    "data-state": open.value ? "open" : "closed",
+    "data-disabled": disabled.value ? "" : void 0,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  AccordionItemHeader
+};

package/lib/components/accordion/parts/accordion-item-header/accordion-item-header.types.d.ts

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

package/lib/components/accordion/parts/accordion-item-header/index.d.ts

@@ -0,0 +1,2 @@
+export type { AccordionItemHeaderProps } from './accordion-item-header.types';
+export { AccordionItemHeader } from './accordion-item-header';

package/lib/components/accordion/parts/accordion-item-indicator/accordion-item-indicator.d.ts

@@ -0,0 +1,8 @@
+import type { AccordionItemIndicatorProps } from './accordion-item-indicator.types';
+/**
+ * An optional visual indicator that reflects the item'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 AccordionItemIndicator: import("@qwik.dev/core").Component<AccordionItemIndicatorProps>;

package/lib/components/accordion/parts/accordion-item-indicator/accordion-item-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 { useAccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
+const AccordionItemIndicator = component$((props) => {
+  const { style, ...others } = props;
+  const { open, disabled } = useAccordionItemContext();
+  return /* @__PURE__ */ jsx(Primitive.span, {
+    "aria-hidden": "true",
+    "data-entry-ui-qwik-accordion-item-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 {
+  AccordionItemIndicator
+};

package/lib/components/accordion/parts/accordion-item-indicator/accordion-item-indicator.types.d.ts

@@ -0,0 +1,15 @@
+import { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the `Accordion.ItemIndicator` component.
+ * Extends the standard HTML attributes for a `<span>` element.
+ */
+export interface AccordionItemIndicatorProps 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/accordion/parts/accordion-item-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export type { AccordionItemIndicatorProps } from './accordion-item-indicator.types';
+export { AccordionItemIndicator } from './accordion-item-indicator';

package/lib/components/accordion/parts/accordion-item-panel/accordion-item-panel.d.ts

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

package/lib/components/accordion/parts/accordion-item-panel/accordion-item-panel.qwik.mjs

@@ -0,0 +1,199 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useComputed$, $, useTask$, isBrowser, isDev, sync$, Slot } from "@qwik.dev/core";
+import { getComputedStyle } from "@entry-ui/utilities/get-computed-style";
+import { getHiddenElementHeight } from "@entry-ui/utilities/get-hidden-element-height";
+import { addEventListenerOnce } from "@entry-ui/utilities/add-event-listener-once";
+import { useLifecycle } from "../../../../hooks/use-lifecycle/use-lifecycle.qwik.mjs";
+import { mergeStyles } from "../../../../utilities/merge-styles/merge-styles.qwik.mjs";
+import { mergeRefs } from "../../../../utilities/merge-refs/merge-refs.qwik.mjs";
+import { warn } from "../../../../_internal/utilities/warn/warn.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useAccordionRootContext } from "../../contexts/accordion-root-context/accordion-root-context.qwik.mjs";
+import { useAccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
+const AccordionItemPanel = component$((props) => {
+  const { as = "div", ref: _ref, id, hiddenUntilFound: _hiddenUntilFound = false, onOpenChangeComplete$, onBeforematch$, style, ...others } = props;
+  const { hiddenUntilFound: rootHiddenUntilFound } = useAccordionRootContext();
+  const { open, setOpen$, disabled, panelId, triggerId } = useAccordionItemContext();
+  const ref = useSignal(void 0);
+  const hidden = useSignal(!open.value);
+  const state = useSignal(open.value ? "open" : "closed");
+  const height = useSignal(() => {
+    if (open.value) {
+      return "auto";
+    }
+    return _hiddenUntilFound || rootHiddenUntilFound.value ? disabled.value ? "0px" : "none" : "0px";
+  });
+  const isBeforeMatch = useSignal(false);
+  const preventInitialAnimation = useSignal(true);
+  const hiddenUntilFound = useComputed$(() => disabled.value ? false : _hiddenUntilFound || rootHiddenUntilFound.value);
+  const mergedStyles = useComputed$(() => mergeStyles([
+    {
+      display: hidden.value ? hiddenUntilFound.value ? void 0 : "none !important" : void 0,
+      transitionDuration: preventInitialAnimation.value ? "0s" : void 0,
+      animationDuration: preventInitialAnimation.value ? "0s" : void 0,
+      "--entry-ui-qwik-accordion-item-panel-height": height.value
+    },
+    style
+  ]));
+  useLifecycle({
+    element: ref,
+    onMount$: $(() => panelId.set$(id)),
+    onUnmount$: $(() => panelId.delete$())
+  });
+  useTask$(({ track }) => {
+    const isHiddenUntilFound = track(() => hiddenUntilFound.value);
+    const panelRef = ref.value;
+    if (isBrowser && panelRef) {
+      const panelHeight = open.value ? "auto" : isHiddenUntilFound ? "none" : "0px";
+      height.value = panelHeight;
+      panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", panelHeight);
+    }
+  });
+  useTask$(({ track, cleanup }) => {
+    const isOpen = track(() => open.value);
+    const panelRef = ref.value;
+    if (isBrowser && panelRef) {
+      if (preventInitialAnimation.value && !isBeforeMatch.value) {
+        preventInitialAnimation.value = false;
+        panelRef.style.removeProperty("transition-duration");
+        panelRef.style.removeProperty("animation-duration");
+      }
+      if (isOpen) {
+        hidden.value = false;
+        panelRef.removeAttribute("hidden");
+        if (hiddenUntilFound.value) {
+          isBeforeMatch.value = false;
+        } else {
+          panelRef.style.removeProperty("display");
+        }
+        state.value = "open";
+        panelRef.setAttribute("data-state", "open");
+        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
+        const panelHeight = getHiddenElementHeight(panelRef);
+        if (animationDuration2 === "0s" && transitionDuration2 !== "0s") {
+          if (height.value === "none") {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "0px");
+            setTimeout(() => {
+              height.value = `${panelHeight}px`;
+              panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", `${panelHeight}px`);
+            }, 0);
+          } else {
+            height.value = `${panelHeight}px`;
+            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", `${panelHeight}px`);
+          }
+        } else {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", `${panelHeight}px`);
+        }
+      } else {
+        state.value = "closed";
+        panelRef.setAttribute("data-state", "closed");
+        const { animationDuration: animationDuration2, transitionDuration: transitionDuration2 } = getComputedStyle(panelRef);
+        const panelHeight = getHiddenElementHeight(panelRef);
+        if (animationDuration2 === "0s" && transitionDuration2 !== "0s") {
+          if (height.value === "auto") {
+            height.value = `${panelHeight}px`;
+            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", `${panelHeight}px`);
+            setTimeout(() => {
+              height.value = "0px";
+              panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "0px");
+            }, 0);
+          } else {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "0px");
+          }
+        } else {
+          height.value = `${panelHeight}px`;
+          panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", `${panelHeight}px`);
+        }
+      }
+      const applyFinalState = () => {
+        if (isOpen) {
+          height.value = "auto";
+          panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "auto");
+        } else {
+          hidden.value = true;
+          if (hiddenUntilFound.value) {
+            height.value = "none";
+            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "none");
+          } else {
+            height.value = "0px";
+            panelRef.style.setProperty("--entry-ui-qwik-accordion-item-panel-height", "0px");
+          }
+        }
+        if (onOpenChangeComplete$) {
+          onOpenChangeComplete$(isOpen);
+        }
+      };
+      const { transitionDuration, animationDuration } = getComputedStyle(panelRef);
+      if (isDev && transitionDuration !== "0s" && animationDuration !== "0s") {
+        warn([
+          `Both CSS transitions and CSS animations are detected on 'Accordion.ItemPanel' component.`,
+          `Using both at the same time may cause unpredictable behavior.`,
+          `Please use only one animation method.`
+        ]);
+        applyFinalState();
+      } else if (transitionDuration !== "0s") {
+        const removeTransitionEndListener = addEventListenerOnce({
+          target: panelRef,
+          type: "transitionend",
+          listener: applyFinalState
+        });
+        cleanup(() => {
+          removeTransitionEndListener();
+        });
+      } else if (animationDuration !== "0s") {
+        const removeAnimationEndListener = addEventListenerOnce({
+          target: panelRef,
+          type: "animationend",
+          listener: applyFinalState
+        });
+        cleanup(() => {
+          removeAnimationEndListener();
+        });
+      } else {
+        applyFinalState();
+      }
+    }
+  });
+  const handleBeforeMatchSync$ = sync$((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
+      event.preventDefault();
+    }
+  });
+  const handleBeforeMatch$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented) {
+      isBeforeMatch.value = true;
+      preventInitialAnimation.value = true;
+      setOpen$(true);
+    }
+  });
+  return /* @__PURE__ */ jsx(Primitive.div, {
+    as,
+    ref: mergeRefs([
+      _ref,
+      ref
+    ]),
+    id: panelId.id.value,
+    role: triggerId.id.value ? "region" : void 0,
+    hidden: hidden.value ? hiddenUntilFound.value ? "until-found" : "hidden" : void 0,
+    "aria-labelledby": triggerId.id.value,
+    "data-entry-ui-qwik-accordion-item-panel": "",
+    "data-state": state.value,
+    "data-disabled": disabled.value ? "" : void 0,
+    onBeforematch$: [
+      onBeforematch$,
+      handleBeforeMatchSync$,
+      handleBeforeMatch$
+    ],
+    style: mergedStyles.value,
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  AccordionItemPanel
+};

package/lib/components/accordion/parts/accordion-item-panel/accordion-item-panel.types.d.ts

@@ -0,0 +1,31 @@
+import { PropsOf, Component, QRL } from '@qwik.dev/core';
+/**
+ * Props for the `Accordion.ItemPanel` component.
+ * Extends the standard HTML attributes for a `<div>` element.
+ */
+export interface AccordionItemPanelProps 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;
+    /**
+     * When `true`, the panel uses the `hidden="until-found"` attribute when closed.
+     * This allows the browser to search and reveal content within the panel
+     * even before it is manually opened.
+     *
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * A `QRL` callback invoked once the panel's expansion or collapse has fully settled.
+     * If CSS transitions or animations are present, it triggers after they finish;
+     * otherwise, it executes immediately upon the state change.
+     *
+     * @default undefined
+     */
+    onOpenChangeComplete$?: QRL<(open: boolean) => void>;
+}

package/lib/components/accordion/parts/accordion-item-panel/index.d.ts

@@ -0,0 +1,2 @@
+export type { AccordionItemPanelProps } from './accordion-item-panel.types';
+export { AccordionItemPanel } from './accordion-item-panel';

package/lib/components/accordion/parts/accordion-item-trigger/accordion-item-trigger.d.ts

@@ -0,0 +1,7 @@
+import type { AccordionItemTriggerProps } from './accordion-item-trigger.types';
+/**
+ * A button that opens and closes the corresponding panel.
+ *
+ * Renders a `<button>` element.
+ */
+export declare const AccordionItemTrigger: import("@qwik.dev/core").Component<AccordionItemTriggerProps>;

package/lib/components/accordion/parts/accordion-item-trigger/accordion-item-trigger.qwik.mjs

@@ -0,0 +1,52 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, useComputed$, $, useContextProvider, Slot } from "@qwik.dev/core";
+import { useLifecycle } from "../../../../hooks/use-lifecycle/use-lifecycle.qwik.mjs";
+import { mergeRefs } from "../../../../utilities/merge-refs/merge-refs.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { useAccordionItemContext } from "../../contexts/accordion-item-context/accordion-item-context.qwik.mjs";
+import { AccordionItemTriggerContext } from "../../contexts/accordion-item-trigger-context/accordion-item-trigger-context.qwik.mjs";
+const AccordionItemTrigger = component$((props) => {
+  const { as = "button", ref: _ref, id, disabled: _disabled, onClick$, ...others } = props;
+  const { open, setOpen$, disabled: itemDisabled, triggerId, panelId } = useAccordionItemContext();
+  const ref = useSignal(void 0);
+  const disabled = useComputed$(() => _disabled ?? itemDisabled.value);
+  useLifecycle({
+    element: ref,
+    onMount$: $(() => triggerId.set$(id)),
+    onUnmount$: $(() => triggerId.delete$())
+  });
+  const handleClick$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented && !disabled.value) {
+      setOpen$(!open.value);
+    }
+  });
+  useContextProvider(AccordionItemTriggerContext, {
+    disabled
+  });
+  return /* @__PURE__ */ jsx(Primitive.button, {
+    as,
+    ref: mergeRefs([
+      _ref,
+      ref
+    ]),
+    type: "button",
+    id: triggerId.id.value,
+    disabled: disabled.value,
+    "aria-controls": panelId.id.value && open.value ? panelId.id.value : void 0,
+    "aria-expanded": panelId.id.value ? open.value : void 0,
+    "data-entry-ui-qwik-accordion-item-trigger": "",
+    "data-state": open.value ? "open" : "closed",
+    // Present when the accordion item component is in a disabled state.
+    "data-disabled": itemDisabled.value ? "" : void 0,
+    onClick$: [
+      onClick$,
+      handleClick$
+    ],
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  AccordionItemTrigger
+};

package/lib/components/accordion/parts/accordion-item-trigger/accordion-item-trigger.types.d.ts

@@ -0,0 +1,23 @@
+import { PropsOf, Component } from '@qwik.dev/core';
+/**
+ * Props for the `Accordion.ItemTrigger` component.
+ * Extends the standard HTML attributes for a `<button>` element.
+ */
+export interface AccordionItemTriggerProps 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;
+    /**
+     * When `true`, prevents the user from interacting with the trigger.
+     * If left `undefined`, this state will be inherited from the `disabled`
+     * prop of the `Accordion.Item` component.
+     *
+     * @default undefined
+     */
+    disabled?: boolean;
+}

package/lib/components/accordion/parts/accordion-item-trigger/index.d.ts

@@ -0,0 +1,2 @@
+export type { AccordionItemTriggerProps } from './accordion-item-trigger.types';
+export { AccordionItemTrigger } from './accordion-item-trigger';

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

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