Entry UI

https://github.com/zahon/entry-ui
Admin
Entry UI is a monorepo containing configurations, packages, and playgrounds for user interface...
Tokens:54,360
Snippets:557
Trust Score:4.7
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Implementing a basic separator

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/separator/README.md

A practical example showing how to apply styles to the Separator.Root component.

```tsx
// index.tsx
import { component$ } from '@qwik.dev/core';
import { Separator } from '@entry-ui/qwik/separator';
import styles from './index.module.css';

const Usage = component$(() => {
  return <Separator.Root class={styles['separator-root']} />;
});
```

```css
/* index.module.css */
.separator-root {
  height: 1px;
  background-color: oklch(0% 0 0deg);
}
```

--------------------------------

### Usage examples for wrapArray

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/wrap-array/README.md

Demonstrates how to reorder an array using different start indices.

```ts
import { wrapArray } from '@entry-ui/utilities/wrap-array';

const data = ['a', 'b', 'c', 'd'];

wrapArray({ array: data, startIndex: 2 });
// Returns: ["c", "d", "a", "b"]

wrapArray({ array: data, startIndex: 3 });
// Returns: ["d", "a", "b", "c"]

wrapArray({ array: data, startIndex: 0 });
// Returns: ["a", "b", "c", "d"]
```

--------------------------------

### Usage Examples

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/focus-element/README.md

Demonstrates common usage patterns including text selection, scroll prevention, and forcing visible focus rings.

```ts
import { focusElement } from '@entry-ui/utilities/focus-element';

// Focus an input and automatically select its text content
focusElement({ element: myInput, select: true });

// Basic focus with scroll prevention
focusElement({ element: myButton, preventScroll: true });

// Triggering focus with a visible focus ring (mimics keyboard navigation)
focusElement({ element: myLink, focusVisible: true });
```

--------------------------------

### Using the clamp utility

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/clamp/README.md

Examples of clamping values within a range of 0 to 100.

```ts
import { clamp } from '@entry-ui/utilities/clamp';

clamp({ value: 150, min: 0, max: 100 });
// Returns: 100

clamp({ value: -20, min: 0, max: 100 });
// Returns: 0

clamp({ value: 50, min: 0, max: 100 });
// Returns: 50
```

--------------------------------

### Implement useCycle in a Component

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-cycle/README.md

Example demonstrating the use of useCycle to manage a color state with navigation controls.

```tsx
import { component$ } from '@qwik.dev/core';
import { useCycle } from '@entry-ui/qwik/use-cycle';

const Usage = component$(() => {
  const { option, next$, previous$, first$, last$, set$ } = useCycle({
    options: ['crimson', 'royalblue', 'seagreen', 'rebeccapurple'] as const,
  });

  return (
    <>
      <p>
        Option: <code style={{ color: option.value }}>{option.value}</code>
      </p>

      <button type="button" onClick$={next$}>
        Next
      </button>
      <button type="button" onClick$={previous$}>
        Previous
      </button>
      <button type="button" onClick$={first$}>
        First
      </button>
      <button type="button" onClick$={last$}>
        Last
      </button>
      <button type="button" onClick$={() => set$('royalblue')}>
        Set royalblue
      </button>
    </>
  );
});
```

--------------------------------

### Implement a Custom Input Component

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-controllable/README.md

Example demonstrating how to use the hook to manage state in a custom input component, supporting both controlled and uncontrolled modes.

```tsx
import type { Signal, QRL } from '@qwik.dev/core';
import { component$ } from '@qwik.dev/core';
import { useControllable } from '@entry-ui/qwik/use-controllable';

interface CustomInputProps {
  /**
   * The default value of the custom input when initially rendered.
   * Use when you do not need to control its the value.
   */
  defaultValue?: string;

  /**
   * The controlled value of the custom input.
   * Must be used in conjunction with `onValueChange$`.
   */
  value?: Signal<string>;

  /**
   * A `QRL` callback function that is called when the value of the custom input changes.
   */
  onValueChange$?: QRL<(value: string) => void>;
}

const CustomInput = component$<CustomInputProps>((props) => {
  const { defaultValue, value, onValueChange$ } = props;

  const { state, setState$ } = useControllable({
    defaultValue: defaultValue ?? '',
    controlledSignal: value,
    onChange$: onValueChange$,
  });

  return (
    <input
      type="text"
      autocomplete="off"
      value={state.value}
      onInput$={(_, currentTarget) => setState$(currentTarget.value)}
    />
  );
});

const Usage = component$(() => {
  return <CustomInput />;
});
```

--------------------------------

