@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/time-field/index.js

@@ -0,0 +1,456 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/time-field/index.ts
+import"@lostgradient/cinder/time-field/styles";
+
+// src/components/time-field/time-field.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { untrack } from "svelte";
+
+// src/_internal/field-control.ts
+function describeId(fieldId, hasDescription) {
+  return hasDescription ? `${fieldId}-description` : undefined;
+}
+function errorId(fieldId, hasError) {
+  return hasError ? `${fieldId}-error` : undefined;
+}
+function composeDescribedBy(...ids) {
+  const filtered = ids.flatMap((id) => typeof id === "string" ? id.trim().split(/\s+/).filter(Boolean) : []);
+  const unique = Array.from(new Set(filtered));
+  return unique.length > 0 ? unique.join(" ") : undefined;
+}
+function ariaInvalid(hasError) {
+  return hasError ? "true" : undefined;
+}
+function resolveFieldControl(input) {
+  const resolvedId = input.id ?? input.context?.controlId ?? input.generatedId;
+  const defaultDescriptionId = describeId(resolvedId, input.hasDescription ?? false);
+  const defaultErrorId = errorId(resolvedId, input.hasError ?? false);
+  const ownDescriptionId = defaultDescriptionId && defaultDescriptionId === input.context?.descriptionId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-description` : defaultDescriptionId;
+  const ownErrorId = defaultErrorId && defaultErrorId === input.context?.errorId && input.localIdNamespace ? `${resolvedId}-${input.localIdNamespace}-error` : defaultErrorId;
+  const descriptionId = ownDescriptionId ?? input.context?.descriptionId;
+  const resolvedErrorId = ownErrorId ?? input.context?.errorId;
+  const explicitInvalid = ariaInvalid(input.hasError ?? false);
+  const consumerInvalid = input.consumerInvalid === true ? "true" : input.consumerInvalid === false ? undefined : input.consumerInvalid ?? undefined;
+  return {
+    id: resolvedId,
+    ownDescriptionId,
+    ownErrorId,
+    descriptionId,
+    errorId: resolvedErrorId,
+    describedBy: composeDescribedBy(descriptionId, ...input.additionalDescribedBy ?? [], resolvedErrorId, input.context?.describedBy, input.consumerDescribedBy),
+    ariaInvalid: explicitInvalid ?? input.context?.invalid ?? consumerInvalid,
+    required: input.required ?? input.context?.required ?? false,
+    disabled: input.disabled ?? input.context?.disabled ?? false
+  };
+}
+
+// src/_internal/form-field-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
+
+// src/_internal/time-parts.ts
+var TIME_PATTERN = /^(?<hours>\d{2}):(?<minutes>\d{2})(?::(?<seconds>\d{2}))?$/;
+function parseTimeString(value) {
+  const trimmedValue = value.trim();
+  if (trimmedValue.length === 0)
+    return null;
+  const match = TIME_PATTERN.exec(trimmedValue);
+  if (!match?.groups)
+    return null;
+  const hours = Number(match.groups["hours"]);
+  const minutes = Number(match.groups["minutes"]);
+  const seconds = Number(match.groups["seconds"] ?? "0");
+  if (!Number.isInteger(hours) || hours < 0 || hours > 23)
+    return null;
+  if (!Number.isInteger(minutes) || minutes < 0 || minutes > 59)
+    return null;
+  if (!Number.isInteger(seconds) || seconds < 0 || seconds > 59)
+    return null;
+  return { hours, minutes, seconds };
+}
+function serializeTimeParts(parts, includeSeconds) {
+  const hours = String(parts.hours).padStart(2, "0");
+  const minutes = String(parts.minutes).padStart(2, "0");
+  const seconds = String(parts.seconds).padStart(2, "0");
+  return includeSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`;
+}
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/time-field/time-field.svelte
+var root_1 = $.from_html(`<label class="cinder-time-field__label"> </label>`);
+var root_2 = $.from_html(`<input type="hidden"/>`);
+var root_4 = $.from_html(`<option> </option>`);
+var root_3 = $.from_html(`<span class="cinder-sr-only">timezone</span> <select class="cinder-time-field__timezone"></select>`, 1);
+var root_5 = $.from_html(`<input type="hidden"/>`);
+var root_6 = $.from_html(`<p class="cinder-time-field__description"> </p>`);
+var root_7 = $.from_html(`<p class="cinder-time-field__error" aria-live="polite"> </p>`);
+var root = $.from_html(`<div><!> <div class="cinder-time-field__controls"><input class="cinder-time-field__input" type="time"/> <!> <!> <!></div> <!> <!></div>`);
+function Time_field($$anchor, $$props) {
+  const generatedId = $.props_id();
+  $.push($$props, true);
+  let value = $.prop($$props, "value", 15, undefined), defaultValue = $.prop($$props, "defaultValue", 3, ""), granularity = $.prop($$props, "granularity", 3, "minute"), timezone = $.prop($$props, "timezone", 15, undefined), disabled = $.prop($$props, "disabled", 3, false), readonly = $.prop($$props, "readonly", 3, false), required = $.prop($$props, "required", 3, false), rest = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "id",
+    "value",
+    "defaultValue",
+    "granularity",
+    "timezones",
+    "timezone",
+    "timezoneName",
+    "label",
+    "description",
+    "error",
+    "disabled",
+    "readonly",
+    "required",
+    "name",
+    "class",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-invalid",
+    "onchange"
+  ]);
+  const formField = getFormFieldContext();
+  const includeSeconds = $.derived(() => granularity() === "second");
+  const inputStep = $.derived(() => $.get(includeSeconds) ? 1 : 60);
+  let inputMirrorValue = $.state(undefined);
+  let inputMirrorSourceValue = $.state(undefined);
+  const submittedValue = $.derived(() => canonicalTimeValue($.get(inputMirrorValue) ?? value()));
+  let resetTimezoneBaseline = $.state(undefined);
+  let skipTimezoneBaselineUpdate = false;
+  untrack(() => {
+    if (value() === undefined)
+      value(canonicalTimeValue(defaultValue()));
+    if (timezone() === undefined && $$props.timezones && $$props.timezones.length > 0)
+      timezone($$props.timezones[0]);
+    $.set(resetTimezoneBaseline, timezone(), true);
+  });
+  $.user_effect(() => {
+    if (!$$props.timezones || $$props.timezones.length === 0) {
+      return;
+    }
+    if (timezone() === undefined || !$$props.timezones.includes(timezone())) {
+      timezone($$props.timezones[0]);
+    }
+  });
+  $.user_effect(() => {
+    if (skipTimezoneBaselineUpdate) {
+      skipTimezoneBaselineUpdate = false;
+      return;
+    }
+    $.set(resetTimezoneBaseline, timezone(), true);
+  });
+  $.user_effect(() => {
+    if ($.get(inputMirrorValue) === undefined)
+      return;
+    if ($.get(inputMirrorSourceValue) === value())
+      return;
+    $.set(inputMirrorValue, undefined);
+    $.set(inputMirrorSourceValue, undefined);
+  });
+  $.user_effect(() => {
+    if (value() === undefined)
+      return;
+    const nextValue = canonicalTimeValue(value());
+    if (value() === nextValue)
+      return;
+    $.set(inputMirrorValue, undefined);
+    $.set(inputMirrorSourceValue, undefined);
+    value(nextValue);
+  });
+  const field = $.derived(() => resolveFieldControl({
+    id: formField?.controlId ?? $$props.id,
+    generatedId,
+    context: formField,
+    localIdNamespace: "time-field",
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    consumerDescribedBy: $$props["aria-describedby"],
+    consumerInvalid: $$props["aria-invalid"],
+    required: required() ? true : undefined,
+    disabled: disabled() ? true : undefined
+  }));
+  const inputId = $.derived(() => $.get(field).id);
+  const labelId = $.derived(() => $$props.label ? `${$.get(inputId)}-label` : formField?.labelId);
+  const timezoneLabelId = $.derived(() => `${$.get(inputId)}-timezone-label`);
+  const descriptionId = $.derived(() => $.get(field).ownDescriptionId);
+  const errorId2 = $.derived(() => $.get(field).ownErrorId);
+  const describedBy = $.derived(() => $.get(field).describedBy);
+  const invalid = $.derived(() => $.get(field).ariaInvalid);
+  const resolvedDisabled = $.derived(() => $.get(field).disabled);
+  const resolvedRequired = $.derived(() => $.get(field).required);
+  const inputAriaLabel = $.derived(() => $$props.label || formField?.labelId ? undefined : normalizeAriaText($$props["aria-label"]));
+  const inputAriaLabelledBy = $.derived(() => $$props.label ? undefined : normalizeAriaText($$props["aria-labelledby"]) ?? formField?.labelId);
+  const timezoneAriaLabelledBy = $.derived(() => $.get(labelId) ? `${$.get(labelId)} ${$.get(timezoneLabelId)}` : $.get(inputAriaLabelledBy) ? `${$.get(inputAriaLabelledBy)} ${$.get(timezoneLabelId)}` : undefined);
+  const timezoneAriaLabel = $.derived(() => $.get(timezoneAriaLabelledBy) ? undefined : $.get(inputAriaLabel) ? `${$.get(inputAriaLabel)} timezone` : "Timezone");
+  const resolvedTimezoneName = $.derived(() => timezone() !== undefined ? $$props.timezoneName ?? ($$props.name ? `${$$props.name}-timezone` : undefined) : undefined);
+  function emit(nextValue, nextTimezone = timezone()) {
+    $$props.onchange?.({ value: nextValue, timezone: nextTimezone });
+  }
+  function normalizeAriaText(text) {
+    return typeof text === "string" && text.trim().length > 0 ? text : undefined;
+  }
+  function resetTimezoneFor(options) {
+    if (!options || options.length === 0)
+      return $.get(resetTimezoneBaseline);
+    return $.get(resetTimezoneBaseline) && options.includes($.get(resetTimezoneBaseline)) ? $.get(resetTimezoneBaseline) : options[0];
+  }
+  function canonicalTimeValue(nextValue) {
+    if (!nextValue)
+      return "";
+    const parsed = parseTimeString(nextValue);
+    return parsed ? serializeTimeParts(parsed, $.get(includeSeconds)) : "";
+  }
+  function handleInputChange(event) {
+    if ($.get(resolvedDisabled) || readonly())
+      return;
+    const target = event.currentTarget;
+    const nextValue = canonicalTimeValue(target.value);
+    $.set(inputMirrorValue, undefined);
+    $.set(inputMirrorSourceValue, undefined);
+    value(nextValue);
+    emit(nextValue);
+  }
+  function handleInput(event) {
+    if ($.get(resolvedDisabled) || readonly())
+      return;
+    $.set(inputMirrorSourceValue, value(), true);
+    $.set(inputMirrorValue, event.currentTarget.value, true);
+  }
+  function handleTimezoneChange(event) {
+    if ($.get(resolvedDisabled) || readonly())
+      return;
+    const target = event.currentTarget;
+    skipTimezoneBaselineUpdate = true;
+    timezone(target.value);
+    const nextValue = canonicalTimeValue(value());
+    $.set(inputMirrorValue, undefined);
+    $.set(inputMirrorSourceValue, undefined);
+    value(nextValue);
+    emit(nextValue, timezone());
+  }
+  $.user_effect(() => {
+    const input = document.getElementById($.get(inputId));
+    const form = input instanceof HTMLInputElement ? input.form : null;
+    if (!form)
+      return;
+    const resetValue = canonicalTimeValue(defaultValue());
+    const resetTimezone = resetTimezoneFor($$props.timezones);
+    const handleReset = () => {
+      if ($.get(resolvedDisabled))
+        return;
+      $.set(inputMirrorValue, undefined);
+      $.set(inputMirrorSourceValue, undefined);
+      value(resetValue);
+      timezone(resetTimezone);
+    };
+    form.addEventListener("reset", handleReset);
+    return () => form.removeEventListener("reset", handleReset);
+  });
+  var div = root();
+  $.attribute_effect(div, ($0) => ({ ...rest, class: $0 }), [() => classNames("cinder-time-field", $$props.class)]);
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var label_1 = root_1();
+      var text_1 = $.child(label_1, true);
+      $.reset(label_1);
+      $.template_effect(() => {
+        $.set_attribute(label_1, "id", $.get(labelId));
+        $.set_attribute(label_1, "for", $.get(inputId));
+        $.set_text(text_1, $$props.label);
+      });
+      $.append($$anchor2, label_1);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.label)
+        $$render(consequent);
+    });
+  }
+  var div_1 = $.sibling(node, 2);
+  var input_1 = $.child(div_1);
+  $.remove_input_defaults(input_1);
+  var node_1 = $.sibling(input_1, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var input_2 = root_2();
+      $.remove_input_defaults(input_2);
+      $.template_effect(() => {
+        $.set_attribute(input_2, "name", $$props.name);
+        $.set_value(input_2, $.get(submittedValue));
+        input_2.disabled = $.get(resolvedDisabled);
+      });
+      $.append($$anchor2, input_2);
+    };
+    $.if(node_1, ($$render) => {
+      if ($$props.name)
+        $$render(consequent_1);
+    });
+  }
+  var node_2 = $.sibling(node_1, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment = root_3();
+      var span = $.first_child(fragment);
+      var select = $.sibling(span, 2);
+      $.each(select, 20, () => $$props.timezones, (option) => option, ($$anchor3, option) => {
+        var option_1 = root_4();
+        var text_2 = $.child(option_1, true);
+        $.reset(option_1);
+        var option_1_value = {};
+        $.template_effect(() => {
+          $.set_text(text_2, option);
+          if (option_1_value !== (option_1_value = option)) {
+            option_1.value = (option_1.__value = option) ?? "";
+          }
+        });
+        $.append($$anchor3, option_1);
+      });
+      $.reset(select);
+      var select_value;
+      $.init_select(select);
+      $.template_effect(() => {
+        $.set_attribute(span, "id", $.get(timezoneLabelId));
+        $.set_attribute(select, "aria-label", $.get(timezoneAriaLabel));
+        $.set_attribute(select, "aria-labelledby", $.get(timezoneAriaLabelledBy));
+        $.set_attribute(select, "aria-describedby", $.get(describedBy));
+        select.disabled = $.get(resolvedDisabled) || readonly();
+        if (select_value !== (select_value = timezone())) {
+          select.value = (select.__value = timezone()) ?? "", $.select_option(select, timezone());
+        }
+      });
+      $.delegated("change", select, handleTimezoneChange);
+      $.append($$anchor2, fragment);
+    };
+    $.if(node_2, ($$render) => {
+      if ($$props.timezones && $$props.timezones.length > 0)
+        $$render(consequent_2);
+    });
+  }
+  var node_3 = $.sibling(node_2, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var input_3 = root_5();
+      $.remove_input_defaults(input_3);
+      $.template_effect(() => {
+        $.set_attribute(input_3, "name", $.get(resolvedTimezoneName));
+        $.set_value(input_3, timezone());
+        input_3.disabled = $.get(resolvedDisabled);
+      });
+      $.append($$anchor2, input_3);
+    };
+    $.if(node_3, ($$render) => {
+      if ($.get(resolvedTimezoneName))
+        $$render(consequent_3);
+    });
+  }
+  $.reset(div_1);
+  var node_4 = $.sibling(div_1, 2);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var p = root_6();
+      var text_3 = $.child(p, true);
+      $.reset(p);
+      $.template_effect(() => {
+        $.set_attribute(p, "id", $.get(descriptionId));
+        $.set_text(text_3, $$props.description);
+      });
+      $.append($$anchor2, p);
+    };
+    $.if(node_4, ($$render) => {
+      if ($$props.description)
+        $$render(consequent_4);
+    });
+  }
+  var node_5 = $.sibling(node_4, 2);
+  {
+    var consequent_5 = ($$anchor2) => {
+      var p_1 = root_7();
+      var text_4 = $.child(p_1, true);
+      $.reset(p_1);
+      $.template_effect(() => {
+        $.set_attribute(p_1, "id", $.get(errorId2));
+        $.set_text(text_4, $$props.error);
+      });
+      $.append($$anchor2, p_1);
+    };
+    $.if(node_5, ($$render) => {
+      if ($$props.error)
+        $$render(consequent_5);
+    });
+  }
+  $.reset(div);
+  $.template_effect(() => {
+    $.set_attribute(input_1, "id", $.get(inputId));
+    $.set_attribute(input_1, "step", $.get(inputStep));
+    $.set_value(input_1, $.get(inputMirrorValue) ?? value() ?? "");
+    input_1.disabled = $.get(resolvedDisabled);
+    input_1.readOnly = readonly();
+    input_1.required = $.get(resolvedRequired);
+    $.set_attribute(input_1, "aria-label", $.get(inputAriaLabel));
+    $.set_attribute(input_1, "aria-labelledby", $.get(inputAriaLabelledBy));
+    $.set_attribute(input_1, "aria-describedby", $.get(describedBy));
+    $.set_attribute(input_1, "aria-invalid", $.get(invalid));
+  });
+  $.delegated("input", input_1, handleInput);
+  $.delegated("change", input_1, handleInputChange);
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["input", "change"]);
+
+// src/components/time-field/index.ts
+var time_field_default = Time_field;
+export {
+  time_field_default as default,
+  Time_field as TimeField
+};
+
+//# debugId=2CD158F7BBF3EB2464756E2164756E21

