@entry-ui/qwik 0.4.0 → 0.5.0

package/lib/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './alert';
 export * from './separator';
+export * from './toggle';

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

@@ -0,0 +1 @@
+export * from './toggle-root-context';

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

@@ -0,0 +1,2 @@
+export type { ToggleRootContextValue } from './toggle-root-context.types';
+export { ToggleRootContext } from './toggle-root-context';

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

@@ -0,0 +1,6 @@
+import type { ToggleRootContextValue } from './toggle-root-context.types';
+/**
+ * Provides the context for the `Toggle.Root` component, allowing descendant
+ * components to access readonly signals and `QRL` functions without prop drilling.
+ */
+export declare const ToggleRootContext: import("@qwik.dev/core").ContextId<ToggleRootContextValue>;

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

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

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

@@ -0,0 +1,22 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value provided by the `Toggle.Root` context.
+ * Contains the readonly signals and `QRL` functions shared with descendant components.
+ */
+export interface ToggleRootContextValue {
+    /**
+     * A readonly signal whose value indicates the toggle's current pressed state.
+     * It is `true` when the toggle is on, and `false` when off.
+     */
+    pressed: ReadonlySignal<boolean>;
+    /**
+     * A `QRL` function used to programmatically set the pressed state of the toggle.
+     * When invoked with `true`, the toggle will be on; with `false`, it will be off.
+     */
+    setPressed$: QRL<(pressed: boolean) => void>;
+    /**
+     * A readonly signal that indicates whether the toggle is disabled.
+     * Its value is `true` if the toggle is disabled, preventing user interaction.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

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

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

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

@@ -0,0 +1,2 @@
+export type { UseToggleRootContextReturnValue } from './use-toggle-root-context.types';
+export { useToggleRootContext } from './use-toggle-root-context';

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

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

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

@@ -0,0 +1,13 @@
+import { useContext } from "@qwik.dev/core";
+import { ToggleRootContext } from "../../contexts/toggle-root-context/toggle-root-context.qwik.mjs";
+const useToggleRootContext = () => {
+  const { pressed, setPressed$, disabled } = useContext(ToggleRootContext);
+  return {
+    pressed,
+    setPressed$,
+    disabled
+  };
+};
+export {
+  useToggleRootContext
+};

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

@@ -0,0 +1,22 @@
+import type { ReadonlySignal, QRL } from '@qwik.dev/core';
+/**
+ * The value returned by the `useToggleRootContext` hook.
+ * Provides access to the toggle's readonly signals and `QRL` functions for descendant components.
+ */
+export interface UseToggleRootContextReturnValue {
+    /**
+     * A readonly signal whose value indicates the toggle's current pressed state.
+     * It is `true` when the toggle is on, and `false` when off.
+     */
+    pressed: ReadonlySignal<boolean>;
+    /**
+     * A `QRL` function used to programmatically set the pressed state of the toggle.
+     * When invoked with `true`, the toggle will be on; with `false`, it will be off.
+     */
+    setPressed$: QRL<(pressed: boolean) => void>;
+    /**
+     * A readonly signal that indicates whether the toggle is disabled.
+     * Its value is `true` if the toggle is disabled, preventing user interaction.
+     */
+    disabled: ReadonlySignal<boolean>;
+}

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

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

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

@@ -0,0 +1,6 @@
+import * as index from "./parts/index.qwik.mjs";
+import { useToggleRootContext } from "./hooks/use-toggle-root-context/use-toggle-root-context.qwik.mjs";
+export {
+  index as Toggle,
+  useToggleRootContext
+};

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

@@ -0,0 +1,2 @@
+export type { ToggleRootProps as RootProps } from './toggle-root';
+export { ToggleRoot as Root } from './toggle-root';

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

@@ -0,0 +1,4 @@
+import { ToggleRoot } from "./toggle-root/toggle-root.qwik.mjs";
+export {
+  ToggleRoot as Root
+};

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

@@ -0,0 +1,2 @@
+export type { ToggleRootProps } from './toggle-root.types';
+export { ToggleRoot } from './toggle-root';

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

@@ -0,0 +1,7 @@
+import type { ToggleRootProps } from './toggle-root.types';
+/**
+ * Contains the content for the toggle.
+ *
+ * Renders a `<button>` element.
+ */
+export declare const ToggleRoot: import("@qwik.dev/core").Component<ToggleRootProps>;

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

@@ -0,0 +1,43 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useComputed$, $, useContextProvider, Slot } from "@qwik.dev/core";
+import { useControllable } from "../../../../hooks/use-controllable/use-controllable.qwik.mjs";
+import { Primitive } from "../../../../_internal/components/primitive/primitive.qwik.mjs";
+import { ToggleRootContext } from "../../contexts/toggle-root-context/toggle-root-context.qwik.mjs";
+const ToggleRoot = component$((props) => {
+  const { as = "button", defaultPressed, pressed: _pressed, onPressedChange$, disabled: _disabled = false, onClick$, ...others } = props;
+  const { state: pressed, setState$: setPressed$ } = useControllable({
+    defaultValue: defaultPressed ?? false,
+    controlledSignal: _pressed,
+    onChange$: onPressedChange$
+  });
+  const disabled = useComputed$(() => _disabled);
+  const handleClick$ = $((event) => {
+    const entryUIQwikEvent = event;
+    if (!entryUIQwikEvent.entryUIQwikHandlerPrevented && !disabled.value) {
+      setPressed$(!pressed.value);
+    }
+  });
+  useContextProvider(ToggleRootContext, {
+    pressed,
+    setPressed$,
+    disabled
+  });
+  return /* @__PURE__ */ jsx(Primitive.button, {
+    as,
+    type: "button",
+    disabled: disabled.value,
+    "aria-pressed": pressed.value,
+    "data-entry-ui-qwik-toggle-root": "",
+    "data-state": pressed.value ? "on" : "off",
+    "data-disabled": disabled.value ? "" : void 0,
+    onClick$: [
+      onClick$,
+      handleClick$
+    ],
+    ...others,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  ToggleRoot
+};

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

@@ -0,0 +1,41 @@
+import type { PropsOf, Component, Signal, QRL } from '@qwik.dev/core';
+/**
+ * Props for the `Toggle.Root` component.
+ * Extends the standard HTML attributes for a `button` element.
+ */
+export interface ToggleRootProps 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;
+    /**
+     * The pressed state of the toggle when it is initially rendered.
+     * Use when you do not need to control its pressed state.
+     *
+     * @default undefined
+     */
+    defaultPressed?: boolean;
+    /**
+     * The controlled pressed state of the toggle.
+     * Must be used in conjunction with `onPressedChange$`.
+     *
+     * @default undefined
+     */
+    pressed?: Signal<boolean>;
+    /**
+     * A `QRL` callback function that is called when the pressed state of the toggle changes.
+     *
+     * @default undefined
+     */
+    onPressedChange$?: QRL<(pressed: boolean) => void>;
+    /**
+     * When `true`, prevents the user from interacting with the toggle.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}

package/lib/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './hooks';
+export * from './types';
 export * from './utilities';

package/lib/index.qwik.mjs

@@ -1,16 +1,22 @@
 import * as index from "./components/alert/parts/index.qwik.mjs";
 import * as index$1 from "./components/separator/parts/index.qwik.mjs";
+import * as index$2 from "./components/toggle/parts/index.qwik.mjs";
+import { useToggleRootContext } from "./components/toggle/hooks/use-toggle-root-context/use-toggle-root-context.qwik.mjs";
 import { useBoolean } from "./hooks/use-boolean/use-boolean.qwik.mjs";
 import { useControllable } from "./hooks/use-controllable/use-controllable.qwik.mjs";
 import { useCycle } from "./hooks/use-cycle/use-cycle.qwik.mjs";
+import { makeEventPreventable } from "./utilities/make-event-preventable/make-event-preventable.qwik.mjs";
 import { mergeRefs } from "./utilities/merge-refs/merge-refs.qwik.mjs";
 import { mergeStyles } from "./utilities/merge-styles/merge-styles.qwik.mjs";
 export {
   index as Alert,
   index$1 as Separator,
+  index$2 as Toggle,
+  makeEventPreventable,
   mergeRefs,
   mergeStyles,
   useBoolean,
   useControllable,
-  useCycle
+  useCycle,
+  useToggleRootContext
 };

package/lib/types/entry-ui-qwik-event/entry-ui-qwik-event.types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Represents a Qwik event augmented with Entry UI Qwik's custom prevention logic.
+ *
+ * This type extends the standard DOM event with additional methods and properties
+ * that allow for granular control over internal component handlers within the
+ * Entry UI Qwik library.
+ */
+export type EntryUIQwikEvent<EV extends Event> = EV & {
+    /**
+     * Prevents the internal Entry UI Qwik handler from executing for this event.
+     * When called, this method sets the `entryUIQwikHandlerPrevented` flag to `true`.
+     * Use this when you want to handle the event manually in a consumer-provided
+     * handler and prevent the component's default state updates or logic from firing.
+     */
+    preventEntryUIQwikHandler: () => void;
+    /**
+     * Indicates whether the internal Entry UI Qwik logic has been prevented for this event.
+     * This property is read-only and is typically checked by internal component
+     * handlers to determine if they should skip their default execution logic.
+     */
+    readonly entryUIQwikHandlerPrevented?: boolean;
+};

package/lib/types/entry-ui-qwik-event/index.d.ts

@@ -0,0 +1 @@
+export type { EntryUIQwikEvent } from './entry-ui-qwik-event.types';

package/lib/types/entry-ui-qwik-event-state/entry-ui-qwik-event-state.types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Represents the state of a Qwik event within the Entry UI Qwik system.
+ *
+ * This type is a specialized version of the event object that includes only the
+ * state flag. It is typically used in internal component handlers to check
+ * if a previous handler in the execution chain has requested to prevent
+ * the default Entry UI Qwik logic.
+ */
+export type EntryUIQwikEventState<EV extends Event> = EV & {
+    /**
+     * Indicates whether the internal Entry UI Qwik logic has been prevented for this event.
+     * When `true`, it signals that a consumer or a preceding handler has invoked
+     * the prevention mechanism, and the current handler should likely skip
+     * its default state updates or behaviors.
+     */
+    readonly entryUIQwikHandlerPrevented?: boolean;
+};

package/lib/types/entry-ui-qwik-event-state/index.d.ts

@@ -0,0 +1 @@
+export type { EntryUIQwikEventState } from './entry-ui-qwik-event-state.types';

package/lib/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './entry-ui-qwik-event';
+export * from './entry-ui-qwik-event-state';

package/lib/utilities/index.d.ts

@@ -1,2 +1,3 @@
+export * from './make-event-preventable';
 export * from './merge-refs';
 export * from './merge-styles';

package/lib/utilities/make-event-preventable/index.d.ts

@@ -0,0 +1 @@
+export { makeEventPreventable } from './make-event-preventable';

package/lib/utilities/make-event-preventable/index.qwik.mjs

@@ -0,0 +1,4 @@
+import { makeEventPreventable } from "./make-event-preventable.qwik.mjs";
+export {
+  makeEventPreventable
+};

package/lib/utilities/make-event-preventable/make-event-preventable.d.ts

@@ -0,0 +1,20 @@
+import type { EntryUIQwikEvent } from '@/types';
+/**
+ * Augments a standard event with internal handler prevention capabilities.
+ *
+ * This utility function transforms a standard event object into an `EntryUIQwikEvent`.
+ * It adds a `preventEntryUIQwikHandler` method, allowing developers to flag
+ * an event during its execution. This flag can then be checked by subsequent
+ * handlers in any Qwik event chain (such as `onClick$`, `onKeyDown$`, or `onInput$`)
+ * to determine if the internal component logic should be bypassed.
+ *
+ * It is particularly useful when a consumer needs to intercept an event and
+ * conditionally prevent the component's default behavior or state updates
+ * (like toggling a state or closing a dialog) without necessarily stopping
+ * native event propagation or other DOM-level behaviors.
+ *
+ * When `preventEntryUIQwikHandler()` is called:
+ * - The internal property `entryUIQwikHandlerPrevented` is set to `true`.
+ * - Subsequent handlers in the event array can verify this flag to skip their logic.
+ */
+export declare const makeEventPreventable: <EV extends Event>(event: EV) => EntryUIQwikEvent<EV>;

package/lib/utilities/make-event-preventable/make-event-preventable.qwik.mjs

@@ -0,0 +1,10 @@
+const makeEventPreventable = (event) => {
+  const entryUIQwikEvent = event;
+  entryUIQwikEvent.preventEntryUIQwikHandler = () => {
+    entryUIQwikEvent.entryUIQwikHandlerPrevented = true;
+  };
+  return entryUIQwikEvent;
+};
+export {
+  makeEventPreventable
+};

package/lib/utilities/merge-styles/merge-styles.types.d.ts

@@ -6,7 +6,7 @@ import type { CSSProperties } from '@qwik.dev/core';
  *
  * - `string`: Standard inline CSS strings (e.g., `"color: red; padding: 10px"`).
  *
- * - `CSSProperties`: A structured object of CSS declarations (e.g., `{ color: 'red' }`).
+ * - `CSSProperties`: A structured object of CSS declarations (e.g., `{ color: "red" }`).
  *
  * - `undefined`: Useful for conditional styling where a style might not be present.
  * Since `boolean` is not accepted, use ternary operators or logical OR

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entry-ui/qwik",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/ZAHON/entry-ui#readme",
@@ -23,6 +23,10 @@
       "types": "./lib/components/separator/index.d.ts",
       "import": "./lib/components/separator/index.qwik.mjs"
     },
+    "./toggle": {
+      "types": "./lib/components/toggle/index.d.ts",
+      "import": "./lib/components/toggle/index.qwik.mjs"
+    },
     "./use-boolean": {
       "types": "./lib/hooks/use-boolean/index.d.ts",
       "import": "./lib/hooks/use-boolean/index.qwik.mjs"
@@ -35,6 +39,10 @@
       "types": "./lib/hooks/use-cycle/index.d.ts",
       "import": "./lib/hooks/use-cycle/index.qwik.mjs"
     },
+    "./make-event-preventable": {
+      "types": "./lib/utilities/make-event-preventable/index.d.ts",
+      "import": "./lib/utilities/make-event-preventable/index.qwik.mjs"
+    },
     "./merge-refs": {
       "types": "./lib/utilities/merge-refs/index.d.ts",
       "import": "./lib/utilities/merge-refs/index.qwik.mjs"
@@ -42,6 +50,9 @@
     "./merge-styles": {
       "types": "./lib/utilities/merge-styles/index.d.ts",
       "import": "./lib/utilities/merge-styles/index.qwik.mjs"
+    },
+    "./types": {
+      "types": "./lib/types/index.d.ts"
     }
   },
   "files": [
@@ -81,7 +92,7 @@
     "qwik": "qwik"
   },
   "dependencies": {
-    "@entry-ui/utilities": "^0.2.0"
+    "@entry-ui/utilities": "^0.3.0"
   },
   "devDependencies": {
     "@entry-ui/eslint": "workspace:*",
@@ -95,6 +106,7 @@
     "jsdom": "^27.4.0",
     "prettier": "^3.7.4",
     "typescript": "^5.9.3",
+    "typescript-plugin-css-modules": "^5.2.0",
     "undici": "^7.18.2",
     "vite": "^7.3.1",
     "vite-tsconfig-paths": "^6.0.4",