@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/inputs/NeoRadio.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import type { NeoRadioProps } from './neo-radio.model.js';
+
+  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import IconRadio from '../icons/IconRadio.svelte';
+  import NeoBaseInput from './common/NeoBaseInput.svelte';
+  import NeoLabel from './common/NeoLabel.svelte';
+  import { computeShadowElevation } from '../utils/shadow.utils.js';
+  import { enterDefaultTransition } from '../utils/transition.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    label,
+
+    // State
+    type = 'radio',
+    id = label ? `neo-radio-${crypto.randomUUID()}` : undefined,
+    ref = $bindable(),
+    group = $bindable(),
+    checked = $bindable(false),
+    valid = $bindable(),
+    dirty = $bindable(false),
+    touched = $bindable(false),
+    focused = $bindable(false),
+    disabled,
+    required,
+    loading,
+
+    // Styles
+    start,
+    glass,
+    rounded = true,
+    skeleton,
+
+    elevation = 2,
+
+    // Actions
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Other props
+    labelRef = $bindable(),
+    labelProps,
+    containerTag = 'div',
+    containerProps,
+    ...rest
+  }: NeoRadioProps = $props();
+  /* eslint-enable prefer-const */
+
+  let initial = $state(checked);
+  let validationMessage = $state<string>(ref?.validationMessage ?? '');
+
+  const boxShadow = $derived(computeShadowElevation(elevation, { glass }, { max: 2, min: -2 }));
+  const checkedShadow = $derived(computeShadowElevation(-Math.abs(elevation), { glass, pressed: elevation > 0 }, { max: 2, min: -2 }));
+</script>
+
+<svelte:element this={containerTag} class:neo-radio-container={true} class:neo-rounded={rounded} class:neo-flat={!elevation} {...containerProps}>
+  <button
+    class="neo-radio-button"
+    role="radio"
+    aria-checked={checked}
+    class:neo-checked={checked}
+    class:neo-rounded={rounded}
+    class:neo-start={start}
+    class:neo-glass={glass}
+    class:neo-disabled={disabled}
+    class:neo-skeleton={skeleton}
+    class:neo-flat={!elevation}
+    class:neo-inset={elevation <= 0}
+    style:--neo-radio-box-shadow={boxShadow}
+    style:--neo-radio-checked-shadow={checkedShadow}
+    onclick={() => ref?.click()}
+  >
+    <span class="neo-radio-input">
+      <NeoBaseInput
+        aria-invalid={valid === undefined ? undefined : !valid}
+        {id}
+        bind:ref
+        bind:initial
+        bind:group
+        bind:checked
+        bind:valid
+        bind:dirty
+        bind:touched
+        bind:focused
+        bind:validationMessage
+        {type}
+        {disabled}
+        {required}
+        {...rest}
+        hidden
+        aria-hidden
+        tabindex={-1}
+      />
+    </span>
+    {#if checked}
+      <IconRadio circle={rounded} scale={rounded ? 0.75 : 0.9} checked />
+    {:else}
+      <IconRadio circle={rounded} scale={rounded ? 0.75 : 0.9} />
+    {/if}
+  </button>
+  <NeoLabel bind:ref={labelRef} for={id} {label} {disabled} {required} {...labelProps} />
+  {#if loading !== undefined}
+    <span class="neo-radio-suffix">
+      {#if loading}
+        <span class="neo-radio-loading" out:fade={enterDefaultTransition}>
+          <IconCircleLoading width="1rem" height="1rem" />
+        </span>
+      {/if}
+    </span>
+  {/if}
+</svelte:element>
+
+<style>.neo-radio-container {
+  --neo-label-margin: 0 0 0 0.75rem;
+  --neo-label-padding: 0;
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  margin: 0;
+  padding: calc(0.375rem + var(--neo-radio-border-width, var(--neo-border-width, 1px))) 0.5rem 0.375rem;
+  border-radius: var(--neo-border-radius);
+  transition: box-shadow 0.3s ease, border-radius 0.3s ease;
+}
+.neo-radio-container.neo-rounded {
+  border-radius: var(--neo-border-radius-lg);
+}
+.neo-radio-container.neo-flat {
+  --neo-label-margin: 0 0 0 0.625rem;
+}
+.neo-radio-input {
+  display: none;
+}
+.neo-radio-button {
+  box-sizing: border-box;
+  min-width: fit-content;
+  margin: 0 0 0.125rem;
+  padding: 0;
+  color: inherit;
+  text-decoration: none;
+  background-color: color-mix(in srgb, transparent, currentcolor 1%);
+  border: var(--neo-radio-border-width, var(--neo-border-width, 1px)) var(--neo-radio-border-color, transparent) solid;
+  border-radius: var(--neo-border-radius-xs);
+  outline: none;
+  box-shadow: var(--neo-radio-box-shadow, var(--neo-box-shadow-raised-2));
+  cursor: pointer;
+  transition: color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
+}
+.neo-radio-button.neo-disabled, .neo-radio-button.neo-flat {
+  background-color: transparent;
+  border-color: var(--neo-input-border-color, var(--neo-border-color));
+}
+.neo-radio-button:focus-visible, .neo-radio-button.neo-checked {
+  box-shadow: var(--neo-radio-checked-shadow, var(--neo-box-shadow-pressed-2));
+}
+.neo-radio-button.neo-inset:focus-visible {
+  border-color: var(--neo-checkbox-border-color-focused, var(--neo-border-color-focused));
+}
+.neo-radio-button.neo-disabled {
+  color: var(--neo-text-color-disabled);
+  box-shadow: var(--neo-box-shadow-flat);
+  cursor: not-allowed;
+  opacity: var(--neo-card-opacity-disabled, var(--neo-opacity-disabled));
+}
+.neo-radio-button.neo-rounded {
+  border-radius: 50%;
+}
+.neo-radio-button.neo-glass {
+  /** Box Shadows raised */
+  --neo-box-shadow-raised-5: var(--neo-glass-box-shadow-raised-5);
+  --neo-box-shadow-raised-4: var(--neo-glass-box-shadow-raised-4);
+  --neo-box-shadow-raised-3: var(--neo-glass-box-shadow-raised-3);
+  --neo-box-shadow-raised-2: var(--neo-glass-box-shadow-raised-2);
+  --neo-box-shadow-raised-1: var(--neo-glass-box-shadow-raised-1);
+  /** Box Shadows inset */
+  --neo-box-shadow-inset-1: var(--neo-glass-box-shadow-inset-1);
+  --neo-box-shadow-inset-2: var(--neo-glass-box-shadow-inset-2);
+  --neo-box-shadow-inset-3: var(--neo-glass-box-shadow-inset-3);
+  --neo-box-shadow-inset-4: var(--neo-glass-box-shadow-inset-4);
+  --neo-box-shadow-inset-5: var(--neo-glass-box-shadow-inset-5);
+  /** Box Shadows pressed */
+  --neo-box-shadow-pressed-1: var(--neo-glass-box-shadow-pressed-1);
+  --neo-box-shadow-pressed-2: var(--neo-glass-box-shadow-pressed-2);
+  --neo-box-shadow-pressed-3: var(--neo-glass-box-shadow-pressed-3);
+  --neo-box-shadow-pressed-4: var(--neo-glass-box-shadow-pressed-4);
+  --neo-box-shadow-pressed-5: var(--neo-glass-box-shadow-pressed-5);
+  /** Box Shadows convex */
+  --neo-box-shadow-convex-1: var(--neo-glass-box-shadow-convex-1);
+  --neo-box-shadow-convex-2: var(--neo-glass-box-shadow-convex-2);
+  --neo-box-shadow-convex-3: var(--neo-glass-box-shadow-convex-3);
+  --neo-box-shadow-convex-4: var(--neo-glass-box-shadow-convex-4);
+  --neo-box-shadow-convex-5: var(--neo-glass-box-shadow-convex-5);
+  /** Skeleton color */
+  --neo-skeleton-color: var(--neo-glass-skeleton-color);
+  background-color: var(--neo-radio-bg-color, var(--neo-glass-background-color));
+  border-color: var(--neo-radio-border-color, var(--neo-glass-top-border-color) var(--neo-glass-right-border-color) var(--neo-glass-bottom-border-color) var(--neo-glass-left-border-color));
+  backdrop-filter: var(--neo-radio-glass-blur, var(--neo-blur-2) var(--neo-saturate-2));
+}
+@starting-style {
+  .neo-radio-button.neo-start {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+}
+.neo-radio-button.neo-skeleton {
+  box-shadow: var(--neo-box-shadow-flat);
+  pointer-events: none;
+  --neo-skeleton-color-start: var(--neo-skeleton-color);
+  --neo-skeleton-color-end: oklch(from var(--neo-skeleton-color) calc(l - var(--neo-skeleton-color-step, 0.05)) c h);
+  color: var(--neo-skeleton-color-start);
+  background-color: var(--neo-skeleton-color-start);
+  border-color: var(--neo-skeleton-color-start);
+  transition: background-color 1s ease, color 1s ease, border-color 1s ease;
+  animation: skeleton 3s var(--neo-transition-skeleton) infinite;
+  animation-delay: 1s;
+}
+.neo-radio-button.neo-skeleton::before, .neo-radio-button.neo-skeleton::after,
+.neo-radio-button.neo-skeleton :global(> *::before),
+.neo-radio-button.neo-skeleton :global(> *::after),
+.neo-radio-button.neo-skeleton :global(> *) {
+  visibility: hidden;
+  pointer-events: none;
+}
+@keyframes skeleton {
+  0% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  40% {
+    color: var(--neo-skeleton-color-end);
+    background-color: var(--neo-skeleton-color-end);
+    border-color: var(--neo-skeleton-color-end);
+  }
+  80% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+  100% {
+    color: var(--neo-skeleton-color-start);
+    background-color: var(--neo-skeleton-color-start);
+    border-color: var(--neo-skeleton-color-start);
+  }
+}
+.neo-radio-suffix {
+  width: 1rem;
+  height: 1rem;
+  margin-bottom: 0.125rem;
+  margin-left: 0.5rem;
+}</style>

package/dist/inputs/NeoRadio.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoRadioProps } from './neo-radio.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoRadio: $$__sveltets_2_IsomorphicComponent<NeoRadioProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "group" | "ref" | "checked" | "focused" | "touched" | "dirty" | "valid" | "labelRef">;
+type NeoRadio = InstanceType<typeof NeoRadio>;
+export default NeoRadio;