### Usage Examples

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/is-shallow-subset/README.md

Demonstrates how to use isShallowSubset to verify if a source object is a subset of a target object.

```ts
import { isShallowSubset } from '@entry-ui/utilities/is-shallow-subset';

isShallowSubset({ source: { id: 1 }, target: { id: 1, name: 'John' } });
// Returns: true

isShallowSubset({ source: { id: 1, type: 'admin' }, target: { id: 1 } });
// Returns: false
```

--------------------------------

### Using focusFirstElement

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/focus-first-element/README.md

Examples of focusing candidates with optional selection and scroll prevention.

```ts
import { focusFirstElement } from '@entry-ui/utilities/focus-first-element';

// Focus the first visible input or fallback to a close button
focusFirstElement({ candidates: [input, closeButton], select: true });

// Attempt to focus multiple elements, preventing scroll on the successful one
focusFirstElement({ candidates: [primaryAction, secondaryAction], preventScroll: true });
```

--------------------------------

### Implement useCounter in a Component

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-counter/README.md

Example showing the integration of useCounter within a Qwik component to manage state via provided QRL methods.

```tsx
import { component$ } from '@qwik.dev/core';
import { useCounter } from '@entry-ui/qwik/use-counter';

const Usage = component$(() => {
  const { count, increment$, decrement$, set$, reset$ } = useCounter();

  return (
    <>
      <p>Count: {count.value}</p>

      <button type="button" onClick$={increment$}>
        Increment
      </button>
      <button type="button" onClick$={decrement$}>
        Decrement
      </button>
      <button type="button" onClick$={() => set$(5)}>
        Set 5
      </button>
      <button type="button" onClick$={reset$}>
        Reset
      </button>
    </>
  );
});
```

--------------------------------

### Basic Accordion implementation

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/accordion/README.md

Example of a functional accordion with multiple items, each containing a trigger and a panel.

```tsx
import { component$ } from '@qwik.dev/core';
import { Accordion } from '@entry-ui/qwik/accordion';

const Usage = component$(() => {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>What is Entry UI Qwik?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          A collection of accessible, unstyled components, hooks, and utilities for Qwik, designed for building
          high-quality web applications and design systems.
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item>
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>How do I get started?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          Check out our installation guide to add the library to your project. Our intuitive API makes it easy to build
          complex components in minutes.
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item>
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Can I use it for my project?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel>
          Of course! Entry UI Qwik is an open-source project licensed under MIT. You are free to use it in both personal
          and commercial projects without any restrictions.
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});
```

--------------------------------

### Using useClipboard in a Component

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-clipboard/README.md

Demonstrates how to use the hook to copy text, handle state, and reset the clipboard status within a Qwik component.

```tsx
import { component$ } from '@qwik.dev/core';
import { useClipboard } from '@entry-ui/qwik/use-clipboard';

const Usage = component$(() => {
  const { copied, error, copy$, reset$ } = useClipboard();

  return (
    <>
      <button onClick$={() => copy$('Hello from Entry UI Qwik!')}>
        {copied.value ? 'Copied!' : 'Copy to clipboard'}
      </button>

      <button onClick$={reset$}>Reset state</button>

      {error.value === 'NOT_SUPPORTED' && <p>Your browser does not support clipboard operations.</p>}
      {error.value === 'COPY_FAILED' && <p>Copying failed. Please check permissions.</p>}
    </>
  );
});
```

--------------------------------

### Importing getWindow

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-window/README.md

Import the utility from the @entry-ui/utilities package.

```ts
import { getWindow } from '@entry-ui/utilities/get-window';
```

--------------------------------

### Import getDocument

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-document/README.md

Import the utility from the package.

```ts
import { getDocument } from '@entry-ui/utilities/get-document';
```

--------------------------------

### Implementing Tabs with default values

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/tabs/README.md

Example of an uncontrolled Tabs implementation using the defaultValue prop.

```tsx
import { component$ } from '@qwik.dev/core';
import { Tabs } from '@entry-ui/qwik/tabs';

const Usage = component$(() => {
  return (
    <Tabs.Root defaultValue="account">
      <Tabs.List>
        <Tabs.Tab value="account">Account</Tabs.Tab>
        <Tabs.Tab value="documents">Documents</Tabs.Tab>
        <Tabs.Tab value="notifications">Notifications</Tabs.Tab>
        <Tabs.Tab value="settings">Settings</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="account">Account details</Tabs.Panel>
      <Tabs.Panel value="documents">Documents details</Tabs.Panel>
      <Tabs.Panel value="notifications">Notifications details</Tabs.Panel>
      <Tabs.Panel value="settings">Settings details</Tabs.Panel>
    </Tabs.Root>
  );
});
```

