dmonphx
0 Followers · 0 Following
  • Joined on 2026-02-19
Repositories Projects Packages Public Activity Starred Repositories

@phoenix-tekhne/svelte-dynamis (2.5.1)

Published 2026-05-28 07:22:39 -07:00 by dmonphx

Installation

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/
npm install @phoenix-tekhne/svelte-dynamis@2.5.1
"@phoenix-tekhne/svelte-dynamis": "2.5.1"

About this package

@phoenix-tekhne/svelte-dynamis

Svelte stores for headless UI interactions. Part of the Phoenix Tekhne Design System.

Installation

npm install @phoenix-tekhne/svelte-dynamis @phoenix-tekhne/dynamis-core

Peer Dependencies:

  • svelte@^4.0.0

Quick Start

<script lang="ts">
import { createPressStore } from '@phoenix-tekhne/svelte-dynamis';

const { state, props } = createPressStore({ isDisabled: false });
</script>

<button use:props {...$props} data-pressed={$state.isPressed}>
  Press me
</button>

Stores

Store Greek Purpose
createPressStore προσκρούσις (pressing against) Button press interactions
createToggleStore κράσις (mixing) Toggle/checkbox state (binary & tri-state)
createTextFieldStore λέξις (word) Text field validation and state
createSelectStore ἔλλειψις (choice) Select/dropdown interactions
createToastStore κήρυγμα (proclamation) Toast notifications

API Reference

createPressStore (Press)

Handles button press interactions with pointer and keyboard support.

<script lang="ts">
import { createPressStore } from '@phoenix-tekhne/svelte-dynamis';

const { state, props, handlePointerDown, handlePointerUp, handleKeyDown, handleKeyUp } = createPressStore({
  isDisabled: false,
  onPress: () => console.log('Pressed!'),
  onRelease: () => console.log('Released!'),
});
</script>

<button
  {...$props}
  on:pointerdown={handlePointerDown}
  on:pointerup={handlePointerUp}
  on:keydown={handleKeyDown}
  on:keyup={handleKeyUp}
  data-pressed={$state.isPressed}
>
  Press me
</button>

<style>
button[data-pressed="true"] {
  transform: scale(0.98);
  background-color: var(--phx-color-primary-active);
}
</style>

Options:

Option Type Default Description
isDisabled boolean false Disables press handling
onPress () => void - Callback when press activates
onRelease () => void - Callback when press releases

Returns:

Property Type Description
state Writable<{ isPressed, isActive }> Current press state
props Readable<object> ARIA attributes to spread on element
handlePointerDown (e: PointerEvent) => void Handler for pointer down
handlePointerUp (e: PointerEvent) => void Handler for pointer up
handleKeyDown (e: KeyboardEvent) => void Handler for keyboard down
handleKeyUp (e: KeyboardEvent) => void Handler for keyboard up
reset () => void Reset to initial state

createToggleStore (Toggle/Checkbox)

Handles toggle and checkbox state, supporting both binary and tri-state (indeterminate).

<script lang="ts">
import { createToggleStore } from '@phoenix-tekhne/svelte-dynamis';

const { state, props, toggle, setTrue, setFalse, setIndeterminate } = createToggleStore({
  initialValue: false,
  allowIndeterminate: true,
  onChange: (value) => console.log('Changed:', value),
});
</script>

<div
  role="checkbox"
  {...$props}
  aria-checked={$state.value === 'indeterminate' ? 'mixed' : $state.value}
  data-checked={$state.value === true}
  data-indeterminate={$state.value === 'indeterminate'}
  tabindex="0"
  on:click={() => toggle()}
  on:keydown={(e) => e.key === 'Enter' || e.key === ' ' ? toggle() : null}
