@mich8060/unified-design-system 0.2.6 → 0.2.8

package/README.md

@@ -31,6 +31,9 @@ npm run dev
 See `/docs` for the full methodology and governance model.
 
 - [Claude Rules](docs/claude-rules.md) – conventions and constraints for AI-assisted development in this repo
+- [AI Implementation Learnings](docs/08-ai-implementation-learnings.md) – validated integration guidance and corrected component API assumptions
+- [Project Learnings Log](docs/09-project-learnings-log.md) – living, prompt-by-prompt implementation constraints and guardrails
+- [Consumer Project Setup](docs/10-consumer-project-setup.md) – copy-paste setup guide for integrating UDS in a new app
 
 ## NPM package quick start
 

package/dist/design-system/components/Accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 import "./_accordion.scss";
-import type { AccordionProps } from "./Accordion.types";
+import type { AccordionItemProps, AccordionProps } from "./Accordion.types";
 /**
  * AccordionItem component - individual accordion item
  * @param {string} label - The label text for the accordion item
@@ -9,14 +9,7 @@ import type { AccordionProps } from "./Accordion.types";
  * @param {function} onToggle - Callback when item is toggled (receives new expanded state)
  * @param {object} props - Additional props to pass to the accordion item
  */
-export declare function AccordionItem({ label, defaultExpanded, children, className, onToggle, ...props }: {
-    [x: string]: any;
-    label: any;
-    defaultExpanded?: boolean | undefined;
-    children: any;
-    className?: string | undefined;
-    onToggle: any;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ label, defaultExpanded, children, className, onToggle, id, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Accordion component - container for accordion items
  * @param {React.ReactNode} children - AccordionItem components

package/dist/design-system/components/Accordion/Accordion.types.d.ts

@@ -1,5 +1,14 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
-export interface AccordionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import type { HTMLAttributes, ReactNode } from "react";
+export type AccordionVariant = "default" | "secondary";
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
+    variant?: AccordionVariant;
+}
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    defaultExpanded?: boolean;
+    children?: ReactNode;
+    className?: string;
+    onToggle?: (expanded: boolean) => void;
 }

package/dist/design-system/components/Avatar/Avatar.d.ts

@@ -6,8 +6,14 @@ import type { AvatarProps } from "./Avatar.types";
  * @param {string} initials - Initials to display (e.g., "EB", "JD")
  * @param {boolean} status - Whether to show the status indicator (green dot)
  * @param {string} size - Size of the avatar: 'small', 'default', 'large' (default: 'default')
+ * - small: 36x36
+ * - default: 48x48
+ * - large: 64x64
  * @param {string} className - Additional CSS classes
  * @param {string} alt - Alt text for the image
+ * @param {boolean} showCameraButton - Whether to show the camera action button overlay
+ * @param {string} cameraButtonAriaLabel - Accessible label for camera action button
+ * @param {function} onCameraClick - Callback for camera action button click
  * @param {object} props - Additional props to pass to the avatar container
  */
