milk-lib 0.0.23 → 0.0.24

package/dist/components/SegmentedControl/SegmentedControl.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import {
+    SEGMENTED_CONTROL_CONTEXT,
+    type ISegmentedControlContext,
+    type ISegmentedControlItemEntry,
+    type ISegmentedControlRootProps
+  } from './SegmentedControl.types';
+
+  let {
+    value = $bindable(),
+    defaultValue,
+    orientation = 'horizontal',
+    gap = '2px',
+    disabled = false,
+    classNames = '',
+    style,
+    dataVariant,
+    onValueChange,
+    children
+  }: ISegmentedControlRootProps = $props();
+
+  if (value === undefined && defaultValue !== undefined) {
+    value = defaultValue;
+  }
+
+  const selectedValue = writable<string | null>(value ?? defaultValue ?? null);
+  const disabledState = writable<boolean>(disabled);
+  let items: ISegmentedControlItemEntry[] = [];
+
+  function registerItem(entry: ISegmentedControlItemEntry) {
+    const index = items.findIndex(item => item.id === entry.id);
+    if (index === -1) {
+      items = [...items, entry];
+    } else {
+      items = [
+        ...items.slice(0, index),
+        entry,
+        ...items.slice(index + 1)
+      ];
+    }
+  }
+
+  function unregisterItem(id: symbol) {
+    items = items.filter(item => item.id !== id);
+  }
+
+  function selectValue(newValue: string) {
+    if (disabled) return;
+    if (value === newValue) return;
+    const target = items.find(item => item.value === newValue);
+    if (target?.disabled) return;
+    value = newValue;
+    selectedValue.set(newValue);
+    onValueChange?.(newValue);
+  }
+
+  const context: ISegmentedControlContext = {
+    orientation,
+    disabled: disabledState,
+    selectedValue,
+    selectValue,
+    registerItem,
+    unregisterItem
+  };
+
+  setContext(SEGMENTED_CONTROL_CONTEXT, context);
+
+  $effect(() => {
+    context.orientation = orientation;
+  });
+
+  $effect(() => {
+    disabledState.set(disabled);
+  });
+  
+  $effect(() => {
+    selectedValue.set(value ?? defaultValue ?? null);
+  });
+
+  let rootStyle = $state('');
+  $effect(() => {
+    const normalized = style ? style.trim() : '';
+    const normalizedStyle = normalized
+      ? normalized.endsWith(';')
+        ? normalized
+        : `${normalized};`
+      : '';
+    rootStyle = `${normalizedStyle} --segmented-control-gap: ${gap};`;
+  });
+
+  function moveFocus(step: number) {
+    if (!items.length) return;
+    if (!items.some(entry => !entry.disabled)) return;
+
+    let nextIndex = items.findIndex(entry => entry.value === value);
+    if (nextIndex === -1) {
+      nextIndex = step > 0 ? -1 : 0;
+    }
+
+    for (let i = 0; i < items.length; i += 1) {
+      nextIndex = (nextIndex + step + items.length) % items.length;
+      const entry = items[nextIndex];
+      if (!entry?.disabled) {
+        selectValue(entry.value);
+        entry.el?.focus();
+        break;
+      }
+    }
+  }
+
+  function focusEdge(isFirst: boolean) {
+    if (!items.length) return;
+    const ordered = isFirst ? items : [...items].reverse();
+    for (const entry of ordered) {
+      if (!entry.disabled) {
+        selectValue(entry.value);
+        entry.el?.focus();
+        break;
+      }
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (disabled) return;
+    const { key } = event;
+    if (orientation === 'horizontal') {
+      if (key === 'ArrowRight') {
+        event.preventDefault();
+        moveFocus(1);
+        return;
+      }
+      if (key === 'ArrowLeft') {
+        event.preventDefault();
+        moveFocus(-1);
+        return;
+      }
+    }
+
+    if (orientation === 'vertical') {
+      if (key === 'ArrowDown') {
+        event.preventDefault();
+        moveFocus(1);
+        return;
+      }
+      if (key === 'ArrowUp') {
+        event.preventDefault();
+        moveFocus(-1);
+        return;
+      }
+    }
+
+    if (key === 'Home') {
+      event.preventDefault();
+      focusEdge(true);
+    }
+
+    if (key === 'End') {
+      event.preventDefault();
+      focusEdge(false);
+    }
+  }
+</script>
+
+<div
+  class={`SegmentedControlRoot ${classNames}`}
+  role="group"
+  aria-orientation={orientation}
+  aria-disabled={disabled}
+  data-orientation={orientation}
+  style={rootStyle}
+  onkeydown={handleKeydown}
+  {...(dataVariant ? { 'data-variant': dataVariant } : {})}
+>
+  {@render children?.()}
+</div>
+
+<style>.SegmentedControlRoot {
+  --segmented-control-padding: 2px;
+  --segmented-control-radius: var(--border-radius-button, 10px);
+  --segmented-control-border: 1px solid var(--line-base);
+  display: inline-flex;
+  gap: var(--segmented-control-gap, 2px);
+  padding: var(--segmented-control-padding);
+  border: var(--segmented-control-border);
+  border-radius: var(--segmented-control-radius);
+  background-color: var(--bg-base);
+  align-items: stretch;
+  justify-content: flex-start;
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+.SegmentedControlRoot[data-orientation=vertical] {
+  flex-direction: column;
+}
+
+.SegmentedControlRoot:focus-within {
+  border-color: var(--line-base);
+  box-shadow: 0 0 0 1px var(--line-base);
+}</style>

package/dist/components/SegmentedControl/SegmentedControl.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ISegmentedControlRootProps } from './SegmentedControl.types';
+declare const SegmentedControl: import("svelte").Component<ISegmentedControlRootProps, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/components/SegmentedControl/SegmentedControl.types.d.ts

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { Writable } from 'svelte/store';
+/** Shared context key so items can find the current root instance. */
+export declare const SEGMENTED_CONTROL_CONTEXT: unique symbol;
+export type SegmentedControlOrientation = 'horizontal' | 'vertical';
+export interface ISegmentedControlItemEntry {
+    id: symbol;
+    value: string;
+    el: HTMLButtonElement | null;
+    disabled?: boolean;
+}
+export interface ISegmentedControlContext {
+    orientation: SegmentedControlOrientation;
+    disabled: Writable<boolean>;
+    selectedValue: Writable<string | null>;
+    selectValue: (value: string) => void;
+    registerItem: (entry: ISegmentedControlItemEntry) => void;
+    unregisterItem: (id: symbol) => void;
+}
+export interface ISegmentedControlRootProps {
+    /** Controlled value. */
+    value?: string | null;
+    /** Fallback selection when `value` is not supplied. */
+    defaultValue?: string;
+    /** Exposed gap between items. */
+    gap?: string;
+    /** Direction of the control. */
+    orientation?: SegmentedControlOrientation;
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Custom CSS class names for the root wrapper. */
+    classNames?: string;
+    /** Inline style helpers for the root wrapper. */
+    style?: string;
+    /** Arbitrary variant attribute. */
+    dataVariant?: string;
+    /** Callback that fires when the active value changes. */
+    onValueChange?: (value: string) => void;
+    children: Snippet;
+}
+export interface ISegmentedControlItemProps {
+    /** Unique identifier for the item (must be provided). */
+    value: string;
+    /** Disable just this item. */
+    disabled?: boolean;
+    /** Custom CSS class names applied to the item button. */
+    classNames?: string;
+    /** Inline styles for the item button. */
+    style?: string;
+    /** Arbitrary variant attribute. */
+    dataVariant?: string;
+    /** Click handler passed from the consumer. */
+    onClick?: (event: MouseEvent) => void;
+    children: Snippet;
+}

package/dist/components/SegmentedControl/SegmentedControl.types.js

@@ -0,0 +1,2 @@
+/** Shared context key so items can find the current root instance. */
+export const SEGMENTED_CONTROL_CONTEXT = Symbol('segmented-control');

package/dist/components/SegmentedControl/SegmentedControlItem.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { getContext, onDestroy } from 'svelte';
+  import { writable } from 'svelte/store';
+  import {
+    SEGMENTED_CONTROL_CONTEXT,
+    type ISegmentedControlContext,
+    type ISegmentedControlItemProps
+  } from './SegmentedControl.types';
+
+  const fallbackSelectedValue = writable<string | null>(null);
+  const fallbackDisabled = writable(false);
+
+  let {
+    value,
+    disabled = false,
+    classNames = '',
+    style,
+    dataVariant,
+    onClick,
+    children
+  }: ISegmentedControlItemProps = $props();
+
+  const context = getContext<ISegmentedControlContext>(SEGMENTED_CONTROL_CONTEXT);
+  const selectedValueStore = context?.selectedValue ?? fallbackSelectedValue;
+  const disabledStore = context?.disabled ?? fallbackDisabled;
+  const itemId = Symbol(value);
+  let buttonEl: HTMLButtonElement | null = null;
+  let isDisabled = $derived(disabled || $disabledStore);
+  let isSelected = $derived($selectedValueStore === value);
+  let tabIndex = $derived(($selectedValueStore !== null) ? (isSelected ? 0 : -1) : 0);
+
+  $effect(() => {
+    if (context) {
+      context.registerItem({
+        id: itemId,
+        value,
+        el: buttonEl,
+        disabled: isDisabled
+      });
+    }
+  });
+
+  let buttonClass = $state('');
+  $effect(() => {
+    const base = ['SegmentedControlItem'];
+    if (isSelected) base.push('SegmentedControlItem--selected');
+    if (isDisabled) base.push('SegmentedControlItem--disabled');
+    if (classNames) base.push(classNames);
+    buttonClass = base.join(' ');
+  });
+
+  onDestroy(() => {
+    context?.unregisterItem(itemId);
+  });
+
+  function handleClick(event: MouseEvent) {
+    if (isDisabled) return;
+    context?.selectValue(value);
+    onClick?.(event);
+  }
+</script>
+
+<button
+  type="button"
+  class={buttonClass}
+  role="radio"
+  aria-checked={isSelected}
+  aria-disabled={isDisabled}
+  tabindex={tabIndex}
+  data-state={isSelected ? 'on' : 'off'}
+  {style}
+  onclick={handleClick}
+  bind:this={buttonEl}
+  disabled={isDisabled}
+  {...(dataVariant ? { 'data-variant': dataVariant } : {})}
+>
+  {@render children?.()}
+</button>
+
+<style>.SegmentedControlItem {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-base-muted);
+  font-size: 0.875rem;
+  line-height: 1.3;
+  padding: 0.35rem 0.9rem;
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  gap: 0.35rem;
+  outline: none;
+}
+.SegmentedControlItem:not(:disabled):hover:not([data-state=on]) {
+  background: var(--bg-base-200);
+}
+
+.SegmentedControlItem[data-state=on] {
+  background: var(--bg-base-emp-100);
+  color: var(--text-base-inv);
+}
+
+.SegmentedControlItem--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}</style>

