@wirekyt/svelte 0.0.1 → 0.0.2

package/dist/components/tags-input/item.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+  import type { ItemProps } from "@wirekyt/dom/machines/tags-input";
+
+  export interface TagsInputItemBaseProps
+    extends ItemProps, PolymorphicProps<"div">, RefAttribute {}
+  export interface TagsInputItemProps extends Assign<HTMLProps<"div">, TagsInputItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+  import { createSplitProps } from "../../utils";
+
+  import { Wire } from "../factory";
+  import { useTagsInputContext } from "./use-context";
+  import { TagsInputItemProvider } from "./use-item-context";
+  import { TagsInputItemPropsProvider } from "./use-item-props-context";
+
+  let { ref = $bindable(null), ...props }: TagsInputItemProps = $props();
+  const tagsInput = useTagsInputContext();
+  const [itemProps, localProps] = $derived(
+    createSplitProps<ItemProps>()(props, ["index", "disabled", "value"]),
+  );
+  const mergedProps = $derived(mergeProps(tagsInput().getItemProps(itemProps), localProps));
+
+  TagsInputItemProvider(() => tagsInput().getItemState(itemProps));
+  TagsInputItemPropsProvider(() => itemProps);
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/tags-input/item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { ItemProps } from "@wirekyt/dom/machines/tags-input";
+export interface TagsInputItemBaseProps extends ItemProps, PolymorphicProps<"div">, RefAttribute {
+}
+export interface TagsInputItemProps extends Assign<HTMLProps<"div">, TagsInputItemBaseProps> {
+}
+declare const Item: import("svelte").Component<TagsInputItemProps, {}, "ref">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/components/tags-input/label.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface TagsInputLabelBaseProps extends PolymorphicProps<"label">, RefAttribute {}
+  export interface TagsInputLabelProps extends Assign<
+    HTMLProps<"label">,
+    TagsInputLabelBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useTagsInputContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: TagsInputLabelProps = $props();
+  const tagsInput = useTagsInputContext();
+  const mergedProps = $derived(mergeProps(tagsInput().getLabelProps(), props));
+</script>
+
+<Wire as="label" bind:ref {...mergedProps} />

package/dist/components/tags-input/label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface TagsInputLabelBaseProps extends PolymorphicProps<"label">, RefAttribute {
+}
+export interface TagsInputLabelProps extends Assign<HTMLProps<"label">, TagsInputLabelBaseProps> {
+}
+declare const Label: import("svelte").Component<TagsInputLabelProps, {}, "ref">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/tags-input/root-provider.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import type { UseTagsInputReturn } from "./use.svelte";
+
+  export interface TagsInputRootProviderBaseProps extends PolymorphicProps<"div">, RefAttribute {
+    value: UseTagsInputReturn;
+  }
+  export interface TagsInputRootProviderProps extends Assign<
+    HTMLProps<"div">,
+    TagsInputRootProviderBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { TagsInputProvider } from "./use-context";
+
+  let { ref = $bindable(null), value, ...props }: TagsInputRootProviderProps = $props();
+
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props));
+
+  TagsInputProvider(() => value());
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/tags-input/root-provider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { UseTagsInputReturn } from "./use.svelte";
+export interface TagsInputRootProviderBaseProps extends PolymorphicProps<"div">, RefAttribute {
+    value: UseTagsInputReturn;
+}
+export interface TagsInputRootProviderProps extends Assign<HTMLProps<"div">, TagsInputRootProviderBaseProps> {
+}
+declare const RootProvider: import("svelte").Component<TagsInputRootProviderProps, {}, "ref">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/tags-input/root.svelte