package/dist/components/time-field/time-field.css

@@ -0,0 +1,60 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  .cinder-time-field {
+    display: grid;
+    gap: var(--cinder-space-2);
+    color: var(--cinder-text);
+  }
+
+  .cinder-time-field__label {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-semibold);
+  }
+
+  .cinder-time-field__controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-2);
+    align-items: center;
+  }
+
+  .cinder-time-field__input,
+  .cinder-time-field__timezone {
+    min-height: 2.25rem;
+    padding-block: var(--cinder-space-2);
+    padding-inline: var(--cinder-space-3);
+    color: var(--cinder-text);
+    background: var(--cinder-surface);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+  }
+
+  .cinder-time-field__input:focus-visible,
+  .cinder-time-field__timezone:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  @media (forced-colors: active) {
+    .cinder-time-field__input:focus-visible,
+    .cinder-time-field__timezone:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+      box-shadow: none;
+    }
+  }
+
+  .cinder-time-field__description,
+  .cinder-time-field__error {
+    margin: 0;
+    font-size: var(--cinder-text-sm);
+  }
+
+  .cinder-time-field__description {
+    color: var(--cinder-text-muted);
+  }
+
+  .cinder-time-field__error {
+    color: var(--cinder-danger);
+  }
+}

package/dist/components/time-field/time-field.schema.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentSchema } from '../../schema-types';
+declare const _default: ComponentSchema;
+export default _default;

