@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/icons/IconVideo.svelte

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props} style:scale={$$props.scale} scale={undefined}>
   <mask id="lineMdYoutubeFilled0">
-    <g fill="none" fill-opacity="0" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+    <g fill="none" fill-opacity="0" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width={$$props.stroke ?? 1.5}>
       <path fill="#fff" stroke-dasharray="64" stroke-dashoffset="64" d="M12 5c9 0 9 0 9 7c0 7 0 7 -9 7c-9 0 -9 0 -9 -7c0 -7 0 -7 9 -7Z">
         <animate fill="freeze" attributeName="fill-opacity" begin="0.6s" dur="0.5s" values="0;1" />
         <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="64;0" />

package/dist/icons/IconWatch.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props} style:scale={$$props.scale} scale={undefined}>
   <circle cx="12" cy="12" r="0" fill="currentColor">
     <animate attributeName="r" dur="6s" keyTimes="0;0.03;0.97;1" repeatCount="indefinite" values="0;3;3;0" />
   </circle>
@@ -7,7 +7,7 @@
     stroke="currentColor"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="1.5"
+    stroke-width={$$props.stroke ?? 1.5}
     d="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z"
   >
     <animate

package/dist/icons/IconWatchOff.svelte

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props} style:scale={$$props.scale} scale={undefined}>
   <mask id="lineMdWatchOffLoop0">
-    <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+    <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width={$$props.stroke ?? 1.5}>
       <circle cx="12" cy="12" r="0" fill="#fff" stroke="none">
         <animate attributeName="r" dur="6s" keyTimes="0;0.03;0.97;1" repeatCount="indefinite" values="0;3;3;0" />
       </circle>

package/dist/inputs/NeoCheckbox.svelte