@@ -0,0 +1,88 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import type { UseTagsInputProps } from "./use.svelte";
+
+  export interface TagsInputRootBaseProps
+    extends UseTagsInputProps, PolymorphicProps<"div">, RefAttribute {}
+  export interface TagsInputRootProps extends Assign<HTMLProps<"div">, TagsInputRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+  import { createSplitProps } from "../../utils";
+
+  import { Wire } from "../factory";
+  import { TagsInputProvider } from "./use-context";
+  import { useTagsInput } from "./use.svelte";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable<string[]>(),
+    inputValue = $bindable<string>(),
+    ...props
+  }: TagsInputRootProps = $props();
+
+  const [useTagsInputProps, localProps] = $derived(
+    createSplitProps<UseTagsInputProps>()(props, [
+      "addOnPaste",
+      "allowDuplicates",
+      "allowOverflow",
+      "autoFocus",
+      "blurBehavior",
+      "defaultInputValue",
+      "defaultValue",
+      "delimiter",
+      "disabled",
+      "editable",
+      "form",
+      "id",
+      "ids",
+      "inputValue",
+      "invalid",
+      "max",
+      "maxLength",
+      "name",
+      "onFocusOutside",
+      "onHighlightChange",
+      "onInputValueChange",
+      "onInteractOutside",
+      "onPointerDownOutside",
+      "onValueChange",
+      "onValueInvalid",
+      "placeholder",
+      "readOnly",
+      "required",
+      "sanitizeValue",
+      "translations",
+      "validate",
+      "value",
+    ]),
+  );
+
+  const providedId = $props.id();
+
+  const machineProps = $derived.by<UseTagsInputProps>(() => {
+    return {
+      ...useTagsInputProps,
+      id: useTagsInputProps.id ?? providedId,
+      value,
+      inputValue,
+      onValueChange: (details) => {
+        useTagsInputProps.onValueChange?.(details);
+        value = details.value;
+      },
+      onInputValueChange: (details) => {
+        useTagsInputProps.onInputValueChange?.(details);
+        inputValue = details.inputValue;
+      },
+    };
+  });
+
+  const tagsInput = useTagsInput(() => machineProps);
+  const mergedProps = $derived(mergeProps(tagsInput().getRootProps(), localProps));
+
+  TagsInputProvider(tagsInput);
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/tags-input/root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { UseTagsInputProps } from "./use.svelte";
+export interface TagsInputRootBaseProps extends UseTagsInputProps, PolymorphicProps<"div">, RefAttribute {
+}
+export interface TagsInputRootProps extends Assign<HTMLProps<"div">, TagsInputRootBaseProps> {
+}
+declare const Root: import("svelte").Component<TagsInputRootProps, {}, "value" | "ref" | "inputValue">;
+type Root = ReturnType<typeof Root>;
+export default Root;

package/dist/components/tags-input/tags-input.d.ts