--------------------------------

### Import setStyleProperty

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/set-style-property/README.md

Import the utility from the package entry point.

```ts
import { setStyleProperty } from '@entry-ui/utilities/set-style-property';
```

--------------------------------

### Importing useClipboard

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-clipboard/README.md

Import the hook from the package entry point.

```ts
import { useClipboard } from '@entry-ui/qwik/use-clipboard';
```

--------------------------------

### Import setStyle

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/set-style/README.md

Import the utility from the package.

```ts
import { setStyle } from '@entry-ui/utilities/set-style';
```

--------------------------------

### getActiveElement(doc)

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-active-element/README.md

Retrieves the deeply nested focused element starting from the provided document context.

```APIDOC
## getActiveElement(doc)

### Description
Recursively retrieves the currently focused element, including those nested deep within the Shadow DOM. This is useful for accessibility and focus management in components using Shadow DOM.

### Signature
`getActiveElement(doc: Document): Element | null`

### Parameters
- **doc** (Document) - Required - The document object to inspect. The utility starts its recursive search from `doc.activeElement`.

### Returns
- **Element | null** - The actual element that holds focus. Returns `null` if no element is focused or the document is invalid.
```

--------------------------------

### Roving Focus Group Usage

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/roving-focus-group/README.md

Example of implementing a basic roving focus group with multiple items.

```tsx
import { component$ } from '@qwik.dev/core';
import { RovingFocusGroup } from '@entry-ui/qwik/roving-focus-group';

const Usage = component$(() => {
  return (
    <RovingFocusGroup.Root>
      <RovingFocusGroup.Item>Item 1</RovingFocusGroup.Item>
      <RovingFocusGroup.Item>Item 2</RovingFocusGroup.Item>
      <RovingFocusGroup.Item>Item 3</RovingFocusGroup.Item>
    </RovingFocusGroup.Root>
  );
});
```

--------------------------------

### Usage of addEventListenerOnce

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/add-event-listener-once/README.md

Example demonstrating how to register a one-time scroll event listener and use the returned cleanup function.

```ts
import { addEventListenerOnce } from '@entry-ui/utilities/add-event-listener-once';

const cleanup = addEventListenerOnce({
  target: window,
  type: 'scroll',
  listener: (event) => {
    console.log('First scroll detected!', event);
  },
  options: { passive: true },
});

// If the listener is no longer needed before the first scroll:
// cleanup();
```

--------------------------------

### Importing Dialog components

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/dialog/README.md

Import the necessary Dialog components from the @entry-ui/qwik/dialog package.

```tsx
import { Dialog, useDialogRootContext, useDialogTriggerContext, useDialogCloseContext } from '@entry-ui/qwik/dialog';
```

--------------------------------

### wrapArray(options)

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/wrap-array/README.md

Rearranges an array by shifting its starting point to a specified index, returning a new array instance.

```APIDOC
## wrapArray(options)

### Description
Rearranges a source array by shifting its starting point to a specified index. The original array remains immutable, and a new array with the elements in a circular order is returned.

### Parameters
- **array** (T[]) - Required - The source array to be rearranged.
- **startIndex** (number) - Required - The zero-based index in the original array that will serve as the new starting point.

### Returns
- **T[]** - A new array instance containing the elements in the new circular order.

### Usage Example
```ts
import { wrapArray } from '@entry-ui/utilities/wrap-array';

const data = ['a', 'b', 'c', 'd'];

// Returns: ["c", "d", "a", "b"]
wrapArray({ array: data, startIndex: 2 });
```
```

--------------------------------

### Import Accordion components

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/accordion/README.md

Import the necessary components and hooks from the @entry-ui/qwik/accordion package.

```tsx
import {
  Accordion,
  useAccordionRootContext,
  useAccordionItemContext,
  useAccordionItemTriggerContext,
} from '@entry-ui/qwik/accordion';
```

--------------------------------

### Importing useLifecycle

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-lifecycle/README.md

Import the hook from the @entry-ui/qwik/use-lifecycle package.

```ts
import { useLifecycle } from '@entry-ui/qwik/use-lifecycle';
```

--------------------------------

### Importing mergeRefs

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/utilities/merge-refs/README.md

Import the utility from the package entry point.

```tsx
import { mergeRefs } from '@entry-ui/qwik/merge-refs';
```

--------------------------------

### Import addEventListenerOnce

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/add-event-listener-once/README.md

Import the utility from the @entry-ui/utilities package.

```ts
import { addEventListenerOnce } from '@entry-ui/utilities/add-event-listener-once';
```