package/dist/components/time-field/time-field.schema.js

@@ -0,0 +1,107 @@
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/time-field/time-field.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    id: {
+      type: "string"
+    },
+    value: {
+      type: "string"
+    },
+    defaultValue: {
+      type: "string"
+    },
+    granularity: {
+      enum: ["minute", "second"]
+    },
+    timezones: {
+      type: "array",
+      items: {
+        type: "string"
+      }
+    },
+    timezone: {
+      type: "string"
+    },
+    timezoneName: {
+      type: "string"
+    },
+    label: {
+      type: "string"
+    },
+    description: {
+      type: "string"
+    },
+    error: {
+      type: "string"
+    },
+    disabled: {
+      type: "boolean"
+    },
+    readonly: {
+      type: "boolean"
+    },
+    required: {
+      type: "boolean"
+    },
+    name: {
+      type: "string"
+    },
+    class: {
+      type: "string"
+    },
+    "aria-label": {
+      type: "string"
+    },
+    "aria-labelledby": {
+      type: "string"
+    },
+    "aria-describedby": {
+      type: "string"
+    },
+    "aria-invalid": {
+      enum: [false, true, "true", "false"]
+    }
+  },
+  additionalProperties: false,
+  required: ["id"],
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onchange",
+        reason: "function-or-snippet",
+        description: "Called when the user commits a time or timezone change."
+      }
+    ]
+  }
+};
+var time_field_schema_default = schema;
+export {
+  time_field_schema_default as default
+};
+
+//# debugId=353664200307A82C64756E2164756E21

package/dist/components/time-field/time-field.svelte.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @cinder
+ * @category form
+ * @status stable
+ * @purpose Standalone time-of-day field that collects a canonical time string with optional timezone selection.
+ * @tag form
+ * @tag time
+ * @tag internationalization
+ * @useWhen Collecting a time of day without a date, such as a reminder time or office-hours boundary.
+ * @useWhen Pairing a time value with an optional timezone while keeping a canonical `HH:mm` or `HH:mm:ss` value.
+ * @avoidWhen Collecting a full date range — use date-range-field instead.
+ * @related date-range-field, number-input
+ */
+export type { TimeFieldChange, TimeFieldGranularity, TimeFieldProps, } from './time-field.types.ts';
+import type { TimeFieldProps } from './time-field.types.ts';
+declare const TimeField: import("svelte").Component<TimeFieldProps, {}, "value" | "timezone">;
+type TimeField = ReturnType<typeof TimeField>;
+export default TimeField;