@irozon/design-system-react 0.3.0 → 0.5.0

package/README.md

@@ -69,6 +69,7 @@ both packages because your app imports the CSS package directly.
 | Component | Wraps |
 | --- | --- |
 | `Button` | `.iz-button` |
+| `Card` | `.iz-card` |
 | `SignatureCTA` | `.iz-signature-cta` |
 | `Loader` | `.iz-loader` |
 | `Input`, `Textarea` | `.iz-input`, `.iz-textarea` |
@@ -81,6 +82,35 @@ both packages because your app imports the CSS package directly.
 | `Nav`, `NavGroup`, `NavItem` | `.iz-nav`, `.iz-nav-group`, `.iz-nav-item` |
 | `Tabs`, `TabPanel` | `.iz-tabs`, `.iz-tab`, `.iz-tab-panel` |
 
+For side Sheets, pass `variant="sheet"`. The default size keeps the narrow
+panel; `size="large"` uses about 80% of the desktop viewport. Both sizes use
+the available screen width on small viewports. The native `<dialog>` retains
+focus management, Escape handling, and backdrop behavior.
+
+### Card
+
+`Card` defaults to a static `<div>`. Set `interactive` to opt into the
+canonical hover/focus treatment, and choose an anchor, button, or router link
+with `as` so navigation and actions keep native semantics:
+
+```tsx
+import { Card } from "@irozon/design-system-react";
+
+<Card>Grouped details</Card>
+
+<Card as="a" href="/services/example" interactive>
+  Service details
+</Card>
+
+<Card as="button" type="button" interactive>
+  Choose this option
+</Card>
+```
+
+The component only maps props to `.iz-card` and `data-*` attributes. Padding,
+variants, colors, focus, hover, theme, and reduced-motion behavior stay in
+`@irozon/design-system` CSS.
+
 ### Signature CTA
 
 `SignatureCTA` renders the canonical `.iz-signature-cta` structure and uses

package/dist/Card.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+export type CardVariant = "subtle" | "outlined" | "elevated";
+interface CardOwnProps {
+    children?: ReactNode;
+    className?: string;
+    interactive?: boolean;
+    variant?: CardVariant;
+}
+/** Native props follow `as`; the card remains a div unless a semantic
+ * element or router component is explicitly selected. */
+export type CardProps<T extends ElementType = "div"> = CardOwnProps & {
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof CardOwnProps | "as" | "data-interactive" | "data-variant">;
+/** Thin React wrapper around the canonical `.iz-card` CSS. Interactive
+ * links/buttons retain native keyboard behavior; this component adds none. */
+export declare function Card<T extends ElementType = "div">({ as, children, className, interactive, variant, ...rest }: CardProps<T>): import("react").JSX.Element;
+export {};

package/dist/Card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./internal/cx.js";
+/** Thin React wrapper around the canonical `.iz-card` CSS. Interactive
+ * links/buttons retain native keyboard behavior; this component adds none. */
+export function Card({ as, children, className, interactive, variant, ...rest }) {
+    const Component = as ?? "div";
+    return (_jsx(Component, { ...rest, className: cx("iz-card", className), "data-variant": variant, "data-interactive": interactive || undefined, children: children }));
+}

package/dist/Dialog.d.ts

@@ -7,12 +7,14 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, "on
      * semantics rather than re-deriving it per consumer. */
     onClose: () => void;
     variant?: "sheet";
+    /** Sheet width preset. Ignored for the centered Dialog variant. */
+    size?: "default" | "large";
     children: ReactNode;
 }
 /** Canonical `.iz-dialog` — built on the native `<dialog>` element, so
  * focus trapping, Escape-to-dismiss, and the `::backdrop` come from the
  * browser for free. Compose with DialogHeader/DialogBody/DialogFooter. */
-export declare function Dialog({ open, onClose, variant, className, children, ...rest }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ open, onClose, variant, size, className, children, ...rest }: DialogProps): import("react").JSX.Element;
 export declare function DialogHeader({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/Dialog.js

@@ -4,7 +4,7 @@ import { cx } from "./internal/cx.js";
 /** Canonical `.iz-dialog` — built on the native `<dialog>` element, so
  * focus trapping, Escape-to-dismiss, and the `::backdrop` come from the
  * browser for free. Compose with DialogHeader/DialogBody/DialogFooter. */
-export function Dialog({ open, onClose, variant, className, children, ...rest }) {
+export function Dialog({ open, onClose, variant, size, className, children, ...rest }) {
     const ref = useRef(null);
     useEffect(() => {
         const dialog = ref.current;
@@ -42,7 +42,7 @@ export function Dialog({ open, onClose, variant, className, children, ...rest })
         dialog.addEventListener("click", handleClick);
         return () => dialog.removeEventListener("click", handleClick);
     }, [onClose]);
-    return (_jsx("dialog", { ref: ref, className: cx("iz-dialog", className), "data-variant": variant, ...rest, children: children }));
+    return (_jsx("dialog", { ref: ref, className: cx("iz-dialog", className), "data-variant": variant, "data-size": variant === "sheet" && size === "large" ? "large" : undefined, ...rest, children: children }));
 }
 export function DialogHeader({ children }) {
     return _jsx("header", { className: "iz-dialog__header", children: children });

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Button } from "./Button.js";
 export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.js";
+export { Card } from "./Card.js";
+export type { CardProps, CardVariant } from "./Card.js";
 export { SignatureCTA } from "./SignatureCTA.js";
 export type { SignatureCTAProps } from "./SignatureCTA.js";
 export { Loader } from "./Loader.js";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { Button } from "./Button.js";
+export { Card } from "./Card.js";
 export { SignatureCTA } from "./SignatureCTA.js";
 export { Loader } from "./Loader.js";
 export { Input, Textarea } from "./Input.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irozon/design-system-react",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Canonical React components for the Irozon Design System — thin, accessible wrappers over @irozon/design-system's framework-neutral iz-* CSS. No independent visual styling of its own; the CSS package stays the single source of truth for how these look.",
   "license": "MIT",
   "keywords": [
@@ -42,7 +42,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@irozon/design-system": "^0.7.0"
+    "@irozon/design-system": "^0.8.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",