--------------------------------

### Implementing a Basic Copy Button

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/copy-button/README.md

Use the defaultText prop to define the content and onStatusChange$ to track the copy state.

```tsx
const Usage = component$(() => {
  const isCopied = useSignal(false);

  return (
    <CopyButton.Root
      defaultText="Hello from Entry UI Qwik!"
      onStatusChange$={({ copied }) => (isCopied.value = copied)}
    >
      {isCopied.value ? 'Copied!' : 'Copy to clipboard'}
    </CopyButton.Root>
  );
});
```

--------------------------------

### Importing getPlatform

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-platform/README.md

Import the utility from the utilities package.

```ts
import { getPlatform } from '@entry-ui/utilities/get-platform';
```

--------------------------------

### Importing hasWindow

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/has-window/README.md

Import the utility from the @entry-ui/utilities package.

```ts
import { hasWindow } from '@entry-ui/utilities/has-window';
```

--------------------------------

### Importing mergeStyles

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/utilities/merge-styles/README.md

Import the utility from the package entry point.

```tsx
import { mergeStyles } from '@entry-ui/qwik/merge-styles';
```

--------------------------------

### Import copyToClipboard

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/copy-to-clipboard/README.md

Import the utility from the utilities package.

```ts
import { copyToClipboard } from '@entry-ui/utilities/copy-to-clipboard';
```

--------------------------------

### Import useBoolean

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-boolean/README.md

Import the hook from the package entry point.

```tsx
import { useBoolean } from '@entry-ui/qwik/use-boolean';
```

--------------------------------

### useCounter(options)

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-counter/README.md

Initializes a reactive counter with optional configuration for initial value, step size, and numerical boundaries.

```APIDOC
## useCounter(options)

### Description
Initializes a counter state with configurable boundaries and step increments. Returns a signal for the current value and QRL functions for state manipulation.

### Parameters
- **initialCount** (number) - Optional - The starting value of the counter (default: 0).
- **step** (number) - Optional - The increment/decrement amount (default: 1).
- **min** (number) - Optional - The lower numerical boundary (default: -Number.MAX_VALUE).
- **max** (number) - Optional - The upper numerical boundary (default: Number.MAX_VALUE).

### Returns
- **count** (ReadonlySignal<number>) - The current numeric state.
- **increment$** (QRL<() => void>) - Increases the counter by the step amount.
- **decrement$** (QRL<() => void>) - Decreases the counter by the step amount.
- **set$** (QRL<(value: number) => void>) - Sets the counter to a specific value.
- **reset$** (QRL<() => void>) - Resets the counter to the initialCount.
```

--------------------------------

### Implement a basic toggle

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/toggle/README.md

Create a simple toggle component using the Toggle.Root and custom CSS styles.

```tsx
// index.tsx
import { component$ } from '@qwik.dev/core';
import { Toggle } from '@entry-ui/qwik/toggle';
import styles from './index.module.css';

const Usage = component$(() => {
  return <Toggle.Root class={styles['toggle-root']}>Pin</Toggle.Root>;
});
```

```css
/* index.module.css */
.toggle-root[data-state='off'] {
  color: oklch(0% 0 0deg);
  background-color: oklch(100% 0 0deg);
}

.toggle-root[data-state='on'] {
  color: oklch(100% 0 0deg);
  background-color: purple;
}
```

--------------------------------

### Import the utility

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-hidden-element-height/README.md

Import the function from the utilities package.

```ts
import { getHiddenElementHeight } from '@entry-ui/utilities/get-hidden-element-height';
```

--------------------------------

### useBoolean(initialState?: boolean)

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-boolean/README.md

Initializes a boolean state and returns a readonly signal along with QRL functions to modify the state.

```APIDOC
## useBoolean(initialState?: boolean)

### Description
Initializes a boolean state and returns an object containing the current state as a readonly signal and methods to update it.

### Parameters
- **initialState** (boolean) - Optional - The initial value for the boolean state. Defaults to `false`.

### Returns
- **state** (ReadonlySignal<boolean>) - A readonly signal representing the current boolean value.
- **setFalse$** (QRL<() => void>) - A function to set the state to `false`.
- **setTrue$** (QRL<() => void>) - A function to set the state to `true`.
- **toggle$** (QRL<() => void>) - A function to toggle the current state value.
```

--------------------------------

### Import focusElement

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/focus-element/README.md

Import the utility from the @entry-ui/utilities package.

```ts
import { focusElement } from '@entry-ui/utilities/focus-element';
```

--------------------------------