package/dist/components/SegmentedControl/SegmentedControlItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ISegmentedControlItemProps } from './SegmentedControl.types';
+declare const SegmentedControlItem: import("svelte").Component<ISegmentedControlItemProps, {}, "">;
+type SegmentedControlItem = ReturnType<typeof SegmentedControlItem>;
+export default SegmentedControlItem;

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

@@ -0,0 +1,8 @@
+import SegmentedControlRoot from './SegmentedControl.svelte';
+import SegmentedControlItem from './SegmentedControlItem.svelte';
+declare const SegmentedControl: import("svelte").Component<import("./SegmentedControl.types").ISegmentedControlRootProps, {}, "value"> & {
+    Root: import("svelte").Component<import("./SegmentedControl.types").ISegmentedControlRootProps, {}, "value">;
+    Item: import("svelte").Component<import("./SegmentedControl.types").ISegmentedControlItemProps, {}, "">;
+};
+export { SegmentedControl, SegmentedControlRoot, SegmentedControlItem };
+export * from './SegmentedControl.types';

package/dist/components/SegmentedControl/index.js

@@ -0,0 +1,8 @@
+import SegmentedControlRoot from './SegmentedControl.svelte';
+import SegmentedControlItem from './SegmentedControlItem.svelte';
+const SegmentedControl = Object.assign(SegmentedControlRoot, {
+    Root: SegmentedControlRoot,
+    Item: SegmentedControlItem
+});
+export { SegmentedControl, SegmentedControlRoot, SegmentedControlItem };
+export * from './SegmentedControl.types';

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './TextInputBlock';
 export * from './Command';
 export * from './Portal';
 export * from './Modal';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Icon';
 export * from './Checkbox';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export * from './TextInputBlock';
 export * from './Command';
 export * from './Portal';
 export * from './Modal';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Icon';
 export * from './Checkbox';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "milk-lib",
 	"license": "MIT",
-	"version": "0.0.23",
+	"version": "0.0.24",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",