polymorph-ui-components 0.1.0

package/dist/SplitButton/SplitButton.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { SplitButtonProperties } from './properties';
+  import type { MenuItem } from '../Menu/properties';
+  import Button from '../Button/Button.svelte';
+  import Menu from '../Menu/Menu.svelte';
+  import chevronDownSmSvg from '../assets/chevron-down-sm.svg?raw';
+
+  let {
+    text,
+    items,
+    disabled = false,
+    testId,
+    dropdownIcon,
+    classes,
+    onclick,
+    onselect
+  }: SplitButtonProperties = $props();
+
+  let menuOpen = $state(false);
+
+  function handlePrimaryClick(event: MouseEvent): void {
+    if (disabled) {
+      return;
+    }
+    onclick?.(event);
+  }
+
+  function handleMenuSelect(item: MenuItem): void {
+    onselect?.(item);
+  }
+</script>
+
+<div class="split-button {classes ?? ''}" class:disabled data-pw={testId}>
+  <div class="split-button-primary">
+    <Button {text} onclick={handlePrimaryClick} {disabled} />
+  </div>
+  <div class="split-button-trigger">
+    <Menu {items} bind:open={menuOpen} onselect={handleMenuSelect}>
+      {#snippet trigger()}
+        <span class="split-button-arrow">
+          {#if typeof dropdownIcon === 'function'}
+            {@render dropdownIcon()}
+          {:else}
+            <!-- eslint-disable svelte/no-at-html-tags -->
+            {@html chevronDownSmSvg}
+          {/if}
+        </span>
+      {/snippet}
+    </Menu>
+  </div>
+</div>
+
+<style>
+  .split-button {
+    display: inline-flex;
+    position: relative;
+    gap: var(--split-button-gap, 0px);
+  }
+
+  .split-button.disabled .split-button-trigger {
+    pointer-events: none;
+  }
+
+  .split-button-primary {
+    --button-color: var(--split-button-primary-background, #18181b);
+    --button-text-color: var(--split-button-primary-color, white);
+    --button-padding: var(--split-button-primary-padding, 8px 16px);
+    --button-font-size: var(--split-button-primary-font-size, 14px);
+    --button-font-weight: var(--split-button-primary-font-weight, 500);
+    --button-font-family: var(--split-button-primary-font-family);
+    --button-border: var(--split-button-primary-border, none);
+    --button-border-radius: var(--split-button-primary-border-radius, 6px 0 0 6px);
+    --button-hover-color: var(
+      --split-button-primary-hover-background,
+      var(--split-button-primary-background, #18181b)
+    );
+    --button-hover-text-color: var(
+      --split-button-primary-hover-color,
+      var(--split-button-primary-color, white)
+    );
+    --button-disabled-opacity: var(--split-button-disabled-opacity, 0.4);
+    --button-disabled-cursor: var(--split-button-disabled-cursor, not-allowed);
+    display: flex;
+  }
+
+  .split-button-trigger {
+    --menu-container-position: static;
+    --menu-container-display: flex;
+    --menu-trigger-focus-outline: none;
+    --menu-dropdown-left: 0;
+    --menu-min-width: 100%;
+    --menu-item-color: var(--split-button-menu-item-color, #18181b);
+    --menu-item-danger-color: var(--split-button-menu-item-danger-color, #18181b);
+    --menu-item-hover-background-color: var(--split-button-menu-item-hover-background, #f4f4f5);
+    --menu-item-focus-background-color: var(--split-button-menu-item-focus-background, #f4f4f5);
+    --menu-item-danger-hover-background-color: var(
+      --split-button-menu-item-danger-hover-background,
+      #f4f4f5
+    );
+    --menu-item-danger-focus-background-color: var(
+      --split-button-menu-item-danger-focus-background,
+      #f4f4f5
+    );
+    --menu-border: var(--split-button-menu-border, 1px solid #e4e4e7);
+    --menu-separator-color: var(--split-button-menu-separator-color, #e4e4e7);
+    border-left: var(--split-button-trigger-separator, 1px solid rgba(255, 255, 255, 0.3));
+    display: flex;
+    align-items: stretch;
+    background-color: var(--split-button-trigger-background, #18181b);
+    border-radius: var(--split-button-trigger-border-radius, 0 6px 6px 0);
+    color: var(--split-button-trigger-color, white);
+    cursor: pointer;
+  }
+
+  .split-button.disabled .split-button-trigger {
+    opacity: var(--split-button-disabled-opacity, 0.4);
+    cursor: var(--split-button-disabled-cursor, not-allowed);
+  }
+
+  .split-button-trigger:hover {
+    background-color: var(
+      --split-button-trigger-hover-background,
+      var(--split-button-trigger-background, #18181b)
+    );
+    color: var(--split-button-trigger-hover-color, var(--split-button-trigger-color, white));
+  }
+
+  .split-button-trigger :global(.menu-trigger) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--split-button-trigger-padding, 8px);
+  }
+
+  .split-button-arrow {
+    display: inline-flex;
+    width: var(--split-button-arrow-width, 10px);
+    height: var(--split-button-arrow-height, 6px);
+  }
+
+  .split-button-arrow :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/dist/SplitButton/SplitButton.svelte.d.ts

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

package/dist/SplitButton/properties.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { MenuItem } from '../Menu/properties';
+export type SplitButtonProperties = MandatorySplitButtonProperties & OptionalSplitButtonProperties & SplitButtonEventProperties;
+export type MandatorySplitButtonProperties = {
+    text: string;
+    items: MenuItem[];
+};
+export type OptionalSplitButtonProperties = {
+    disabled?: boolean;
+    testId?: string;
+    dropdownIcon?: Snippet;
+    classes?: string;
+};
+export type SplitButtonEventProperties = {
+    onclick?: (event: MouseEvent) => void;
+    onselect?: (item: MenuItem) => void;
+};

package/dist/SplitButton/properties.js

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

package/dist/SplitInput/SplitInput.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  import Input from '../Input/Input.svelte';
+  import type { FieldConfig, SplitInputProperties } from './properties';
+
+  let {
+    values = $bindable([]),
+    fields,
+    length = 4,
+    disabled = false,
+    autoAdvance = false,
+    separator,
+    testId,
+    classes,
+    onchange,
+    oninput,
+    oncomplete
+  }: SplitInputProperties = $props();
+
+  let fieldCount = $derived(typeof fields !== 'undefined' ? fields.length : length);
+
+  let fieldConfigs: FieldConfig[] = $derived(
+    typeof fields !== 'undefined'
+      ? fields
+      : Array.from({ length: fieldCount }, () => ({
+          dataType: 'tel' as const,
+          maxLength: 1
+        }))
+  );
+
+  let inputRefs: (ReturnType<typeof Input> | null)[] = $state(
+    Array.from({ length: 20 }, () => null)
+  );
+
+  // ── Value helpers ───────────────────────────────────────────────
+
+  function getFieldValue(index: number): string {
+    return values.at(index) ?? '';
+  }
+
+  function commitValues() {
+    const filled = values.filter((v) => v.length > 0);
+    oninput?.([...values]);
+    onchange?.([...values]);
+    if (filled.length === fieldCount) {
+      oncomplete?.([...values]);
+    }
+  }
+
+  // ── Focus management ────────────────────────────────────────────
+
+  function focusField(index: number) {
+    if (index >= 0 && index < fieldCount) {
+      inputRefs.at(index)?.focus();
+    }
+  }
+
+  // ── Input handler ───────────────────────────────────────────────
+
+  function handleFieldInput(index: number, inputValue: string) {
+    const config = fieldConfigs.at(index);
+    if (typeof config === 'undefined') {
+      return;
+    }
+    const maxLen = config.maxLength ?? 1000;
+
+    if (autoAdvance && maxLen === 1 && inputValue.length > 1) {
+      const chars = inputValue.replace(/\s/g, '');
+      for (let i = 0; i < fieldCount; i++) {
+        values[i] = chars.charAt(i);
+      }
+      focusField(Math.min(chars.length, fieldCount) - 1);
+    } else {
+      values[index] = inputValue;
+      if (autoAdvance && maxLen === 1 && inputValue.length > 0 && index < fieldCount - 1) {
+        focusField(index + 1);
+      }
+    }
+    commitValues();
+  }
+
+  // ── Keyboard handler ────────────────────────────────────────────
+
+  function handleKeyDown(e: KeyboardEvent, index: number) {
+    if (e.key === 'Backspace') {
+      const current = getFieldValue(index);
+      if (current.length === 0 && index > 0) {
+        values[index - 1] = '';
+        focusField(index - 1);
+        commitValues();
+      }
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      focusField(index - 1);
+    } else if (e.key === 'ArrowRight' && index < fieldCount - 1) {
+      focusField(index + 1);
+    } else if (e.key === 'Tab') {
+      if (e.shiftKey && index > 0) {
+        e.preventDefault();
+        focusField(index - 1);
+      } else if (e.shiftKey === false && index < fieldCount - 1) {
+        e.preventDefault();
+        focusField(index + 1);
+      }
+    }
+  }
+
+  // ── Paste handler ───────────────────────────────────────────────
+
+  function handlePaste(e: ClipboardEvent, index: number) {
+    if (e.clipboardData === null) {
+      return;
+    }
+    e.preventDefault();
+    const pasted = e.clipboardData.getData('text').trim();
+
+    if (autoAdvance) {
+      const chars = pasted.replace(/\s/g, '');
+      for (let i = index; i < fieldCount; i++) {
+        const charIdx = i - index;
+        if (charIdx >= chars.length) {
+          break;
+        }
+        values[i] = chars.charAt(charIdx);
+      }
+      focusField(Math.min(index + chars.length, fieldCount) - 1);
+    } else {
+      values[index] = pasted;
+    }
+    commitValues();
+  }
+
+  // ── Exported methods ────────────────────────────────────────────
+
+  export function clear() {
+    for (let i = 0; i < fieldCount; i++) {
+      values[i] = '';
+    }
+    oninput?.([...values]);
+    onchange?.([...values]);
+    focusField(0);
+  }
+
+  export function focus() {
+    focusField(0);
+  }
+</script>
+
+<div class="field-group {classes ?? ''}" data-pw={testId}>
+  {#each fieldConfigs as config, index (index)}
+    {#if typeof separator === 'string' && index > 0}
+      <span class="field-group-separator">{separator}</span>
+    {/if}
+    <div class="field-group-item">
+      <Input
+        value={getFieldValue(index)}
+        dataType={config.dataType ?? 'text'}
+        maxLength={config.maxLength ?? 1000}
+        min={config.min}
+        max={config.max}
+        placeholder={config.placeholder}
+        validationPattern={config.validationPattern ?? null}
+        validators={config.validators ?? []}
+        disable={disabled}
+        actionInput={true}
+        classes="field-group-input"
+        oninput={(v) => handleFieldInput(index, v)}
+        onkeydown={(e) => handleKeyDown(e, index)}
+        onpaste={(e) => handlePaste(e, index)}
+        bind:this={inputRefs[index]}
+      />
+      {#if typeof config.label === 'string'}
+        <span class="field-group-label">{config.label}</span>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .field-group {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--split-input-gap, 8px);
+    width: var(--split-input-width, fit-content);
+  }
+
+  .field-group-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--split-input-label-gap, 3px);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .field-group-item :global(.field-group-input) {
+    --input-border: var(--split-input-border, 1px solid currentColor);
+    --input-radius: var(--split-input-border-radius, 6px);
+    --input-focus-border: var(--split-input-focus-border, 1px solid currentColor);
+    --input-width: var(--split-input-input-width, 100%);
+    --input-height: var(--split-input-input-height, 36px);
+    --input-text-align: var(--split-input-text-align, center);
+    --input-font-size: var(--split-input-font-size, 14px);
+    --input-font-weight: var(--split-input-font-weight, 500);
+    --input-font-family: var(--split-input-font-family);
+    --input-padding: var(--split-input-input-padding, 0 6px);
+    --input-margin: 0;
+    --input-box-shadow: none;
+  }
+
+  .field-group-label {
+    font-size: var(--split-input-label-font-size, 12px);
+    font-weight: var(--split-input-label-font-weight, 500);
+    color: var(--split-input-label-color, currentColor);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .field-group-separator {
+    display: flex;
+    align-items: center;
+    height: var(--split-input-input-height, 36px);
+    font-size: var(--split-input-separator-font-size, 16px);
+    color: var(--split-input-separator-color, currentColor);
+    flex-shrink: 0;
+  }
+</style>

package/dist/SplitInput/SplitInput.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { SplitInputProperties } from './properties';
+declare const SplitInput: import("svelte").Component<SplitInputProperties, {
+    clear: () => void;
+    focus: () => void;
+}, "values">;
+type SplitInput = ReturnType<typeof SplitInput>;
+export default SplitInput;

package/dist/SplitInput/properties.d.ts

@@ -0,0 +1,20 @@
+import type { OptionalInputProperties } from '../Input/properties';
+export type FieldConfig = Pick<OptionalInputProperties, 'dataType' | 'maxLength' | 'min' | 'max' | 'placeholder' | 'validationPattern' | 'validators' | 'label'>;
+export type SplitInputProperties = MandatorySplitInputProperties & OptionalSplitInputProperties & SplitInputEventProperties;
+export type MandatorySplitInputProperties = {
+    values: string[];
+};
+export type OptionalSplitInputProperties = {
+    fields?: FieldConfig[];
+    length?: number;
+    disabled?: boolean;
+    autoAdvance?: boolean;
+    separator?: string;
+    testId?: string;
+    classes?: string;
+};
+export type SplitInputEventProperties = {
+    onchange?: (values: string[]) => void;
+    oninput?: (values: string[]) => void;
+    oncomplete?: (values: string[]) => void;
+};

package/dist/SplitInput/properties.js

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

package/dist/Stepper/Step.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import type { StepProperties } from './properties';
+
+  let { stepIndex, label, icon, classes, onclick, onkeydown }: StepProperties = $props();
+
+  function handleStepClick() {
+    onclick?.({ selectedIndex: stepIndex });
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleStepClick();
+    }
+    onkeydown?.(event);
+  }
+</script>
+
+<div
+  class="step {classes ?? ''}"
+  onclick={handleStepClick}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex="0"
+  aria-label={label}
+>
+  {#if typeof icon === 'string' && icon.length > 0}
+    <div class="step-icon-container">
+      <img class="step-icon" src={icon} alt="" />
+    </div>
+  {:else}
+    <div class="step-index-container">
+      <div class="step-index-text">
+        {stepIndex}
+      </div>
+    </div>
+  {/if}
+  <div class="step-text">
+    {label}
+  </div>
+  <div class="separator"></div>
+</div>
+
+<style>
+  .step {
+    display: flex;
+    flex-direction: var(--step-flex-direction, row);
+    align-items: center;
+  }
+
+  .step-index-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--step-index-container-height, 30px);
+    width: var(--step-index-container-width, 30px);
+    border-radius: var(--step-index-container-radius, 50%);
+    background-color: var(--step-index-container-background-color, currentColor);
+  }
+
+  .separator {
+    display: var(--step-separator-display, block);
+    height: var(--step-separator-height, 1px);
+    width: var(--step-separator-width, 50px);
+    margin: var(--step-separator-margin, 0px 12px 0px 12px);
+    background-image: var(
+      --step-separator-background-image,
+      repeating-linear-gradient(
+        to right,
+        var(--step-separator-background-image-color, currentColor),
+        var(--step-separator-background-image-color, currentColor) 6px,
+        transparent 6px,
+        transparent 10px
+      )
+    );
+  }
+
+  .step-text {
+    margin: var(--step-text-margin, 0px 0px 0px 12px);
+    font-size: var(--step-text-font-size, inherit);
+    color: var(--step-text-color, inherit);
+  }
+
+  .step-index-text {
+    font-size: var(--step-index-font-size, 14px);
+    color: var(--step-index-color, white);
+  }
+</style>

package/dist/Stepper/Step.svelte.d.ts

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

package/dist/Stepper/Stepper.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { StepperProperties } from './properties';
+  import Step from './Step.svelte';
+
+  let { steps, currentStepIndex, classes, testId, onhandlestepclick }: StepperProperties = $props();
+</script>
+
+<div class="container {classes ?? ''}" data-pw={testId}>
+  {#each steps as currentStep, stepIndex (stepIndex)}
+    <div
+      class:active-step={currentStepIndex === stepIndex}
+      class:completed-step={currentStepIndex > stepIndex}
+      class="step-container"
+    >
+      <Step
+        onclick={onhandlestepclick}
+        label={currentStep.label}
+        icon={currentStep.icon}
+        stepIndex={stepIndex + 1}
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: var(--stepper-flex-direction, row);
+    align-items: center;
+  }
+
+  .step-container:last-child {
+    --step-separator-display: none;
+  }
+
+  .step-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .active-step {
+    --step-text-color: var(--step-text-active-color, currentColor);
+    --step-separator-background-image-color: var(
+      --step-separator-background-image-active-color,
+      currentColor
+    );
+    --step-index-container-background-color: var(
+      --step-index-container-active-background-color,
+      currentColor
+    );
+  }
+
+  .completed-step {
+    --step-text-color: var(--step-text-completed-color, currentColor);
+    --step-separator-background-image-color: var(
+      --step-separator-background-image-completed-color,
+      currentColor
+    );
+    --step-index-container-background-color: var(
+      --step-index-container-completed-background-color,
+      currentColor
+    );
+  }
+</style>

package/dist/Stepper/Stepper.svelte.d.ts

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

package/dist/Stepper/properties.d.ts

@@ -0,0 +1,27 @@
+export type StepperProperties = {
+    steps: Array<Step>;
+    currentStepIndex: number;
+    classes?: string;
+    testId?: string;
+    onhandlestepclick?: (event: {
+        selectedIndex: number;
+    }) => void;
+};
+export type Step = {
+    label: string;
+    icon?: string;
+};
+export type StepProperties = OptionalStepProperties & StepEventProperties & {
+    stepIndex: number;
+    label: string;
+};
+export type OptionalStepProperties = {
+    icon?: string;
+    classes?: string;
+};
+export type StepEventProperties = {
+    onclick?: (event: {
+        selectedIndex: number;
+    }) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};

package/dist/Stepper/properties.js

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