@wirekyt/svelte 0.0.1 → 0.0.2

package/dist/components/floating-panel/root-provider.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type { UsePresenceProps } from "../presence/use.svelte";
+  import type { UseFloatingPanelReturn } from "./use.svelte";
+
+  interface RootProviderProps {
+    value: UseFloatingPanelReturn;
+  }
+
+  export interface FloatingPanelRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+    children?: Snippet;
+  }
+  export interface FloatingPanelRootProviderProps extends FloatingPanelRootProviderBaseProps {}
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import { mergeProps } from "../../core";
+
+  import { PresenceProvider, usePresence } from "../presence";
+  import { FloatingPanelProvider } from "./use-context";
+
+  let { value, children, ...presenceProps }: FloatingPanelRootProviderProps = $props();
+  const presence = usePresence(() => mergeProps({ present: value().open }, presenceProps));
+
+  FloatingPanelProvider(() => value());
+  PresenceProvider(presence);
+</script>
+
+{@render children?.()}

package/dist/components/floating-panel/root-provider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { UsePresenceProps } from "../presence/use.svelte";
+import type { UseFloatingPanelReturn } from "./use.svelte";
+interface RootProviderProps {
+    value: UseFloatingPanelReturn;
+}
+export interface FloatingPanelRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+    children?: Snippet;
+}
+export interface FloatingPanelRootProviderProps extends FloatingPanelRootProviderBaseProps {
+}
+import type { Snippet } from "svelte";
+declare const RootProvider: import("svelte").Component<FloatingPanelRootProviderProps, {}, "">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/floating-panel/root.svelte

@@ -0,0 +1,98 @@
+<script lang="ts" module>
+  import type { PolymorphicProps } from "../../core";
+  import type { Snippet } from "svelte";
+
+  import type { UsePresenceProps } from "../presence/use.svelte";
+  import type { UseFloatingPanelProps } from "./use.svelte";
+
+  export interface FloatingPanelRootBaseProps
+    extends UseFloatingPanelProps, UsePresenceProps, PolymorphicProps<"div"> {}
+  export interface FloatingPanelRootProps extends FloatingPanelRootBaseProps {
+    children?: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+  import { createSplitProps } from "../../utils";
+
+  import { PresenceProvider, splitPresenceProps, usePresence } from "../presence";
+  import { FloatingPanelProvider } from "./use-context";
+  import { useFloatingPanel } from "./use.svelte";
+
+  let {
+    open = $bindable(),
+    position = $bindable(),
+    size = $bindable(),
+    ...props
+  }: FloatingPanelRootProps = $props();
+  const providedId = $props.id();
+
+  const [presenceProps, otherProps] = $derived(splitPresenceProps(props));
+  const [floatingPanelProps, localProps] = $derived(
+    createSplitProps<UseFloatingPanelProps>()(otherProps, [
+      "allowOverflow",
+      "closeOnEscape",
+      "defaultOpen",
+      "defaultPosition",
+      "defaultSize",
+      "dir",
+      "disabled",
+      "draggable",
+      "getAnchorPosition",
+      "getBoundaryEl",
+      "gridSize",
+      "finalFocusEl",
+      "id",
+      "ids",
+      "initialFocusEl",
+      "lockAspectRatio",
+      "maxSize",
+      "minSize",
+      "onOpenChange",
+      "onPositionChange",
+      "onPositionChangeEnd",
+      "onSizeChange",
+      "onSizeChangeEnd",
+      "onStageChange",
+      "open",
+      "persistRect",
+      "position",
+      "resizable",
+      "restoreFocus",
+      "size",
+      "strategy",
+      "translations",
+    ]),
+  );
+
+  const resolvedProps = $derived<UseFloatingPanelProps>({
+    ...floatingPanelProps,
+    id: floatingPanelProps.id ?? providedId,
+    open,
+    onOpenChange(details) {
+      floatingPanelProps.onOpenChange?.(details);
+      if (open !== undefined) open = details.open;
+    },
+    position,
+    onPositionChange(details) {
+      floatingPanelProps.onPositionChange?.(details);
+      if (position !== undefined) position = details.position;
+    },
+    size,
+    onSizeChange(details) {
+      floatingPanelProps.onSizeChange?.(details);
+      if (size !== undefined) size = details.size;
+    },
+  });
+
+  const floatingPanel = useFloatingPanel(() => resolvedProps);
+  FloatingPanelProvider(floatingPanel);
+
+  const usePresenceProps = $derived(mergeProps({ present: floatingPanel().open }, presenceProps));
+  const presence = usePresence(() => usePresenceProps);
+
+  PresenceProvider(presence);
+</script>
+
+{@render localProps.children?.()}

package/dist/components/floating-panel/root.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { PolymorphicProps } from "../../core";
+import type { Snippet } from "svelte";
+import type { UsePresenceProps } from "../presence/use.svelte";
+import type { UseFloatingPanelProps } from "./use.svelte";
+export interface FloatingPanelRootBaseProps extends UseFloatingPanelProps, UsePresenceProps, PolymorphicProps<"div"> {
+}
+export interface FloatingPanelRootProps extends FloatingPanelRootBaseProps {
+    children?: Snippet;
+}
+declare const Root: import("svelte").Component<FloatingPanelRootProps, {}, "open" | "size" | "position">;
+type Root = ReturnType<typeof Root>;
+export default Root;

package/dist/components/floating-panel/stage-trigger.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+  import type { StageTriggerProps } from "@wirekyt/dom/machines/floating-panel";
+
+  export interface FloatingPanelStageTriggerBaseProps
+    extends StageTriggerProps, PolymorphicProps<"button">, RefAttribute {}
+  export interface FloatingPanelStageTriggerProps extends Assign<
+    HTMLProps<"button">,
+    FloatingPanelStageTriggerBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useFloatingPanelContext } from "./use-context";
+
+  let { ref = $bindable(null), stage, ...props }: FloatingPanelStageTriggerProps = $props();
+
+  const floatingPanel = useFloatingPanelContext();
+  const mergedProps = $derived(mergeProps(floatingPanel().getStageTriggerProps({ stage }), props));
+</script>
+
+<Wire as="button" bind:ref {...mergedProps} />

