ui-ingredients 0.1.1 → 0.2.0

package/README.md

@@ -81,6 +81,7 @@ npm install ui-ingredients
 - [TimePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/time-picker.md)
 - [Timer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/timer.md)
 - [Toast](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toast.md)
+- [Toggle](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle.md)
 - [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
 - [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
 - [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export * from './time-picker/index.js';
 export * from './timer/index.js';
 export * from './toast/index.js';
 export * from './toggle-group/index.js';
+export * from './toggle/index.js';
 export * from './tooltip/index.js';
 export * from './tour/index.js';
 export * from './tree-view/index.js';

package/dist/index.js

@@ -41,6 +41,7 @@ export * from './time-picker/index.js';
 export * from './timer/index.js';
 export * from './toast/index.js';
 export * from './toggle-group/index.js';
+export * from './toggle/index.js';
 export * from './tooltip/index.js';
 export * from './tour/index.js';
 export * from './tree-view/index.js';

package/dist/toggle/anatomy.d.ts

@@ -0,0 +1,2 @@
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"root">;
+export declare const parts: Record<"root", import("@zag-js/anatomy").AnatomyPart>;

package/dist/toggle/anatomy.js

@@ -0,0 +1,3 @@
+import { createAnatomy } from '@zag-js/anatomy';
+export const anatomy = createAnatomy('toggle').parts('root');
+export const parts = anatomy.build();

package/dist/toggle/create-toggle.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export interface CreateToggleProps {
+    disabled?: boolean;
+    pressed?: boolean;
+    pressedControlled?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+}
+export interface CreateToggleReturn {
+    pressed: boolean;
+    setPressed: (pressed: boolean) => void;
+    getRootProps: () => HTMLButtonAttributes;
+}
+export declare function createToggle(props: CreateToggleProps): any;

package/dist/toggle/create-toggle.svelte.js

@@ -0,0 +1,37 @@
+import { ariaAttr, dataAttr } from '@zag-js/dom-query';
+import { reflect } from '@zag-js/svelte';
+import { parts } from './anatomy.js';
+export function createToggle(props) {
+    let pressed = $state(props.pressed ?? false);
+    function setPressed(value) {
+        props.onPressedChange?.(value);
+        if (!props.pressedControlled) {
+            pressed = value;
+        }
+    }
+    function getRootProps() {
+        return {
+            disabled: props.disabled,
+            onclick() {
+                if (props.disabled)
+                    return;
+                setPressed(!pressed);
+            },
+            'aria-pressed': ariaAttr(pressed),
+            'data-state': pressed ? 'on' : 'off',
+            'data-pressed': dataAttr(pressed),
+            'data-disabled': dataAttr(props.disabled),
+            ...parts.root.attrs,
+        };
+    }
+    $effect(() => {
+        if (props.pressedControlled) {
+            pressed = props.pressed ?? false;
+        }
+    });
+    return reflect(() => ({
+        pressed,
+        setPressed,
+        getRootProps,
+    }));
+}

package/dist/toggle/index.d.ts

@@ -0,0 +1,3 @@
+export * as Toggle from './toggle.js';
+export type { ToggleProps } from './toggle-root.svelte';
+export { anatomy as toggleAnatomy } from './anatomy.js';

package/dist/toggle/index.js

@@ -0,0 +1,2 @@
+export * as Toggle from './toggle.js';
+export { anatomy as toggleAnatomy } from './anatomy.js';

package/dist/toggle/toggle-context.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { CreateToggleReturn } from './create-toggle.svelte.js';
+export declare const getToggleContext: () => CreateToggleReturn, setToggleContext: (context: CreateToggleReturn | (() => CreateToggleReturn)) => void;

package/dist/toggle/toggle-context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '../create-context.svelte.js';
+export const [getToggleContext, setToggleContext] = createContext('Toggle');

package/dist/toggle/toggle-root.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateToggleProps,
+    CreateToggleReturn,
+  } from './create-toggle.svelte.js';
+
+  export interface ToggleProps
+    extends Assign<
+      HtmlIngredientProps<'button', HTMLButtonElement, CreateToggleReturn>,
+      CreateToggleProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {createToggle} from './create-toggle.svelte.js';
+  import {setToggleContext} from './toggle-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ToggleProps = $props();
+
+  let [createToggleProps, localProps] = $derived(
+    createSplitProps<CreateToggleProps>([
+      'disabled',
+      'pressed',
+      'onPressedChange',
+      'pressedControlled',
+    ])(props),
+  );
+
+  let toggle = createToggle(reflect(() => createToggleProps));
+
+  let mergedProps = $derived(mergeProps(toggle.getRootProps(), localProps));
+
+  setToggleContext(toggle);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, toggle)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.(toggle)}
+  </button>
+{/if}

package/dist/toggle/toggle-root.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { CreateToggleProps, CreateToggleReturn } from './create-toggle.svelte.js';
+export interface ToggleProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement, CreateToggleReturn>, CreateToggleProps> {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ToggleRoot: $$__sveltets_2_IsomorphicComponent<ToggleProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type ToggleRoot = InstanceType<typeof ToggleRoot>;
+export default ToggleRoot;

package/dist/toggle/toggle.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './toggle-root.svelte';

package/dist/toggle/toggle.js

@@ -0,0 +1 @@
+export { default as Root } from './toggle-root.svelte';

package/package.json

@@ -2,7 +2,7 @@
   "name": "ui-ingredients",
   "type": "module",
   "license": "MIT",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",