-export default function Avatar({ src, initials, status, size, className, alt, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export default function Avatar({ src, initials, status, size, showCameraButton, cameraButtonAriaLabel, onCameraClick, className, alt, name, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Avatar/Avatar.types.d.ts

@@ -1,9 +1,13 @@
-import type { ImgHTMLAttributes } from "react";
-export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
-    src?: unknown;
-    initials?: unknown;
+import type { HTMLAttributes, MouseEvent } from "react";
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    initials?: string;
+    name?: string;
     status?: boolean;
-    size?: string;
+    size?: "small" | "default" | "large";
+    showCameraButton?: boolean;
+    cameraButtonAriaLabel?: string;
+    onCameraClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     alt?: string;
 }

package/dist/design-system/components/Code/Code.d.ts

@@ -0,0 +1,9 @@
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import "./_code.scss";
+import type { CodeProps } from "./Code.types";
+export default function Code({ code, language, inline, className, ...rest }: CodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Code/Code.types.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from "react";
+export interface CodeProps extends HTMLAttributes<HTMLElement> {
+    code: string;
+    language?: string;
+    inline?: boolean;
+}

package/dist/design-system/components/Code/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./Code";
+export { default as Code } from "./Code";
+export type { CodeProps } from "./Code.types";

package/dist/design-system/components/Flex/Flex.types.d.ts

@@ -3,14 +3,15 @@ export type FlexDirection = "row" | "column";
 export type FlexJustifyContent = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
 export type FlexAlignItems = "stretch" | "flex-start" | "center" | "flex-end" | "baseline";
 export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
-export type FlexGapToken = "0" | "2" | "4" | "8" | "12" | "16" | "24" | "32";
+export type FlexGapToken = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "14" | "16" | "18" | "24" | "32" | "48" | "64" | "80";
+export type FlexGapTokenName = `spacing-${FlexGapToken}`;
 export interface FlexProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
     direction?: FlexDirection;
     justifyContent?: FlexJustifyContent;
     alignItems?: FlexAlignItems;
     wrap?: boolean | FlexWrap;
-    gap?: FlexGapToken | string;
+    gap?: FlexGapToken | FlexGapTokenName | number | string;
     fullWidth?: boolean;
     inline?: boolean;
 }

package/dist/design-system/components/Menu/Menu.d.ts

@@ -1,7 +1,8 @@
+import React from "react";
 import PropTypes from "prop-types";
 import "./_menu.scss";
 import type { MenuProps } from "./Menu.types";
-declare function Menu({ title, className, navItems, brands, activeBrand, onBrandChange, activeMode, onModeChange, showBrand, showSearch, showBrandSwitcher, showNav, showModeToggle, showUser, userName, userInitials, userAvatarSrc, identity, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+declare function Menu({ title, className, navItems, brands, activeBrand, onBrandChange, activeMode, onModeChange, showBrand, showSearch, showBrandSwitcher, showNav, showModeToggle, showUser, userName, userInitials, userAvatarSrc, accountMenuItems, identity, }: MenuProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Menu {
     var propTypes: {
         title: PropTypes.Requireable<string>;
@@ -29,9 +30,11 @@ declare namespace Menu {
         userName: PropTypes.Requireable<string>;
         userInitials: PropTypes.Requireable<string>;
         userAvatarSrc: PropTypes.Requireable<string>;
+        accountMenuItems: PropTypes.Requireable<any[]>;
     };
     var defaultProps: {
         title: string;
     };
 }
-export default Menu;
+declare const _default: React.MemoExoticComponent<typeof Menu>;
+export default _default;

package/dist/design-system/components/Menu/Menu.types.d.ts

@@ -43,5 +43,6 @@ export interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, "onChange">
     userName?: string;
     userInitials?: string;
     userAvatarSrc?: string;
+    accountMenuItems?: unknown[];
     identity?: string;
 }

package/dist/design-system/components/Table/Table.d.ts

@@ -7,7 +7,7 @@ import type { TableProps } from "./Table.types";
  * @param {string} className - Additional CSS classes
  * @param {object} props - Additional props to pass to the table element
  */
-declare function Table({ columns, data, className, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+declare function Table({ columns, data, className, bodyWeight, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Table {
     var Cell: typeof TableCell;
 }

package/dist/design-system/components/Table/Table.types.d.ts

@@ -1,6 +1,8 @@
 import type { HTMLAttributes } from "react";
+export type TableBodyWeight = "regular" | "medium" | "semibold" | "bold";
 export interface TableProps extends HTMLAttributes<HTMLDivElement> {
     columns?: unknown[];
     data?: unknown[];
     className?: string;
+    bodyWeight?: TableBodyWeight;
 }

package/dist/design-system/components/TextInput/TextInput.d.ts

@@ -17,4 +17,4 @@ import type { TextInputProps } from "./TextInput.types";
  * @param {string} className - Additional CSS classes
  * @param {object} props - Additional props to pass to the input element
  */
-export default function Input({ value, onChange, placeholder, type, size, state, disabled, icon, iconPosition, onIconClick, id, className, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export default function Input({ value, onChange, placeholder, type, size, state, disabled, icon, iconPosition, onIconClick, id, label, helperText, errorText, className, "aria-describedby": ariaDescribedBy, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/TextInput/TextInput.types.d.ts

@@ -36,4 +36,10 @@ export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     iconPosition?: TextInputIconPosition;
     /** Optional click handler for icon button mode. */
     onIconClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Optional visible label rendered with htmlFor/id linkage. */
+    label?: ReactNode;
+    /** Helper text rendered below the input. */
+    helperText?: ReactNode;
+    /** Error text rendered below the input when in error state. */
+    errorText?: ReactNode;
 }

package/dist/design-system/components/Toggle/Toggle.d.ts

@@ -5,11 +5,10 @@ import type { ToggleProps } from "./Toggle.types";
  * @param {boolean} checked - Whether the toggle is checked (on/off)
  * @param {string} state - Toggle state: 'off', 'on', or 'indeterminate' (default: 'off')
  * @param {string} size - Toggle size: 'large' or 'small' (default: 'large')
- * @param {boolean} bordered - Whether to show border (default: false)
  * @param {function} onChange - Callback function when toggle state changes
  * @param {boolean} disabled - Whether the toggle is disabled
  * @param {string} id - Unique identifier for the toggle input
  * @param {string} className - Additional CSS classes
  * @param {object} props - Additional props to pass to the toggle
  */
-export default function Toggle({ checked, state, size, bordered, onChange, disabled, id, className, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export default function Toggle({ checked, state, size, onChange, disabled, id, className, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Toggle/Toggle.types.d.ts

@@ -3,7 +3,6 @@ export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     checked?: boolean;
     state?: "off" | "on" | "indeterminate";
     size?: "large" | "small";
-    bordered?: boolean;
     onChange?: (checked: boolean) => void;
     disabled?: boolean;
     id?: string;

package/dist/design-system/index.d.ts

@@ -10,6 +10,7 @@ export * from "./components/Calendar";
 export * from "./components/Card";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
+export * from "./components/Code";
 export * from "./components/Datepicker";
 export * from "./components/Dialog";
 export * from "./components/Divider";