@@ -0,0 +1,15 @@
+export type { FocusOutsideEvent, HighlightChangeDetails, InputValueChangeDetails, InteractOutsideEvent, PointerDownOutsideEvent, ValidityChangeDetails, ValueChangeDetails, } from "@wirekyt/dom/machines/tags-input";
+export { default as Root, type TagsInputRootProps as RootProps, type TagsInputRootBaseProps as RootBaseProps, } from "./root.svelte";
+export { default as RootProvider, type TagsInputRootProviderProps as RootProviderProps, type TagsInputRootProviderBaseProps as RootProviderBaseProps, } from "./root-provider.svelte";
+export { default as Context, type TagsInputContextProps as ContextProps } from "./context.svelte";
+export { default as Label, type TagsInputLabelProps as LabelProps, type TagsInputLabelBaseProps as LabelBaseProps, } from "./label.svelte";
+export { default as Control, type TagsInputControlProps as ControlProps, type TagsInputControlBaseProps as ControlBaseProps, } from "./control.svelte";
+export { default as Input, type TagsInputInputProps as InputProps, type TagsInputInputBaseProps as InputBaseProps, } from "./input.svelte";
+export { default as ClearTrigger, type TagsInputClearTriggerProps as ClearTriggerProps, type TagsInputClearTriggerBaseProps as ClearTriggerBaseProps, } from "./clear-trigger.svelte";
+export { default as HiddenInput, type TagsInputHiddenInputProps as HiddenInputProps, type TagsInputHiddenInputBaseProps as HiddenInputBaseProps, } from "./hidden-input.svelte";
+export { default as Item, type TagsInputItemProps as ItemProps, type TagsInputItemBaseProps as ItemBaseProps, } from "./item.svelte";
+export { default as ItemContext, type TagsInputItemContextProps as ItemContextProps, } from "./item-context.svelte";
+export { default as ItemText, type TagsInputItemTextProps as ItemTextProps, type TagsInputItemTextBaseProps as ItemTextBaseProps, } from "./item-text.svelte";
+export { default as ItemDeleteTrigger, type TagsInputItemDeleteTriggerProps as ItemDeleteTriggerProps, type TagsInputItemDeleteTriggerBaseProps as ItemDeleteTriggerBaseProps, } from "./item-delete-trigger.svelte";
+export { default as ItemInput, type TagsInputItemInputProps as ItemInputProps, type TagsInputItemInputBaseProps as ItemInputBaseProps, } from "./item-input.svelte";
+export { default as ItemPreview, type TagsInputItemPreviewProps as ItemPreviewProps, type TagsInputItemPreviewBaseProps as ItemPreviewBaseProps, } from "./item-preview.svelte";

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,14 @@
+export { default as Root, } from "./root.svelte";
+export { default as RootProvider, } from "./root-provider.svelte";
+export { default as Context } from "./context.svelte";
+export { default as Label, } from "./label.svelte";
+export { default as Control, } from "./control.svelte";
+export { default as Input, } from "./input.svelte";
+export { default as ClearTrigger, } from "./clear-trigger.svelte";
+export { default as HiddenInput, } from "./hidden-input.svelte";
+export { default as Item, } from "./item.svelte";
+export { default as ItemContext, } from "./item-context.svelte";
+export { default as ItemText, } from "./item-text.svelte";
+export { default as ItemDeleteTrigger, } from "./item-delete-trigger.svelte";
+export { default as ItemInput, } from "./item-input.svelte";
+export { default as ItemPreview, } from "./item-preview.svelte";

package/dist/components/tags-input/use-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseTagsInputReturn } from "./use.svelte";
+export interface UseTagsInputContext extends UseTagsInputReturn {
+}
+export declare const TagsInputProvider: (opts: UseTagsInputContext) => void, useTagsInputContext: (fallback?: UseTagsInputContext | undefined) => UseTagsInputContext;

package/dist/components/tags-input/use-context.js

@@ -0,0 +1,4 @@
+import { createContext } from "../../utils";
+export const [TagsInputProvider, useTagsInputContext] = createContext({
+    name: "TagsInputContext",
+});

package/dist/components/tags-input/use-item-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from "../../core";
+import type { ItemState } from "@wirekyt/dom/machines/tags-input";
+export interface UseTagsInputItemContext extends Accessor<ItemState> {
+}
+export declare const TagsInputItemProvider: (opts: UseTagsInputItemContext) => void, useTagsInputItemContext: (fallback?: UseTagsInputItemContext | undefined) => UseTagsInputItemContext;

package/dist/components/tags-input/use-item-context.js

@@ -0,0 +1,4 @@
+import { createContext } from "../../utils";
+export const [TagsInputItemProvider, useTagsInputItemContext] = createContext({
+    name: "TagsInputItemContext",
+});

package/dist/components/tags-input/use-item-props-context.d.ts

@@ -0,0 +1,5 @@
+import type { Accessor } from "../../core";
+import type { ItemProps } from "@wirekyt/dom/machines/tags-input";
+export interface UseTagsInputItemPropsContext extends Accessor<ItemProps> {
+}
+export declare const TagsInputItemPropsProvider: (opts: UseTagsInputItemPropsContext) => void, useTagsInputItemPropsContext: (fallback?: UseTagsInputItemPropsContext | undefined) => UseTagsInputItemPropsContext;

package/dist/components/tags-input/use-item-props-context.js

@@ -0,0 +1,4 @@
+import { createContext } from "../../utils";
+export const [TagsInputItemPropsProvider, useTagsInputItemPropsContext] = createContext({
+    name: "TagsInputItemPropsContext",
+});