package/dist/components/floating-panel/stage-trigger.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { StageTriggerProps } from "@wirekyt/dom/machines/floating-panel";
+export interface FloatingPanelStageTriggerBaseProps extends StageTriggerProps, PolymorphicProps<"button">, RefAttribute {
+}
+export interface FloatingPanelStageTriggerProps extends Assign<HTMLProps<"button">, FloatingPanelStageTriggerBaseProps> {
+}
+declare const StageTrigger: import("svelte").Component<FloatingPanelStageTriggerProps, {}, "ref">;
+type StageTrigger = ReturnType<typeof StageTrigger>;
+export default StageTrigger;

package/dist/components/floating-panel/title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" module>
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface FloatingPanelTitleBaseProps extends PolymorphicProps<"h2">, RefAttribute {}
+  export interface FloatingPanelTitleProps extends Assign<
+    HTMLProps<"h2">,
+    FloatingPanelTitleBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useFloatingPanelContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: FloatingPanelTitleProps = $props();
+
+  const floatingPanel = useFloatingPanelContext();
+  const mergedProps = $derived(mergeProps(floatingPanel().getTitleProps(), props));
+</script>
+
+<Wire as="h2" bind:ref {...mergedProps} />

package/dist/components/floating-panel/title.svelte.d.ts

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