### Customize CopyButton.Root with a custom component

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/copy-button/README.md

Use the as prop to replace the default button element with a custom Qwik component. Ensure the custom component remains accessible and functions as a button.

```tsx
import type { PropsOf } from '@qwik.dev/core';
import { component$, Slot } from '@qwik.dev/core';
import { CopyButton } from '@entry-ui/qwik/copy-button';

const MyCustomButton = component$<PropsOf<'button'>>((props) => {
  return (
    <button style={{ color: 'white', backgroundColor: 'purple' }} {...props}>
      <Slot />
    </button>
  );
});

const Example = component$(() => {
  return (
    <CopyButton.Root as={MyCustomButton} defaultText="Hello from Entry UI Qwik!">
      Copy to clipboard
    </CopyButton.Root>
  );
});
```

--------------------------------

### copyToClipboard(options)

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/copy-to-clipboard/README.md

Copies a provided string to the system clipboard and executes optional callbacks upon completion or failure.

```APIDOC
## copyToClipboard(options)

### Description
Copies the specified plaintext string to the system clipboard. Returns a promise that resolves after the operation and any provided callbacks have completed.

### Parameters
- **value** (string) - Required - The plaintext string to be transferred to the system clipboard.
- **onSuccess** (() => void) - Optional - Callback executed after successful write to the clipboard.
- **onError** ((error: ClipboardError) => void) - Optional - Callback executed when the operation fails or is unsupported.

### Returns
- **Promise<void>** - Resolves once the copy operation and lifecycle hooks have finished.
```

--------------------------------

### Import makeEventPreventable

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/utilities/make-event-preventable/README.md

Import the utility from the @entry-ui/qwik package.

```tsx
import { makeEventPreventable } from '@entry-ui/qwik/make-event-preventable';
```

--------------------------------

### Nesting Collapsible Components

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/collapsible/README.md

Demonstrates how to nest Collapsible.Root components within Collapsible.Panel to create hierarchical disclosure menus.

```tsx
import { component$ } from '@qwik.dev/core';
import { Collapsible } from '@entry-ui/qwik/collapsible';

const Example = component$(() => {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>Getting started</Collapsible.Trigger>
      <Collapsible.Panel>
        Welcome to the Entry UI Qwik documentation. Here are some topics to explore:
        <Collapsible.Root>
          <Collapsible.Trigger>Installation</Collapsible.Trigger>
          <Collapsible.Panel>
            Install Entry UI Qwik using your preferred package manager: <code>npm install -D @entry-ui/qwik</code>
          </Collapsible.Panel>
        </Collapsible.Root>
        <Collapsible.Root>
          <Collapsible.Trigger>Styling</Collapsible.Trigger>
          <Collapsible.Panel>
            Entry UI Qwik components are unstyled by default. Use CSS modules, Tailwind CSS, or any styling solution.
          </Collapsible.Panel>
        </Collapsible.Root>
      </Collapsible.Panel>
    </Collapsible.Root>
  );
});
```

--------------------------------

### useCycle(options: { options: T[], defaultOption?: T, loop?: boolean })

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-cycle/README.md

The useCycle hook initializes a state manager that cycles through a provided array of values. It returns a signal for the current value and several QRL functions for navigation.

```APIDOC
## useCycle(config)

### Description
Initializes a state management hook that cycles through a provided array of values. It returns the current state as a signal and provides methods to navigate or set the state.

### Parameters
- **options** (readonly T[]) - Required - An array of values to cycle through.
- **defaultOption** (T) - Optional - The initial value. Defaults to the first element of the options array.
- **loop** (boolean) - Optional - Whether to wrap around when reaching array boundaries. Defaults to true.

### Returns
- **option** (ReadonlySignal<T>) - The current active value.
- **next$** (QRL<() => void>) - Advances to the next option.
- **previous$** (QRL<() => void>) - Moves to the previous option.
- **first$** (QRL<() => void>) - Jumps to the first option.
- **last$** (QRL<() => void>) - Jumps to the last option.
- **set$** (QRL<(value: T) => void>) - Sets the option to a specific value if it exists in the options array.
```

--------------------------------

### Import useCycle

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-cycle/README.md

Import the useCycle hook from the package.

```tsx
import { useCycle } from '@entry-ui/qwik/use-cycle';
```

--------------------------------

### useCycle(params)

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-cycle/README.md

Initializes a cycle state manager for a sequence of options.