package/dist/components/tags-input/use.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from "../../core";
+import { type PropTypes } from "../../core";
+import * as tagsInput from "@wirekyt/dom/machines/tags-input";
+import { type MaybeFunction } from "@wirekyt/dom/utils";
+export interface UseTagsInputProps extends Optional<Omit<tagsInput.Props, "dir" | "getRootNode">, "id"> {
+}
+export interface UseTagsInputReturn extends Accessor<tagsInput.Api<PropTypes>> {
+}
+export declare const useTagsInput: (inProps?: MaybeFunction<UseTagsInputProps>) => UseTagsInputReturn;

package/dist/components/tags-input/use.svelte.js

@@ -0,0 +1,33 @@
+import { normalizeProps, useMachine } from "../../core";
+import { useEnvironmentContext, useLocaleContext } from "../../providers";
+import { runIfFn } from "../../utils";
+import * as tagsInput from "@wirekyt/dom/machines/tags-input";
+import { ensureProps } from "@wirekyt/dom/utils";
+import { useFieldContext } from "../field";
+export const useTagsInput = (inProps = {}) => {
+    const props = $derived.by(() => {
+        const resolvedProps = runIfFn(inProps);
+        ensureProps(resolvedProps, ["id"]);
+        return resolvedProps;
+    });
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const field = useFieldContext();
+    const machineProps = $derived({
+        ids: {
+            label: field?.()?.ids.label,
+            hiddenInput: field?.()?.ids.control,
+        },
+        // @ts-expect-error - TODO: dir is not a valid prop
+        dir: locale().dir,
+        disabled: field?.()?.disabled,
+        invalid: field?.()?.invalid,
+        readOnly: field?.()?.readOnly,
+        required: field?.()?.required,
+        getRootNode: env().getRootNode,
+        ...props,
+    });
+    const service = useMachine(tagsInput.machine, () => machineProps);
+    const api = $derived(tagsInput.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/timer/action-trigger.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+  import type { ActionTriggerProps } from "@wirekyt/dom/machines/timer";
+
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useTimerContext } from "./use-context";
+
+  export interface TimerActionTriggerBaseProps
+    extends ActionTriggerProps, PolymorphicProps<"button">, RefAttribute {}
+
+  export interface TimerActionTriggerProps
+    extends HTMLProps<"button">, TimerActionTriggerBaseProps {}
+
+  let { ref = $bindable(null), ...props }: TimerActionTriggerProps = $props();
+
+  const timer = useTimerContext();
+  const mergedProps = $derived(mergeProps(timer().getActionTriggerProps(props), props));
+</script>
+
+<Wire as="button" bind:ref {...mergedProps} />

package/dist/components/timer/action-trigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { ActionTriggerProps } from "@wirekyt/dom/machines/timer";
+export interface TimerActionTriggerBaseProps extends ActionTriggerProps, PolymorphicProps<"button">, RefAttribute {
+}
+export interface TimerActionTriggerProps extends HTMLProps<"button">, TimerActionTriggerBaseProps {
+}
+declare const ActionTrigger: import("svelte").Component<TimerActionTriggerProps, {}, "ref">;
+type ActionTrigger = ReturnType<typeof ActionTrigger>;
+export default ActionTrigger;

package/dist/components/timer/anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as timerAnatomy } from "@wirekyt/dom/machines/timer";

package/dist/components/timer/anatomy.js

@@ -0,0 +1 @@
+export { anatomy as timerAnatomy } from "@wirekyt/dom/machines/timer";

package/dist/components/timer/area.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useTimerContext } from "./use-context";
+
+  export interface TimerAreaBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface TimerAreaProps extends HTMLProps<"div">, TimerAreaBaseProps {}
+
+  let { ref = $bindable(null), ...props }: TimerAreaProps = $props();
+  const timer = useTimerContext();
+  const mergedProps = $derived(mergeProps(timer().getAreaProps(), props));
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/timer/area.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface TimerAreaBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface TimerAreaProps extends HTMLProps<"div">, TimerAreaBaseProps {
+}
+declare const Area: import("svelte").Component<TimerAreaProps, {}, "ref">;
+type Area = ReturnType<typeof Area>;
+export default Area;

package/dist/components/timer/context.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import { type UseTimerContext, useTimerContext } from "./use-context";
+
+  export interface TimerContextProps {
+    api?: Snippet<[UseTimerContext]>;
+  }
+
+  const { api }: TimerContextProps = $props();
+  const timer = useTimerContext();
+</script>
+
+{@render api?.(timer)}

