@mich8060/unified-design-system 0.2.7 → 0.2.9

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/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";