seblify 0.3.0 → 0.4.0

package/dist/components/action/button/toggle-button/ToggleButton.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type ToggleButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+type ToggleButtonSize = 'sm' | 'md' | 'lg' | 'xl' | CustomCssSize;
+type ToggleButtonTone = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type ToggleButtonVariant = 'solid' | 'soft' | 'tint' | 'outline' | 'plain';
+declare const ToggleButton: import("svelte").Component<{
+    [x: string]: unknown;
+    ariaLabel?: string | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    end?: Snippet | undefined;
+    fullWidth?: boolean | undefined;
+    iconOnly?: boolean | undefined;
+    label?: string | undefined;
+    onclick?: ((event: MouseEvent) => void) | undefined;
+    pressed?: boolean | undefined;
+    radius?: ToggleButtonRadius | undefined;
+    size?: ToggleButtonSize | undefined;
+    start?: Snippet | undefined;
+    tone?: ToggleButtonTone | undefined;
+    type?: "Guard: `type` prop not allowed. Use `variant` instead" | undefined;
+    value?: string | undefined;
+    variant?: ToggleButtonVariant | undefined;
+}, {}, "pressed">;
+type ToggleButton = ReturnType<typeof ToggleButton>;
+export default ToggleButton;

package/dist/components/action/button/toggle-button-group/ToggleButtonGroup.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import { setToggleButtonGroupContext } from './context';
+
+  type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';
+  type ToggleButtonGroupRadius =
+    | 'none'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'full'
+    | CustomCssSize;
+  type ToggleButtonGroupSelectionMode = 'multiple' | 'single';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    ariaLabel?: string;
+    children?: Snippet;
+    class?: string;
+    orientation?: ToggleButtonGroupOrientation;
+    radius?: ToggleButtonGroupRadius;
+    required?: boolean;
+    selectionMode?: ToggleButtonGroupSelectionMode;
+    value?: string;
+    values?: string[];
+  }>;
+
+  const TOGGLE_BUTTON_GROUP_RADIUS_MAP: Record<
+    Exclude<ToggleButtonGroupRadius, CustomCssSize>,
+    string
+  > = {
+    none: '0',
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    full: '999px',
+  };
+
+  let {
+    ariaLabel,
+    children,
+    class: className,
+    orientation = 'horizontal',
+    radius = 'md',
+    required = false,
+    selectionMode = 'multiple',
+    value = $bindable(''),
+    values = $bindable([]),
+    ...restProps
+  }: Props = $props();
+
+  let registeredValues = $state<string[]>([]);
+
+  function cssSize(value: CustomCssSize): string {
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function resolveRadiusValue(value: ToggleButtonGroupRadius): string {
+    if (typeof value === 'number') {
+      return cssSize(value);
+    }
+
+    return (
+      TOGGLE_BUTTON_GROUP_RADIUS_MAP[
+        value as keyof typeof TOGGLE_BUTTON_GROUP_RADIUS_MAP
+      ] ?? value
+    );
+  }
+
+  function addValue(nextValue: string) {
+    if (values.includes(nextValue)) {
+      return;
+    }
+
+    values = [...values, nextValue];
+  }
+
+  function removeValue(nextValue: string) {
+    values = values.filter((currentValue) => currentValue !== nextValue);
+  }
+
+  function register(nextValue: string, initialPressed: boolean) {
+    if (!registeredValues.includes(nextValue)) {
+      registeredValues = [...registeredValues, nextValue];
+    }
+
+    if (!initialPressed) {
+      return;
+    }
+
+    if (selectionMode === 'single') {
+      if (!value) {
+        value = nextValue;
+      }
+
+      return;
+    }
+
+    addValue(nextValue);
+  }
+
+  function unregister(nextValue: string) {
+    registeredValues = registeredValues.filter(
+      (currentValue) => currentValue !== nextValue,
+    );
+
+    if (selectionMode === 'single' && value === nextValue) {
+      value = '';
+    }
+
+    if (selectionMode === 'multiple') {
+      removeValue(nextValue);
+    }
+  }
+
+  function isPressed(nextValue: string): boolean {
+    return selectionMode === 'single'
+      ? value === nextValue
+      : values.includes(nextValue);
+  }
+
+  function toggle(nextValue: string) {
+    if (selectionMode === 'single') {
+      if (value === nextValue) {
+        if (!required) {
+          value = '';
+        }
+
+        return;
+      }
+
+      value = nextValue;
+      return;
+    }
+
+    if (values.includes(nextValue)) {
+      removeValue(nextValue);
+      return;
+    }
+
+    addValue(nextValue);
+  }
+
+  const radiusValue = $derived(resolveRadiusValue(radius));
+
+  $effect(() => {
+    if (selectionMode !== 'single' || !required || value) {
+      return;
+    }
+
+    const firstValue = registeredValues[0];
+
+    if (firstValue) {
+      value = firstValue;
+    }
+  });
+
+  setToggleButtonGroupContext({
+    isPressed,
+    register,
+    toggle,
+    unregister,
+  });
+</script>
+
+<div
+  {...restProps}
+  aria-label={ariaLabel}
+  class={`toggle-button-group${className ? ` ${className}` : ''}`}
+  data-orientation={orientation}
+  data-selection-mode={selectionMode}
+  role="group"
+  style:--toggle-button-group-radius={radiusValue}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .toggle-button-group {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: stretch;
+    vertical-align: middle;
+  }
+
+  .toggle-button-group[data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .toggle-button-group[data-orientation='vertical'] {
+    flex-direction: column;
+    width: fit-content;
+  }
+
+  .toggle-button-group :global(.toggle-button) {
+    position: relative;
+    border-radius: 0;
+  }
+
+  .toggle-button-group :global(.toggle-button:focus-visible) {
+    z-index: 2;
+  }
+
+  .toggle-button-group[data-orientation='horizontal']
+    :global(.toggle-button) {
+    margin-inline-start: -1px;
+  }
+
+  .toggle-button-group[data-orientation='horizontal']
+    :global(.toggle-button:first-child) {
+    margin-inline-start: 0;
+    border-start-start-radius: var(--toggle-button-group-radius);
+    border-end-start-radius: var(--toggle-button-group-radius);
+  }
+
+  .toggle-button-group[data-orientation='horizontal']
+    :global(.toggle-button:last-child) {
+    border-start-end-radius: var(--toggle-button-group-radius);
+    border-end-end-radius: var(--toggle-button-group-radius);
+  }
+
+  .toggle-button-group[data-orientation='vertical'] :global(.toggle-button) {
+    width: 100%;
+    margin-block-start: -1px;
+  }
+
+  .toggle-button-group[data-orientation='vertical']
+    :global(.toggle-button:first-child) {
+    margin-block-start: 0;
+    border-start-start-radius: var(--toggle-button-group-radius);
+    border-start-end-radius: var(--toggle-button-group-radius);
+  }
+
+  .toggle-button-group[data-orientation='vertical']
+    :global(.toggle-button:last-child) {
+    border-end-start-radius: var(--toggle-button-group-radius);
+    border-end-end-radius: var(--toggle-button-group-radius);
+  }
+</style>

package/dist/components/action/button/toggle-button-group/ToggleButtonGroup.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';
+type ToggleButtonGroupRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+type ToggleButtonGroupSelectionMode = 'multiple' | 'single';
+declare const ToggleButtonGroup: import("svelte").Component<{
+    [x: string]: unknown;
+    ariaLabel?: string | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    orientation?: ToggleButtonGroupOrientation | undefined;
+    radius?: ToggleButtonGroupRadius | undefined;
+    required?: boolean | undefined;
+    selectionMode?: ToggleButtonGroupSelectionMode | undefined;
+    value?: string | undefined;
+    values?: string[] | undefined;
+}, {}, "value" | "values">;
+type ToggleButtonGroup = ReturnType<typeof ToggleButtonGroup>;
+export default ToggleButtonGroup;

package/dist/components/action/button/toggle-button-group/ToggleButtonGroup.test.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import ToggleButton from '../toggle-button/ToggleButton.svelte';
+  import ToggleButtonGroup from './ToggleButtonGroup.svelte';
+
+  type Props = {
+    orientation?: 'horizontal' | 'vertical';
+    required?: boolean;
+    selectionMode?: 'multiple' | 'single';
+    value?: string;
+    values?: string[];
+  };
+
+  let {
+    orientation = 'horizontal',
+    required = false,
+    selectionMode = 'multiple',
+    value = $bindable(''),
+    values = $bindable([]),
+  }: Props = $props();
+</script>
+
+<ToggleButtonGroup
+  ariaLabel="Text formatting"
+  bind:value
+  bind:values
+  {orientation}
+  {required}
+  {selectionMode}
+>
+  <ToggleButton value="bold">Bold</ToggleButton>
+  <ToggleButton value="italic">Italic</ToggleButton>
+  <ToggleButton value="underline" disabled>Underline</ToggleButton>
+</ToggleButtonGroup>
+
+<span data-testid="selected-value">{value}</span>
+<span data-testid="selected-values">{values.join(',')}</span>

package/dist/components/action/button/toggle-button-group/ToggleButtonGroup.test.svelte.d.ts

@@ -0,0 +1,11 @@
+import ToggleButtonGroup from './ToggleButtonGroup.svelte';
+type Props = {
+    orientation?: 'horizontal' | 'vertical';
+    required?: boolean;
+    selectionMode?: 'multiple' | 'single';
+    value?: string;
+    values?: string[];
+};
+declare const ToggleButtonGroup: import("svelte").Component<Props, {}, "value" | "values">;
+type ToggleButtonGroup = ReturnType<typeof ToggleButtonGroup>;
+export default ToggleButtonGroup;

package/dist/components/action/button/toggle-button-group/context.d.ts

@@ -0,0 +1,8 @@
+export interface ToggleButtonGroupContext {
+    isPressed: (value: string) => boolean;
+    register: (value: string, initialPressed: boolean) => void;
+    toggle: (value: string) => void;
+    unregister: (value: string) => void;
+}
+export declare function setToggleButtonGroupContext(value: ToggleButtonGroupContext): void;
+export declare function getToggleButtonGroupContext(): ToggleButtonGroupContext | undefined;

package/dist/components/action/button/toggle-button-group/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const toggleButtonGroupContextKey = Symbol('seblify-toggle-button-group');
+export function setToggleButtonGroupContext(value) {
+    setContext(toggleButtonGroupContextKey, value);
+}
+export function getToggleButtonGroupContext() {
+    return getContext(toggleButtonGroupContextKey);
+}

package/dist/components/action/input/field/pin-input/PinInput.svelte

@@ -105,7 +105,7 @@
   }
 
   .cells:focus-visible .cell {
-    border-color: var(--seblify-color-fill-accent, #146a6f);
+    border-color: var(--seblify-color-primary-fill, #146a6f);
     box-shadow: 0 0 0 3px var(--seblify-color-focus-ring, #9bd4d8);
   }
 
@@ -125,14 +125,14 @@
   }
 
   .filled {
-    border-color: var(--seblify-color-border-accent, #9ab7ba);
-    background: var(--seblify-color-surface-accent, #f7fbfb);
+    border-color: var(--seblify-color-primary-border, #9ab7ba);
+    background: var(--seblify-color-primary-surface, #f7fbfb);
   }
 
   .caret {
     width: 2px;
     height: 20px;
-    background: var(--seblify-color-fill-accent, #146a6f);
+    background: var(--seblify-color-primary-fill, #146a6f);
   }
 
   .input {