@oztix/roadie-components 1.0.0 → 1.1.0

package/dist/Button.js

@@ -1,3 +1,2 @@
-export { a as Button } from './_chunks/chunk-VDMZIGT2.js';
-//# sourceMappingURL=out.js.map
+export{a as Button}from'./_chunks/chunk-VDMZIGT2.js';//# sourceMappingURL=Button.js.map
 //# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Button.js"}

package/dist/Code.js

@@ -1,3 +1,2 @@
-export { a as Code } from './_chunks/chunk-P5L5LN6E.js';
-//# sourceMappingURL=out.js.map
+export{a as Code}from'./_chunks/chunk-P5L5LN6E.js';//# sourceMappingURL=Code.js.map
 //# sourceMappingURL=Code.js.map

package/dist/Code.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Code.js"}

package/dist/Heading.js

@@ -1,3 +1,2 @@
-export { a as Heading } from './_chunks/chunk-6FIUWNC7.js';
-//# sourceMappingURL=out.js.map
+export{a as Heading}from'./_chunks/chunk-6FIUWNC7.js';//# sourceMappingURL=Heading.js.map
 //# sourceMappingURL=Heading.js.map

package/dist/Heading.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Heading.js"}

package/dist/Text.js

@@ -1,3 +1,2 @@
-export { a as Text } from './_chunks/chunk-GSK3G4DW.js';
-//# sourceMappingURL=out.js.map
+export{a as Text}from'./_chunks/chunk-GSK3G4DW.js';//# sourceMappingURL=Text.js.map
 //# sourceMappingURL=Text.js.map

package/dist/Text.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Text.js"}

package/dist/View.js

@@ -1,3 +1,2 @@
-export { a as View } from './_chunks/chunk-RJEJUZ3O.js';
-//# sourceMappingURL=out.js.map
+export{a as View}from'./_chunks/chunk-RJEJUZ3O.js';//# sourceMappingURL=View.js.map
 //# sourceMappingURL=View.js.map

package/dist/View.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"View.js"}

package/dist/_chunks/chunk-6FIUWNC7.js

@@ -1,9 +1,2 @@
-import { ark } from '@ark-ui/react/factory';
-import { styled } from '@oztix/roadie-core/jsx';
-import { heading } from '@oztix/roadie-core/recipes';
-
-var r=styled(ark.h2,heading);r.displayName="Heading";
-
-export { r as a };
-//# sourceMappingURL=out.js.map
+import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {heading}from'@oztix/roadie-core/recipes';var r=styled(ark.h2,heading);r.displayName="Heading";export{r as a};//# sourceMappingURL=chunk-6FIUWNC7.js.map
 //# sourceMappingURL=chunk-6FIUWNC7.js.map

