@oztix/roadie-components 2.0.2 → 2.1.1

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/providers/ThemeProvider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport {\n  generateAccentScale,\n  generateNeutralScale,\n  getOklchChroma,\n  getOklchHue\n} from '@oztix/roadie-core/colors'\n\nexport { getThemeScript } from '@oztix/roadie-core/theme'\n\nconst DEFAULT_ACCENT = '#0091EB' // Oztix Blue\nconst THEME_STORAGE_KEY = 'theme'\n\nconst supportsOklch =\n  typeof CSS !== 'undefined' &&\n  typeof CSS.supports === 'function' &&\n  CSS.supports('color', 'oklch(0 0 0)')\n\n// ---------------------------------------------------------------------------\n// Theme context (accent color + dark mode)\n// ---------------------------------------------------------------------------\n\ninterface ThemeContextType {\n  accentColor: string\n  setAccentColor: (color: string) => void\n  isDark: boolean\n  setDark: (dark: boolean) => void\n}\n\nconst ThemeContext = React.createContext<ThemeContextType | undefined>(\n  undefined\n)\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode\n  defaultAccentColor?: string\n  /** Initial dark mode state when no stored preference exists (default: false) */\n  defaultDark?: boolean\n  /** Respect prefers-color-scheme when no explicit user choice is stored (default: false) */\n  followSystem?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// SSR helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Generate a <style> tag string for server-side rendering.\n * Sets --accent-hue and --accent-chroma for CSS-native theming,\n * plus hex fallbacks for older browsers.\n */\nexport async function getAccentStyleTag(\n  accentHex: string,\n  id = 'roadie-accent-theme'\n): Promise<string> {\n  const result = await generateAccentScale(accentHex)\n  const neutral = await generateNeutralScale(accentHex)\n  const hue = Math.round(await getOklchHue(accentHex))\n  const chroma = +(await getOklchChroma(accentHex)).toFixed(4)\n\n  // Hex fallbacks for accent (non-oklch browsers)\n  const accentVars = result.light\n    .map((hex, i) => `--color-accent-${i}: ${hex};`)\n    .join('\\n    ')\n  const darkAccentVars = result.dark\n    .map((hex, i) => `--color-accent-${i}: ${hex};`)\n    .join('\\n    ')\n  // Hex fallbacks for neutral (non-oklch browsers)\n  const neutralVars = neutral.light\n    .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n    .join('\\n    ')\n  const darkNeutralVars = neutral.dark\n    .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n    .join('\\n    ')\n\n  const safeId = id.replace(/[<>\"&]/g, '')\n  return `<style id=\"${safeId}\">\n  :root {\n    --accent-hue: ${hue};\n    --accent-chroma: ${chroma};\n    ${neutralVars}\n    ${accentVars}\n  }\n  .dark {\n    ${darkNeutralVars}\n    ${darkAccentVars}\n  }\n</style>`\n}\n\n// ---------------------------------------------------------------------------\n// Dark mode helpers\n// ---------------------------------------------------------------------------\n\nfunction applyDark(dark: boolean) {\n  document.documentElement.classList.toggle('dark', dark)\n  document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(): string | null {\n  try {\n    return localStorage.getItem(THEME_STORAGE_KEY)\n  } catch {\n    return null\n  }\n}\n\nfunction storeTheme(dark: boolean) {\n  try {\n    localStorage.setItem(THEME_STORAGE_KEY, dark ? 'dark' : 'light')\n  } catch {\n    // localStorage unavailable\n  }\n}\n\n// ---------------------------------------------------------------------------\n// ThemeProvider\n// ---------------------------------------------------------------------------\n\nexport function ThemeProvider({\n  children,\n  defaultAccentColor = DEFAULT_ACCENT,\n  defaultDark = false,\n  followSystem = false\n}: ThemeProviderProps) {\n  const [accentColor, setAccentColor] = React.useState(defaultAccentColor)\n\n  // Initialise dark mode from prop — inline script may have already set .dark\n  const [isDark, setIsDarkState] = React.useState(defaultDark)\n\n  // Sync with DOM on mount\n  React.useEffect(() => {\n    const stored = getStoredTheme()\n    if (stored) {\n      setIsDarkState(stored === 'dark')\n      return\n    }\n\n    // No stored preference — check OS preference or DOM state\n    if (followSystem) {\n      const prefersDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches\n      setIsDarkState(prefersDark)\n      applyDark(prefersDark)\n    } else {\n      const domDark = document.documentElement.classList.contains('dark')\n      setIsDarkState(domDark)\n    }\n  }, []) // mount-only: followSystem/defaultDark are expected to be static\n\n  // Listen for OS preference changes when followSystem is true\n  React.useEffect(() => {\n    if (!followSystem) return\n\n    const mq = window.matchMedia('(prefers-color-scheme: dark)')\n    const handler = (e: MediaQueryListEvent) => {\n      // Only follow system if user hasn't explicitly chosen\n      if (getStoredTheme()) return\n      setIsDarkState(e.matches)\n      applyDark(e.matches)\n    }\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [followSystem])\n\n  // Explicit toggle — persists to localStorage and applies to DOM\n  const setDark = React.useCallback((dark: boolean) => {\n    setIsDarkState(dark)\n    applyDark(dark)\n    storeTheme(dark)\n  }, [])\n\n  // Accent color effect — skip if SSR already injected matching values\n  React.useEffect(() => {\n    let cancelled = false\n\n    async function updateAccent() {\n      const hue = Math.round(await getOklchHue(accentColor))\n      const chroma = +(await getOklchChroma(accentColor)).toFixed(4)\n\n      if (cancelled) return\n\n      // Skip regeneration if existing style tag already has matching values\n      const existing = document.getElementById('roadie-accent-theme')\n      if (existing?.textContent?.includes(`--accent-hue: ${hue}`)) {\n        return\n      }\n\n      let css: string\n\n      if (supportsOklch) {\n        css = `\n          :root {\n            --accent-hue: ${hue};\n            --accent-chroma: ${chroma};\n          }\n        `\n      } else {\n        const result = await generateAccentScale(accentColor)\n        const neutral = await generateNeutralScale(accentColor)\n\n        if (cancelled) return\n\n        const accentVars = result.light\n          .map((hex, i) => `--color-accent-${i}: ${hex};`)\n          .join('\\n')\n        const darkAccentVars = result.dark\n          .map((hex, i) => `--color-accent-${i}: ${hex};`)\n          .join('\\n')\n        const neutralVars = neutral.light\n          .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n          .join('\\n')\n        const darkNeutralVars = neutral.dark\n          .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n          .join('\\n')\n\n        css = `\n          :root {\n            ${neutralVars}\n            ${accentVars}\n          }\n          .dark {\n            ${darkNeutralVars}\n            ${darkAccentVars}\n          }\n        `\n      }\n\n      let style = document.getElementById('roadie-accent-theme')\n      if (!style) {\n        style = document.createElement('style')\n        style.id = 'roadie-accent-theme'\n        document.head.appendChild(style)\n      }\n      style.textContent = css\n    }\n\n    updateAccent()\n    return () => {\n      cancelled = true\n    }\n  }, [accentColor])\n\n  const value = React.useMemo(\n    () => ({ accentColor, setAccentColor, isDark, setDark }),\n    [accentColor, isDark, setDark]\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\n// ---------------------------------------------------------------------------\n// Hooks\n// ---------------------------------------------------------------------------\n\nexport function useTheme() {\n  const context = React.useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/providers/ThemeProvider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport {\n  generateAccentScale,\n  generateNeutralScale,\n  getOklchChroma,\n  getOklchHue\n} from '@oztix/roadie-core/colors'\n\nexport { getThemeScript } from '@oztix/roadie-core/theme'\n\nconst DEFAULT_ACCENT = '#0091EB' // Oztix Blue\nconst THEME_STORAGE_KEY = 'theme'\n\nconst supportsOklch =\n  typeof CSS !== 'undefined' &&\n  typeof CSS.supports === 'function' &&\n  CSS.supports('color', 'oklch(0 0 0)')\n\n// ---------------------------------------------------------------------------\n// Theme context (accent color + dark mode)\n// ---------------------------------------------------------------------------\n\ninterface ThemeContextType {\n  accentColor: string\n  setAccentColor: (color: string) => void\n  isDark: boolean\n  setDark: (dark: boolean) => void\n}\n\nconst ThemeContext = React.createContext<ThemeContextType | undefined>(\n  undefined\n)\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode\n  defaultAccentColor?: string\n  /** Initial dark mode state when no stored preference exists (default: false) */\n  defaultDark?: boolean\n  /** Respect prefers-color-scheme when no explicit user choice is stored (default: false) */\n  followSystem?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// SSR helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Generate a <style> tag string for server-side rendering.\n * Sets --accent-hue and --accent-chroma for CSS-native theming,\n * plus hex fallbacks for older browsers.\n */\nexport async function getAccentStyleTag(\n  accentHex: string,\n  id = 'roadie-accent-theme'\n): Promise<string> {\n  const result = await generateAccentScale(accentHex)\n  const neutral = await generateNeutralScale(accentHex)\n  const hue = Math.round(await getOklchHue(accentHex))\n  const chroma = +(await getOklchChroma(accentHex)).toFixed(4)\n\n  // Hex fallbacks for accent (non-oklch browsers)\n  const accentVars = result.light\n    .map((hex, i) => `--color-accent-${i}: ${hex};`)\n    .join('\\n    ')\n  const darkAccentVars = result.dark\n    .map((hex, i) => `--color-accent-${i}: ${hex};`)\n    .join('\\n    ')\n  // Hex fallbacks for neutral (non-oklch browsers)\n  const neutralVars = neutral.light\n    .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n    .join('\\n    ')\n  const darkNeutralVars = neutral.dark\n    .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n    .join('\\n    ')\n\n  const safeId = id.replace(/[<>\"&]/g, '')\n  return `<style id=\"${safeId}\">\n  :root {\n    --accent-hue: ${hue};\n    --accent-chroma: ${chroma};\n    ${neutralVars}\n    ${accentVars}\n  }\n  .dark {\n    ${darkNeutralVars}\n    ${darkAccentVars}\n  }\n</style>`\n}\n\n// ---------------------------------------------------------------------------\n// Dark mode helpers\n// ---------------------------------------------------------------------------\n\nfunction applyDark(dark: boolean) {\n  document.documentElement.classList.toggle('dark', dark)\n  document.documentElement.style.colorScheme = dark ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(): string | null {\n  try {\n    return localStorage.getItem(THEME_STORAGE_KEY)\n  } catch {\n    return null\n  }\n}\n\nfunction storeTheme(dark: boolean) {\n  try {\n    localStorage.setItem(THEME_STORAGE_KEY, dark ? 'dark' : 'light')\n  } catch {\n    // localStorage unavailable\n  }\n}\n\n// ---------------------------------------------------------------------------\n// ThemeProvider\n// ---------------------------------------------------------------------------\n\nexport function ThemeProvider({\n  children,\n  defaultAccentColor = DEFAULT_ACCENT,\n  defaultDark = false,\n  followSystem = false\n}: ThemeProviderProps) {\n  const [accentColor, setAccentColor] = React.useState(defaultAccentColor)\n\n  // Initialise dark mode from prop — inline script may have already set .dark\n  const [isDark, setIsDarkState] = React.useState(defaultDark)\n\n  // Sync with DOM on mount\n  React.useEffect(() => {\n    const stored = getStoredTheme()\n    if (stored) {\n      setIsDarkState(stored === 'dark')\n      return\n    }\n\n    // No stored preference — check OS preference or DOM state\n    if (followSystem) {\n      const prefersDark = window.matchMedia(\n        '(prefers-color-scheme: dark)'\n      ).matches\n      setIsDarkState(prefersDark)\n      applyDark(prefersDark)\n    } else {\n      const domDark = document.documentElement.classList.contains('dark')\n      setIsDarkState(domDark)\n    }\n  }, []) // mount-only: followSystem/defaultDark are expected to be static\n\n  // Listen for OS preference changes when followSystem is true\n  React.useEffect(() => {\n    if (!followSystem) return\n\n    const mq = window.matchMedia('(prefers-color-scheme: dark)')\n    const handler = (e: MediaQueryListEvent) => {\n      // Only follow system if user hasn't explicitly chosen\n      if (getStoredTheme()) return\n      setIsDarkState(e.matches)\n      applyDark(e.matches)\n    }\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [followSystem])\n\n  // Explicit toggle — persists to localStorage and applies to DOM\n  const setDark = React.useCallback((dark: boolean) => {\n    setIsDarkState(dark)\n    applyDark(dark)\n    storeTheme(dark)\n  }, [])\n\n  // Accent color effect — skip if SSR already injected matching values\n  React.useEffect(() => {\n    let cancelled = false\n\n    async function updateAccent() {\n      const hue = Math.round(await getOklchHue(accentColor))\n      const chroma = +(await getOklchChroma(accentColor)).toFixed(4)\n\n      if (cancelled) return\n\n      // Skip regeneration if existing style tag already has matching values\n      const existing = document.getElementById('roadie-accent-theme')\n      if (existing?.textContent?.includes(`--accent-hue: ${hue}`)) {\n        return\n      }\n\n      let css: string\n\n      if (supportsOklch) {\n        css = `\n          :root {\n            --accent-hue: ${hue};\n            --accent-chroma: ${chroma};\n          }\n        `\n      } else {\n        const result = await generateAccentScale(accentColor)\n        const neutral = await generateNeutralScale(accentColor)\n\n        if (cancelled) return\n\n        const accentVars = result.light\n          .map((hex, i) => `--color-accent-${i}: ${hex};`)\n          .join('\\n')\n        const darkAccentVars = result.dark\n          .map((hex, i) => `--color-accent-${i}: ${hex};`)\n          .join('\\n')\n        const neutralVars = neutral.light\n          .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n          .join('\\n')\n        const darkNeutralVars = neutral.dark\n          .map((hex, i) => `--color-neutral-${i}: ${hex};`)\n          .join('\\n')\n\n        css = `\n          :root {\n            ${neutralVars}\n            ${accentVars}\n          }\n          .dark {\n            ${darkNeutralVars}\n            ${darkAccentVars}\n          }\n        `\n      }\n\n      let style = document.getElementById('roadie-accent-theme')\n      if (!style) {\n        style = document.createElement('style')\n        style.id = 'roadie-accent-theme'\n        document.head.appendChild(style)\n      }\n      style.textContent = css\n    }\n\n    updateAccent()\n    return () => {\n      cancelled = true\n    }\n  }, [accentColor])\n\n  const value = React.useMemo(\n    () => ({ accentColor, setAccentColor, isDark, setDark }),\n    [accentColor, isDark, setDark]\n  )\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n}\n\n// ---------------------------------------------------------------------------\n// Hooks\n// ---------------------------------------------------------------------------\n\nexport function useTheme() {\n  const context = React.useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oztix/roadie-components",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "React components for the Roadie Design System",
   "type": "module",
   "repository": {
@@ -30,21 +30,24 @@
   "peerDependencies": {
     "@ark-ui/react": "^5.0.0",
     "@base-ui/react": "^1.0.0",
-    "class-variance-authority": "^0.7.1",
     "@phosphor-icons/react": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "embla-carousel": "9.0.0-rc02",
+    "embla-carousel-autoplay": "9.0.0-rc02",
+    "embla-carousel-react": "9.0.0-rc02",
     "@oztix/roadie-core": "2.0.1"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.2",
     "@ark-ui/react": "5.35.0",
     "@base-ui/react": "1.3.0",
-    "class-variance-authority": "0.7.1",
     "@phosphor-icons/react": "2.1.10",
     "@size-limit/preset-small-lib": "12.0.1",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -54,6 +57,7 @@
     "@vitejs/plugin-react": "5.1.0",
     "@vitest/coverage-v8": "4.0.4",
     "@vitest/ui": "4.0.4",
+    "class-variance-authority": "0.7.1",
     "jsdom": "27.0.1",
     "size-limit": "12.0.1",
     "svgo": "4.0.0",
@@ -65,6 +69,22 @@
     "email": "mail@lukebrooker.com"
   },
   "license": "ISC",
+  "size-limit": [
+    {
+      "name": "Carousel",
+      "path": "dist/Carousel.js",
+      "limit": "5 KB",
+      "ignore": [
+        "react",
+        "react-dom",
+        "@oztix/roadie-core",
+        "@phosphor-icons/react",
+        "embla-carousel",
+        "embla-carousel-react",
+        "embla-carousel-autoplay"
+      ]
+    }
+  ],
   "turbo": {
     "build": {
       "dependsOn": [

package/dist/Button-DdE0vCfo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-DdE0vCfo.js","names":[],"sources":["../src/components/Button/IconButton.tsx"],"sourcesContent":["'use client'\n\nimport { Button, type ButtonProps } from './Button'\n\nexport type IconButtonProps = Omit<ButtonProps, 'aria-label'> & {\n  'aria-label': string\n}\n\nexport function IconButton({ size = 'icon-md', ...props }: IconButtonProps) {\n  return <Button size={size} {...props} />\n}\n\nIconButton.displayName = 'IconButton'\n"],"mappings":"iFAQA,SAAgB,EAAW,CAAE,OAAO,UAAW,GAAG,GAA0B,CAC1E,OAAO,EAAC,EAAD,CAAc,OAAM,GAAI,EAAS,CAAA,CAG1C,EAAW,YAAc"}

package/dist/Button-Dt1TGgrL.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-Dt1TGgrL.d.ts","names":[],"sources":["../src/components/Button/Button.tsx"],"mappings":";;;;;;;cAWa,cAAA,GAAc,KAAA;;;;IAwBzB,iCAAA,CAAA,SAAA;AAAA,KAEU,WAAA,GAAc,MAAA,CAAgB,KAAA,GACxC,aAAA,CAAc,WAAA,IACd,YAAA,QAAoB,cAAA;AAAA,iBAEN,QAAA,CAAA;EACd,SAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBANE,QAAA;EAAA,IAAM,WAAA;AAAA"}

package/dist/index-0w-ydb3o.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-0w-ydb3o.d.ts","names":[],"sources":["../src/components/LinkButton/LinkButton.tsx","../src/components/LinkButton/LinkIconButton.tsx"],"mappings":";;;;;;KAQK,cAAA;AAAA,KAEO,eAAA,WAA0B,WAAA;EACpC,EAAA,GAAK,CAAA;EACL,MAAA,GAAS,YAAA,QAAoB,cAAA;EAC7B,QAAA,GAAW,YAAA,QAAoB,cAAA;EAC/B,IAAA,GAAO,cAAA;EACP,SAAA;AAAA,IACE,IAAA,CAAK,cAAA,CAAe,CAAA;AAAA,iBAER,UAAA,WAAqB,WAAA,OAAA,CAAA;EACnC,EAAA;EACA,SAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,eAAA,CAAgB,CAAA,IAAE,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAPL,UAAA;EAAA,IAAU,WAAA;AAAA;;;KCVrB,kBAAA;AAAA,KAEO,mBAAA,WAA8B,WAAA;EACxC,EAAA,GAAK,CAAA;EACL,YAAA;EACA,MAAA,GAAS,YAAA,QAAoB,cAAA;EAC7B,QAAA,GAAW,YAAA,QAAoB,cAAA;EAC/B,IAAA,GAAO,kBAAA;EACP,SAAA;AAAA,IACE,IAAA,CACF,cAAA,CAAe,CAAA;AAAA,iBAID,cAAA,WAAyB,WAAA,OAAA,CAAA;EACvC,EAAA;EACA,SAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,mBAAA,CAAoB,CAAA,IAAE,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAPT,cAAA;EAAA,IAAc,WAAA;AAAA"}

package/dist/index-C3_4djmE.d.ts

@@ -1,17 +0,0 @@
-import { n as ButtonProps } from "./Button-Dt1TGgrL.js";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/Button/IconButton.d.ts
-type IconButtonProps = Omit<ButtonProps, 'aria-label'> & {
-  'aria-label': string;
-};
-declare function IconButton({
-  size,
-  ...props
-}: IconButtonProps): _$react_jsx_runtime0.JSX.Element;
-declare namespace IconButton {
-  var displayName: string;
-}
-//#endregion
-export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=index-C3_4djmE.d.ts.map

package/dist/index-C3_4djmE.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-C3_4djmE.d.ts","names":[],"sources":["../src/components/Button/IconButton.tsx"],"mappings":";;;;KAIY,eAAA,GAAkB,IAAA,CAAK,WAAA;EACjC,YAAA;AAAA;AAAA,iBAGc,UAAA,CAAA;EAAa,IAAA;EAAA,GAAqB;AAAA,GAAS,eAAA,GAAe,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,kBAA1D,UAAA;EAAA,IAAU,WAAA;AAAA"}