package/dist/components/floating-panel/trigger.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface FloatingPanelTriggerBaseProps extends PolymorphicProps<"button">, RefAttribute {}
+  export interface FloatingPanelTriggerProps extends Assign<
+    HTMLProps<"button">,
+    FloatingPanelTriggerBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { usePresenceContext } from "../presence";
+  import { useFloatingPanelContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: FloatingPanelTriggerProps = $props();
+
+  const floatingPanel = useFloatingPanelContext();
+  const presence = usePresenceContext();
+
+  const triggerProps = $derived(floatingPanel().getTriggerProps());
+  const mergedProps = $derived(
+    mergeProps(
+      {
+        ...triggerProps,
+        "aria-controls": presence().unmounted ? undefined : triggerProps["aria-controls"],
+      },
+      props,
+    ),
+  );
+</script>
+
+<Wire as="button" bind:ref {...mergedProps} />

package/dist/components/floating-panel/trigger.svelte.d.ts

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

package/dist/components/floating-panel/use-context.d.ts

@@ -0,0 +1,6 @@
+import type { PropTypes } from "../../core";
+import type { Accessor } from "../../core";
+import type * as floatingPanel from "@wirekyt/dom/machines/floating-panel";
+export interface UseFloatingPanelContext extends Accessor<floatingPanel.Api<PropTypes>> {
+}
+export declare const FloatingPanelProvider: (opts: UseFloatingPanelContext) => void, useFloatingPanelContext: (fallback?: UseFloatingPanelContext | undefined) => UseFloatingPanelContext;

package/dist/components/floating-panel/use-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "../../utils";
+export const [FloatingPanelProvider, useFloatingPanelContext] = createContext({
+    name: "FloatingPanelContext",
+    hookName: "useFloatingPanelContext",
+    providerName: "<FloatingPanelProvider />",
+});

package/dist/components/floating-panel/use.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Accessor, Optional } from "../../core";
+import { type PropTypes } from "../../core";
+import * as floatingPanel from "@wirekyt/dom/machines/floating-panel";
+import { type MaybeFunction } from "@wirekyt/dom/utils";
+export interface UseFloatingPanelProps extends Optional<Omit<floatingPanel.Props, "getRootNode">, "id"> {
+}
+export interface UseFloatingPanelReturn extends Accessor<floatingPanel.Api<PropTypes>> {
+}
+export declare const useFloatingPanel: (props?: MaybeFunction<UseFloatingPanelProps>) => UseFloatingPanelReturn;

package/dist/components/floating-panel/use.svelte.js

@@ -0,0 +1,19 @@
+import { normalizeProps, useMachine } from "../../core";
+import * as floatingPanel from "@wirekyt/dom/machines/floating-panel";
+import { runIfFn } from "@wirekyt/dom/utils";
+import { useEnvironmentContext, useLocaleContext } from "../../providers";
+export const useFloatingPanel = (props = {}) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    const resolvedProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...resolvedProps,
+        };
+    });
+    const service = useMachine(floatingPanel.machine, () => resolvedProps);
+    const api = $derived(floatingPanel.connect(service, normalizeProps));
+    return () => api;
+};

package/dist/components/focus-trap/focus-trap.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import { createSplitProps } from "../../utils";
+  import { type FocusTrapOptions, trapFocus } from "@wirekyt/dom/focus-trap";
+
+  import { Wire } from "../factory";
+
+  export interface TrapOptions extends Pick<
+    FocusTrapOptions,
+    | "onActivate"
+    | "onDeactivate"
+    | "initialFocus"
+    | "fallbackFocus"
+    | "returnFocusOnDeactivate"
+    | "setReturnFocus"
+  > {
+    disabled?: boolean;
+  }
+
+  export interface FocusTrapBaseProps extends PolymorphicProps<"div">, RefAttribute, TrapOptions {}
+  export interface FocusTrapProps extends Assign<HTMLProps<"div">, FocusTrapBaseProps> {}
+
+  let { ref = $bindable(null), ...props }: FocusTrapProps = $props();
+
+  const [trapProps, localProps] = $derived(
+    createSplitProps<TrapOptions>()(props, [
+      "disabled",
+      "onActivate",
+      "onDeactivate",
+      "initialFocus",
+      "fallbackFocus",
+      "returnFocusOnDeactivate",
+      "setReturnFocus",
+    ]),
+  );
+
+  let localNode = $state<HTMLDivElement | null>(null);
+
+  $effect(() => {
+    if (!localNode || trapProps.disabled) return;
+    return trapFocus(localNode, trapProps);
+  });
+
+  function setNode(node: HTMLDivElement | null) {
+    localNode = node;
+  }
+</script>
+
+<Wire as="div" bind:ref {@attach setNode} {...localProps} />

