@crisp-ui-kit/crisp 0.17.0 → 0.18.0

package/dist/cjs/components/datepickerfield/datepickerfield.js

@@ -57,13 +57,15 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-function DatePickerField({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
     const pick = (d) => {
         if (value === undefined)
             setInternal(d);
+        // both, so a consumer passing either name is heard
+        onValueChange?.(d);
         onChange?.(d);
         setOpen(false);
     };

package/dist/cjs/product/viewtoggle/viewtoggle.js

@@ -42,12 +42,15 @@ const viewtoggle_recipe_1 = require("./viewtoggle.recipe");
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-function ViewToggle({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }) {
+function ViewToggle({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }) {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const value = valueProp ?? internalValue ?? options[0]?.value;
     const pick = (next) => {
         if (valueProp === undefined)
             setInternalValue(next);
+        // both, so a consumer passing either name is heard and one passing both
+        // does not silently lose one
+        onValueChange?.(next);
         onChange?.(next);
     };
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, viewtoggle_recipe_1.viewtoggleRecipe)({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -21,13 +21,15 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export function DatePickerField({ value, defaultValue, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
     const pick = (d) => {
         if (value === undefined)
             setInternal(d);
+        // both, so a consumer passing either name is heard
+        onValueChange?.(d);
         onChange?.(d);
         setOpen(false);
     };

package/dist/esm/product/viewtoggle/viewtoggle.js

@@ -6,12 +6,15 @@ import { viewtoggleRecipe } from "./viewtoggle.recipe.js";
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-export function ViewToggle({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }) {
+export function ViewToggle({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }) {
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const value = valueProp ?? internalValue ?? options[0]?.value;
     const pick = (next) => {
         if (valueProp === undefined)
             setInternalValue(next);
+        // both, so a consumer passing either name is heard and one passing both
+        // does not silently lose one
+        onValueChange?.(next);
         onChange?.(next);
     };
     return (_jsx("div", { className: viewtoggleRecipe({ className }), ...rest, role: "group", "aria-label": ariaLabel, children: options.map((o) => (_jsx("button", { type: "button", className: "viewtoggle-tile", "aria-pressed": o.value === value, "aria-label": o.label, title: o.label, "data-active": o.value === value ? "" : undefined, onClick: () => pick(o.value), children: o.icon }, o.value))) }));

package/dist/types/components/datepickerfield/datepickerfield.d.ts

@@ -11,6 +11,14 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
     /** Controlled value. Omit to let the field manage it (see defaultValue). */
     value?: Date | null;
     defaultValue?: Date | null;
+    /** Fires with the picked date, controlled or not. */
+    onValueChange?: (date: Date) => void;
+    /**
+     * The original name for `onValueChange`, kept working so no consumer breaks.
+     * Prefer `onValueChange`: it is what every other crisp component calls this,
+     * and passing the house name to a component that only knew `onChange` was
+     * not a type error — the handler simply never fired (#202).
+     */
     onChange?: (date: Date) => void;
     placeholder?: string;
     /** `default` = outlined trigger; `ghost` = transparent (for table cells). */
@@ -29,7 +37,7 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export declare function DatePickerField({ value, defaultValue, onChange, placeholder, variant, format, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
+export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder, variant, format, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
 export declare namespace DatePickerField {
     var displayName: string;
 }

package/dist/types/product/viewtoggle/viewtoggle.d.ts

@@ -12,9 +12,15 @@ export type ViewToggleProps<T extends string = string> = Omit<React.ComponentPro
     value?: T;
     /** Initially selected value, when uncontrolled. Defaults to the first option. */
     defaultValue?: T;
-    /** Fires with the next value on every pick, controlled or not.
-     * Named `onChange` rather than the house `onValueChange` for historical
-     * reasons; renaming it would break consumers. */
+    /** Fires with the next value on every pick, controlled or not. */
+    onValueChange?: (value: T) => void;
+    /**
+     * The original name for `onValueChange`, kept working so no consumer breaks.
+     * Prefer `onValueChange`: it is what every other crisp component calls this,
+     * and because these props extend a `<div>`'s, passing the house name to a
+     * component that only knew `onChange` was not a type error — it landed on
+     * the DOM and React dropped it with a development-only warning (#202).
+     */
     onChange?: (value: T) => void;
     "aria-label"?: string;
     className?: string;
@@ -24,7 +30,7 @@ export type ViewToggleProps<T extends string = string> = Omit<React.ComponentPro
  * of icon tiles; the selected tile is raised. Use for view-mode switches (list ⇄
  * grid) or any small mutually-exclusive icon choice.
  */
-export declare function ViewToggle<T extends string = string>({ options, value: valueProp, defaultValue, onChange, "aria-label": ariaLabel, className, ...rest }: ViewToggleProps<T>): React.JSX.Element;
+export declare function ViewToggle<T extends string = string>({ options, value: valueProp, defaultValue, onValueChange, onChange, "aria-label": ariaLabel, className, ...rest }: ViewToggleProps<T>): React.JSX.Element;
 export declare namespace ViewToggle {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",