@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/system/auth-provider/auth-utils.js

@@ -0,0 +1,83 @@
+async function authFetch(url, options = {}, withCredentials = true) {
+  const config = {
+    ...options,
+    credentials: withCredentials ? "include" : "same-origin",
+    headers: {
+      "Content-Type": "application/json",
+      ...options.headers
+    }
+  };
+  return fetch(url, config);
+}
+async function checkAuthStatus(authUrl) {
+  try {
+    const response = await authFetch(`${authUrl}/api/auth/status`, {
+      method: "GET"
+    });
+    return response.ok;
+  } catch {
+    return false;
+  }
+}
+async function getCurrentUser(authUrl) {
+  try {
+    const response = await authFetch(`${authUrl}/api/auth/me`, {
+      method: "GET"
+    });
+    if (response.ok) {
+      return await response.json();
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+async function loginExternal(authUrl, credentials) {
+  const response = await authFetch(`${authUrl}/api/auth/login`, {
+    method: "POST",
+    body: JSON.stringify(credentials)
+  });
+  if (!response.ok) {
+    throw new Error("Login failed");
+  }
+  return await response.json();
+}
+async function logoutExternal(authUrl) {
+  await authFetch(`${authUrl}/api/auth/logout`, {
+    method: "POST"
+  });
+}
+function redirectToLogin(authUrl, returnUrl) {
+  const url = new URL(`${authUrl}/login`);
+  if (returnUrl) {
+    url.searchParams.set("returnUrl", returnUrl);
+  }
+  window.location.href = url.toString();
+}
+function openLoginPopup(authUrl, onSuccess) {
+  const width = 500;
+  const height = 600;
+  const left = window.screenX + (window.outerWidth - width) / 2;
+  const top = window.screenY + (window.outerHeight - height) / 2;
+  const popup = window.open(`${authUrl}/login`, "Login", `width=${width},height=${height},left=${left},top=${top}`);
+  if (popup && onSuccess) {
+    const messageHandler = (event) => {
+      if (event.origin === new URL(authUrl).origin && event.data === "login-success") {
+        onSuccess();
+        window.removeEventListener("message", messageHandler);
+      }
+    };
+    window.addEventListener("message", messageHandler);
+  }
+  return popup;
+}
+export {
+  authFetch,
+  checkAuthStatus,
+  getCurrentUser,
+  loginExternal,
+  logoutExternal,
+  openLoginPopup,
+  redirectToLogin
+};
+//# sourceMappingURL=auth-utils.js.map

package/dist/components/system/auth-provider/auth-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-utils.js","sources":["../../../../src/components/system/auth-provider/auth-utils.ts"],"sourcesContent":["/**\n * Auth utilities for cross-origin authentication\n */\n\n/**\n * Fetch with credentials for cross-origin requests\n */\nexport async function authFetch(url: string, options: RequestInit = {}, withCredentials = true): Promise<Response> {\n  const config: RequestInit = {\n    ...options,\n    credentials: withCredentials ? 'include' : 'same-origin',\n    headers: {\n      'Content-Type': 'application/json',\n      ...options.headers\n    }\n  };\n\n  return fetch(url, config);\n}\n\n/**\n * Check if user is authenticated via external auth server\n */\nexport async function checkAuthStatus(authUrl: string): Promise<boolean> {\n  try {\n    const response = await authFetch(`${authUrl}/api/auth/status`, {\n      method: 'GET'\n    });\n    return response.ok;\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Get current user from external auth server\n */\nexport async function getCurrentUser(authUrl: string): Promise<unknown | null> {\n  try {\n    const response = await authFetch(`${authUrl}/api/auth/me`, {\n      method: 'GET'\n    });\n\n    if (response.ok) {\n      return await response.json();\n    }\n    return null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Login via external auth server\n */\nexport async function loginExternal(authUrl: string, credentials: unknown): Promise<unknown> {\n  const response = await authFetch(`${authUrl}/api/auth/login`, {\n    method: 'POST',\n    body: JSON.stringify(credentials)\n  });\n\n  if (!response.ok) {\n    throw new Error('Login failed');\n  }\n\n  return await response.json();\n}\n\n/**\n * Logout via external auth server\n */\nexport async function logoutExternal(authUrl: string): Promise<void> {\n  await authFetch(`${authUrl}/api/auth/logout`, {\n    method: 'POST'\n  });\n}\n\n/**\n * Redirect to external login page\n */\nexport function redirectToLogin(authUrl: string, returnUrl?: string): void {\n  const url = new URL(`${authUrl}/login`);\n  if (returnUrl) {\n    url.searchParams.set('returnUrl', returnUrl);\n  }\n  window.location.href = url.toString();\n}\n\n/**\n * Open external login in popup window\n */\nexport function openLoginPopup(authUrl: string, onSuccess?: () => void): Window | null {\n  const width = 500;\n  const height = 600;\n  const left = window.screenX + (window.outerWidth - width) / 2;\n  const top = window.screenY + (window.outerHeight - height) / 2;\n\n  const popup = window.open(`${authUrl}/login`, 'Login', `width=${width},height=${height},left=${left},top=${top}`);\n\n  // Listen for message from popup\n  if (popup && onSuccess) {\n    const messageHandler = (event: MessageEvent) => {\n      if (event.origin === new URL(authUrl).origin && event.data === 'login-success') {\n        onSuccess();\n        window.removeEventListener('message', messageHandler);\n      }\n    };\n    window.addEventListener('message', messageHandler);\n  }\n\n  return popup;\n}\n"],"names":[],"mappings":"AAOA,eAAsB,UAAU,KAAa,UAAuB,CAAA,GAAI,kBAAkB,MAAyB;AACjH,QAAM,SAAsB;AAAA,IAC1B,GAAG;AAAA,IACH,aAAa,kBAAkB,YAAY;AAAA,IAC3C,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,GAAG,QAAQ;AAAA,IAAA;AAAA,EACb;AAGF,SAAO,MAAM,KAAK,MAAM;AAC1B;AAKA,eAAsB,gBAAgB,SAAmC;AACvE,MAAI;AACF,UAAM,WAAW,MAAM,UAAU,GAAG,OAAO,oBAAoB;AAAA,MAC7D,QAAQ;AAAA,IAAA,CACT;AACD,WAAO,SAAS;AAAA,EAClB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAKA,eAAsB,eAAe,SAA0C;AAC7E,MAAI;AACF,UAAM,WAAW,MAAM,UAAU,GAAG,OAAO,gBAAgB;AAAA,MACzD,QAAQ;AAAA,IAAA,CACT;AAED,QAAI,SAAS,IAAI;AACf,aAAO,MAAM,SAAS,KAAA;AAAA,IACxB;AACA,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAKA,eAAsB,cAAc,SAAiB,aAAwC;AAC3F,QAAM,WAAW,MAAM,UAAU,GAAG,OAAO,mBAAmB;AAAA,IAC5D,QAAQ;AAAA,IACR,MAAM,KAAK,UAAU,WAAW;AAAA,EAAA,CACjC;AAED,MAAI,CAAC,SAAS,IAAI;AAChB,UAAM,IAAI,MAAM,cAAc;AAAA,EAChC;AAEA,SAAO,MAAM,SAAS,KAAA;AACxB;AAKA,eAAsB,eAAe,SAAgC;AACnE,QAAM,UAAU,GAAG,OAAO,oBAAoB;AAAA,IAC5C,QAAQ;AAAA,EAAA,CACT;AACH;AAKO,SAAS,gBAAgB,SAAiB,WAA0B;AACzE,QAAM,MAAM,IAAI,IAAI,GAAG,OAAO,QAAQ;AACtC,MAAI,WAAW;AACb,QAAI,aAAa,IAAI,aAAa,SAAS;AAAA,EAC7C;AACA,SAAO,SAAS,OAAO,IAAI,SAAA;AAC7B;AAKO,SAAS,eAAe,SAAiB,WAAuC;AACrF,QAAM,QAAQ;AACd,QAAM,SAAS;AACf,QAAM,OAAO,OAAO,WAAW,OAAO,aAAa,SAAS;AAC5D,QAAM,MAAM,OAAO,WAAW,OAAO,cAAc,UAAU;AAE7D,QAAM,QAAQ,OAAO,KAAK,GAAG,OAAO,UAAU,SAAS,SAAS,KAAK,WAAW,MAAM,SAAS,IAAI,QAAQ,GAAG,EAAE;AAGhH,MAAI,SAAS,WAAW;AACtB,UAAM,iBAAiB,CAAC,UAAwB;AAC9C,UAAI,MAAM,WAAW,IAAI,IAAI,OAAO,EAAE,UAAU,MAAM,SAAS,iBAAiB;AAC9E,kBAAA;AACA,eAAO,oBAAoB,WAAW,cAAc;AAAA,MACtD;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,cAAc;AAAA,EACnD;AAEA,SAAO;AACT;"}

package/dist/components/system/auth-provider/index.d.ts

@@ -0,0 +1,4 @@
+export { default, useAuth } from './auth-provider';
+export type { AuthUser, AuthState, AuthActions, AuthContextType, AuthProviderConfig, AuthProviderProps } from './auth-provider';
+export { authFetch, checkAuthStatus, getCurrentUser, loginExternal, logoutExternal, redirectToLogin, openLoginPopup } from './auth-utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/system/auth-provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/system/auth-provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACnD,YAAY,EACV,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,aAAa,EACb,cAAc,EACd,eAAe,EACf,cAAc,EACf,MAAM,cAAc,CAAC"}

package/dist/components/system/color-mode-toggle/color-mode-toggle.d.ts

@@ -0,0 +1,18 @@
+import { InteractiveSize } from '../../../theme/size-tokens';
+export type ColorModeToggleProps = {
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Size of the toggle button - default is 'md' */
+    size?: InteractiveSize;
+    /** Style of the toggle button - default is 'ghost' */
+    buttonStyle?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
+};
+/**
+ * ColorModeToggle - Simple light/dark theme switcher
+ */
+declare function ColorModeToggle({ className, size, buttonStyle }: Readonly<ColorModeToggleProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace ColorModeToggle {
+    var displayName: string;
+}
+export default ColorModeToggle;
+//# sourceMappingURL=color-mode-toggle.d.ts.map

package/dist/components/system/color-mode-toggle/color-mode-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode-toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/system/color-mode-toggle/color-mode-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,MAAM,MAAM,oBAAoB,GAAG;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CAC/D,CAAC;AAEF;;GAEG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAc,EAAE,IAAW,EAAE,WAAqB,EAAE,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAoB9G;kBApBQ,eAAe;;;AAwBxB,eAAe,eAAe,CAAC"}

package/dist/components/system/color-mode-toggle/color-mode-toggle.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "../theme-provider/theme-provider.js";
+import IconButton from "../../forms/button/icon-button.js";
+function ColorModeToggle({ className = "", size = "md", buttonStyle = "ghost" }) {
+  const { theme, setTheme } = useTheme();
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+  const isDark = theme === "dark";
+  const label = `Switch to ${theme === "light" ? "dark" : "light"} theme`;
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      iconSize: size,
+      onClick: toggleTheme,
+      className,
+      ariaLabel: label,
+      buttonStyle,
+      icon: isDark ? "moon" : "sun"
+    }
+  );
+}
+ColorModeToggle.displayName = "ColorModeToggle";
+export {
+  ColorModeToggle as default
+};
+//# sourceMappingURL=color-mode-toggle.js.map

package/dist/components/system/color-mode-toggle/color-mode-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode-toggle.js","sources":["../../../../src/components/system/color-mode-toggle/color-mode-toggle.tsx"],"sourcesContent":["import { InteractiveSize } from '@/theme/size-tokens';\nimport { IconButton } from '../../forms/button';\nimport { useTheme } from '../theme-provider';\n\nexport type ColorModeToggleProps = {\n  /** Additional CSS classes for custom styling */\n  className?: string;\n  /** Size of the toggle button - default is 'md' */\n  size?: InteractiveSize;\n  /** Style of the toggle button - default is 'ghost' */\n  buttonStyle?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';\n};\n\n/**\n * ColorModeToggle - Simple light/dark theme switcher\n */\nfunction ColorModeToggle({ className = '', size = 'md', buttonStyle = 'ghost' }: Readonly<ColorModeToggleProps>) {\n  const { theme, setTheme } = useTheme();\n\n  const toggleTheme = () => {\n    setTheme(theme === 'light' ? 'dark' : 'light');\n  };\n\n  const isDark = theme === 'dark';\n  const label = `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`;\n\n  return (\n    <IconButton\n      iconSize={size}\n      onClick={toggleTheme}\n      className={className}\n      ariaLabel={label}\n      buttonStyle={buttonStyle}\n      icon={isDark ? 'moon' : 'sun'}\n    />\n  );\n}\n\nColorModeToggle.displayName = 'ColorModeToggle';\n\nexport default ColorModeToggle;\n"],"names":[],"mappings":";;;AAgBA,SAAS,gBAAgB,EAAE,YAAY,IAAI,OAAO,MAAM,cAAc,WAA2C;AAC/G,QAAM,EAAE,OAAO,SAAA,IAAa,SAAA;AAE5B,QAAM,cAAc,MAAM;AACxB,aAAS,UAAU,UAAU,SAAS,OAAO;AAAA,EAC/C;AAEA,QAAM,SAAS,UAAU;AACzB,QAAM,QAAQ,aAAa,UAAU,UAAU,SAAS,OAAO;AAE/D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,MAAM,SAAS,SAAS;AAAA,IAAA;AAAA,EAAA;AAG9B;AAEA,gBAAgB,cAAc;"}

package/dist/components/system/color-mode-toggle/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './color-mode-toggle';
+export type { ColorModeToggleProps } from './color-mode-toggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/system/color-mode-toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/system/color-mode-toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/system/error-boundary/error-boundary.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export type ErrorBoundaryProps = {
+    /** React children to be rendered within the error boundary */
+    children: React.ReactNode;
+    /** Custom fallback UI render function that receives the error and reset callback
+     * If not provided, a default error UI is shown
+     */
+    fallback?: (error: Error, reset: () => void) => React.ReactNode;
+};
+type ErrorBoundaryState = {
+    error: Error | null;
+};
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    reset: () => void;
+    componentDidCatch(error: Error, info: React.ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export default ErrorBoundary;
+//# sourceMappingURL=error-boundary.d.ts.map

package/dist/components/system/error-boundary/error-boundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../../src/components/system/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8DAA8D;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CACjE,CAAC;AAEF,KAAK,kBAAkB,GAAG;IAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAAE,CAAC;AAElD,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IACjF,KAAK,EAAE,kBAAkB,CAAmB;IAE5C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,KAAK,aAAwC;IAE7C,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS;IAKrD,MAAM;CAqBP;AAED,eAAe,aAAa,CAAC"}

package/dist/components/system/icon/icon.d.ts

@@ -0,0 +1,35 @@
+import { ColorVariant } from '../../../theme/tokens';
+import { Size } from '../../../theme/size-tokens';
+import * as React from 'react';
+export type IconSize = Size;
+export interface IconProps {
+    /** Dynamic icon name from Tabler Icons (e.g. "home", "user", "arrow-right") */
+    name: string;
+    /** Icon size using unified size system
+     * @default 'md'
+     */
+    size?: IconSize;
+    /** Color variant or 'currentColor' to inherit text color
+     * @default 'currentColor'
+     */
+    color?: ColorVariant | 'currentColor';
+    /** Opacity level (0-1)
+     * @default 1
+     */
+    opacity?: number;
+    /** SVG stroke width
+     * @default 2
+     */
+    strokeWidth?: number;
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/**
+ * Dynamic Icon component — resolves any Tabler icon by name.
+ * Uses semantic size variants and supports all icons without manual mapping.
+ */
+export declare const Icon: React.FC<IconProps>;
+export default Icon;
+//# sourceMappingURL=icon.d.ts.map

package/dist/components/system/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../src/components/system/icon/icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,YAAY,EAKb,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAiB,MAAM,4BAA4B,CAAC;AAEjE,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC;AAE5B,MAAM,WAAW,SAAS;IACxB,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,GAAG,cAAc,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAmCD;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmEpC,CAAC;AAKF,eAAe,IAAI,CAAC"}

package/dist/components/system/icon/icon.js

@@ -0,0 +1,83 @@
+import { jsx } from "react/jsx-runtime";
+import * as TablerIcons from "@tabler/icons-react";
+import { colors, colorClassPrefixes } from "../../../theme/tokens.js";
+import { getIconPixels } from "../../../theme/size-tokens.js";
+const STATUS_COLOR_MAP = {
+  neutral: "neutral",
+  primary: "primary",
+  success: "success",
+  warning: "warning",
+  error: "error",
+  info: "info",
+  accent: "accent"
+};
+const hasThemeColor = (token) => Object.prototype.hasOwnProperty.call(colors, token);
+const isThemeColor = (value) => typeof value === "string" && hasThemeColor(value);
+const isThemeColorClass = (value) => {
+  if (typeof value !== "string") return false;
+  for (const prefix of colorClassPrefixes) {
+    if (value.startsWith(`${prefix}-`)) {
+      const token = value.slice(prefix.length + 1);
+      return hasThemeColor(token);
+    }
+  }
+  return false;
+};
+const isStatusColor = (value) => typeof value === "string" && value in STATUS_COLOR_MAP;
+const warnInvalidIconName = (value) => {
+  if (process.env.NODE_ENV === "production") return;
+  console.error("[Icon] Expected `name` to be a non-empty string. Received:", value);
+};
+const Icon = ({
+  name,
+  size = "md",
+  color = "currentColor",
+  opacity = 1,
+  strokeWidth = 2,
+  className = "",
+  onClick
+}) => {
+  if (typeof name !== "string") {
+    warnInvalidIconName(name);
+    return null;
+  }
+  const normalizedName = name.trim();
+  if (!normalizedName) {
+    warnInvalidIconName(name);
+    return null;
+  }
+  const pascalName = normalizedName.split(/[-_]/).filter((s) => s).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+  const componentName = pascalName.startsWith("Icon") ? pascalName : "Icon" + pascalName;
+  const IconComponent = TablerIcons[componentName];
+  if (!IconComponent) return null;
+  const pixelSize = getIconPixels(size, "desktop");
+  let resolvedColor = color;
+  let resolvedClassName = className;
+  if (isStatusColor(color)) {
+    const mapped = STATUS_COLOR_MAP[color];
+    resolvedColor = mapped === "currentColor" ? "currentColor" : colors[mapped];
+  } else if (isThemeColor(color)) {
+    resolvedColor = colors[color];
+  } else if (isThemeColorClass(color)) {
+    resolvedClassName = [className, color].filter(Boolean).join(" ");
+    resolvedColor = "currentColor";
+  }
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      size: pixelSize,
+      color: resolvedColor,
+      strokeWidth,
+      className: resolvedClassName,
+      opacity,
+      onClick,
+      "aria-hidden": "true"
+    }
+  );
+};
+Icon.displayName = "Icon";
+export {
+  Icon,
+  Icon as default
+};
+//# sourceMappingURL=icon.js.map

package/dist/components/system/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../../src/components/system/icon/icon.tsx"],"sourcesContent":["import * as TablerIcons from '@tabler/icons-react';\nimport * as React from 'react';\nimport {\n  ColorVariant,\n  colors as themeColors,\n  colorClassPrefixes,\n  ThemeColor,\n  ThemeColorClass\n} from '../../../theme/tokens';\n\nimport { Size, getIconPixels } from '../../../theme/size-tokens';\n\nexport type IconSize = Size;\n\nexport interface IconProps {\n  /** Dynamic icon name from Tabler Icons (e.g. \"home\", \"user\", \"arrow-right\") */\n  name: string;\n  /** Icon size using unified size system\n   * @default 'md'\n   */\n  size?: IconSize;\n  /** Color variant or 'currentColor' to inherit text color\n   * @default 'currentColor'\n   */\n  color?: ColorVariant | 'currentColor';\n  /** Opacity level (0-1)\n   * @default 1\n   */\n  opacity?: number;\n  /** SVG stroke width\n   * @default 2\n   */\n  strokeWidth?: number;\n  /** Additional CSS classes for custom styling */\n  className?: string;\n  /** Optional click handler */\n  onClick?: () => void;\n}\n\nconst STATUS_COLOR_MAP: Record<ColorVariant, ThemeColor | 'currentColor'> = {\n  neutral: 'neutral',\n  primary: 'primary',\n  success: 'success',\n  warning: 'warning',\n  error: 'error',\n  info: 'info',\n  accent: 'accent'\n};\n\nconst hasThemeColor = (token: string): token is ThemeColor => Object.prototype.hasOwnProperty.call(themeColors, token);\n\nconst isThemeColor = (value: unknown): value is ThemeColor => typeof value === 'string' && hasThemeColor(value);\n\nconst isThemeColorClass = (value: unknown): value is ThemeColorClass => {\n  if (typeof value !== 'string') return false;\n  for (const prefix of colorClassPrefixes) {\n    if (value.startsWith(`${prefix}-`)) {\n      const token = value.slice(prefix.length + 1);\n      return hasThemeColor(token);\n    }\n  }\n  return false;\n};\n\nconst isStatusColor = (value: unknown): value is ColorVariant => typeof value === 'string' && value in STATUS_COLOR_MAP;\n\nconst warnInvalidIconName = (value: unknown) => {\n  if (process.env.NODE_ENV === 'production') return;\n  // eslint-disable-next-line no-console\n  console.error('[Icon] Expected `name` to be a non-empty string. Received:', value);\n};\n\n/**\n * Dynamic Icon component — resolves any Tabler icon by name.\n * Uses semantic size variants and supports all icons without manual mapping.\n */\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = 'md',\n  color = 'currentColor',\n  opacity = 1,\n  strokeWidth = 2,\n  className = '',\n  onClick\n}) => {\n  if (typeof name !== 'string') {\n    warnInvalidIconName(name);\n    return null;\n  }\n\n  const normalizedName = name.trim();\n\n  if (!normalizedName) {\n    warnInvalidIconName(name);\n    return null;\n  }\n\n  // Convert kebab or lowercase to PascalCase (e.g. \"arrow-right\" → \"IconArrowRight\")\n  const pascalName = normalizedName\n    .split(/[-_]/)\n    .filter((s) => s)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join('');\n\n  const componentName = pascalName.startsWith('Icon') ? pascalName : 'Icon' + pascalName;\n\n  // Use ComponentType to support both function and forwardRef components\n  // Tabler icon components accept standard SVG props plus a few extras\n  type TablerIconComponent = React.ComponentType<\n    React.SVGProps<SVGSVGElement> & { size?: number | string; strokeWidth?: number }\n  >;\n\n  const IconComponent = (TablerIcons as unknown as Record<string, TablerIconComponent>)[componentName];\n\n  if (!IconComponent) return null;\n\n  // Use desktop size for pixel-based SVG rendering\n  const pixelSize = getIconPixels(size, 'desktop');\n\n  let resolvedColor: string = color;\n  let resolvedClassName = className;\n\n  if (isStatusColor(color)) {\n    const mapped = STATUS_COLOR_MAP[color];\n    resolvedColor = mapped === 'currentColor' ? 'currentColor' : themeColors[mapped];\n  } else if (isThemeColor(color)) {\n    resolvedColor = themeColors[color];\n  } else if (isThemeColorClass(color)) {\n    resolvedClassName = [className, color].filter(Boolean).join(' ');\n    resolvedColor = 'currentColor';\n  }\n\n  return (\n    <IconComponent\n      size={pixelSize}\n      color={resolvedColor}\n      strokeWidth={strokeWidth}\n      className={resolvedClassName}\n      opacity={opacity}\n      onClick={onClick}\n      aria-hidden=\"true\"\n    />\n  );\n};\n\nIcon.displayName = 'Icon';\n\n// Provide a default export for backwards compatibility with existing imports\nexport default Icon;\n"],"names":["themeColors"],"mappings":";;;;AAuCA,MAAM,mBAAsE;AAAA,EAC1E,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AACV;AAEA,MAAM,gBAAgB,CAAC,UAAuC,OAAO,UAAU,eAAe,KAAKA,QAAa,KAAK;AAErH,MAAM,eAAe,CAAC,UAAwC,OAAO,UAAU,YAAY,cAAc,KAAK;AAE9G,MAAM,oBAAoB,CAAC,UAA6C;AACtE,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,aAAW,UAAU,oBAAoB;AACvC,QAAI,MAAM,WAAW,GAAG,MAAM,GAAG,GAAG;AAClC,YAAM,QAAQ,MAAM,MAAM,OAAO,SAAS,CAAC;AAC3C,aAAO,cAAc,KAAK;AAAA,IAC5B;AAAA,EACF;AACA,SAAO;AACT;AAEA,MAAM,gBAAgB,CAAC,UAA0C,OAAO,UAAU,YAAY,SAAS;AAEvG,MAAM,sBAAsB,CAAC,UAAmB;AAC9C,MAAI,QAAQ,IAAI,aAAa,aAAc;AAE3C,UAAQ,MAAM,8DAA8D,KAAK;AACnF;AAMO,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AACF,MAAM;AACJ,MAAI,OAAO,SAAS,UAAU;AAC5B,wBAAoB,IAAI;AACxB,WAAO;AAAA,EACT;AAEA,QAAM,iBAAiB,KAAK,KAAA;AAE5B,MAAI,CAAC,gBAAgB;AACnB,wBAAoB,IAAI;AACxB,WAAO;AAAA,EACT;AAGA,QAAM,aAAa,eAChB,MAAM,MAAM,EACZ,OAAO,CAAC,MAAM,CAAC,EACf,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC,EACjD,KAAK,EAAE;AAEV,QAAM,gBAAgB,WAAW,WAAW,MAAM,IAAI,aAAa,SAAS;AAQ5E,QAAM,gBAAiB,YAA+D,aAAa;AAEnG,MAAI,CAAC,cAAe,QAAO;AAG3B,QAAM,YAAY,cAAc,MAAM,SAAS;AAE/C,MAAI,gBAAwB;AAC5B,MAAI,oBAAoB;AAExB,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,SAAS,iBAAiB,KAAK;AACrC,oBAAgB,WAAW,iBAAiB,iBAAiBA,OAAY,MAAM;AAAA,EACjF,WAAW,aAAa,KAAK,GAAG;AAC9B,oBAAgBA,OAAY,KAAK;AAAA,EACnC,WAAW,kBAAkB,KAAK,GAAG;AACnC,wBAAoB,CAAC,WAAW,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAC/D,oBAAgB;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,eAAY;AAAA,IAAA;AAAA,EAAA;AAGlB;AAEA,KAAK,cAAc;"}

package/dist/components/system/icon/index.d.ts

@@ -0,0 +1,3 @@
+export { Icon } from './icon';
+export type { IconProps, IconSize } from './icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/system/icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/system/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/system/theme-provider/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider, useTheme, default } from './theme-provider';
+export type { ThemeProviderProps, Theme, ThemeContextType } from './theme-provider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/system/theme-provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/system/theme-provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACpE,YAAY,EAAE,kBAAkB,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/system/theme-provider/theme-provider.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+/**
+ * hydn UI Theme System
+ * - Supports light and dark themes
+ * - Themes are applied via className on the <html> element
+ * - Define new themes in globals.css following the CSS variable pattern
+ */
+export type Theme = 'light' | 'dark';
+export type ThemeContextType = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    availableThemes: Theme[];
+};
+export type ThemeProviderProps = {
+    /** React children to be wrapped with theme context */
+    children: ReactNode;
+    /** Initial theme to use if none is stored
+     * @default 'light'
+     */
+    defaultTheme?: Theme;
+    /** LocalStorage key for persisting theme selection
+     * @default 'hydn-theme'
+     */
+    storageKey?: string;
+    /**
+     * List of available theme names.
+     * Defaults to ['light', 'dark']
+     */
+    themes?: Theme[];
+};
+/**
+ * ThemeProvider - Context for managing light/dark themes
+ */
+export declare function ThemeProvider({ children, defaultTheme, storageKey, themes }: Readonly<ThemeProviderProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * useTheme - Hook to access theme context
+ */
+export declare function useTheme(): ThemeContextType;
+export default ThemeProvider;
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/components/system/theme-provider/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/system/theme-provider/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2D,SAAS,EAAe,MAAM,OAAO,CAAC;AAExG;;;;;GAKG;AAEH,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAErC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,KAAK,EAAE,CAAC;CAC1B,CAAC;AAIF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAsB,EACtB,UAAyB,EACzB,MAA0B,EAC3B,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CA0C9B;AAED;;GAEG;AACH,wBAAgB,QAAQ,qBAMvB;AAED,eAAe,aAAa,CAAC"}

package/dist/components/system/theme-provider/theme-provider.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useEffect, useCallback, useMemo, useContext } from "react";
+const ThemeContext = createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "hydn-theme",
+  themes = ["light", "dark"]
+}) {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(storageKey);
+      return stored && themes.includes(stored) ? stored : defaultTheme;
+    }
+    return defaultTheme;
+  });
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove(...themes);
+    root.classList.add(theme);
+  }, [theme, themes]);
+  const setTheme = useCallback(
+    (newTheme) => {
+      if (themes.includes(newTheme)) {
+        localStorage.setItem(storageKey, newTheme);
+        setThemeState(newTheme);
+      } else {
+        console.warn(`Theme "${newTheme}" is not in availableThemes. Add it to the themes prop.`);
+      }
+    },
+    [themes, storageKey]
+  );
+  const value = useMemo(
+    () => ({
+      theme,
+      setTheme,
+      availableThemes: themes
+    }),
+    [theme, themes, setTheme]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+export {
+  ThemeProvider,
+  ThemeProvider as default,
+  useTheme
+};
+//# sourceMappingURL=theme-provider.js.map

package/dist/components/system/theme-provider/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.js","sources":["../../../../src/components/system/theme-provider/theme-provider.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useState, useMemo, ReactNode, useCallback } from 'react';\n\n/**\n * hydn UI Theme System\n * - Supports light and dark themes\n * - Themes are applied via className on the <html> element\n * - Define new themes in globals.css following the CSS variable pattern\n */\n\nexport type Theme = 'light' | 'dark';\n\nexport type ThemeContextType = {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  availableThemes: Theme[];\n};\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport type ThemeProviderProps = {\n  /** React children to be wrapped with theme context */\n  children: ReactNode;\n  /** Initial theme to use if none is stored\n   * @default 'light'\n   */\n  defaultTheme?: Theme;\n  /** LocalStorage key for persisting theme selection\n   * @default 'hydn-theme'\n   */\n  storageKey?: string;\n  /**\n   * List of available theme names.\n   * Defaults to ['light', 'dark']\n   */\n  themes?: Theme[];\n};\n\n/**\n * ThemeProvider - Context for managing light/dark themes\n */\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'light',\n  storageKey = 'hydn-theme',\n  themes = ['light', 'dark']\n}: Readonly<ThemeProviderProps>) {\n  const [theme, setThemeState] = useState<Theme>(() => {\n    if (typeof window !== 'undefined') {\n      const stored = localStorage.getItem(storageKey) as Theme;\n      return stored && themes.includes(stored) ? stored : defaultTheme;\n    }\n    return defaultTheme;\n  });\n\n  useEffect(() => {\n    const root = window.document.documentElement;\n\n    // Remove all possible theme classes\n    root.classList.remove(...themes);\n\n    // Apply the theme class to <html>\n    root.classList.add(theme);\n  }, [theme, themes]);\n\n  const setTheme = useCallback(\n    (newTheme: Theme) => {\n      if (themes.includes(newTheme)) {\n        localStorage.setItem(storageKey, newTheme);\n        setThemeState(newTheme);\n      } else {\n        /* eslint-disable-next-line no-console */\n        console.warn(`Theme \"${newTheme}\" is not in availableThemes. Add it to the themes prop.`);\n      }\n    },\n    [themes, storageKey]\n  );\n\n  const value = useMemo(\n    () => ({\n      theme,\n      setTheme,\n      availableThemes: themes\n    }),\n    [theme, themes, setTheme]\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n/**\n * useTheme - Hook to access theme context\n */\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n\nexport default ThemeProvider;\n"],"names":[],"mappings":";;AAiBA,MAAM,eAAe,cAA4C,MAAS;AAuBnE,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,eAAe;AAAA,EACf,aAAa;AAAA,EACb,SAAS,CAAC,SAAS,MAAM;AAC3B,GAAiC;AAC/B,QAAM,CAAC,OAAO,aAAa,IAAI,SAAgB,MAAM;AACnD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,SAAS,aAAa,QAAQ,UAAU;AAC9C,aAAO,UAAU,OAAO,SAAS,MAAM,IAAI,SAAS;AAAA,IACtD;AACA,WAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,UAAM,OAAO,OAAO,SAAS;AAG7B,SAAK,UAAU,OAAO,GAAG,MAAM;AAG/B,SAAK,UAAU,IAAI,KAAK;AAAA,EAC1B,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,WAAW;AAAA,IACf,CAAC,aAAoB;AACnB,UAAI,OAAO,SAAS,QAAQ,GAAG;AAC7B,qBAAa,QAAQ,YAAY,QAAQ;AACzC,sBAAc,QAAQ;AAAA,MACxB,OAAO;AAEL,gBAAQ,KAAK,UAAU,QAAQ,yDAAyD;AAAA,MAC1F;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EAAA;AAGrB,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,IAAA;AAAA,IAEnB,CAAC,OAAO,QAAQ,QAAQ;AAAA,EAAA;AAG1B,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAe,SAAA,CAAS;AACxD;AAKO,SAAS,WAAW;AACzB,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AACA,SAAO;AACT;"}

package/dist/components/typography/code/code.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type CodeProps = {
+    /** Code content to be displayed */
+    children: ReactNode;
+    /** Whether to render as a code block (pre + code) or inline code
+     * @default false
+     */
+    block?: boolean;
+    /** Visual style variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'primary' | 'muted';
+    /** Additional CSS classes for custom styling */
+    className?: string;
+};
+/**
+ * Code - Styled code snippets (inline or block)
+ */
+declare function Code({ children, block, variant, className }: Readonly<CodeProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Code {
+    var displayName: string;
+}
+export default Code;
+//# sourceMappingURL=code.d.ts.map

package/dist/components/typography/code/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/code/code.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,SAAS,GAAG;IACtB,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAa,EAAE,OAAmB,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,SAAS,CAAC,2CAkBlG;kBAlBQ,IAAI;;;AAsBb,eAAe,IAAI,CAAC"}

package/dist/components/typography/code/code.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+function Code({ children, block = false, variant = "default", className = "" }) {
+  const variantClasses = {
+    default: "bg-muted text-foreground",
+    primary: "text-primary",
+    muted: "text-muted-foreground"
+  };
+  const baseClasses = `font-mono ${variantClasses[variant]}`;
+  if (block) {
+    return /* @__PURE__ */ jsx("pre", { className: `${baseClasses} p-4 rounded-lg overflow-x-auto border border-border ${className}`, children: /* @__PURE__ */ jsx("code", { children }) });
+  }
+  return /* @__PURE__ */ jsx("code", { className: `${baseClasses} px-1.5 py-0.5 rounded text-sm ${className}`, children });
+}
+Code.displayName = "Code";
+export {
+  Code as default
+};
+//# sourceMappingURL=code.js.map

package/dist/components/typography/code/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sources":["../../../../src/components/typography/code/code.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport type CodeProps = {\n  /** Code content to be displayed */\n  children: ReactNode;\n  /** Whether to render as a code block (pre + code) or inline code\n   * @default false\n   */\n  block?: boolean;\n  /** Visual style variant\n   * @default 'default'\n   */\n  variant?: 'default' | 'primary' | 'muted';\n  /** Additional CSS classes for custom styling */\n  className?: string;\n};\n\n/**\n * Code - Styled code snippets (inline or block)\n */\nfunction Code({ children, block = false, variant = 'default', className = '' }: Readonly<CodeProps>) {\n  const variantClasses = {\n    default: 'bg-muted text-foreground',\n    primary: 'text-primary',\n    muted: 'text-muted-foreground'\n  };\n\n  const baseClasses = `font-mono ${variantClasses[variant]}`;\n\n  if (block) {\n    return (\n      <pre className={`${baseClasses} p-4 rounded-lg overflow-x-auto border border-border ${className}`}>\n        <code>{children}</code>\n      </pre>\n    );\n  }\n\n  return <code className={`${baseClasses} px-1.5 py-0.5 rounded text-sm ${className}`}>{children}</code>;\n}\n\nCode.displayName = 'Code';\n\nexport default Code;\n"],"names":[],"mappings":";AAoBA,SAAS,KAAK,EAAE,UAAU,QAAQ,OAAO,UAAU,WAAW,YAAY,MAA2B;AACnG,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAGT,QAAM,cAAc,aAAa,eAAe,OAAO,CAAC;AAExD,MAAI,OAAO;AACT,WACE,oBAAC,OAAA,EAAI,WAAW,GAAG,WAAW,wDAAwD,SAAS,IAC7F,UAAA,oBAAC,QAAA,EAAM,SAAA,CAAS,GAClB;AAAA,EAEJ;AAEA,SAAO,oBAAC,UAAK,WAAW,GAAG,WAAW,kCAAkC,SAAS,IAAK,UAAS;AACjG;AAEA,KAAK,cAAc;"}

package/dist/components/typography/code/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './code';
+export type { CodeProps } from './code';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/typography/code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/code/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/typography/heading/heading.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export type HeadingProps = {
+    /** Content to be rendered within the heading element */
+    children: ReactNode;
+    /** Semantic heading level (h1-h6)
+     * @default 1
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Text alignment
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Whether to include default bottom margin spacing
+     * @default false
+     */
+    hasMargin?: boolean;
+};
+/**
+ * Heading - Consistent typography scale (H1-H6)
+ * Includes sensible default margins for spacing and responsive font sizes
+ */
+declare function Heading({ children, level, align, className, hasMargin }: Readonly<HeadingProps>): import('react').DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+declare namespace Heading {
+    var displayName: string;
+}
+export default Heading;
+//# sourceMappingURL=heading.d.ts.map

package/dist/components/typography/heading/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/heading/heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG;IACzB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChD,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAS,EAAE,KAAK,EAAE,SAAc,EAAE,SAAiB,EAAE,EAAE,QAAQ,CAAC,YAAY,CAAC;;gBAoCzG;kBApCQ,OAAO;;;AAwChB,eAAe,OAAO,CAAC"}

package/dist/components/typography/heading/heading.js

@@ -0,0 +1,39 @@
+import { createElement } from "react";
+function Heading({ children, level = 1, align, className = "", hasMargin = false }) {
+  const levelClasses = {
+    1: "text-3xl sm:text-4xl lg:text-5xl font-bold",
+    2: "text-2xl sm:text-3xl lg:text-4xl font-bold",
+    3: "text-xl sm:text-2xl lg:text-3xl font-semibold",
+    4: "text-lg sm:text-xl font-semibold",
+    5: "text-base sm:text-lg font-medium",
+    6: "text-sm sm:text-base font-medium"
+  };
+  const marginClasses = {
+    1: "mb-3 sm:mb-4",
+    2: "mb-2 sm:mb-3",
+    3: "mb-2 sm:mb-3",
+    4: "mb-1 sm:mb-2",
+    5: "mb-1 sm:mb-2",
+    6: "mb-1 sm:mb-2"
+  };
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify"
+  };
+  const margin = hasMargin ? marginClasses[level] : "";
+  const alignment = align ? alignClasses[align] : "";
+  return createElement(
+    `h${level}`,
+    {
+      className: `text-foreground ${levelClasses[level]} ${margin} ${alignment} ${className}`
+    },
+    children
+  );
+}
+Heading.displayName = "Heading";
+export {
+  Heading as default
+};
+//# sourceMappingURL=heading.js.map

package/dist/components/typography/heading/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sources":["../../../../src/components/typography/heading/heading.tsx"],"sourcesContent":["import { ReactNode, createElement } from 'react';\n\nexport type HeadingProps = {\n  /** Content to be rendered within the heading element */\n  children: ReactNode;\n  /** Semantic heading level (h1-h6)\n   * @default 1\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Text alignment\n   * @default 'left'\n   */\n  align?: 'left' | 'center' | 'right' | 'justify';\n  /** Additional CSS classes for custom styling */\n  className?: string;\n  /** Whether to include default bottom margin spacing\n   * @default false\n   */\n  hasMargin?: boolean;\n};\n\n/**\n * Heading - Consistent typography scale (H1-H6)\n * Includes sensible default margins for spacing and responsive font sizes\n */\nfunction Heading({ children, level = 1, align, className = '', hasMargin = false }: Readonly<HeadingProps>) {\n  const levelClasses = {\n    1: 'text-3xl sm:text-4xl lg:text-5xl font-bold',\n    2: 'text-2xl sm:text-3xl lg:text-4xl font-bold',\n    3: 'text-xl sm:text-2xl lg:text-3xl font-semibold',\n    4: 'text-lg sm:text-xl font-semibold',\n    5: 'text-base sm:text-lg font-medium',\n    6: 'text-sm sm:text-base font-medium'\n  };\n\n  const marginClasses = {\n    1: 'mb-3 sm:mb-4',\n    2: 'mb-2 sm:mb-3',\n    3: 'mb-2 sm:mb-3',\n    4: 'mb-1 sm:mb-2',\n    5: 'mb-1 sm:mb-2',\n    6: 'mb-1 sm:mb-2'\n  };\n\n  const alignClasses = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n    justify: 'text-justify'\n  };\n\n  const margin = hasMargin ? marginClasses[level] : '';\n  const alignment = align ? alignClasses[align] : '';\n\n  return createElement(\n    `h${level}`,\n    {\n      className: `text-foreground ${levelClasses[level]} ${margin} ${alignment} ${className}`\n    },\n    children\n  );\n}\n\nHeading.displayName = 'Heading';\n\nexport default Heading;\n"],"names":[],"mappings":";AA0BA,SAAS,QAAQ,EAAE,UAAU,QAAQ,GAAG,OAAO,YAAY,IAAI,YAAY,SAAiC;AAC1G,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAGL,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAGL,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAGX,QAAM,SAAS,YAAY,cAAc,KAAK,IAAI;AAClD,QAAM,YAAY,QAAQ,aAAa,KAAK,IAAI;AAEhD,SAAO;AAAA,IACL,IAAI,KAAK;AAAA,IACT;AAAA,MACE,WAAW,mBAAmB,aAAa,KAAK,CAAC,IAAI,MAAM,IAAI,SAAS,IAAI,SAAS;AAAA,IAAA;AAAA,IAEvF;AAAA,EAAA;AAEJ;AAEA,QAAQ,cAAc;"}

package/dist/components/typography/heading/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './heading';
+export type { HeadingProps } from './heading';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/typography/heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/heading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/typography/link/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './link';
+export type { LinkProps } from './link';
+//# sourceMappingURL=index.d.ts.map