@nationaldesignstudio/react 0.0.8 → 0.0.9

package/dist/components/atoms/button/button.d.ts

@@ -21,7 +21,7 @@ import * as React from "react";
  * For icon-only buttons, use the IconButton component instead.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ivoryOutlineQuiet" | "secondary" | null | undefined;
+    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ivoryOutlineQuiet" | "gray" | null | undefined;
     size?: "lg" | "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

package/dist/components/atoms/button/icon-button.d.ts

@@ -3,6 +3,26 @@ import * as React from "react";
 /**
  * IconButton component based on Figma BaseKit / Interface / Icon Button
  *
+ * **IMPORTANT: Accessibility Requirement**
+ * Icon-only buttons MUST have an accessible label. Provide one of:
+ * - `aria-label`: A text description of the button's action (recommended)
+ * - `aria-labelledby`: Reference to an element containing the label
+ * - `title`: Tooltip text (less preferred, but provides a label)
+ *
+ * @example
+ * ```tsx
+ * // Correct usage with aria-label
+ * <IconButton aria-label="Close menu">
+ *   <CloseIcon />
+ * </IconButton>
+ *
+ * // Correct usage with aria-labelledby
+ * <IconButton aria-labelledby="close-label">
+ *   <CloseIcon />
+ * </IconButton>
+ * <span id="close-label" className="sr-only">Close menu</span>
+ * ```
+ *
  * Variants:
  * - charcoal: Dark filled button (for light backgrounds)
  * - charcoalOutline: Dark outlined button (for light backgrounds)

package/dist/components/organisms/navbar/navbar.d.ts

@@ -41,6 +41,7 @@ export interface NavbarMobileMenuProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * Mobile menu container that displays navigation links on mobile devices.
  * Hidden on desktop (md and above). Should be used with NavbarMobileMenuButton.
+ * Built on Base UI Dialog for accessibility (focus trap, escape key, click-outside).
  */
 declare const NavbarMobileMenu: React.ForwardRefExoticComponent<NavbarMobileMenuProps & React.RefAttributes<HTMLDivElement>>;
 export interface NavbarMobileMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {