@lostgradient/cinder 0.2.0 → 0.3.0

package/dist/components/date-range-field/date-range-field.css

@@ -0,0 +1,211 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+
+@layer cinder.components {
+  /* ========================================
+   * DATE RANGE FIELD
+   * Controlled start/end date filtering with optional presets.
+   * ======================================== */
+
+  .cinder-date-range-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-3);
+  }
+
+  /* ----------------------------------------
+   * Legend / label
+   * ---------------------------------------- */
+
+  .cinder-date-range-field__legend {
+    font-size: var(--cinder-text-sm);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+    margin: 0;
+  }
+
+  .cinder-date-range-field__legend[data-disabled] {
+    color: var(--cinder-text-disabled);
+  }
+
+  /* ----------------------------------------
+   * Preset row
+   * ---------------------------------------- */
+
+  .cinder-date-range-field__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--cinder-space-1-5);
+  }
+
+  .cinder-date-range-field__preset-btn {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--cinder-space-1) var(--cinder-space-2-5);
+    font-size: var(--cinder-text-xs);
+    font-family: inherit;
+    font-weight: var(--cinder-font-medium);
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-text-muted);
+    background: var(--cinder-surface-raised);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-full);
+    cursor: pointer;
+    transition:
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      background var(--cinder-duration-fast) var(--cinder-ease-standard),
+      color var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .cinder-date-range-field__preset-btn:hover:not(:disabled) {
+      border-color: var(--cinder-border-strong);
+      color: var(--cinder-text);
+    }
+  }
+
+  .cinder-date-range-field__preset-btn:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  .cinder-date-range-field__preset-btn[aria-pressed='true'] {
+    background: color-mix(in oklch, var(--cinder-accent), transparent 90%);
+    border-color: var(--cinder-accent);
+    color: var(--cinder-accent-text);
+  }
+
+  .cinder-date-range-field__preset-btn:disabled {
+    color: var(--cinder-text-disabled);
+    border-color: var(--cinder-border-muted);
+    background: var(--cinder-surface-inset);
+    cursor: not-allowed;
+  }
+
+  /* ----------------------------------------
+   * Date input row
+   * ---------------------------------------- */
+
+  .cinder-date-range-field__inputs {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--cinder-space-2);
+  }
+
+  .cinder-date-range-field__input-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  .cinder-date-range-field__input-label {
+    display: block;
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text);
+  }
+
+  .cinder-date-range-field__input-label[data-disabled] {
+    color: var(--cinder-text-disabled);
+  }
+
+  .cinder-date-range-field__date-input {
+    display: block;
+    width: 100%;
+    min-height: 2.25rem;
+    padding: var(--cinder-space-1-5) var(--cinder-space-3);
+    font-size: var(--cinder-text-sm);
+    font-family: inherit;
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-text);
+    background: var(--cinder-surface-raised);
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-md);
+    appearance: none;
+    cursor: pointer;
+    transition:
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .cinder-date-range-field__date-input:hover:not(:disabled) {
+      border-color: var(--cinder-border-strong);
+    }
+  }
+
+  .cinder-date-range-field__date-input:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  .cinder-date-range-field__date-input[aria-invalid='true'] {
+    border-color: var(--cinder-danger);
+  }
+
+  .cinder-date-range-field__date-input:disabled {
+    background: var(--cinder-surface-inset);
+    color: var(--cinder-text-disabled);
+    border-color: var(--cinder-border-muted);
+    cursor: not-allowed;
+  }
+
+  /* Hide native calendar-picker chevron; preserve its hit area for the custom icon. */
+  .cinder-date-range-field__date-input::-webkit-calendar-picker-indicator {
+    opacity: 0;
+  }
+
+  /* Separator between start and end inputs */
+  .cinder-date-range-field__separator {
+    flex: 0 0 auto;
+    padding-block-end: var(--cinder-space-1-5);
+    font-size: var(--cinder-text-sm);
+    color: var(--cinder-text-muted);
+    user-select: none;
+  }
+
+  /* ----------------------------------------
+   * Description + error regions
+   * ---------------------------------------- */
+
+  .cinder-date-range-field__description {
+    font-size: var(--cinder-text-xs);
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-text-muted);
+    margin: 0;
+  }
+
+  .cinder-date-range-field__error {
+    font-size: var(--cinder-text-xs);
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-danger);
+    margin: 0;
+  }
+
+  /* Always in DOM for live-region reliability; hide when no error is active. */
+  .cinder-date-range-field__error:not([data-cinder-error]) {
+    position: absolute;
+    visibility: hidden;
+    block-size: 0;
+    overflow: hidden;
+  }
+
+  /* ----------------------------------------
+   * Forced Colors (Windows High Contrast)
+   * ---------------------------------------- */
+
+  @media (forced-colors: active) {
+    .cinder-date-range-field__preset-btn:focus-visible,
+    .cinder-date-range-field__date-input:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+    }
+
+    .cinder-date-range-field__preset-btn[aria-pressed='true'] {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+  }
+}

package/dist/components/date-range-field/date-range-field.schema.d.ts

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

package/dist/components/date-range-field/date-range-field.schema.js

@@ -0,0 +1,95 @@
+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/date-range-field/date-range-field.schema.ts
+var schema = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  type: "object",
+  properties: {
+    id: {
+      type: "string",
+      description: "Unique identifier used to generate accessible IDs for labels and error\nregions. Optional — a stable id is generated via `$props.id()` when omitted."
+    },
+    label: {
+      type: "string",
+      description: "Visible legend rendered above the start/end inputs."
+    },
+    startLabel: {
+      type: "string",
+      description: 'Accessible label for the start date input. Defaults to "Start date".'
+    },
+    endLabel: {
+      type: "string",
+      description: 'Accessible label for the end date input. Defaults to "End date".'
+    },
+    hidePresets: {
+      type: "boolean",
+      description: "When true, hides the preset buttons and shows only the date inputs."
+    },
+    description: {
+      type: "string",
+      description: "Helper text displayed below the field; wired via aria-describedby."
+    },
+    error: {
+      type: "string",
+      description: `Validation error message. When provided, marks both inputs as aria-invalid="true"
+and renders the message in a live region.`
+    },
+    disabled: {
+      type: "boolean",
+      description: "Disables the entire field including presets and date inputs."
+    },
+    class: {
+      type: "string",
+      description: "Additional CSS classes applied to the root element."
+    }
+  },
+  additionalProperties: false,
+  metadata: {
+    unsupportedProps: [
+      {
+        name: "onchange",
+        reason: "function-or-snippet",
+        description: "Called when the user changes the date range (preset or manual input)."
+      },
+      {
+        name: "presets",
+        reason: "unknown-shape",
+        description: `Consumer-defined preset options shown above the date inputs.
+Each preset has a label and a resolve() function that returns a DateRangeValue.
+Defaults to today, yesterday-today, last-7d built-ins when omitted.`
+      },
+      {
+        name: "value",
+        reason: "unknown-shape",
+        description: "Current date range value. Bindable. Both fields start undefined when unset."
+      }
+    ]
+  }
+};
+var date_range_field_schema_default = schema;
+export {
+  date_range_field_schema_default as default
+};
+
+//# debugId=E5CA4D2E9E6FE5E564756E2164756E21

package/dist/components/date-range-field/date-range-field.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @cinder
+ * @category form
+ * @status stable
+ * @purpose Controlled start/end date range picker with preset shortcuts and validation feedback for time-window filtering.
+ * @tag form
+ * @tag date
+ * @tag filter
+ * @useWhen Filtering a list or dashboard by a start and end date (e.g. created between, updated between).
+ * @useWhen Offering common presets (last 7 days, last 24 hours) alongside a manual date range.
+ * @avoidWhen A single date is sufficient — use a plain date input instead.
+ * @avoidWhen Date-time precision (hours/minutes/timezone) is required — this v1 is date-only.
+ * @related input, form-field, chip, segmented-control
+ */
+export type { DateRangeDatePreset, DateRangeFieldProps, DateRangeValue, } from './date-range-field.types.ts';
+import type { DateRangeFieldProps } from './date-range-field.types.ts';
+declare const DateRangeField: import("svelte").Component<DateRangeFieldProps, {}, "value">;
+type DateRangeField = ReturnType<typeof DateRangeField>;
+export default DateRangeField;