package/dist/_chunks/chunk-6FIUWNC7.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Heading/index.tsx"],"names":["ark","styled","heading","Heading"],"mappings":"AAEA,OAAS,OAAAA,MAAW,wBAGpB,OAA+B,UAAAC,MAAc,yBAC7C,OAAmC,WAAAC,MAAe,6BAwC3C,IAAMC,EAAUF,EACrBD,EAAI,GACJE,CACF,EAEAC,EAAQ,YAAc","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { type HTMLStyledProps, styled } from '@oztix/roadie-core/jsx'\nimport { type HeadingVariantProps, heading } from '@oztix/roadie-core/recipes'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'\ntype HeadingStyle = Extract<JsxStyleProps['textStyle'], `display.${string}`>\n\n/**\n * A heading component that uses display styles for titles and section headers\n */\nexport interface HeadingProps extends HTMLStyledProps<'h2'> {\n  /**\n   * The heading element to render\n   * @default 'h2'\n   */\n  as?: HeadingElement\n\n  /**\n   * The text style to use for the heading\n   * @default 'display.ui'\n   */\n  textStyle?: HeadingStyle\n\n  /**\n   * The color palette to use for the heading\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * Set a sepecific empahasis level for differen fonts like subtitles\n   * @default 'default'\n   */\n  emphasis?: HeadingVariantProps['emphasis']\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Heading = styled(\n  ark.h2,\n  heading\n) as React.ForwardRefExoticComponent<HeadingProps>\n\nHeading.displayName = 'Heading'\n"]}
+{"version":3,"sources":["../../src/components/Heading/index.tsx"],"names":["Heading","styled","ark","heading"],"mappings":"qIA8CO,IAAMA,EAAUC,MAAAA,CACrBC,GAAAA,CAAI,GACJC,OACF,EAEAH,EAAQ,WAAA,CAAc,SAAA","file":"chunk-6FIUWNC7.js","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { type HTMLStyledProps, styled } from '@oztix/roadie-core/jsx'\nimport { type HeadingVariantProps, heading } from '@oztix/roadie-core/recipes'\nimport type { JsxStyleProps } from '@oztix/roadie-core/types'\n\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'\ntype HeadingStyle = Extract<JsxStyleProps['textStyle'], `display.${string}`>\n\n/**\n * A heading component that uses display styles for titles and section headers\n */\nexport interface HeadingProps extends HTMLStyledProps<'h2'> {\n  /**\n   * The heading element to render\n   * @default 'h2'\n   */\n  as?: HeadingElement\n\n  /**\n   * The text style to use for the heading\n   * @default 'display.ui'\n   */\n  textStyle?: HeadingStyle\n\n  /**\n   * The color palette to use for the heading\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * Set a sepecific empahasis level for differen fonts like subtitles\n   * @default 'default'\n   */\n  emphasis?: HeadingVariantProps['emphasis']\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Heading = styled(\n  ark.h2,\n  heading\n) as React.ForwardRefExoticComponent<HeadingProps>\n\nHeading.displayName = 'Heading'\n"]}

package/dist/_chunks/chunk-GSK3G4DW.js

@@ -1,9 +1,2 @@
-import { ark } from '@ark-ui/react/factory';
-import { styled } from '@oztix/roadie-core/jsx';
-import { text } from '@oztix/roadie-core/recipes';
-
-var r=styled(ark.span,text);r.displayName="Text";
-
-export { r as a };
-//# sourceMappingURL=out.js.map
+import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {text}from'@oztix/roadie-core/recipes';var r=styled(ark.span,text);r.displayName="Text";export{r as a};//# sourceMappingURL=chunk-GSK3G4DW.js.map
 //# sourceMappingURL=chunk-GSK3G4DW.js.map

package/dist/_chunks/chunk-GSK3G4DW.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Text/index.tsx"],"names":["ark","styled","text","Text"],"mappings":"AAEA,OAAS,OAAAA,MAAW,wBAGpB,OAAS,UAAAC,MAAc,yBAEvB,OAAgC,QAAAC,MAAY,6BAyCrC,IAAMC,EAAOF,EAClBD,EAAI,KACJE,CACF,EAEAC,EAAK,YAAc","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { type TextVariantProps, text } from '@oztix/roadie-core/recipes'\n\n/**\n * Text component for displaying content with various styling options\n */\nexport interface TextProps extends HTMLStyledProps<'span'> {\n  /**\n   * The visual emphasis of the text\n   * @default 'default'\n   */\n  emphasis?: TextVariantProps['emphasis']\n\n  /**\n   * Whether the text is interactive\n   * @default false\n   */\n  interactive?: TextVariantProps['interactive']\n\n  /**\n   * The HTML element to render the text as\n   * @default 'span'\n   */\n  as?: HTMLStyledProps<'span'>['as']\n\n  /**\n   * The color palette to use for the text\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * When true, the component will pass props to its child component\n   */\n  asChild?: boolean\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Text = styled(\n  ark.span,\n  text\n) as React.ForwardRefExoticComponent<TextProps>\n\nText.displayName = 'Text'\n"]}
+{"version":3,"sources":["../../src/components/Text/index.tsx"],"names":["Text","styled","ark","text"],"mappings":"kIAgDO,IAAMA,EAAOC,MAAAA,CAClBC,GAAAA,CAAI,KACJC,IACF,EAEAH,EAAK,WAAA,CAAc,MAAA","file":"chunk-GSK3G4DW.js","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { type TextVariantProps, text } from '@oztix/roadie-core/recipes'\n\n/**\n * Text component for displaying content with various styling options\n */\nexport interface TextProps extends HTMLStyledProps<'span'> {\n  /**\n   * The visual emphasis of the text\n   * @default 'default'\n   */\n  emphasis?: TextVariantProps['emphasis']\n\n  /**\n   * Whether the text is interactive\n   * @default false\n   */\n  interactive?: TextVariantProps['interactive']\n\n  /**\n   * The HTML element to render the text as\n   * @default 'span'\n   */\n  as?: HTMLStyledProps<'span'>['as']\n\n  /**\n   * The color palette to use for the text\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * When true, the component will pass props to its child component\n   */\n  asChild?: boolean\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Text = styled(\n  ark.span,\n  text\n) as React.ForwardRefExoticComponent<TextProps>\n\nText.displayName = 'Text'\n"]}

package/dist/_chunks/chunk-P5L5LN6E.js

@@ -1,9 +1,2 @@
-import { ark } from '@ark-ui/react/factory';
-import { styled } from '@oztix/roadie-core/jsx';
-import { code } from '@oztix/roadie-core/recipes';
-
-var t=styled(ark.code,code);t.displayName="Code";
-
-export { t as a };
-//# sourceMappingURL=out.js.map
+import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {code}from'@oztix/roadie-core/recipes';var t=styled(ark.code,code);t.displayName="Code";export{t as a};//# sourceMappingURL=chunk-P5L5LN6E.js.map
 //# sourceMappingURL=chunk-P5L5LN6E.js.map

package/dist/_chunks/chunk-P5L5LN6E.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Code/index.tsx"],"names":["ark","styled","code","Code"],"mappings":"AAEA,OAAS,OAAAA,MAAW,wBAGpB,OAAS,UAAAC,MAAc,yBAEvB,OAAgC,QAAAC,MAAY,6BAwBrC,IAAMC,EAAOF,EAClBD,EAAI,KACJE,CACF,EAEAC,EAAK,YAAc","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { type CodeVariantProps, code } from '@oztix/roadie-core/recipes'\n\n/**\n * A code component that inherits from Text and renders as a code element\n */\nexport interface CodeProps extends HTMLStyledProps<'code'> {\n  /**\n   * The appearance of the code block\n   * @default 'default'\n   */\n  emphasis?: CodeVariantProps['emphasis']\n\n  /**\n   * The color palette to use for the code\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Code = styled(\n  ark.code,\n  code\n) as React.ForwardRefExoticComponent<CodeProps>\n\nCode.displayName = 'Code'\n"]}
+{"version":3,"sources":["../../src/components/Code/index.tsx"],"names":["Code","styled","ark","code"],"mappings":"kIA+BO,IAAMA,EAAOC,MAAAA,CAClBC,GAAAA,CAAI,KACJC,IACF,EAEAH,EAAK,WAAA,CAAc,MAAA","file":"chunk-P5L5LN6E.js","sourcesContent":["import type { ReactNode } from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { type CodeVariantProps, code } from '@oztix/roadie-core/recipes'\n\n/**\n * A code component that inherits from Text and renders as a code element\n */\nexport interface CodeProps extends HTMLStyledProps<'code'> {\n  /**\n   * The appearance of the code block\n   * @default 'default'\n   */\n  emphasis?: CodeVariantProps['emphasis']\n\n  /**\n   * The color palette to use for the code\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * The content to display\n   */\n  children?: ReactNode\n}\n\nexport const Code = styled(\n  ark.code,\n  code\n) as React.ForwardRefExoticComponent<CodeProps>\n\nCode.displayName = 'Code'\n"]}

package/dist/_chunks/chunk-RJEJUZ3O.js

@@ -1,7 +1,2 @@
-import { View } from '@oztix/roadie-core/jsx';
-
-var t=View;t.displayName="View";
-
-export { t as a };
-//# sourceMappingURL=out.js.map
+import {View}from'@oztix/roadie-core/jsx';var t=View;t.displayName="View";export{t as a};//# sourceMappingURL=chunk-RJEJUZ3O.js.map
 //# sourceMappingURL=chunk-RJEJUZ3O.js.map

package/dist/_chunks/chunk-RJEJUZ3O.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/View/index.tsx"],"names":["ViewPattern","View"],"mappings":"AAAA,OAAS,QAAQA,MAAmB,yBAO7B,IAAMC,EAAOD,EAIpBC,EAAK,YAAc","sourcesContent":["import { View as ViewPattern } from '@oztix/roadie-core/jsx'\n\n/**\n * A foundational layout component that provides a flexible container with sensible defaults.\n * Based on the Panda CSS Box pattern but with better defaults for application UI layout.\n *\n */\nexport const View = ViewPattern\n\nexport type ViewProps = React.ComponentProps<typeof ViewPattern>\n\nView.displayName = 'View'\n"]}
+{"version":3,"sources":["../../src/components/View/index.tsx"],"names":["View","ViewPattern"],"mappings":"8CAOaA,CAAAA,CAAOC,KAIpBD,EAAK,WAAA,CAAc,MAAA","file":"chunk-RJEJUZ3O.js","sourcesContent":["import { View as ViewPattern } from '@oztix/roadie-core/jsx'\n\n/**\n * A foundational layout component that provides a flexible container with sensible defaults.\n * Based on the Panda CSS Box pattern but with better defaults for application UI layout.\n *\n */\nexport const View = ViewPattern\n\nexport type ViewProps = React.ComponentProps<typeof ViewPattern>\n\nView.displayName = 'View'\n"]}

package/dist/_chunks/chunk-VDMZIGT2.js

@@ -1,10 +1,2 @@
-import 'react';
-import { ark } from '@ark-ui/react/factory';
-import { styled } from '@oztix/roadie-core/jsx';
-import { button } from '@oztix/roadie-core/recipes';
-
-var r=styled(ark.button,button);r.displayName="Button";
-
-export { r as a };
-//# sourceMappingURL=out.js.map
+import'react';import {ark}from'@ark-ui/react/factory';import {styled}from'@oztix/roadie-core/jsx';import {button}from'@oztix/roadie-core/recipes';var r=styled(ark.button,button);r.displayName="Button";export{r as a};//# sourceMappingURL=chunk-VDMZIGT2.js.map
 //# sourceMappingURL=chunk-VDMZIGT2.js.map

package/dist/_chunks/chunk-VDMZIGT2.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Button/index.tsx"],"names":["ark","styled","button","Button"],"mappings":"AAAA,MAAkB,QAElB,OAAS,OAAAA,MAAW,wBAGpB,OAAS,UAAAC,MAAc,yBAEvB,OAAkC,UAAAC,MAAc,6BAmCzC,IAAMC,EAASF,EACpBD,EAAI,OACJE,CACF,EAEAC,EAAO,YAAc","sourcesContent":["import React from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { type ButtonVariantProps, button } from '@oztix/roadie-core/recipes'\n\n/**\n * A button component with various emphasis levels and sizes\n */\nexport interface ButtonProps extends HTMLStyledProps<'button'> {\n  /**\n   * The visual emphasis of the button\n   * @default 'default'\n   */\n  emphasis?: ButtonVariantProps['emphasis']\n\n  /**\n   * The size of the button\n   * @default 'md'\n   */\n  size?: ButtonVariantProps['size']\n\n  /**\n   * The color palette to use for the button\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * When true, the component will pass props to its child component\n   */\n  asChild?: boolean\n\n  /**\n   * The content to display\n   */\n  children?: React.ReactNode\n}\n\nexport const Button = styled(\n  ark.button,\n  button\n) as React.ForwardRefExoticComponent<ButtonProps>\n\nButton.displayName = 'Button'\n"]}
+{"version":3,"sources":["../../src/components/Button/index.tsx"],"names":["Button","styled","ark","button"],"mappings":"sJA0CaA,CAAAA,CAASC,MAAAA,CACpBC,IAAI,MAAA,CACJC,MACF,EAEAH,CAAAA,CAAO,WAAA,CAAc,QAAA","file":"chunk-VDMZIGT2.js","sourcesContent":["import React from 'react'\n\nimport { ark } from '@ark-ui/react/factory'\n\nimport type { ColorPalette } from '@oztix/roadie-core'\nimport { styled } from '@oztix/roadie-core/jsx'\nimport type { HTMLStyledProps } from '@oztix/roadie-core/jsx'\nimport { type ButtonVariantProps, button } from '@oztix/roadie-core/recipes'\n\n/**\n * A button component with various emphasis levels and sizes\n */\nexport interface ButtonProps extends HTMLStyledProps<'button'> {\n  /**\n   * The visual emphasis of the button\n   * @default 'default'\n   */\n  emphasis?: ButtonVariantProps['emphasis']\n\n  /**\n   * The size of the button\n   * @default 'md'\n   */\n  size?: ButtonVariantProps['size']\n\n  /**\n   * The color palette to use for the button\n   * @default 'neutral'\n   */\n  colorPalette?: ColorPalette\n\n  /**\n   * When true, the component will pass props to its child component\n   */\n  asChild?: boolean\n\n  /**\n   * The content to display\n   */\n  children?: React.ReactNode\n}\n\nexport const Button = styled(\n  ark.button,\n  button\n) as React.ForwardRefExoticComponent<ButtonProps>\n\nButton.displayName = 'Button'\n"]}

package/dist/hooks/index.d.ts

@@ -0,0 +1,27 @@
+import { ColorMode } from '@oztix/roadie-core';
+
+/**
+ * React hook that subscribes to color mode changes.
+ * Listens to both localStorage changes and custom colormodechange events.
+ *
+ * @returns The current color mode ('light' or 'dark')
+ *
+ * @example
+ * ```tsx
+ * import { useColorMode } from '@oztix/roadie-components'
+ * import { toggleColorMode } from '@oztix/roadie-core'
+ *
+ * function ColorModeToggle() {
+ *   const colorMode = useColorMode()
+ *
+ *   return (
+ *     <button onClick={() => toggleColorMode()}>
+ *       Current mode: {colorMode}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+declare function useColorMode(): ColorMode;
+
+export { useColorMode };

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+import {useSyncExternalStore}from'react';import {subscribeToColorMode,getColorMode}from'@oztix/roadie-core';function d(){return useSyncExternalStore(subscribeToColorMode,getColorMode,()=>"light")}export{d as useColorMode};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useColorMode.ts"],"names":["useColorMode","useSyncExternalStore","subscribeToColorMode","getColorMode"],"mappings":"4GA8BO,SAASA,CAAAA,EAA0B,CACxC,OAAOC,oBAAAA,CACLC,qBACAC,YAAAA,CACA,IAAM,OACR,CACF","file":"index.js","sourcesContent":["import { useSyncExternalStore } from 'react'\n\nimport {\n  type ColorMode,\n  getColorMode,\n  subscribeToColorMode\n} from '@oztix/roadie-core'\n\n/**\n * React hook that subscribes to color mode changes.\n * Listens to both localStorage changes and custom colormodechange events.\n *\n * @returns The current color mode ('light' or 'dark')\n *\n * @example\n * ```tsx\n * import { useColorMode } from '@oztix/roadie-components'\n * import { toggleColorMode } from '@oztix/roadie-core'\n *\n * function ColorModeToggle() {\n *   const colorMode = useColorMode()\n *\n *   return (\n *     <button onClick={() => toggleColorMode()}>\n *       Current mode: {colorMode}\n *     </button>\n *   )\n * }\n * ```\n */\nexport function useColorMode(): ColorMode {\n  return useSyncExternalStore(\n    subscribeToColorMode,\n    getColorMode,\n    () => 'light' // Server snapshot\n  )\n}\n"]}

package/dist/index.js

@@ -1,7 +1,2 @@
-export { a as Button } from './_chunks/chunk-VDMZIGT2.js';
-export { a as Code } from './_chunks/chunk-P5L5LN6E.js';
-export { a as Heading } from './_chunks/chunk-6FIUWNC7.js';
-export { a as Text } from './_chunks/chunk-GSK3G4DW.js';
-export { a as View } from './_chunks/chunk-RJEJUZ3O.js';
-//# sourceMappingURL=out.js.map
+export{a as Button}from'./_chunks/chunk-VDMZIGT2.js';export{a as Code}from'./_chunks/chunk-P5L5LN6E.js';export{a as Heading}from'./_chunks/chunk-6FIUWNC7.js';export{a as Text}from'./_chunks/chunk-GSK3G4DW.js';export{a as View}from'./_chunks/chunk-RJEJUZ3O.js';//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@oztix/roadie-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "The components for Roadie Design System at Oztix",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TicketSolutionsPtyLtd/roadie"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,6 +16,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js",
+      "require": "./dist/hooks/index.js"
+    },
     "./src/*": {
       "types": "./src/*",
       "import": "./src/*"
@@ -31,23 +40,22 @@
   },
   "dependencies": {
     "@ark-ui/react": "5.26.2",
-    "@oztix/roadie-core": "1.0.0"
+    "@oztix/roadie-core": "1.1.0"
   },
   "devDependencies": {
     "@pandacss/dev": "1.4.3",
-    "@testing-library/jest-dom": "6.1.6",
-    "@testing-library/react": "15.0.0",
-    "@testing-library/user-event": "14.5.1",
-    "@types/node": "22.10.2",
-    "@types/react": "19.0.2",
-    "@types/react-dom": "19.0.2",
-    "@vitejs/plugin-react": "4.3.4",
-    "@vitest/coverage-v8": "1.6.0",
-    "@vitest/ui": "1.6.0",
-    "jsdom": "24.1.3",
-    "tsup": "8.0.0",
-    "typescript": "5.7.2",
-    "vitest": "1.6.0"
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "24.9.2",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "5.1.0",
+    "@vitest/coverage-v8": "4.0.4",
+    "@vitest/ui": "4.0.4",
+    "jsdom": "27.0.1",
+    "tsup": "8.5.0",
+    "vitest": "4.0.4"
   },
   "author": {
     "name": "Luke Brooker",
@@ -68,15 +76,14 @@
     "build": "tsup",
     "clean": "rm -rf node_modules dist",
     "dev": "tsup --watch",
-    "pretest": "panda codegen",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
     "format": "prettier --ignore-path ../../.prettierignore --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "format:check": "prettier --ignore-path ../../.prettierignore --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "lint": "eslint --ignore-path ../../.eslintignore . --ext .ts,.tsx",
-    "lint:fix": "eslint --ignore-path ../../.eslintignore . --ext .ts,.tsx --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useColorMode'

package/src/hooks/useColorMode.ts

@@ -0,0 +1,37 @@
+import { useSyncExternalStore } from 'react'
+
+import {
+  type ColorMode,
+  getColorMode,
+  subscribeToColorMode
+} from '@oztix/roadie-core'
+
+/**
+ * React hook that subscribes to color mode changes.
+ * Listens to both localStorage changes and custom colormodechange events.
+ *
+ * @returns The current color mode ('light' or 'dark')
+ *
+ * @example
+ * ```tsx
+ * import { useColorMode } from '@oztix/roadie-components'
+ * import { toggleColorMode } from '@oztix/roadie-core'
+ *
+ * function ColorModeToggle() {
+ *   const colorMode = useColorMode()
+ *
+ *   return (
+ *     <button onClick={() => toggleColorMode()}>
+ *       Current mode: {colorMode}
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export function useColorMode(): ColorMode {
+  return useSyncExternalStore(
+    subscribeToColorMode,
+    getColorMode,
+    () => 'light' // Server snapshot
+  )
+}