package/dist/components/timer/context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import { type UseTimerContext } from "./use-context";
+export interface TimerContextProps {
+    api?: Snippet<[UseTimerContext]>;
+}
+declare const Context: import("svelte").Component<TimerContextProps, {}, "">;
+type Context = ReturnType<typeof Context>;
+export default Context;

package/dist/components/timer/control.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useTimerContext } from "./use-context";
+
+  export interface TimerControlBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface TimerControlProps extends HTMLProps<"div">, TimerControlBaseProps {}
+
+  let { ref = $bindable(null), ...props }: TimerControlProps = $props();
+  const timer = useTimerContext();
+  const mergedProps = $derived(mergeProps(timer().getControlProps(), props));
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/timer/control.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface TimerControlBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface TimerControlProps extends HTMLProps<"div">, TimerControlBaseProps {
+}
+declare const Control: import("svelte").Component<TimerControlProps, {}, "ref">;
+type Control = ReturnType<typeof Control>;
+export default Control;

package/dist/components/timer/index.d.ts

@@ -0,0 +1,13 @@
+export type { TickDetails as TimerTickDetails } from "@wirekyt/dom/machines/timer";
+export { default as TimerActionTrigger, type TimerActionTriggerBaseProps, type TimerActionTriggerProps, } from "./action-trigger.svelte";
+export { default as TimerArea, type TimerAreaBaseProps, type TimerAreaProps } from "./area.svelte";
+export { default as TimerContext, type TimerContextProps } from "./context.svelte";
+export { default as TimerControl, type TimerControlBaseProps, type TimerControlProps, } from "./control.svelte";
+export { default as TimerItem, type TimerItemBaseProps, type TimerItemProps } from "./item.svelte";
+export { default as TimerRootProvider, type TimerRootProviderBaseProps, type TimerRootProviderProps, } from "./root-provider.svelte";
+export { default as TimerRoot, type TimerRootBaseProps, type TimerRootProps } from "./root.svelte";
+export { default as TimerSeparator, type TimerSeparatorBaseProps, type TimerSeparatorProps, } from "./separator.svelte";
+export { timerAnatomy } from "./anatomy";
+export { useTimerContext, type UseTimerContext } from "./use-context";
+export { useTimer, type UseTimerProps, type UseTimerReturn } from "./use.svelte";
+export * as Timer from "./timer";

package/dist/components/timer/index.js

@@ -0,0 +1,12 @@
+export { default as TimerActionTrigger, } from "./action-trigger.svelte";
+export { default as TimerArea } from "./area.svelte";
+export { default as TimerContext } from "./context.svelte";
+export { default as TimerControl, } from "./control.svelte";
+export { default as TimerItem } from "./item.svelte";
+export { default as TimerRootProvider, } from "./root-provider.svelte";
+export { default as TimerRoot } from "./root.svelte";
+export { default as TimerSeparator, } from "./separator.svelte";
+export { timerAnatomy } from "./anatomy";
+export { useTimerContext } from "./use-context";
+export { useTimer } from "./use.svelte";
+export * as Timer from "./timer";

