@accelint/design-toolkit 9.5.0 → 9.7.0

package/dist/components/sidenav/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime141 from "react/jsx-runtime";
+import * as react_jsx_runtime129 from "react/jsx-runtime";
 
 //#region src/components/sidenav/trigger.d.ts
 
@@ -39,7 +39,7 @@ declare function SidenavTrigger({
   children,
   for: type,
   ...rest
-}: SidenavTriggerProps): react_jsx_runtime141.JSX.Element;
+}: SidenavTriggerProps): react_jsx_runtime129.JSX.Element;
 //#endregion
 export { SidenavTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/skeleton/index.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { SkeletonProps } from "./types.js";
-import * as react_jsx_runtime195 from "react/jsx-runtime";
+import * as react_jsx_runtime131 from "react/jsx-runtime";
 
 //#region src/components/skeleton/index.d.ts
 /**
@@ -34,7 +34,7 @@ declare function Skeleton({
   className,
   variant,
   ...rest
-}: SkeletonProps): react_jsx_runtime195.JSX.Element;
+}: SkeletonProps): react_jsx_runtime131.JSX.Element;
 //#endregion
 export { Skeleton };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/styles.module.css

@@ -14,10 +14,8 @@
 
 @layer components.l1 {
   .skeleton {
-    /* TODO: bg-[color]/[opacity] isn't working, nesting of Skeleton isn't working ATM */
-    @apply fg-primary-bold bg-interactive-disabled px-l py-s;
+    @apply fg-primary-bold bg-interactive-disabled;
 
-    /* TODO: animation styles non-functional with @apply directive */
     @variant motion-safe {
       @apply animate-pulse;
     }
@@ -27,7 +25,7 @@
     }
 
     &.rectangle {
-      @apply rounded-small min-h-lh w-full;
+      @apply rounded-small h-lh w-full;
     }
   }
 }

package/dist/components/skeleton/types.d.ts

@@ -16,7 +16,7 @@ import { ComponentPropsWithRef } from "react";
 /**
  * Props for the Skeleton component.
  */
-type SkeletonProps = ComponentPropsWithRef<'div'> & {
+type SkeletonProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
   /** Shape variant of the skeleton. */
   variant?: 'rectangle' | 'circle';
 };

package/dist/components/slider/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SliderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime194 from "react/jsx-runtime";
+import * as react_jsx_runtime133 from "react/jsx-runtime";
 
 //#region src/components/slider/index.d.ts
 
@@ -71,7 +71,7 @@ declare function Slider({
   step: stepProp,
   value: valueProp,
   ...rest
-}: SliderProps): react_jsx_runtime194.JSX.Element;
+}: SliderProps): react_jsx_runtime133.JSX.Element;
 //#endregion
 export { Slider };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/status-indicator/index.d.ts