>
  <span class="checkmark">
    {#if $state.value === true}
      ✓
    {:else if $state.value === 'indeterminate'}
      −
    {/if}
  </span>
  <slot />
</div>

Options:

Option Type Default Description
isDisabled boolean false Disables toggle
initialValue boolean | 'indeterminate' false Initial checked state
allowIndeterminate boolean false Enable tri-state mode
onChange (value) => void - Callback on value change

createTextFieldStore (Text Field)

Handles text field state, validation, and formatting.

<script lang="ts">
import { createTextFieldStore } from '@phoenix-tekhne/svelte-dynamis';

const { 
  state, 
  props, 
  handleInput, 
  handleFocus, 
  handleBlur,
  validate,
  reset,
  setValue,
} = createTextFieldStore({
  isRequired: true,
  minLength: 3,
  maxLength: 100,
  pattern: '[a-zA-Z]+',
  validate: (value) => value.length >= 3,
});
</script>

<div>
  <input
    {...$props}
    on:input={(e) => handleInput(e.target.value)}
    on:focus={handleFocus}
    on:blur={handleBlur}
    type="text"
  />
  {#if !$state.isValid && $state.isVisited}
    <span class="error">Please enter at least 3 characters</span>
  {/if}
</div>

createSelectStore (Select/Dropdown)

Handles select and dropdown interactions with single and multi-select support.

<script lang="ts">
import { createSelectStore } from '@phoenix-tekhne/svelte-dynamis';

const items = [
  { id: '1', label: 'Option 1' },
  { id: '2', label: 'Option 2' },
  { id: '3', label: 'Option 3' },
];

const { 
  state, 
  triggerProps,
  listboxProps,
  getItemProps,
  handleTriggerClick,
  handleKeyDown,
} = createSelectStore({
  items,
  isMulti: false,
  closeOnSelect: true,
  onChange: (values) => console.log('Selected:', values),
});
</script>

<div>
  <button {...$triggerProps} on:click={handleTriggerClick} on:keydown={handleKeyDown}>
    {$state.selectedValues.length > 0 
      ? items.find(i => i.id === $state.selectedValues[0])?.label 
      : 'Select...'}
  </button>
  
  {#if $state.isOpen}
    <ul {...$listboxProps}>
      {#each items as item, index}
        <li {...getItemProps(item, index)} on:click={() => selectItem(item.id)}>
          {item.label}
        </li>
      {/each}
    </ul>
  {/if}
</div>

createToastStore (Toast Notifications)

Manages toast notification lifecycle including queuing and dismissal.

<script lang="ts">
import { createToastStore } from '@phoenix-tekhne/svelte-dynamis';

const { toasts, visibleToasts, show, dismiss, dismissAll, position } = createToastStore({
  position: 'bottom-right',
  maxVisible: 5,
  duration: 5000,
});

// Show toasts
function handleClick() {
  $show({
    message: 'Operation successful!',
    variant: 'success',
    title: 'Success',
    dismissible: true,
  });
}

// Convenience methods
show.success('Success message');
show.error('Error message');
show.warning('Warning message');
show.info('Info message');
</script>

<div class="toast-container" data-position={$position}>
  {#each $visibleToasts as toast (toast.id)}
    <div class="toast" data-variant={toast.variant}>
      {#if toast.title}
        <span class="toast-title">{toast.title}</span>
      {/if}
      <span class="toast-message">{toast.message}</span>
      {#if toast.dismissible}
        <button on:click={() => dismiss(toast.id)}>×</button>
      {/if}
    </div>
  {/each}
</div>

Options:

Option Type Default Description
position 'top-left' | 'top-center' | ... 'bottom-right' Toast position
maxVisible number 5 Maximum visible toasts
duration number 5000 Default duration in ms
pauseOnHover boolean true Pause on hover
dismissible boolean true Allow dismissal
showProgress boolean false Show progress bar

Svelte Store Patterns

All stores follow consistent patterns:

Writable Stores

  • state - The reactive state (use with $state syntax)

Derived Stores

  • props - Derived props for ARIA attributes (use with $props syntax)

Methods

  • Event handlers (e.g., handlePointerDown, handleKeyDown)
  • State modifiers (e.g., toggle, reset, validate)

Greek Terminology

Greek Transliteration English Used For
δύναμις dynamis Power, Ability Core state machine package
προσκρούσις proskrousis Pressing against, striking Button press interactions
κράσις krasis Mixing Toggle/checkbox state
λέξις lexis Word Text field validation
ἔλλειψις epilipsis Choice, selection Select/dropdown
κήρυγμα kerygma Proclamation Toast notifications

Related Packages

  • @phoenix-tekhne/dynamis-core - Pure TypeScript state machines
  • @phoenix-tekhne/react-dynamis - React hooks
  • @phoenix-tekhne/vue-dynamis - Vue 3 composables
  • @phoenix-tekhne/angular-dynamis - Angular services
  • @phoenix-tekhne/web-dynamis - Web Components

License

MIT

Dependencies

Dependencies

ID Version
@phoenix-tekhne/dynamis-core 2.5.1

Development Dependencies

ID Version
@sveltejs/vite-plugin-svelte ^5.0.0
svelte ^5.0.0
typescript ^5.7.0
vite ^6.0.0
vitest ^2.0.0

Peer Dependencies

ID Version
svelte ^5.0.0

Keywords

svelte sveltekit headless ui components stores design-system phoenix-tekhne
Details
npm
2026-05-28 07:22:39 -07:00
4
Phoenix Tekhne Team
MIT
latest
28 KiB
Assets (1)
svelte-dynamis-2.5.1.tgz 28 KiB
Versions (1) View all
2.5.1 2026-05-28