@irozon/design-system-react 0.4.0 → 0.6.0

package/README.md

@@ -82,6 +82,11 @@ 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
@@ -187,6 +192,25 @@ import { NavItem } from "@irozon/design-system-react";
 </NavItem>;
 ```
 
+### ThemeToggle direction
+
+```tsx
+import { ThemeToggle, type ThemeToggleProps } from "@irozon/design-system-react";
+
+<ThemeToggle isDark={isDark} onToggle={toggleTheme} />;
+<ThemeToggle isDark={isDark} onToggle={toggleTheme} direction="vertical" />;
+<ThemeToggle isDark={isDark} onToggle={toggleTheme} direction="horizontal" />;
+```
+
+`direction?: "vertical" | "horizontal"` defaults to `"vertical"`. Vertical
+reveals Light above Dark; horizontal reveals Light on the left and Dark on
+the right. Both keep the centered resting dot, 44×44 hit area, colors,
+keyboard activation, focus ring, and reduced-motion behavior. The horizontal
+track is 38×20 instead of 20×38. Use the matching CSS package containing
+`data-direction="horizontal"` support. `isDark` and `onToggle` remain required;
+the consuming application continues to own theme state and persistence.
+`ThemeToggleProps` is exported through the existing package entry point.
+
 ### Canonical API
 
 Prop names and values match the CSS package's own vocabulary exactly —
@@ -205,6 +229,14 @@ these names at the call sites, not keep a permanent translation layer.
 
 React and React DOM `>=18.0.0` are peer dependencies and are not bundled.
 
+## Release notes
+
+### 0.6.0
+
+- Add optional ThemeToggle `direction="vertical" | "horizontal"`; vertical remains the default.
+- Require `@irozon/design-system@^0.9.0` for the 38px track and shared 500ms spring movement.
+- Preserve controlled theme state, accessible labels, keyboard activation and reduced motion.
+
 ## Versioning and compatibility
 
 This package is currently in `0.x` and uses the component vocabulary from

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/ThemeToggle.d.ts

@@ -3,10 +3,12 @@ export interface ThemeToggleProps {
     onToggle: () => void;
     /** Base label before the target-state suffix — e.g. "Switch to". */
     label?: string;
+    /** Track orientation; defaults to the existing vertical reveal. */
+    direction?: "vertical" | "horizontal";
 }
 /** Canonical `.iz-theme-toggle`. Presentation only — no localStorage, no
  * `prefers-color-scheme` sync, no cross-tab event bus: those are
  * per-application decisions (does this app persist per-user, per-device,
  * follow the OS by default?) that don't belong in a design-system
  * component. The caller owns `isDark` and what happens on toggle. */
-export declare function ThemeToggle({ isDark, onToggle, label }: ThemeToggleProps): import("react").JSX.Element;
+export declare function ThemeToggle({ isDark, onToggle, label, direction }: ThemeToggleProps): import("react").JSX.Element;

package/dist/ThemeToggle.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * per-application decisions (does this app persist per-user, per-device,
  * follow the OS by default?) that don't belong in a design-system
  * component. The caller owns `isDark` and what happens on toggle. */
-export function ThemeToggle({ isDark, onToggle, label = "Switch to" }) {
+export function ThemeToggle({ isDark, onToggle, label = "Switch to", direction = "vertical" }) {
     const target = isDark ? "light" : "dark";
-    return (_jsx("button", { type: "button", className: "iz-theme-toggle", "aria-pressed": isDark, "aria-label": `${label} ${target} theme`, title: `${label} ${target} theme`, onClick: onToggle, children: _jsx("span", { className: "iz-theme-toggle__track", "aria-hidden": "true", children: _jsx("span", { className: "iz-theme-toggle__indicator" }) }) }));
+    return (_jsx("button", { type: "button", className: "iz-theme-toggle", "data-direction": direction, "aria-pressed": isDark, "aria-label": `${label} ${target} theme`, title: `${label} ${target} theme`, onClick: onToggle, children: _jsx("span", { className: "iz-theme-toggle__track", "aria-hidden": "true", children: _jsx("span", { className: "iz-theme-toggle__indicator" }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irozon/design-system-react",
-  "version": "0.4.0",
+  "version": "0.6.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.8.0"
+    "@irozon/design-system": "^0.9.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",