@heliosgraphics/ui 2.0.0-alpha.99 → 2.0.1-alpha.1

package/components/Checkbox/Checkbox.types.ts

@@ -1,7 +1,7 @@
 import type { ChangeEventHandler } from "react"
 import type { HeliosColorType } from "../../types/colors"
 
-export interface BaseCheckboxProps {
+export interface CheckboxBaseProps {
 	color?: HeliosColorType
 	description?: string
 	isChecked?: boolean
@@ -14,4 +14,4 @@ export interface BaseCheckboxProps {
 	onChange?: ChangeEventHandler<HTMLInputElement>
 }
 
-export interface CheckboxProps extends BaseCheckboxProps {}
+export interface CheckboxProps extends CheckboxBaseProps {}

package/components/Layout/components/LayoutAside/index.ts

@@ -1,7 +1,7 @@
 import type { LayoutAsideComposition } from "./LayoutAside.types"
-import { LayoutAsideContent } from "./components/LayoutAsideContent/LayoutAsideContent"
-import { LayoutAsideFooter } from "./components/LayoutAsideFooter/LayoutAsideFooter"
-import { LayoutAsideToggle } from "./components/LayoutAsideToggle/LayoutAsideToggle"
+import { LayoutAsideContent } from "./components/LayoutAsideContent"
+import { LayoutAsideFooter } from "./components/LayoutAsideFooter"
+import { LayoutAsideToggle } from "./components/LayoutAsideToggle"
 import { LayoutAside as LAC } from "./LayoutAside"
 
 const LayoutAsideComponent = LAC as LayoutAsideComposition

package/components/Layout/components/LayoutMain/index.ts

@@ -1,5 +1,5 @@
 import type { LayoutMainComposition } from "./LayoutMain.types"
-import { LayoutMainContent } from "./components/LayoutMainContent/LayoutMainContent"
+import { LayoutMainContent } from "./components/LayoutMainContent"
 import { LayoutMain as SC } from "./LayoutMain"
 
 const LayoutMainComponent = SC as LayoutMainComposition

package/components/Layout/index.ts

@@ -1,7 +1,7 @@
 import type { LayoutComposition } from "./Layout.types"
 import { LayoutAside } from "./components/LayoutAside"
 import { LayoutMain } from "./components/LayoutMain"
-import { LayoutNavigation } from "./components/LayoutNavigation/LayoutNavigation"
+import { LayoutNavigation } from "./components/LayoutNavigation"
 import { LayoutSubNavigation } from "./components/LayoutSubNavigation"
 import { Layout as LC } from "./Layout"
 import type { LayoutAsideComposition } from "./components/LayoutAside/LayoutAside.types"

package/components/Markdown/Markdown.tsx

@@ -1,4 +1,4 @@
-import { renderMarkdown } from "./Markdown.utils"
+import { renderMarkdown } from "../../utils/markdown"
 import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Markdown.module.css"
 import type { FC } from "react"

package/components/Menu/index.ts

@@ -1,7 +1,7 @@
 import type { MenuComposition } from "./Menu.types"
-import { MenuCategory } from "./components/MenuCategory/MenuCategory"
-import { MenuFilter } from "./components/MenuFilter/MenuFilter"
-import { MenuItem } from "./components/MenuItem/MenuItem"
+import { MenuCategory } from "./components/MenuCategory"
+import { MenuFilter } from "./components/MenuFilter"
+import { MenuItem } from "./components/MenuItem"
 import { Menu as SC } from "./Menu"
 
 const MenuComponent = SC as MenuComposition

package/components/Radio/Radio.meta.ts

@@ -1,7 +1,7 @@
 import type { HeliosAttributeMeta } from "../../types/meta"
-import type { BaseRadioProps } from "./Radio.types"
+import type { RadioBaseProps } from "./Radio.types"
 
-export const meta: HeliosAttributeMeta<BaseRadioProps> = {
+export const meta: HeliosAttributeMeta<RadioBaseProps> = {
 	_patterns: [
 		{
 			id: "ui-radio-default",
@@ -11,7 +11,7 @@ export const meta: HeliosAttributeMeta<BaseRadioProps> = {
 	],
 	_status: "nominal",
 	_category: "core",
-	_extends: ["BaseCheckboxProps"],
+	_extends: ["CheckboxBaseProps"],
 	name: {
 		type: "string",
 	},

package/components/Radio/Radio.types.ts

@@ -1,8 +1,8 @@
-import type { BaseCheckboxProps } from "../Checkbox/Checkbox.types"
+import type { CheckboxBaseProps } from "../Checkbox/Checkbox.types"
 
-export interface BaseRadioProps {
+export interface RadioBaseProps {
 	name: string
 	value: string
 }
 
-export type RadioProps = BaseRadioProps & BaseCheckboxProps
+export type RadioProps = RadioBaseProps & CheckboxBaseProps

package/components/Segments/Segments.tsx

@@ -32,12 +32,12 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall, de
 	}, [activeValue])
 
 	useEffect(() => {
-		const timer: ReturnType<typeof setTimeout> = setTimeout(updateSliderPosition, 0)
+		const frameId: number = requestAnimationFrame(updateSliderPosition)
 
 		globalThis.addEventListener("resize", updateSliderPosition)
 
 		return (): void => {
-			globalThis.clearTimeout(timer)
+			cancelAnimationFrame(frameId)
 			globalThis.removeEventListener("resize", updateSliderPosition)
 		}
 	}, [updateSliderPosition])

package/components/Segments/components/SegmentButton/SegmentButton.tsx

@@ -4,7 +4,7 @@ import styles from "./SegmentButton.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import { Icon } from "../../../Icon"
 import { useSegments } from "../../Segments.utils"
-import { useCallback, type FC } from "react"
+import { useCallback, useEffect, type FC } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
@@ -19,6 +19,12 @@ export const SegmentButton: FC<SegmentButtonProps> = ({
 	const { activeValue, onSelect, registerRef } = useSegments()
 	const isActive: boolean = isActiveProp ?? value === activeValue
 
+	useEffect(() => {
+		if (isActiveProp) {
+			onSelect(value)
+		}
+	}, [isActiveProp, value, onSelect])
+
 	const segmentButtonClasses: string = getClasses(styles.segmentButton, {
 		[styles.segmentButtonActive]: isActive,
 	})

package/components/Segments/index.ts

@@ -1,5 +1,5 @@
 import type { SegmentsComposition } from "./Segments.types"
-import { SegmentButton } from "./components/SegmentButton/SegmentButton"
+import { SegmentButton } from "./components/SegmentButton"
 import { Segments as SC } from "./Segments"
 
 const SegmentedComponent = SC as SegmentsComposition

package/components/Toggle/Toggle.meta.ts

@@ -1,7 +1,7 @@
 import type { HeliosAttributeMeta } from "../../types/meta"
-import type { BaseToggleProps } from "./Toggle.types"
+import type { ToggleBaseProps } from "./Toggle.types"
 
-export const meta: HeliosAttributeMeta<BaseToggleProps> = {
+export const meta: HeliosAttributeMeta<ToggleBaseProps> = {
 	_patterns: [
 		{
 			id: "ui-toggle-default",
@@ -26,7 +26,7 @@ export const meta: HeliosAttributeMeta<BaseToggleProps> = {
 	],
 	_status: "nominal",
 	_category: "core",
-	_extends: ["BaseCheckboxProps"],
+	_extends: ["CheckboxBaseProps"],
 	intent: {
 		type: "HeliosIntentionType",
 		default: "neutral",

package/components/Toggle/Toggle.types.ts

@@ -1,9 +1,9 @@
 import type { HeliosIntentionType } from "../../types/intentions"
-import type { BaseCheckboxProps } from "../Checkbox/Checkbox.types"
+import type { CheckboxBaseProps } from "../Checkbox/Checkbox.types"
 
-export interface BaseToggleProps {
+export interface ToggleBaseProps {
 	intent?: HeliosIntentionType
 	style?: "toggle" | "switch"
 }
 
-export type ToggleProps = BaseToggleProps & BaseCheckboxProps
+export type ToggleProps = ToggleBaseProps & CheckboxBaseProps

package/index.ts

@@ -76,6 +76,8 @@ export { usePrint } from "./hooks/usePrint"
 export { useResizeObserver } from "./hooks/useResizeObserver"
 export { useTheme } from "./hooks/useTheme"
 
+export { renderMarkdown } from "./utils/markdown"
+
 export type { HeliosAppearanceType, HeliosColorType } from "./types/colors"
 export type { HeliosFontFamilyType } from "./types/typography"
 export type { HeliosIconType } from "./types/icons"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.99",
+	"version": "2.0.1-alpha.1",
 	"type": "module",
 	"sideEffects": [
 		"*.css",