```APIDOC
## useCycle(params)

### Description
Initializes a hook that manages navigation through a predefined sequence of options. It returns a readonly signal for the current option and navigation methods.

### Parameters
- **options** (Array) - Required - The sequence of values to cycle through.
- **defaultOption** (Any) - Optional - The initial state; defaults to the first option if invalid.
- **loop** (Boolean) - Optional - Determines if the sequence restarts when reaching boundaries.

### Returns
- **option** (Signal) - A readonly signal containing the current value.
- **next$** (QRL) - Function to move to the next option.
- **previous$** (QRL) - Function to move to the previous option.
- **first$** (QRL) - Function to move to the first option.
- **last$** (QRL) - Function to move to the last option.
- **set$** (QRL) - Function to set the state to a specific valid option.
```

--------------------------------

### Import useCounter

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-counter/README.md

Import the hook from the package entry point.

```tsx
import { useCounter } from '@entry-ui/qwik/use-counter';
```

--------------------------------

### useClipboard(options)

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-clipboard/README.md

The useClipboard hook allows components to interact with the system clipboard. It returns signals to track the copy status and error state, and methods to trigger a copy or reset the state.

```APIDOC
## useClipboard(options)

### Description
Initializes a clipboard management hook that provides reactive state for copy operations.

### Parameters
- **options** (object) - Optional - Configuration object for the hook.
  - **timeoutMs** (number) - Optional - Duration in ms before the `copied` state reverts to false. Default: 3000.
  - **onStatusChange$** (QRL) - Optional - Callback invoked on status changes, receiving `{ copied: boolean, error: string | null }`.

### Returns
- **copied** (ReadonlySignal<boolean>) - Indicates if the last copy operation was successful.
- **error** (ReadonlySignal<"NOT_SUPPORTED" | "COPY_FAILED" | null>) - Current error state of the clipboard operation.
- **copy$** (QRL<(value: string) => Promise<void>>) - Asynchronously copies the provided string to the clipboard.
- **reset$** (QRL<() => void>) - Resets the `copied` and `error` states to their initial values.
```

--------------------------------

### Using getPlatform

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-platform/README.md

Execute the function to retrieve the platform string. It returns modern platform names or legacy strings depending on browser support.

```ts
import { getPlatform } from '@entry-ui/utilities/get-platform';

getPlatform();
// Returns: "macOS", "Windows", or "Linux" (on modern browsers)
// Returns: "Win32" or "MacIntel" (as a legacy fallback)
```

--------------------------------

### Usage of useBoolean

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-boolean/README.md

Demonstrates initializing the hook and using the returned signal and mutation functions within a component.

```tsx
import { component$ } from '@qwik.dev/core';
import { useBoolean } from '@entry-ui/qwik/use-boolean';

const Usage = component$(() => {
  const { state, setFalse$, setTrue$, toggle$ } = useBoolean();

  return (
    <>
      <p>
        State is: <code>{state.value ? 'true' : 'false'}</code>
      </p>

      <button onClick$={setFalse$}>Set false</button>
      <button onClick$={setTrue$}>Set true</button>
      <button onClick$={toggle$}>Toggle</button>
    </>
  );
});
```

--------------------------------

### Importing focusFirstElement

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/focus-first-element/README.md

Import the utility from the @entry-ui/utilities package.

```ts
import { focusFirstElement } from '@entry-ui/utilities/focus-first-element';
```

--------------------------------

### Importing the clamp utility

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/clamp/README.md

Import the clamp function from the utilities package.

```ts
import { clamp } from '@entry-ui/utilities/clamp';
```

--------------------------------

### Import visuallyHiddenStyle

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/visually-hidden-style/README.md

Import the utility from the package to apply it to elements.

```ts
import { visuallyHiddenStyle } from '@entry-ui/utilities/visually-hidden-style';
```

--------------------------------

### Animate Collapsible panel height

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/collapsible/README.md

Utilize the --entry-ui-qwik-collapsible-panel-height CSS variable to animate panel expansion with CSS transitions.

```tsx
// index.tsx
import { component$ } from '@qwik.dev/core';
import { Collapsible } from '@entry-ui/qwik/collapsible';
import styles from './index.module.css';

const Example = component$(() => {
  return (
    <Collapsible.Root>
      <Collapsible.Trigger>What is Entry UI Qwik?</Collapsible.Trigger>
      <Collapsible.Panel class={styles['collapsible-panel']}>
        A collection of accessible, unstyled components, hooks, and utilities for Qwik, designed for building
        high-quality web applications and design systems.
      </Collapsible.Panel>
    </Collapsible.Root>
  );
});
```

```css
/* index.module.css */
.collapsible-panel {
  overflow: hidden;
  height: var(--entry-ui-qwik-collapsible-panel-height);
  transition: height 300ms cubic-bezier(0.87, 0, 0.13, 1);
}
```