@@ -12,7 +12,7 @@
 
 import { StatusIndicatorProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime193 from "react/jsx-runtime";
+import * as react_jsx_runtime134 from "react/jsx-runtime";
 
 //#region src/components/status-indicator/index.d.ts
 /**
@@ -35,7 +35,7 @@ declare function StatusIndicator({
   className,
   status,
   ...rest
-}: StatusIndicatorProps): react_jsx_runtime193.JSX.Element;
+}: StatusIndicatorProps): react_jsx_runtime134.JSX.Element;
 //#endregion
 export { StatusIndicator };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/switch/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { SwitchProps as SwitchProps$1 } from "./types.js";
 import "client-only";
-import * as react38 from "react";
+import * as react32 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime156 from "react/jsx-runtime";
+import * as react_jsx_runtime135 from "react/jsx-runtime";
 
 //#region src/components/switch/context.d.ts
 /** Context for sharing props across Switch components */
-declare const SwitchContext: react38.Context<ContextValue<SwitchProps$1, HTMLLabelElement>>;
+declare const SwitchContext: react32.Context<ContextValue<SwitchProps$1, HTMLLabelElement>>;
 /**
  * Sets default props for all Switch components within.
  *
@@ -38,7 +38,7 @@ declare const SwitchContext: react38.Context<ContextValue<SwitchProps$1, HTMLLab
 declare function SwitchProvider({
   children,
   ...props
-}: ProviderProps<SwitchProps$1>): react_jsx_runtime156.JSX.Element;
+}: ProviderProps<SwitchProps$1>): react_jsx_runtime135.JSX.Element;
 //#endregion
 export { SwitchContext, SwitchProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/switch/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SwitchProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime200 from "react/jsx-runtime";
+import * as react_jsx_runtime136 from "react/jsx-runtime";
 
 //#region src/components/switch/index.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime200 from "react/jsx-runtime";
 declare function Switch({
   ref,
   ...props
-}: SwitchProps): react_jsx_runtime200.JSX.Element;
+}: SwitchProps): react_jsx_runtime136.JSX.Element;
 //#endregion
 export { Switch };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/table/body.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableBodyProps } from "./types.js";
-import * as react_jsx_runtime157 from "react/jsx-runtime";
+import * as react_jsx_runtime138 from "react/jsx-runtime";
 
 //#region src/components/table/body.d.ts
 
@@ -39,7 +39,7 @@ declare function TableBody<T>({
   ref,
   rows,
   ...rest
-}: TableBodyProps<T>): react_jsx_runtime157.JSX.Element;
+}: TableBodyProps<T>): react_jsx_runtime138.JSX.Element;
 //#endregion
 export { TableBody };
 //# sourceMappingURL=body.d.ts.map

package/dist/components/table/cell.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableCellProps } from "./types.js";
-import * as react_jsx_runtime158 from "react/jsx-runtime";
+import * as react_jsx_runtime137 from "react/jsx-runtime";
 
 //#region src/components/table/cell.d.ts
 
@@ -40,7 +40,7 @@ declare function TableCell<T>({
   className,
   cell,
   ...rest
-}: TableCellProps<T>): react_jsx_runtime158.JSX.Element;
+}: TableCellProps<T>): react_jsx_runtime137.JSX.Element;
 //#endregion
 export { TableCell };
 //# sourceMappingURL=cell.d.ts.map

package/dist/components/table/context.d.ts

@@ -11,11 +11,11 @@
  */
 
 import { TableContextValue } from "./types.js";
-import * as react47 from "react";
+import * as react33 from "react";
 
 //#region src/components/table/context.d.ts
 /** Context for sharing table configuration across subcomponents */
-declare const TableContext: react47.Context<TableContextValue>;
+declare const TableContext: react33.Context<TableContextValue>;
 //#endregion
 export { TableContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/table/header-cell.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableHeaderCellProps } from "./types.js";
-import * as react_jsx_runtime165 from "react/jsx-runtime";
+import * as react_jsx_runtime132 from "react/jsx-runtime";
 
 //#region src/components/table/header-cell.d.ts
 
@@ -42,7 +42,7 @@ declare function TableHeaderCell<T>({
   className,
   header,
   ...rest
-}: TableHeaderCellProps<T>): react_jsx_runtime165.JSX.Element;
+}: TableHeaderCellProps<T>): react_jsx_runtime132.JSX.Element;
 //#endregion
 export { TableHeaderCell };
 //# sourceMappingURL=header-cell.d.ts.map

package/dist/components/table/header.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableHeaderProps } from "./types.js";
-import * as react_jsx_runtime160 from "react/jsx-runtime";
+import * as react_jsx_runtime139 from "react/jsx-runtime";
 
 //#region src/components/table/header.d.ts
 
@@ -41,7 +41,7 @@ declare function TableHeader<T>({
   headerGroups,
   columnSelection,
   ...rest
-}: TableHeaderProps<T>): react_jsx_runtime160.JSX.Element;
+}: TableHeaderProps<T>): react_jsx_runtime139.JSX.Element;
 //#endregion
 export { TableHeader };
 //# sourceMappingURL=header.d.ts.map

package/dist/components/table/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TableProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime162 from "react/jsx-runtime";
+import * as react_jsx_runtime140 from "react/jsx-runtime";
 import { Key } from "@react-types/shared";
 
 //#region src/components/table/index.d.ts
@@ -68,7 +68,7 @@ declare function Table<T extends {
   onRowSelectionChange,
   fullWidth,
   ...rest
-}: TableProps<T>): react_jsx_runtime162.JSX.Element;
+}: TableProps<T>): react_jsx_runtime140.JSX.Element;
 //#endregion
 export { Table };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/table/row.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { TableRowProps } from "./types.js";
-import * as react_jsx_runtime164 from "react/jsx-runtime";
+import * as react_jsx_runtime141 from "react/jsx-runtime";
 
 //#region src/components/table/row.d.ts
 