package/dist/components/date-range-field/date-range-field.types.d.ts

@@ -0,0 +1,72 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A date-only range value expressed as ISO-8601 date strings (YYYY-MM-DD).
+ * Both `start` and `end` are optional so the consumer can represent partial input.
+ */
+export type DateRangeValue = {
+    /** Start of the range as an ISO-8601 date string (YYYY-MM-DD), or undefined when not set. */
+    start: string | undefined;
+    /** End of the range as an ISO-8601 date string (YYYY-MM-DD), or undefined when not set. */
+    end: string | undefined;
+};
+/**
+ * A preset time-window option that the consumer can offer to the user.
+ */
+export type DateRangeDatePreset = {
+    /** Unique identifier for the preset. */
+    id: string;
+    /** Visible label rendered in the preset button. */
+    label: string;
+    /** Returns the date range this preset represents, evaluated at call time. */
+    resolve: () => DateRangeValue;
+};
+/**
+ * Props for the DateRangeField component.
+ *
+ * v1 scope (date-only):
+ * - Accepts and emits ISO-8601 date strings (YYYY-MM-DD) for start and end.
+ * - Does not support date-time (hours/minutes/seconds/timezone). That adds
+ *   timezone + time-picker complexity that doubles the surface area; it is
+ *   tracked as a follow-up.
+ * - Sets the native inputs' min/max so the browser picker hints valid bounds
+ *   (end's min = start, start's max = end), but does NOT block out-of-order
+ *   entry. Validation feedback is the consumer's responsibility via `error`.
+ * - Supports optional consumer-supplied presets (e.g. last 7 days).
+ * - Does not own routing, query-string sync, or data fetching.
+ */
+export type DateRangeFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children' | 'onchange'> & {
+    /**
+     * Unique identifier used to generate accessible IDs for labels and error
+     * regions. Optional — a stable id is generated via `$props.id()` when omitted.
+     */
+    id?: string;
+    /** Current date range value. Bindable. Both fields start undefined when unset. */
+    value?: DateRangeValue;
+    /** Visible legend rendered above the start/end inputs. */
+    label?: string;
+    /** Accessible label for the start date input. Defaults to "Start date". */
+    startLabel?: string;
+    /** Accessible label for the end date input. Defaults to "End date". */
+    endLabel?: string;
+    /**
+     * Consumer-defined preset options shown above the date inputs.
+     * Each preset has a label and a resolve() function that returns a DateRangeValue.
+     * Defaults to today, yesterday-today, last-7d built-ins when omitted.
+     */
+    presets?: DateRangeDatePreset[];
+    /** When true, hides the preset buttons and shows only the date inputs. */
+    hidePresets?: boolean;
+    /** Helper text displayed below the field; wired via aria-describedby. */
+    description?: string;
+    /**
+     * Validation error message. When provided, marks both inputs as aria-invalid="true"
+     * and renders the message in a live region.
+     */
+    error?: string;
+    /** Disables the entire field including presets and date inputs. */
+    disabled?: boolean;
+    /** Additional CSS classes applied to the root element. */
+    class?: string;
+    /** Called when the user changes the date range (preset or manual input). */
+    onchange?: (value: DateRangeValue) => void;
+};

package/dist/components/date-range-field/date-range-field.variables.d.ts

@@ -0,0 +1,2 @@
+declare const variables: readonly string[];
+export default variables;

package/dist/components/date-range-field/date-range-field.variables.js

@@ -0,0 +1,31 @@
+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/date-range-field/date-range-field.variables.ts
+var variables = [];
+var date_range_field_variables_default = variables;
+export {
+  date_range_field_variables_default as default
+};
+
+//# debugId=509EE7E47614994064756E2164756E21

package/dist/components/date-range-field/index.d.ts

@@ -0,0 +1,5 @@
+import './date-range-field.css';
+import DateRangeField from './date-range-field.svelte';
+export default DateRangeField;
+export type { DateRangeDatePreset, DateRangeFieldProps, DateRangeValue, } from './date-range-field.types.ts';
+export { DateRangeField };