--------------------------------

### useClipboard()

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-clipboard/README.md

The useClipboard hook returns an object containing signals for the current copy status and error state, as well as functions to perform copy operations and reset the hook's state.

```APIDOC
## useClipboard()

### Description
Returns an interface to interact with the system clipboard. It provides reactive signals for the current state and methods to perform actions.

### Returns
- **copied** (Signal<boolean>) - Indicates if the last copy operation was successful.
- **error** (Signal<string | null>) - Holds the error state if an operation fails (e.g., 'NOT_SUPPORTED', 'COPY_FAILED').
- **copy$** (Function) - An asynchronous function to copy text to the clipboard.
- **reset$** (Function) - A function to manually reset the copied and error states.

### Usage Example
```tsx
const { copied, error, copy$, reset$ } = useClipboard();

// Trigger copy
copy$('Text to copy');

// Reset state
reset$();
```
```

--------------------------------

### Using useScrollLock in a Component

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-scroll-lock/README.md

Demonstrates how to use the lock$ and unlock$ methods within a Qwik component.

```tsx
import { component$ } from '@qwik.dev/core';
import { useScrollLock } from '@entry-ui/qwik/use-scroll-lock';

const Usage = component$(() => {
  const { lock$, unlock$ } = useScrollLock();

  return (
    <>
      <button type="button" onClick$={lock$}>
        Lock scroll
      </button>

      <button type="button" onClick$={unlock$}>
        Unlock scroll
      </button>
    </>
  );
});
```

--------------------------------

### Import isHTMLElement

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/is-html-element/README.md

Import the utility from the utilities package.

```ts
import { isHTMLElement } from '@entry-ui/utilities/is-html-element';
```

--------------------------------

### Import getComputedStyle

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-computed-style/README.md

Import the utility function from the @entry-ui/utilities package.

```ts
import { getComputedStyle } from '@entry-ui/utilities/get-computed-style';
```

--------------------------------

### Demonstrating useTask$ cleanup limitations

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-lifecycle/README.md

Shows how cleanup functions in useTask$ fail to trigger when a component is server-rendered and then unmounted on the client.

```tsx
import { component$, useTask$, useSignal } from '@qwik.dev/core';

const Component = component$(() => {
  useTask$(({ cleanup }) => {
    console.log('Component is mounted');

    cleanup(() => {
      console.log('Component is not mounted');
    });
  });

  return <p>Child</p>;
});

const Example = component$(() => {
  const mounted = useSignal(true);

  return (
    <>
      <button type="button" onClick$={() => (mounted.value = !mounted.value)}>
        {mounted.value ? 'Unmount' : 'Mount'} component
      </button>

      {mounted.value && <Component />}
    </>
  );
});
```

--------------------------------

### warn(options)

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/warn/README.md

Logs a formatted warning message to the console using a specified prefix and an array of message segments.

```APIDOC
## warn(options)

### Description
Logs a formatted warning message to the console. This utility is intended for communicating non-critical issues or reminders to developers.

### Parameters
- **prefix** (string) - Required - A string that identifies the origin or category of the warning.
- **messages** (string[]) - Required - An array of message segments that will be joined together into a single string.

### Returns
- **void** - This function does not return any value.

### Usage Example
```ts
import { warn } from '@entry-ui/utilities/warn';

warn({ 
  prefix: '[Validator]', 
  messages: ['The property', 'color', 'is deprecated.'] 
});
```
```

--------------------------------

### Importing the warn utility

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/warn/README.md

Import the warn function from the utilities package.

```ts
import { warn } from '@entry-ui/utilities/warn';
```

--------------------------------

### Import useControllable

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-controllable/README.md

Import the hook from the package entry point.

```tsx
import { useControllable } from '@entry-ui/qwik/use-controllable';
```

--------------------------------

### Using getWindow

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-window/README.md

Retrieve the window context for an element or fall back to the global window if the input is null.

```ts
import { getWindow } from '@entry-ui/utilities/get-window';

const element = document.getElementById('my-iframe-element');
const targetWindow = getWindow(element);

// Now you can safely use window-specific APIs
const styles = targetWindow.getComputedStyle(element);

// If node is null, it falls back to the current global window
getWindow(null);
// Returns: window
```

--------------------------------

### Using the warn utility

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/warn/README.md

Pass an object containing a prefix and an array of message segments to log a formatted warning.

```ts
import { warn } from '@entry-ui/utilities/warn';

warn({ prefix: '[Validator]', messages: ['The property', 'color', 'is deprecated.'] });

// Console outputs:
// [Validator] The property color is deprecated.
```