package/dist/components/focus-trap/focus-trap.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import { type FocusTrapOptions } from "@wirekyt/dom/focus-trap";
+export interface TrapOptions extends Pick<FocusTrapOptions, "onActivate" | "onDeactivate" | "initialFocus" | "fallbackFocus" | "returnFocusOnDeactivate" | "setReturnFocus"> {
+    disabled?: boolean;
+}
+export interface FocusTrapBaseProps extends PolymorphicProps<"div">, RefAttribute, TrapOptions {
+}
+export interface FocusTrapProps extends Assign<HTMLProps<"div">, FocusTrapBaseProps> {
+}
+declare const FocusTrap: import("svelte").Component<FocusTrapProps, {}, "ref">;
+type FocusTrap = ReturnType<typeof FocusTrap>;
+export default FocusTrap;

package/dist/components/focus-trap/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FocusTrap } from "./focus-trap.svelte";
+export type { FocusTrapBaseProps, FocusTrapProps } from "./focus-trap.svelte";

package/dist/components/focus-trap/index.js

@@ -0,0 +1 @@
+export { default as FocusTrap } from "./focus-trap.svelte";

package/dist/components/format/byte.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  export interface FormatByteProps {
+    unit?: "bit" | "byte";
+    unitDisplay?: "long" | "short" | "narrow";
+    unitSystem?: "decimal" | "binary";
+    value: number;
+  }
+</script>
+
+<script lang="ts">
+  import { formatBytes } from "@wirekyt/dom/i18n-utils";
+
+  import { useLocaleContext } from "../../providers";
+
+  const props: FormatByteProps = $props();
+
+  const locale = useLocaleContext();
+
+  const text = $derived(() => {
+    const { value, ...intlProps } = props;
+    return formatBytes(value, locale().locale, intlProps);
+  });
+</script>
+
+{text()}

package/dist/components/format/byte.svelte.d.ts

@@ -0,0 +1,9 @@
+export interface FormatByteProps {
+    unit?: "bit" | "byte";
+    unitDisplay?: "long" | "short" | "narrow";
+    unitSystem?: "decimal" | "binary";
+    value: number;
+}
+declare const Byte: import("svelte").Component<FormatByteProps, {}, "">;
+type Byte = ReturnType<typeof Byte>;
+export default Byte;

package/dist/components/format/format.d.ts

@@ -0,0 +1,4 @@
+export { default as Byte, type FormatByteProps as ByteBaseProps, type FormatByteProps as ByteProps, } from "./byte.svelte";
+export { default as Number, type FormatNumberProps as NumberBaseProps, type FormatNumberProps as NumberProps, } from "./number.svelte";
+export { default as RelativeTime, type FormatRelativeTimeProps as RelativeTimeBaseProps, type FormatRelativeTimeProps as RelativeTimeProps, } from "./relative-time.svelte";
+export { default as Time, type FormatTimeProps as TimeBaseProps, type FormatTimeProps as TimeProps, } from "./time.svelte";

package/dist/components/format/format.js

@@ -0,0 +1,4 @@
+export { default as Byte, } from "./byte.svelte";
+export { default as Number, } from "./number.svelte";
+export { default as RelativeTime, } from "./relative-time.svelte";
+export { default as Time, } from "./time.svelte";

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

@@ -0,0 +1,5 @@
+export { default as FormatByte, type FormatByteProps } from "./byte.svelte";
+export { default as FormatNumber, type FormatNumberProps } from "./number.svelte";
+export { default as FormatRelativeTime, type FormatRelativeTimeProps, } from "./relative-time.svelte";
+export { default as FormatTime, type FormatTimeProps } from "./time.svelte";
+export * as Format from "./format";

package/dist/components/format/index.js

@@ -0,0 +1,5 @@
+export { default as FormatByte } from "./byte.svelte";
+export { default as FormatNumber } from "./number.svelte";
+export { default as FormatRelativeTime, } from "./relative-time.svelte";
+export { default as FormatTime } from "./time.svelte";
+export * as Format from "./format";

package/dist/components/format/number.svelte

@@ -0,0 +1,16 @@
+<script module lang="ts">
+  export interface FormatNumberProps extends Intl.NumberFormatOptions {
+    value: number;
+  }
+</script>
+
+<script lang="ts">
+  import { useLocaleContext } from "../../providers";
+  import { formatNumber } from "@wirekyt/dom/i18n-utils";
+
+  const { value, ...props }: FormatNumberProps = $props();
+  const locale = useLocaleContext();
+  const text = $derived(formatNumber(value, locale().locale, props));
+</script>
+
+{text}

package/dist/components/format/number.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface FormatNumberProps extends Intl.NumberFormatOptions {
+    value: number;
+}
+declare const Number: import("svelte").Component<FormatNumberProps, {}, "">;
+type Number = ReturnType<typeof Number>;
+export default Number;

package/dist/components/format/relative-time.svelte

@@ -0,0 +1,17 @@
+<script module lang="ts">
+  export interface FormatRelativeTimeProps extends Intl.RelativeTimeFormatOptions {
+    value: Date;
+  }
+</script>
+
+<script lang="ts">
+  import { useLocaleContext } from "../../providers";
+  import { formatRelativeTime } from "@wirekyt/dom/i18n-utils";
+
+  let { value, ...props }: FormatRelativeTimeProps = $props();
+
+  const locale = useLocaleContext();
+  const text = $derived(formatRelativeTime(value, locale().locale, props));
+</script>
+
+{text}

package/dist/components/format/relative-time.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface FormatRelativeTimeProps extends Intl.RelativeTimeFormatOptions {
+    value: Date;
+}
+declare const RelativeTime: import("svelte").Component<FormatRelativeTimeProps, {}, "">;
+type RelativeTime = ReturnType<typeof RelativeTime>;
+export default RelativeTime;

package/dist/components/format/time.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { FormatTimeOptions } from "@wirekyt/dom/i18n-utils";
+
+  export interface FormatTimeProps extends FormatTimeOptions {
+    value: string | Date;
+  }
+</script>
+
+<script lang="ts">
+  import { useLocaleContext } from "../../providers";
+  import { formatTime } from "@wirekyt/dom/i18n-utils";
+
+  let { value, ...props }: FormatTimeProps = $props();
+
+  const locale = useLocaleContext();
+  const text = $derived(formatTime(value, locale().locale, props));
+</script>
+
+{text}

package/dist/components/format/time.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FormatTimeOptions } from "@wirekyt/dom/i18n-utils";
+export interface FormatTimeProps extends FormatTimeOptions {
+    value: string | Date;
+}
+declare const Time: import("svelte").Component<FormatTimeProps, {}, "">;
+type Time = ReturnType<typeof Time>;
+export default Time;

package/dist/components/frame/content.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface FrameContentProps {
+    onMount?(): void;
+    onUnmount?(): void;
+    children: Snippet;
+  }
+
+  const { onMount, onUnmount, children }: FrameContentProps = $props();
+
+  $effect(() => {
+    onMount?.();
+
+    return onUnmount;
+  });
+</script>
+
+{@render children()}

package/dist/components/frame/content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+interface FrameContentProps {
+    onMount?(): void;
+    onUnmount?(): void;
+    children: Snippet;
+}
+declare const Content: import("svelte").Component<FrameContentProps, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;