@@ -44,7 +44,7 @@ declare function TableRow<T>({
   className,
   row,
   ...rest
-}: TableRowProps<T>): react_jsx_runtime164.JSX.Element;
+}: TableRowProps<T>): react_jsx_runtime141.JSX.Element;
 //#endregion
 export { TableRow };
 //# sourceMappingURL=row.d.ts.map

package/dist/components/table/styles.module.css

@@ -21,7 +21,7 @@
     }
 
     @variant selected {
-      @apply bg-accent-primary-muted;
+      @apply bg-accent-primary-muted visible;
 
       border-top-color: var(--outline-accent-primary-bold);
       box-shadow:
@@ -94,5 +94,9 @@
     @variant group-hover/header-cell {
       @apply visible;
     }
+
+    @variant group-selected/header-cell {
+      @apply visible;
+    }
   }
 }

package/dist/components/tabs/constants.d.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { TabStyleProps } from "./types.js";
+
+//#region src/components/tabs/constants.d.ts
+declare const TabStyleDefaults: Required<TabStyleProps>;
+//#endregion
+export { TabStyleDefaults };
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/tabs/constants.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+//#region src/components/tabs/constants.ts
+const TabStyleDefaults = {
+	orientation: "horizontal",
+	align: "start",
+	flex: true
+};
+
+//#endregion
+export { TabStyleDefaults };
+//# sourceMappingURL=constants.js.map