--------------------------------

### Importing visuallyHiddenInputStyle

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/visually-hidden-input-style/README.md

Import the utility from the utilities package.

```ts
import { visuallyHiddenInputStyle } from '@entry-ui/utilities/visually-hidden-input-style';
```

--------------------------------

### Implement Accordion with CSS Animation

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/accordion/README.md

A Qwik component structure for an accordion, applying a custom CSS class to the panels for animation control.

```tsx
// index.tsx
import { component$ } from '@qwik.dev/core';
import { Accordion } from '@entry-ui/qwik/accordion';
import styles from './index.module.css';

const Example = component$(() => {
  return (
    <Accordion.Root>
      <Accordion.Item>
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>What is Entry UI Qwik?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class={styles['accordion-item-panel']}>
          A collection of accessible, unstyled components, hooks, and utilities for Qwik, designed for building
          high-quality web applications and design systems.
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item>
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>How do I get started?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class={styles['accordion-item-panel']}>
          Check out our installation guide to add the library to your project. Our intuitive API makes it easy to build
          complex components in minutes.
        </Accordion.ItemPanel>
      </Accordion.Item>

      <Accordion.Item>
        <Accordion.ItemHeader>
          <Accordion.ItemTrigger>Can I use it for my project?</Accordion.ItemTrigger>
        </Accordion.ItemHeader>
        <Accordion.ItemPanel class={styles['accordion-item-panel']}>
          Of course! Entry UI Qwik is an open-source project licensed under MIT. You are free to use it in both personal
          and commercial projects without any restrictions.
        </Accordion.ItemPanel>
      </Accordion.Item>
    </Accordion.Root>
  );
});
```

--------------------------------

### getPlatform()

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-platform/README.md

Detects the operating system platform of the current browser environment.

```APIDOC
## getPlatform()

### Description
Identifies the operating system platform on which the current browser is running. It prioritizes the modern User-Agent Client Hints API and falls back to legacy properties.

### Signature
`getPlatform(): string`

### Parameters
None.

### Returns
- **string**: The platform name (e.g., "macOS", "Windows", "Linux") or the legacy platform string (e.g., "Win32", "MacIntel"). Returns an empty string if neither is accessible.

### Usage Example
```ts
import { getPlatform } from '@entry-ui/utilities/get-platform';

const platform = getPlatform();
console.log(platform); // "macOS" | "Windows" | "Linux" | "Win32" | "MacIntel" | ""
```
```

--------------------------------

### Import getActiveElement

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/get-active-element/README.md

Import the utility from the @entry-ui/utilities package.

```ts
import { getActiveElement } from '@entry-ui/utilities/get-active-element';
```

--------------------------------

### Importing Collapsible components

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/components/collapsible/README.md

Import the necessary components and hooks from the package.

```tsx
import { Collapsible, useCollapsibleRootContext, useCollapsibleTriggerContext } from '@entry-ui/qwik/collapsible';
```

--------------------------------

### Import isShallowSubset

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/is-shallow-subset/README.md

Import the utility function from the package.

```ts
import { isShallowSubset } from '@entry-ui/utilities/is-shallow-subset';
```

--------------------------------

### useLifecycle(options)

Source: https://github.com/zahon/entry-ui/blob/main/packages/qwik/src/hooks/use-lifecycle/README.md

Registers lifecycle callbacks for a component, ensuring onUnmount$ logic is executed even for server-rendered components.

```APIDOC
## useLifecycle(options)

### Description
Registers mount and unmount lifecycle hooks for a Qwik component. It uses a MutationObserver to track DOM presence, ensuring that cleanup tasks are correctly re-registered upon client-side resumption.

### Parameters
- **options** (object) - Required
  - **element** (Signal<HTMLElement | undefined>) - Required - A signal referencing the DOM element to track.
  - **onMount$** (QRL) - Optional - A function to execute when the element is mounted.
  - **onUnmount$** (QRL) - Optional - A function to execute when the element is unmounted.

### Usage Example
```tsx
useLifecycle({
  element: elementRef,
  onMount$: $(() => console.log('Component is mounted')),
  onUnmount$: $(() => console.log('Component is not mounted')),
});
```
```

--------------------------------

### Import the scrollIntoViewIfNeeded utility

Source: https://github.com/zahon/entry-ui/blob/main/packages/utilities/src/scroll-into-view-if-needed/README.md

Import the function from the utilities package to use it in your project.

```ts
import { scrollIntoViewIfNeeded } from '@entry-ui/utilities/scroll-into-view-if-needed';
```
Tokens:
Raw