@@ -0,0 +1,316 @@
+<script lang="ts">
+  import { toStyle } from '@dvcol/common-utils/common/class';
+  import { fade } from 'svelte/transition';
+
+  import type { NeoInputContext, NeoInputHTMLElement } from './common/neo-input.model.js';
+  import type { NeoCheckboxProps } from './neo-checkbox.model.js';
+
+  import IconCheckbox from '../icons/IconCheckbox.svelte';
+  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import NeoBaseInput from './common/NeoBaseInput.svelte';
+  import NeoInputValidation from './common/NeoInputValidation.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,
+    message,
+    error,
+
+    // State
+    type = 'checkbox',
+    id = label ? `neo-checkbox-${crypto.randomUUID()}` : undefined,
+    ref = $bindable(),
+    group = $bindable(),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    valid = $bindable(),
+    dirty = $bindable(false),
+    touched = $bindable(false),
+    focused = $bindable(false),
+    disabled,
+    required,
+    loading,
+    validation,
+
+    // Styles
+    start,
+    glass,
+    rounded,
+    skeleton,
+
+    elevation = 2,
+
+    // Actions
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Other props
+    labelRef = $bindable(),
+    labelProps,
+    messageTag = 'div',
+    messageProps,
+    containerTag = 'div',
+    containerProps,
+    wrapperTag = 'div',
+    wrapperProps,
+    ...rest
+  }: NeoCheckboxProps = $props();
+  /* eslint-enable prefer-const */
+
+  let initial = $state(checked);
+  let validationMessage = $state<string>(ref?.validationMessage ?? '');
+
+  let visible = $state(false);
+  let messageId = $state(`neo-checkbox-message-${crypto.randomUUID()}`);
+  const context = $derived<NeoInputContext<NeoInputHTMLElement>>({
+    // Ref
+    ref,
+
+    // Methods
+    mark: ref?.mark,
+    clear: ref?.clear,
+    change: ref?.change,
+    validate: ref?.validate,
+
+    // State
+    value: checked,
+    touched,
+    dirty,
+    valid,
+    readonly: rest.readonly,
+    disabled,
+
+    // Styles
+    rounded,
+    glass,
+    start,
+    skeleton,
+  });
+
+  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>
+
+<NeoInputValidation
+  tag={wrapperTag}
+  bind:visible
+  bind:messageId
+  {valid}
+  {validation}
+  {validationMessage}
+  {error}
+  {rounded}
+  {context}
+  {message}
+  {messageTag}
+  {messageProps}
+  in={inAction}
+  out={outAction}
+  transition={transitionAction}
+  {...wrapperProps}
+  style={toStyle('--neo-validation-padding: 0', wrapperProps?.style)}
+>
+  <svelte:element this={containerTag} class:neo-checkbox-container={true} class:neo-rounded={rounded} class:neo-flat={!elevation} {...containerProps}>
+    <button
+      class="neo-checkbox-button"
+      role="checkbox"
+      aria-checked={indeterminate ? 'mixed' : checked}
+      class:neo-checked={checked || indeterminate}
+      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-checkbox-box-shadow={boxShadow}
+      style:--neo-checkbox-checked-shadow={checkedShadow}
+      onclick={() => ref?.click()}
+    >
+      <span class="neo-checkbox-input">
+        <NeoBaseInput
+          aria-invalid={valid === undefined ? undefined : !valid}
+          aria-describedby={visible ? messageId : undefined}
+          {id}
+          bind:ref
+          bind:initial
+          bind:group
+          bind:checked
+          bind:indeterminate
+          bind:valid
+          bind:dirty
+          bind:touched
+          bind:focused
+          bind:validationMessage
+          {type}
+          {disabled}
+          {required}
+          {...rest}
+          hidden
+          aria-hidden
+          tabindex={-1}
+        />
+      </span>
+      {#if indeterminate}
+        <IconCheckbox circle={rounded} indeterminate />
+      {:else if checked}
+        <IconCheckbox circle={rounded} checked />
+      {:else}
+        <IconCheckbox circle={rounded} enter={touched} />
+      {/if}
+    </button>
+    <NeoLabel bind:ref={labelRef} for={id} {label} {disabled} {required} {...labelProps} />
+    {#if loading !== undefined}
+      <span class="neo-checkbox-suffix">
+        {#if loading}
+          <span class="neo-checkbox-loading" out:fade={enterDefaultTransition}>
+            <IconCircleLoading width="1rem" height="1rem" />
+          </span>
+        {/if}
+      </span>
+    {/if}
+  </svelte:element>
+</NeoInputValidation>
+
+<style>.neo-checkbox-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-checkbox-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-checkbox-container.neo-rounded {
+  border-radius: var(--neo-border-radius-lg);
+}
+.neo-checkbox-container.neo-flat {
+  --neo-label-margin: 0 0 0 0.625rem;
+}
+.neo-checkbox-input {
+  display: none;
+}
+.neo-checkbox-button {
+  box-sizing: border-box;
+  min-width: fit-content;
+  margin: 0 0 0.125rem;
+  padding: 0.125rem;
+  color: inherit;
+  text-decoration: none;
+  background-color: color-mix(in srgb, transparent, currentcolor 1%);
+  border: var(--neo-checkbox-border-width, var(--neo-border-width, 1px)) var(--neo-checkbox-border-color, transparent) solid;
+  border-radius: var(--neo-border-radius-xs);
+  outline: none;
+  box-shadow: var(--neo-checkbox-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-checkbox-button.neo-disabled, .neo-checkbox-button.neo-flat {
+  background-color: transparent;
+  border-color: var(--neo-input-border-color, var(--neo-border-color));
+}
+.neo-checkbox-button:focus-visible, .neo-checkbox-button.neo-checked {
+  box-shadow: var(--neo-checkbox-checked-shadow, var(--neo-box-shadow-pressed-2));
+}
+.neo-checkbox-button.neo-inset:focus-visible {
+  border-color: var(--neo-checkbox-border-color-focused, var(--neo-border-color-focused));
+}
+.neo-checkbox-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-checkbox-button.neo-rounded {
+  border-radius: 50%;
+}
+.neo-checkbox-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-checkbox-bg-color, var(--neo-glass-background-color));
+  border-color: var(--neo-checkbox-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-checkbox-glass-blur, var(--neo-blur-2) var(--neo-saturate-2));
+}
+@starting-style {
+  .neo-checkbox-button.neo-start {
+    box-shadow: var(--neo-box-shadow-flat);
+  }
+}
+.neo-checkbox-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-checkbox-button.neo-skeleton::before, .neo-checkbox-button.neo-skeleton::after,
+.neo-checkbox-button.neo-skeleton :global(> *::before),
+.neo-checkbox-button.neo-skeleton :global(> *::after),
+.neo-checkbox-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-checkbox-suffix {
+  width: 1rem;
+  height: 1rem;
+  margin-bottom: 0.125rem;
+  margin-left: 0.5rem;
+}</style>

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

@@ -0,0 +1,19 @@
+import type { NeoCheckboxProps } from './neo-checkbox.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 NeoCheckbox: $$__sveltets_2_IsomorphicComponent<NeoCheckboxProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "group" | "ref" | "checked" | "focused" | "indeterminate" | "touched" | "dirty" | "valid" | "labelRef">;
+type NeoCheckbox = InstanceType<typeof NeoCheckbox>;
+export default NeoCheckbox;

package/dist/inputs/NeoColorPicker.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import type { FormEventHandler } from 'svelte/elements';
+  import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+
+  import type { NeoColorPickerProps } from './neo-color-picker.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import IconPaint from '../icons/IconPaint.svelte';
+  import NeoInput from './common/NeoInput.svelte';
+  import { HexColorRegexString } from '../utils/regex.utils.js';
+  import { computeButtonShadows, getDefaultElevation } from '../utils/shadow.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // State
+    ref = $bindable(),
+    value = $bindable(),
+    valid = $bindable(),
+    dirty = $bindable(false),
+    touched = $bindable(false),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+    placeholder = 'Pick a color',
+    pattern = HexColorRegexString,
+    minlength = 7,
+    maxlength = 7,
+
+    // Other props
+    labelRef = $bindable(),
+    buttonProps,
+    pickerRef = $bindable(),
+    pickerProps,
+    ...rest
+  }: NeoColorPickerProps = $props();
+  /* eslint-enable prefer-const */
+
+  const onclick: NeoButtonProps['onclick'] = e => {
+    pickerRef?.focus?.();
+    pickerRef?.click?.();
+    pickerRef?.showPicker?.();
+    buttonProps?.onclick?.(e);
+  };
+
+  const elevation = $derived(rest?.elevation ?? getDefaultElevation(rest?.pressed));
+  const text = $derived(elevation >= 0 || !rest.pressed);
+  const style = $derived(computeButtonShadows(elevation, text));
+  const afterProps = $derived<NeoButtonProps>({
+    'aria-label': 'Toggle picker',
+    title: 'Toggle picker',
+    skeleton: rest.skeleton,
+    disabled: rest.disabled,
+    rounded: rest.rounded,
+    glass: rest.glass,
+    start: rest.start,
+    text,
+    style,
+    ...buttonProps,
+    onclick,
+  });
+
+  const oninput: FormEventHandler<HTMLInputElement> = e => {
+    ref?.dispatchEvent(new InputEvent(e.type, e));
+    pickerProps?.oninput?.(e);
+  };
+
+  const onchange: FormEventHandler<HTMLInputElement> = e => {
+    ref?.dispatchEvent(new InputEvent(e.type, e));
+    pickerProps?.onchange?.(e);
+  };
+</script>
+
+{#snippet before()}
+  <input
+    class:neo-color-picker={true}
+    class:neo-rounded={rest.rounded}
+    class:neo-label={rest.label}
+    bind:this={pickerRef}
+    bind:value
+    type="color"
+    {oninput}
+    {onchange}
+    {...pickerProps}
+  />
+{/snippet}
+
+{#snippet after()}
+  <NeoButton {...afterProps}>
+    {#snippet icon()}
+      <IconPaint width="1.25rem" height="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+    {/snippet}
+  </NeoButton>
+{/snippet}
+
+<NeoInput
+  bind:ref
+  bind:labelRef
+  bind:value
+  bind:valid
+  bind:dirty
+  bind:touched
+  bind:hovered
+  bind:focused
+  type="text"
+  {placeholder}
+  {before}
+  {after}
+  {pattern}
+  {minlength}
+  {maxlength}
+  {...rest}
+/>
+
+<style>.neo-color-picker {
+  box-sizing: border-box;
+  min-width: 3rem;
+  height: 100%;
+  min-height: 2.25rem;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--neo-border-radius-xs);
+  transition: border-radius 0.3s ease;
+  appearance: none;
+  aspect-ratio: 4/3;
+}
+.neo-color-picker::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.neo-color-picker::-webkit-color-swatch-wrapper, .neo-color-picker::-webkit-color-swatch {
+  border: none;
+}
+.neo-color-picker::-webkit-color-swatch-wrapper, .neo-color-picker::-webkit-color-swatch, .neo-color-picker::-moz-color-swatch {
+  border-radius: var(--neo-border-radius-xs);
+}
+.neo-color-picker.neo-rounded {
+  border-radius: var(--neo-border-radius-lg);
+}
+.neo-color-picker.neo-rounded::-webkit-color-swatch-wrapper, .neo-color-picker.neo-rounded::-webkit-color-swatch, .neo-color-picker.neo-rounded::-moz-color-swatch {
+  border-radius: var(--neo-border-radius-lg);
+}</style>

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

@@ -0,0 +1,19 @@
+import type { NeoColorPickerProps } from './neo-color-picker.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 NeoColorPicker: $$__sveltets_2_IsomorphicComponent<NeoColorPickerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value" | "ref" | "hovered" | "focused" | "touched" | "dirty" | "valid" | "labelRef" | "pickerRef">;
+type NeoColorPicker = InstanceType<typeof NeoColorPicker>;
+export default NeoColorPicker;

package/dist/inputs/NeoDateTime.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+  import type { NeoDateTimeProps } from './neo-date-time.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+
+  import IconCalendar from '../icons/IconCalendar.svelte';
+  import NeoInput from './common/NeoInput.svelte';
+  import { computeButtonShadows, getDefaultElevation } from '../utils/shadow.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // State
+    type = 'date',
+    ref = $bindable(),
+    value = $bindable(),
+    valid = $bindable(),
+    dirty = $bindable(false),
+    touched = $bindable(false),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+    placeholder = 'Select a date',
+
+    // Other props
+    labelRef = $bindable(),
+    buttonProps,
+    ...rest
+  }: NeoDateTimeProps = $props();
+  /* eslint-enable prefer-const */
+
+  const onclick: NeoButtonProps['onclick'] = e => {
+    ref?.focus?.();
+    ref?.click?.();
+    ref?.showPicker?.();
+    buttonProps?.onclick?.(e);
+  };
+
+  const elevation = $derived(rest?.elevation ?? getDefaultElevation(rest?.pressed));
+  const text = $derived(elevation >= 0 || !rest.pressed);
+  const style = $derived(computeButtonShadows(elevation, text));
+  const afterProps = $derived<NeoButtonProps>({
+    'aria-label': 'Toggle picker',
+    title: 'Toggle picker',
+    skeleton: rest.skeleton,
+    disabled: rest.disabled,
+    rounded: rest.rounded,
+    glass: rest.glass,
+    start: rest.start,
+    text,
+    style,
+    ...buttonProps,
+    onclick,
+  });
+</script>
+
+{#snippet after()}
+  <NeoButton {...afterProps}>
+    {#snippet icon()}
+      <IconCalendar width="1.25rem" height="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+    {/snippet}
+  </NeoButton>
+{/snippet}
+
+<div class="neo-date-time" class:neo-picker={ref?.showPicker}>
+  <NeoInput
+    bind:ref
+    bind:labelRef
+    bind:value
+    bind:valid
+    bind:dirty
+    bind:touched
+    bind:hovered
+    bind:focused
+    {type}
+    {placeholder}
+    after={ref?.showPicker ? after : undefined}
+    {...rest}
+  />
+</div>
+
+<style>.neo-date-time.neo-picker :global(.neo-input::-webkit-calendar-picker-indicator) {
+  display: none; /* Hide the default date icon in WebKit browsers */
+  appearance: none; /* Hide the default date icon in Firefox */
+}
+.neo-date-time :global(.neo-input::-webkit-datetime-edit-text:focus),
+.neo-date-time :global(.neo-input::-webkit-datetime-edit-fields-wrapper:focus),
+.neo-date-time :global(.neo-input::-webkit-datetime-edit-hour-field:focus),
+.neo-date-time :global(.neo-input::-webkit-datetime-edit-minute-field:focus),
+.neo-date-time :global(.neo-input::-webkit-datetime-edit-day-field:focus),
+.neo-date-time :global(.neo-input::-webkit-datetime-edit-week-field:focus),
+.neo-date-time :global(.neo-input::-webkit-datetime-edit-month-field:focus),
+.neo-date-time :global(.neo-input::-webkit-datetime-edit-year-field:focus) {
+  color: var(--neo-date-time-text-color, var(--neo-text-color));
+  background-color: var(--neo-date-time-text-highlight-color, var(--neo-text-highlight-color));
+  outline: none;
+}</style>

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

@@ -0,0 +1,19 @@
+import type { NeoDateTimeProps } from './neo-date-time.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 NeoDateTime: $$__sveltets_2_IsomorphicComponent<NeoDateTimeProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value" | "ref" | "hovered" | "focused" | "touched" | "dirty" | "valid" | "labelRef">;
+type NeoDateTime = InstanceType<typeof NeoDateTime>;
+export default NeoDateTime;