package/dist/components/tabs/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["TabStyleDefaults: Required<TabStyleProps>"],"sources":["../../../src/components/tabs/constants.ts"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { TabStyleProps } from './types';\n\nexport const TabStyleDefaults: Required<TabStyleProps> = {\n  orientation: 'horizontal',\n  align: 'start',\n  flex: true,\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAaA,mBAA4C;CACvD,aAAa;CACb,OAAO;CACP,MAAM;CACP"}

package/dist/components/tabs/context.d.ts

@@ -11,15 +11,15 @@
  */
 
 import { ProviderProps } from "../../lib/types.js";
-import { TabsProps as TabsProps$1 } from "./types.js";
+import { TabProps as TabProps$1, TabsProps as TabsProps$1 } from "./types.js";
 import "client-only";
-import * as react39 from "react";
+import * as react38 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime170 from "react/jsx-runtime";
+import * as react_jsx_runtime151 from "react/jsx-runtime";
 
 //#region src/components/tabs/context.d.ts
 /** Context for sharing props across Tabs components */
-declare const TabsContext: react39.Context<ContextValue<TabsProps$1, HTMLDivElement>>;
+declare const TabsContext: react38.Context<ContextValue<TabsProps$1, HTMLDivElement>>;
 /**
  * Sets default props for all Tabs components within.
  *
@@ -42,7 +42,12 @@ declare const TabsContext: react39.Context<ContextValue<TabsProps$1, HTMLDivElem
 declare function TabsProvider({
   children,
   ...props
-}: ProviderProps<TabsProps$1>): react_jsx_runtime170.JSX.Element;
+}: ProviderProps<TabsProps$1>): react_jsx_runtime151.JSX.Element;
+declare const TabContext: react38.Context<ContextValue<TabProps$1, Element>>;
+declare function TabProvider({
+  children,
+  ...props
+}: ProviderProps<TabProps$1>): react_jsx_runtime151.JSX.Element;
 //#endregion
-export { TabsContext, TabsProvider };
+export { TabContext, TabProvider, TabsContext, TabsProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/tabs/context.js

@@ -45,7 +45,14 @@ function TabsProvider({ children, ...props }) {
 		children
 	});
 }
+const TabContext = createContext(null);
+function TabProvider({ children, ...props }) {
+	return /* @__PURE__ */ jsx(TabContext.Provider, {
+		value: props,
+		children
+	});
+}
 
 //#endregion
-export { TabsContext, TabsProvider };
+export { TabContext, TabProvider, TabsContext, TabsProvider };
 //# sourceMappingURL=context.js.map

package/dist/components/tabs/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/tabs/context.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { ProviderProps } from '@/lib/types';\nimport type { TabsProps } from './types';\n\n/** Context for sharing props across Tabs components */\nexport const TabsContext =\n  createContext<ContextValue<TabsProps, HTMLDivElement>>(null);\n\n/**\n * Sets default props for all Tabs components within.\n *\n * @example\n * ```tsx\n * <TabsProvider orientation=\"vertical\">\n *   <Tabs>\n *     <TabList>\n *       <Tab>Profile</Tab>\n *       <Tab>Settings</Tab>\n *     </TabList>\n *   </Tabs>\n * </TabsProvider>\n * ```\n *\n * @param props - ProviderProps with TabsProps.\n * @param props.children - Child components that receive the context.\n * @returns The TabsContext provider wrapping children.\n */\nexport function TabsProvider({ children, ...props }: ProviderProps<TabsProps>) {\n  return <TabsContext.Provider value={props}>{children}</TabsContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,cACX,cAAuD,KAAK;;;;;;;;;;;;;;;;;;;;AAqB9D,SAAgB,aAAa,EAAE,UAAU,GAAG,SAAmC;AAC7E,QAAO,oBAAC,YAAY;EAAS,OAAO;EAAQ;GAAgC"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/tabs/context.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { ProviderProps } from '@/lib/types';\nimport type { TabProps, TabsProps } from './types';\n\n/** Context for sharing props across Tabs components */\nexport const TabsContext =\n  createContext<ContextValue<TabsProps, HTMLDivElement>>(null);\n\n/**\n * Sets default props for all Tabs components within.\n *\n * @example\n * ```tsx\n * <TabsProvider orientation=\"vertical\">\n *   <Tabs>\n *     <TabList>\n *       <Tab>Profile</Tab>\n *       <Tab>Settings</Tab>\n *     </TabList>\n *   </Tabs>\n * </TabsProvider>\n * ```\n *\n * @param props - ProviderProps with TabsProps.\n * @param props.children - Child components that receive the context.\n * @returns The TabsContext provider wrapping children.\n */\nexport function TabsProvider({ children, ...props }: ProviderProps<TabsProps>) {\n  return <TabsContext.Provider value={props}>{children}</TabsContext.Provider>;\n}\n\nexport const TabContext = createContext<ContextValue<TabProps, Element>>(null);\n\nexport function TabProvider({ children, ...props }: ProviderProps<TabProps>) {\n  return <TabContext.Provider value={props}>{children}</TabContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,cACX,cAAuD,KAAK;;;;;;;;;;;;;;;;;;;;AAqB9D,SAAgB,aAAa,EAAE,UAAU,GAAG,SAAmC;AAC7E,QAAO,oBAAC,YAAY;EAAS,OAAO;EAAQ;GAAgC;;AAG9E,MAAa,aAAa,cAA+C,KAAK;AAE9E,SAAgB,YAAY,EAAE,UAAU,GAAG,SAAkC;AAC3E,QAAO,oBAAC,WAAW;EAAS,OAAO;EAAQ;GAA+B"}

package/dist/components/tabs/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TabsProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime163 from "react/jsx-runtime";
+import * as react_jsx_runtime155 from "react/jsx-runtime";
 
 //#region src/components/tabs/index.d.ts
 
@@ -25,6 +25,8 @@ import * as react_jsx_runtime163 from "react/jsx-runtime";
  * @param props.ref - Ref to the tabs container element.
  * @param props.children - TabList and TabPanel components.
  * @param props.className - CSS class for the tabs container.
+ * @param props.align - Justification alignment passed down to Tab components. (only applicable when orientation is horizontal)
+ * @param props.flex - Boolean passed down to Tab components. (only applicable when orientation is horizontal)
  * @returns The rendered Tabs component.
  *
  * @example
@@ -42,7 +44,7 @@ import * as react_jsx_runtime163 from "react/jsx-runtime";
 declare function Tabs({
   ref,
   ...props
-}: TabsProps): react_jsx_runtime163.JSX.Element;
+}: TabsProps): react_jsx_runtime155.JSX.Element;
 //#endregion
 export { Tabs };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.js

@@ -13,7 +13,8 @@
 
 'use client';
 
-import { TabsContext } from "./context.js";
+import { TabStyleDefaults } from "./constants.js";
+import { TabProvider, TabsContext } from "./context.js";
 import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Tabs as Tabs$1, composeRenderProps, useContextProps } from "react-aria-components";
@@ -30,6 +31,8 @@ import styles from "./styles.module.css";
 * @param props.ref - Ref to the tabs container element.
 * @param props.children - TabList and TabPanel components.
 * @param props.className - CSS class for the tabs container.
+* @param props.align - Justification alignment passed down to Tab components. (only applicable when orientation is horizontal)
+* @param props.flex - Boolean passed down to Tab components. (only applicable when orientation is horizontal)
 * @returns The rendered Tabs component.
 *
 * @example
