@irozon/design-system-react 0.2.3 → 0.3.0

package/README.md

@@ -69,6 +69,7 @@ both packages because your app imports the CSS package directly.
 | Component | Wraps |
 | --- | --- |
 | `Button` | `.iz-button` |
+| `SignatureCTA` | `.iz-signature-cta` |
 | `Loader` | `.iz-loader` |
 | `Input`, `Textarea` | `.iz-input`, `.iz-textarea` |
 | `Select` | `.iz-select-wrap` / `.iz-select` |
@@ -80,6 +81,32 @@ 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` |
 
+### Signature CTA
+
+`SignatureCTA` renders the canonical `.iz-signature-cta` structure and uses
+the same framework-neutral CSS as standalone HTML. It renders an anchor by
+default; choose a button for an action, or pass a router link component through
+`as` to retain client-side navigation:
+
+```tsx
+import { Link } from "react-router-dom";
+import { SignatureCTA } from "@irozon/design-system-react";
+
+<SignatureCTA href="/contact">Get in touch</SignatureCTA>
+
+<SignatureCTA as="button" type="submit" onClick={submitForm}>
+  Send message
+</SignatureCTA>
+
+<SignatureCTA as={Link} to="/contact">
+  Get in touch
+</SignatureCTA>
+```
+
+Props for the rendered element are inferred from `as`, including its
+accessibility, event, and navigation props. The CTA owns its decorative
+three-dot motif in CSS; consumers provide the semantic label only.
+
 `Tabs`/`TabPanel` implement the full WAI-ARIA Tabs pattern (automatic
 activation): a roving tabindex so only the selected tab sits in the page's Tab
 order, ArrowLeft/ArrowRight to move between tabs, Home/End to jump to the

package/dist/Button.js

@@ -3,5 +3,5 @@ import { cx } from "./internal/cx.js";
 /** Canonical `.iz-button` — see button.css for the full state/variant
  * contract this renders. */
 export function Button({ variant = "primary", size = "default", iconOnly, loading, iconHint, className, children, ...rest }) {
-    return (_jsxs("button", { className: cx("iz-button", className), "data-variant": variant, "data-size": size === "default" ? undefined : size, "data-icon-only": iconOnly || undefined, "data-icon-hint": iconHint, "aria-busy": loading || undefined, ...rest, children: [_jsx("span", { className: "iz-button__spinner", "aria-hidden": "true", children: _jsx("span", { className: "iz-loader", "data-size": "small" }) }), _jsx("span", { children: children })] }));
+    return (_jsxs("button", { className: cx("iz-button", className), "data-variant": variant, "data-size": size === "default" ? undefined : size, "data-icon-only": iconOnly || undefined, "data-icon-hint": iconHint, "aria-busy": loading || undefined, ...rest, children: [_jsx("span", { className: "iz-loader iz-button__spinner", "data-size": "small", "aria-hidden": "true" }), _jsx("span", { children: children })] }));
 }

package/dist/SignatureCTA.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+interface SignatureCTAOwnProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Props for the canonical Signature CTA. Native element props are inferred
+ * from `as`, so router links can receive their own navigation props.
+ */
+export type SignatureCTAProps<T extends ElementType = "a"> = SignatureCTAOwnProps & {
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof SignatureCTAOwnProps | "as">;
+/**
+ * Canonical `.iz-signature-cta` markup. Import `@irozon/design-system/irozon.css`
+ * once in the app to get its shared Ink-to-Lime animation and decorative mark.
+ */
+export declare function SignatureCTA<T extends ElementType = "a">({ as, children, className, ...rest }: SignatureCTAProps<T>): import("react").JSX.Element;
+export {};

package/dist/SignatureCTA.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./internal/cx.js";
+/**
+ * Canonical `.iz-signature-cta` markup. Import `@irozon/design-system/irozon.css`
+ * once in the app to get its shared Ink-to-Lime animation and decorative mark.
+ */
+export function SignatureCTA({ as, children, className, ...rest }) {
+    const Component = as ?? "a";
+    return (_jsxs(Component, { className: cx("iz-signature-cta", className), ...rest, children: [_jsx("span", { className: "iz-signature-cta__sizer", "aria-hidden": "true", children: children }), _jsx("span", { className: "iz-signature-cta__base", children: _jsx("span", { className: "iz-signature-cta__label", children: children }) }), _jsx("span", { className: "iz-signature-cta__panel", "aria-hidden": "true" })] }));
+}

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irozon/design-system-react",
-  "version": "0.2.3",
+  "version": "0.3.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": [
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "build": "tsc",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --project test/tsconfig.json",
     "test": "npm run build && node --experimental-strip-types --test test/smoke.test.ts"
   },
   "peerDependencies": {