@nxds/claude-design 0.6.0 → 0.8.0

package/project/components/index.d.ts

@@ -1848,15 +1848,72 @@ export interface ContextMenuTriggerProps {
 
 /**
  * A calendar grid for picking one date, a range or several dates. Install
- * `react-day-picker` in your app first.
+ * `react-day-picker` in your app first. Days in `disabled` or
+ * `modifiers.unavailable` can't be picked, and a range can't span them.
  */
 export interface DatePickerProps {
+  /** Class name to add to the root element. */
+  className?: string;
+  /** A unique id to add to the root element. */
+  id?: string;
+  /**
+   * Add the language tag to the container element.
+   *
+   * When omitted, DayPicker uses the active locale code (`locale.code`).
+   * Set this prop to override the language tag.
+   */
+  lang?: string;
+  /**
+   * A cryptographic nonce ("number used once") which can be used by Content
+   * Security Policy for the inline `style` attributes.
+   */
+  nonce?: string;
+  /** Style to apply to the root element. */
+  style?: React.CSSProperties;
+  /** The role attribute to add to the container element. */
+  role?: "dialog" | "application";
   /** Enable the selection of a single day, multiple days, or a range of days. */
   mode?: "single" | "multiple" | "range";
+  /** The aria-label attribute to add to the container element. */
+  'aria-label'?: string;
+  /** The aria-labelledby attribute to add to the container element. */
+  'aria-labelledby'?: string;
+  /**
+   * Add a footer to the calendar, acting as a live region.
+   *
+   * Use this prop to communicate the calendar's status to screen readers.
+   * Prefer strings over complex UI elements.
+   */
+  footer?: React.ReactNode;
+  /** Add a `title` attribute to the container element. */
+  title?: string;
+  /** Animate navigating between months. */
+  animate?: boolean;
+  /**
+   * When a selection mode is set, DayPicker will focus the first selected day
+   * (if set) or today's date (if not disabled).
+   *
+   * Use this prop when you need to focus DayPicker after a user action, for
+   * improved accessibility.
+   */
+  autoFocus?: boolean;
+  /**
+   * The text direction of the calendar. Use `ltr` for left-to-right (default)
+   * or `rtl` for right-to-left.
+   */
+  dir?: string;
+  /**
+   * Apply the `hidden` modifier to the matching days. Will hide them from the
+   * calendar.
+   */
+  hidden?: Matcher | Matcher[];
+  /**
+   * Apply the `disabled` modifier to the matching days. Disabled days cannot be
+   * selected when in a selection mode is set.
+   */
+  disabled?: Matcher | Matcher[];
   /** Whether the selection is required. */
   required?: boolean;
-  /** Class name to add to the root element. */
-  className?: string;
   /**
    * Change the class names used by DayPicker.
    *
@@ -1867,14 +1924,10 @@ export interface DatePickerProps {
   classNames?: Partial<ClassNames> & Partial<DeprecatedUI<string>>;
   /** Change the class name for the day matching the `modifiers`. */
   modifiersClassNames?: ModifiersClassNames;
-  /** Style to apply to the root element. */
-  style?: React.CSSProperties;
   /** Change the inline styles of the HTML elements. */
   styles?: Partial<Styles> & Partial<DeprecatedUI<React.CSSProperties>>;
   /** Change the class name for the day matching the {@link modifiers}. */
   modifiersStyles?: ModifiersStyles;
-  /** A unique id to add to the root element. */
-  id?: string;
   /**
    * The initial month to show in the calendar.
    *
@@ -1969,8 +2022,6 @@ export interface DatePickerProps {
    * week index.
    */
   showWeekNumber?: boolean;
-  /** Animate navigating between months. */
-  animate?: boolean;
   /**
    * Display the weeks in the month following the broadcast calendar. Setting
    * this prop will ignore {@link weekStartsOn} (always Monday) and
@@ -1999,32 +2050,7 @@ export interface DatePickerProps {
   noonSafe?: boolean;
   /** Change the components used for rendering the calendar elements. */
   components?: Partial<CustomComponents>;
-  /**
-   * Add a footer to the calendar, acting as a live region.
-   *
-   * Use this prop to communicate the calendar's status to screen readers.
-   * Prefer strings over complex UI elements.
-   */
-  footer?: React.ReactNode;
-  /**
-   * When a selection mode is set, DayPicker will focus the first selected day
-   * (if set) or today's date (if not disabled).
-   *
-   * Use this prop when you need to focus DayPicker after a user action, for
-   * improved accessibility.
-   */
-  autoFocus?: boolean;
   initialFocus?: boolean;
-  /**
-   * Apply the `disabled` modifier to the matching days. Disabled days cannot be
-   * selected when in a selection mode is set.
-   */
-  disabled?: Matcher | Matcher[];
-  /**
-   * Apply the `hidden` modifier to the matching days. Will hide them from the
-   * calendar.
-   */
-  hidden?: Matcher | Matcher[];
   /**
    * The today’s date. Default is the current date. This date will get the
    * `today` modifier to style the day.
@@ -2042,31 +2068,6 @@ export interface DatePickerProps {
    * default functions.
    */
   formatters?: Partial<Formatters>;
-  /**
-   * The text direction of the calendar. Use `ltr` for left-to-right (default)
-   * or `rtl` for right-to-left.
-   */
-  dir?: string;
-  /** The aria-label attribute to add to the container element. */
-  'aria-label'?: string;
-  /** The aria-labelledby attribute to add to the container element. */
-  'aria-labelledby'?: string;
-  /** The role attribute to add to the container element. */
-  role?: "dialog" | "application";
-  /**
-   * A cryptographic nonce ("number used once") which can be used by Content
-   * Security Policy for the inline `style` attributes.
-   */
-  nonce?: string;
-  /** Add a `title` attribute to the container element. */
-  title?: string;
-  /**
-   * Add the language tag to the container element.
-   *
-   * When omitted, DayPicker uses the active locale code (`locale.code`).
-   * Set this prop to override the language tag.
-   */
-  lang?: string;
   /**
    * The locale object used to localize dates. Pass a locale from
    * `react-day-picker/locale` to localize the calendar.
@@ -2958,6 +2959,11 @@ export interface FilterBuilderProps {
    * @default 3
    */
   maxDepth?: number;
+  /**
+   * Accessible name for the root group.
+   * @default "Filters"
+   */
+  'aria-label'?: string;
   className?: string;
   id?: string;
 }
@@ -5795,7 +5801,7 @@ export interface ToggleGroupProps {
    * segmented control. A larger value splits them into separate pills.
    * @default 0
    */
-  spacing?: number;
+  spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 0.5 | 1.5 | 2.5 | 3.5 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
 }
 
 /**

package/project/design-system.json

@@ -3,7 +3,7 @@
   "layout": "files",
   "createdOnFiles": {
     "v": 1,
-    "at": "2026-10-26T17:44:22Z"
+    "at": "2026-10-27T10:05:56Z"
   },
   "title": "nxds",
   "namespace": "Nxds",
@@ -27,8 +27,8 @@
   },
   "lastChange": {
     "by": "nxds",
-    "at": "2026-10-26T17:44:22Z",
-    "via": "nxds-cli · @nxds/claude-design@0.6.0",
-    "note": "nxds 0.6.0: tokens, components, prop types and previews."
+    "at": "2026-10-27T10:05:56Z",
+    "via": "nxds-cli · @nxds/claude-design@0.8.0",
+    "note": "nxds 0.8.0: tokens, components, prop types and previews."
   }
 }