@@ -46,12 +49,19 @@ import styles from "./styles.module.css";
 */
 function Tabs({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, TabsContext);
-	const { children, className, ...rest } = props;
-	return /* @__PURE__ */ jsx(Tabs$1, {
-		...rest,
-		ref,
-		className: composeRenderProps(className, (className$1) => clsx("group/tabs", styles.tabs, className$1)),
-		children
+	const { children, className, align, flex, ...rest } = {
+		...TabStyleDefaults,
+		...props
+	};
+	return /* @__PURE__ */ jsx(TabProvider, {
+		align,
+		flex,
+		children: /* @__PURE__ */ jsx(Tabs$1, {
+			...rest,
+			ref,
+			className: composeRenderProps(className, (className$1) => clsx("group/tabs", styles.tabs, className$1)),
+			children
+		})
 	});
 }
 

package/dist/components/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaTabs","className"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  Tabs as AriaTabs,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { TabsContext } from './context';\nimport styles from './styles.module.css';\nimport type { TabsProps } from './types';\n\n/**\n * Tabs - Tab navigation for organizing content into multiple sections\n *\n * Supports horizontal and vertical orientations with text or icon tabs.\n *\n * @param props - {@link TabsProps}\n * @param props.ref - Ref to the tabs container element.\n * @param props.children - TabList and TabPanel components.\n * @param props.className - CSS class for the tabs container.\n * @returns The rendered Tabs component.\n *\n * @example\n * ```tsx\n * <Tabs>\n *   <TabList>\n *     <Tab id=\"overview\">Overview</Tab>\n *     <Tab id=\"settings\">Settings</Tab>\n *   </TabList>\n *   <TabPanel id=\"overview\">Overview content</TabPanel>\n *   <TabPanel id=\"settings\">Settings content</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tabs({ ref, ...props }: TabsProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TabsContext);\n\n  const { children, className, ...rest } = props;\n\n  return (\n    <AriaTabs\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(className, (className) =>\n        clsx('group/tabs', styles.tabs, className),\n      )}\n    >\n      {children}\n    </AriaTabs>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,SAAgB,KAAK,EAAE,KAAK,GAAG,SAAoB;AACjD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;AAEzC,QACE,oBAACA;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,gBACxC,KAAK,cAAc,OAAO,MAAMC,YAAU,CAC3C;EAEA;GACQ"}
+{"version":3,"file":"index.js","names":["AriaTabs","className"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  Tabs as AriaTabs,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { TabStyleDefaults } from './constants';\nimport { TabProvider, TabsContext } from './context';\nimport styles from './styles.module.css';\nimport type { TabsProps } from './types';\n\n/**\n * Tabs - Tab navigation for organizing content into multiple sections\n *\n * Supports horizontal and vertical orientations with text or icon tabs.\n *\n * @param props - {@link TabsProps}\n * @param props.ref - Ref to the tabs container element.\n * @param props.children - TabList and TabPanel components.\n * @param props.className - CSS class for the tabs container.\n * @param props.align - Justification alignment passed down to Tab components. (only applicable when orientation is horizontal)\n * @param props.flex - Boolean passed down to Tab components. (only applicable when orientation is horizontal)\n * @returns The rendered Tabs component.\n *\n * @example\n * ```tsx\n * <Tabs>\n *   <TabList>\n *     <Tab id=\"overview\">Overview</Tab>\n *     <Tab id=\"settings\">Settings</Tab>\n *   </TabList>\n *   <TabPanel id=\"overview\">Overview content</TabPanel>\n *   <TabPanel id=\"settings\">Settings content</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tabs({ ref, ...props }: TabsProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TabsContext);\n\n  const { children, className, align, flex, ...rest } = {\n    ...TabStyleDefaults,\n    ...props,\n  };\n\n  return (\n    <TabProvider align={align} flex={flex}>\n      <AriaTabs\n        {...rest}\n        ref={ref}\n        className={composeRenderProps(className, (className) =>\n          clsx('group/tabs', styles.tabs, className),\n        )}\n      >\n        {children}\n      </AriaTabs>\n    </TabProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,SAAgB,KAAK,EAAE,KAAK,GAAG,SAAoB;AACjD,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,EAAE,UAAU,WAAW,OAAO,MAAM,GAAG,SAAS;EACpD,GAAG;EACH,GAAG;EACJ;AAED,QACE,oBAAC;EAAmB;EAAa;YAC/B,oBAACA;GACC,GAAI;GACC;GACL,WAAW,mBAAmB,YAAY,gBACxC,KAAK,cAAc,OAAO,MAAMC,YAAU,CAC3C;GAEA;IACQ;GACC"}

package/dist/components/tabs/list.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { TabListProps } from "react-aria-components";
-import * as react_jsx_runtime166 from "react/jsx-runtime";
+import * as react_jsx_runtime142 from "react/jsx-runtime";
 
 //#region src/components/tabs/list.d.ts
 
@@ -40,7 +40,7 @@ declare function TabList<T extends object>({
   children,
   className,
   ...rest
-}: TabListProps<T>): react_jsx_runtime166.JSX.Element;
+}: TabListProps<T>): react_jsx_runtime142.JSX.Element;
 //#endregion
 export { TabList };
 //# sourceMappingURL=list.d.ts.map

package/dist/components/tabs/panel.d.ts

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { TabPanelProps } from "react-aria-components";
-import * as react_jsx_runtime167 from "react/jsx-runtime";
+import * as react_jsx_runtime143 from "react/jsx-runtime";
 
 //#region src/components/tabs/panel.d.ts
 
@@ -41,7 +41,7 @@ declare function TabPanel({
   children,
   className,
   ...rest
-}: TabPanelProps): react_jsx_runtime167.JSX.Element;
+}: TabPanelProps): react_jsx_runtime143.JSX.Element;
 //#endregion
 export { TabPanel };
 //# sourceMappingURL=panel.d.ts.map

package/dist/components/tabs/styles.module.css

@@ -14,14 +14,14 @@
 
 @layer components.l1 {
   .tabs {
-    @apply w-content flex;
+    @apply flex;
 
     @variant orientation-horizontal {
       @apply flex-col;
     }
 
     @variant orientation-vertical {
-      @apply flex-row;
+      @apply h-full flex-row;
     }
   }
 
@@ -29,16 +29,22 @@
     @apply flex;
 
     @variant orientation-horizontal {
-      @apply flex-row;
+      @apply relative w-full flex-row;
+
+      &:before {
+        @apply absolute bottom-0 left-0 block h-px w-full bg-(--outline-static);
+        content: '';
+      }
     }
 
     @variant orientation-vertical {
-      @apply flex-col;
+      @apply h-full flex-col;
     }
   }
 
   .tab {
-    @apply fg-primary-muted rounded-small p-s relative cursor-pointer;
+    @apply gap-xs fg-primary-muted rounded-small p-s relative flex cursor-pointer items-center;
+    max-width: 200px;
 
     @variant hover {
       @apply fg-primary-bold;
@@ -76,6 +82,18 @@
         content: '';
       }
 
+      &.flex {
+        @apply grow;
+      }
+
+      &.center {
+        @apply justify-center;
+      }
+
+      &.end {
+        @apply justify-end;
+      }
+
       @variant hover {
         &:after {
           @apply bg-(--outline-interactive-hover);
@@ -119,6 +137,10 @@
       }
     }
 
+    @variant group-orientation-vertical/tabs {
+      @apply flex-col;
+    }
+
     @variant disabled {
       @apply fg-disabled cursor-not-allowed;
 

package/dist/components/tabs/tab.d.ts

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import { TabProps } from "./types.js";
 import "client-only";
-import { TabProps } from "react-aria-components";
-import * as react_jsx_runtime168 from "react/jsx-runtime";
+import * as react_jsx_runtime144 from "react/jsx-runtime";
 
 //#region src/components/tabs/tab.d.ts
 
@@ -31,13 +31,14 @@ import * as react_jsx_runtime168 from "react/jsx-runtime";
  * @param props - TabProps from react-aria-components.
  * @param props.children - Tab label content.
  * @param props.className - CSS class for the tab.
+ * @param props.align - Justification alignment for content within the Tab (only applicable when orientation is horizontal)
+ * @param props.flex - Boolean to determine if the Tab should grow in size (up to a max width). (only applicable when orientation is horizontal)
  * @returns The rendered Tab component.
  */
 declare function Tab({
-  children,
-  className,
-  ...rest
-}: TabProps): react_jsx_runtime168.JSX.Element;
+  ref,
+  ...props
+}: TabProps): react_jsx_runtime144.JSX.Element;
 //#endregion
 export { Tab };
 //# sourceMappingURL=tab.d.ts.map