package/dist/components/timer/item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+  import type { ItemProps } from "@wirekyt/dom/machines/timer";
+
+  import { mergeProps } from "../../core";
+  import { createSplitProps } from "../../utils";
+
+  import { Wire } from "../factory";
+  import { useTimerContext } from "./use-context";
+
+  export interface TimerItemBaseProps extends ItemProps, PolymorphicProps<"div">, RefAttribute {}
+  export interface TimerItemProps extends HTMLProps<"div">, TimerItemBaseProps {}
+
+  let { ref = $bindable(null), ...props }: TimerItemProps = $props();
+  const [itemProps, localProps] = $derived(createSplitProps<ItemProps>()(props, ["type"]));
+
+  const timer = useTimerContext();
+  const mergedProps = $derived(mergeProps(timer().getItemProps(itemProps), localProps));
+</script>
+
+<Wire as="div" bind:ref {...mergedProps}>
+  {#if mergedProps.children}
+    {@render mergedProps.children?.()}
+  {:else}
+    {timer().formattedTime[itemProps.type]}
+  {/if}
+</Wire>

package/dist/components/timer/item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { ItemProps } from "@wirekyt/dom/machines/timer";
+export interface TimerItemBaseProps extends ItemProps, PolymorphicProps<"div">, RefAttribute {
+}
+export interface TimerItemProps extends HTMLProps<"div">, TimerItemBaseProps {
+}
+declare const Item: import("svelte").Component<TimerItemProps, {}, "ref">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/components/timer/root-provider.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import { mergeProps } from "../../core";
+
+  import type { UseTimerReturn } from "./use.svelte";
+
+  import { Wire } from "../factory";
+  import { TimerProvider } from "./use-context";
+
+  interface RootProviderProps {
+    value: UseTimerReturn;
+  }
+
+  export interface TimerRootProviderBaseProps
+    extends RootProviderProps, PolymorphicProps<"div">, RefAttribute {}
+  export interface TimerRootProviderProps extends HTMLProps<"div">, TimerRootProviderBaseProps {}
+
+  let { ref = $bindable(null), value, ...props }: TimerRootProviderProps = $props();
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props));
+
+  TimerProvider(() => value());
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/timer/root-provider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { UseTimerReturn } from "./use.svelte";
+interface RootProviderProps {
+    value: UseTimerReturn;
+}
+export interface TimerRootProviderBaseProps extends RootProviderProps, PolymorphicProps<"div">, RefAttribute {
+}
+export interface TimerRootProviderProps extends HTMLProps<"div">, TimerRootProviderBaseProps {
+}
+declare const RootProvider: import("svelte").Component<TimerRootProviderProps, {}, "ref">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/timer/root.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from "../../core";
+
+  import { mergeProps, reflect } from "../../core";
+  import { createSplitProps } from "../../utils";
+
+  import type { UseTimerProps } from "./use.svelte";
+
+  import { Wire } from "../factory";
+  import { TimerProvider } from "./use-context";
+  import { useTimer } from "./use.svelte";
+
+  export interface TimerRootBaseProps
+    extends Optional<UseTimerProps, "id">, PolymorphicProps<"div">, RefAttribute {}
+  export interface TimerRootProps extends Assign<HTMLProps<"div">, TimerRootBaseProps> {}
+
+  let { ref = $bindable(null), ...props }: TimerRootProps = $props();
+  const providedId = $props.id();
+
+  const [useTimerProps, localProps] = $derived(
+    createSplitProps<Optional<UseTimerProps, "id">>()(props, [
+      "id",
+      "ids",
+      "autoStart",
+      "interval",
+      "countdown",
+      "startMs",
+      "targetMs",
+      "translations",
+      "onComplete",
+      "onTick",
+    ]),
+  );
+
+  const resolvedProps = $derived({
+    ...useTimerProps,
+    id: providedId,
+  });
+
+  const timer = useTimer(reflect(() => resolvedProps));
+  const mergedProps = $derived(mergeProps(timer().getRootProps(), localProps));
+
+  TimerProvider(timer);
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/timer/root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, Optional, PolymorphicProps, RefAttribute } from "../../core";
+import type { UseTimerProps } from "./use.svelte";
+export interface TimerRootBaseProps extends Optional<UseTimerProps, "id">, PolymorphicProps<"div">, RefAttribute {
+}
+export interface TimerRootProps extends Assign<HTMLProps<"div">, TimerRootBaseProps> {
+}
+declare const Root: import("svelte").Component<TimerRootProps, {}, "ref">;
+type Root = ReturnType<typeof Root>;
+export default Root;

package/dist/components/timer/separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useTimerContext } from "./use-context";
+
+  export interface TimerSeparatorBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface TimerSeparatorProps extends HTMLProps<"div">, TimerSeparatorBaseProps {}
+
+  let { ref = $bindable(null), ...props }: TimerSeparatorProps = $props();
+  const timer = useTimerContext();
+  const mergedProps = $derived(mergeProps(timer().getSeparatorProps(), props));
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />