@noxlovette/material 0.1.0

package/dist/components/buttons/FAB.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { FABProps } from './types.js';
+/**
+ * Floating action buttons (FABs) help people take primary actions.
+ *
+ * - Regular: Standard size
+ * - Small: For secondary actions
+ * - Large: For prominent actions
+ * - Extended: Includes a text label
+ *
+ * @see https://m3.material.io/components/floating-action-button/overview
+ */
+declare const FAB: import("svelte").Component<FABProps, {}, "">;
+type FAB = ReturnType<typeof FAB>;
+export default FAB;

package/dist/components/buttons/FABMenu.svelte

@@ -0,0 +1,86 @@
+<!--
+@component
+A menu container for multiple FAB actions.
+Should be used with `FABMenuItem` as children.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { fabMenu } from './theme.js';
+  import type { FABMenuProps } from './types.js';
+  import { enterExit } from '../../animation/enterExit.js';
+  import { easeEmphasizedDecel, easeEmphasizedAccel } from '../../animation/easing.js';
+
+  let { children, class: className, position = 'top', ...restProps }: FABMenuProps = $props();
+
+  const { base } = $derived(fabMenu({ position }));
+
+  const margin = 8;
+  const gap = 8;
+  let coords = $state({
+    x: 0,
+    y: 0,
+    originX: 'left',
+    originY: 'top',
+    maxHeight: 0
+  });
+
+  // TODO: out:enterExit={{ duration: 200, easing: easeEmphasizedAccel, mode: 'scale' }} – if you can solve how to eliminate another button from appearing here, use this too
+</script>
+
+<ul
+  {...restProps}
+  class={base({
+    class: clsx(className, 'fab-menu overflow-y-auto')
+  })}
+  in:enterExit={{ duration: 300, easing: easeEmphasizedDecel, mode: 'scale' }}
+  style:translate={`${coords.x}px ${coords.y}px`}
+  style:max-height={coords.maxHeight ? `${coords.maxHeight}px` : undefined}
+  style:--enter-exit-origin={`${coords.originY} ${coords.originX}`}
+  {@attach (menu) => {
+    const rect = menu.getBoundingClientRect();
+    const anchorRect = menu.parentElement?.getBoundingClientRect();
+    if (!anchorRect) return;
+
+    const spaceAbove = anchorRect.top - gap - margin;
+    const spaceBelow = window.innerHeight - margin - (anchorRect.bottom + gap);
+    const placeAbove = spaceAbove >= rect.height || spaceAbove >= Math.max(0, spaceBelow);
+
+    let maxHeight = placeAbove ? spaceAbove : spaceBelow;
+    maxHeight = Math.max(0, Math.min(rect.height, maxHeight));
+
+    const targetTop = placeAbove ? anchorRect.top - gap - maxHeight : anchorRect.bottom + gap;
+
+    let targetLeft = anchorRect.right - rect.width;
+
+    if (targetLeft + rect.width > window.innerWidth - margin) {
+      targetLeft = window.innerWidth - margin - rect.width;
+    }
+    if (targetLeft < margin) {
+      targetLeft = margin;
+    }
+
+    let clampedTop = targetTop;
+    if (clampedTop < margin) {
+      clampedTop = margin;
+    }
+    if (clampedTop + maxHeight > window.innerHeight - margin) {
+      clampedTop = window.innerHeight - margin - maxHeight;
+    }
+
+    const x = targetLeft - rect.left;
+    const y = clampedTop - rect.top;
+    const originY = placeAbove ? 'bottom' : 'top';
+    const originX =
+      anchorRect.left + anchorRect.width / 2 < targetLeft + rect.width / 2 ? 'left' : 'right';
+
+    coords = { x, y, originX, originY, maxHeight };
+  }}
+>
+  {@render children()}
+</ul>
+
+<style>
+  .fab-menu {
+    transform-origin: var(--enter-exit-origin, bottom right);
+  }
+</style>

package/dist/components/buttons/FABMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { FABMenuProps } from './types.js';
+/**
+ * A menu container for multiple FAB actions.
+ * Should be used with `FABMenuItem` as children.
+ */
+declare const FABMenu: import("svelte").Component<FABMenuProps, {}, "">;
+type FABMenu = ReturnType<typeof FABMenu>;
+export default FABMenu;

package/dist/components/buttons/FABMenuItem.svelte

@@ -0,0 +1,38 @@
+<!--
+@component
+An individual action within a FAB menu.
+-->
+<script lang="ts">
+  import clsx from 'clsx';
+  import { fabMenuItem } from './theme.js';
+  import type { FABMenuItemProps } from './types.js';
+  import { Icon, LoadingIndicator, Layer } from '../../utils/index.js';
+  import { Button, type ButtonRootProps } from 'bits-ui';
+
+  let {
+    class: className,
+    variant = 'secondary',
+    loading,
+    children,
+    iconProps,
+    formaction,
+    ...restProps
+  }: FABMenuItemProps = $props();
+
+  const { base, icon } = $derived(fabMenuItem({ variant }));
+  const btnCls = $derived(base({ class: clsx(className) }));
+</script>
+
+<Button.Root {formaction} class={btnCls} {...restProps as ButtonRootProps}>
+  {#if iconProps}
+    {#if loading}
+      <LoadingIndicator />
+    {:else}
+      <Icon class={icon()} {...iconProps} />
+    {/if}
+  {:else if loading}
+    <LoadingIndicator />
+  {/if}
+  {@render children?.()}
+  <Layer />
+</Button.Root>

package/dist/components/buttons/FABMenuItem.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { FABMenuItemProps } from './types.js';
+/** An individual action within a FAB menu. */
+declare const FABMenuItem: import("svelte").Component<FABMenuItemProps, {}, "">;
+type FABMenuItem = ReturnType<typeof FABMenuItem>;
+export default FABMenuItem;

package/dist/components/buttons/Toggle.svelte

@@ -0,0 +1,62 @@
+<!--
+@component
+A toggle button that switches between pressed and unpressed states.
+Uses Material 3 selection button styling.
+
+@see https://m3.material.io/components/all-buttons
+-->
+<script lang="ts">
+  import type { ToggleMDProps } from './types.js';
+  import { Icon, LoadingIndicator, Layer } from '../../utils/index.js';
+  import { button } from './theme.js';
+  import clsx from 'clsx';
+  import { Toggle, type ToggleRootProps } from 'bits-ui';
+
+  let {
+    children,
+    iconProps,
+    size = 'md',
+    shape = 'round',
+    disabled,
+    loading,
+    pressed = $bindable(false),
+    onPressedChange,
+    class: className,
+    ...restProps
+  }: ToggleMDProps = $props();
+
+  const { base, icon } = $derived(
+    button({
+      variant: 'filled',
+      color: 'default',
+      usage: 'selection',
+      shape,
+      size,
+      selected: pressed
+    })
+  );
+
+  const btnCls = $derived(base({ class: clsx(className) }));
+</script>
+
+<Toggle.Root
+  bind:pressed
+  {onPressedChange}
+  {disabled}
+  class={btnCls}
+  {...restProps as ToggleRootProps}
+>
+  {#if iconProps}
+    {#if loading}
+      <LoadingIndicator container class={icon()} />
+    {:else}
+      <Icon class={icon()} {...iconProps} />
+      {@render children?.()}
+    {/if}
+  {:else if loading}
+    <LoadingIndicator container />
+  {:else}
+    {@render children?.()}
+  {/if}
+  <Layer />
+</Toggle.Root>

package/dist/components/buttons/Toggle.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ToggleMDProps } from './types.js';
+import { Toggle } from 'bits-ui';
+/**
+ * A toggle button that switches between pressed and unpressed states.
+ * Uses Material 3 selection button styling.
+ *
+ * @see https://m3.material.io/components/all-buttons
+ */
+declare const Toggle: import("svelte").Component<ToggleMDProps, {}, "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/buttons/connected/ConnectedButtons.svelte

@@ -0,0 +1,14 @@
+<!--
+@component
+A container for grouping buttons with shared borders and rounding.
+Typically used for segmented controls or closely related actions.
+-->
+<script lang="ts">
+  import type { ConnectedButtonsProps } from './types.js';
+
+  let { children, ...rest }: ConnectedButtonsProps = $props();
+</script>
+
+<div class="grid auto-cols-fr grid-flow-col gap-0.5 overflow-hidden rounded-full" {...rest}>
+  {@render children()}
+</div>

package/dist/components/buttons/connected/ConnectedButtons.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ConnectedButtonsProps } from './types.js';
+/**
+ * A container for grouping buttons with shared borders and rounding.
+ * Typically used for segmented controls or closely related actions.
+ */
+declare const ConnectedButtons: import("svelte").Component<ConnectedButtonsProps, {}, "">;
+type ConnectedButtons = ReturnType<typeof ConnectedButtons>;
+export default ConnectedButtons;

package/dist/components/buttons/connected/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types.js';
+export { default as ConnectedButtons } from './ConnectedButtons.svelte';

package/dist/components/buttons/connected/index.js

@@ -0,0 +1,5 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
+export * from './types.js';
+// default exports for components in this folder
+export { default as ConnectedButtons } from './ConnectedButtons.svelte';

package/dist/components/buttons/connected/types.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ConnectedButtonsProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The buttons to be connected.
+     * @example
+     * <ConnectedButtons>
+     *   <Button>Left</Button>
+     *   <Button>Center</Button>
+     *   <Button>Right</Button>
+     * </ConnectedButtons>
+     */
+    children: Snippet;
+}

package/dist/components/buttons/connected/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+export * from './connected/index.js';
+export * from './theme.js';
+export * from './types.js';
+export { default as Button } from './Button.svelte';
+export { default as ButtonIcon } from './ButtonIcon.svelte';
+export { default as FAB } from './FAB.svelte';
+export { default as FABMenu } from './FABMenu.svelte';
+export { default as FABMenuItem } from './FABMenuItem.svelte';
+export { default as Toggle } from './Toggle.svelte';

package/dist/components/buttons/index.js

@@ -0,0 +1,13 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// folder re-exports (export everything from these folders)
+export * from './connected/index.js';
+// re-export TS/JS modules from this folder
+export * from './theme.js';
+export * from './types.js';
+// default exports for components in this folder
+export { default as Button } from './Button.svelte';
+export { default as ButtonIcon } from './ButtonIcon.svelte';
+export { default as FAB } from './FAB.svelte';
+export { default as FABMenu } from './FABMenu.svelte';
+export { default as FABMenuItem } from './FABMenuItem.svelte';
+export { default as Toggle } from './Toggle.svelte';