@accelint/design-toolkit 9.6.0 → 9.7.0

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

@@ -11,11 +11,11 @@
  */
 
 import { TableContextValue } from "./types.js";
-import * as react29 from "react";
+import * as react33 from "react";
 
 //#region src/components/table/context.d.ts
 /** Context for sharing table configuration across subcomponents */
-declare const TableContext: react29.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_runtime105 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_runtime105.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_runtime106 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_runtime106.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_runtime109 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_runtime109.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_runtime108 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_runtime108.JSX.Element;
+}: TableRowProps<T>): react_jsx_runtime141.JSX.Element;
 //#endregion
 export { TableRow };
 //# sourceMappingURL=row.d.ts.map

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 react19 from "react";
+import * as react38 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime77 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: react19.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: react19.Context<ContextValue<TabsProps$1, HTMLDivElem
 declare function TabsProvider({
   children,
   ...props
-}: ProviderProps<TabsProps$1>): react_jsx_runtime77.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_runtime140 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_runtime140 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_runtime140 from "react/jsx-runtime";
 declare function Tabs({
   ref,
   ...props
-}: TabsProps): react_jsx_runtime140.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/styles.module.css

@@ -14,14 +14,14 @@
 
 @layer components.l1 {
   .tabs {
-    @apply flex w-fit;
+    @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_runtime145 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_runtime145 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_runtime145.JSX.Element;
+  ref,
+  ...props
+}: TabProps): react_jsx_runtime144.JSX.Element;
 //#endregion
 export { Tab };
 //# sourceMappingURL=tab.d.ts.map

package/dist/components/tabs/tab.js

@@ -13,9 +13,11 @@
 
 'use client';
 
+import { TabStyleDefaults } from "./constants.js";
+import { TabContext } from "./context.js";
 import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
-import { Tab as Tab$1, composeRenderProps } from "react-aria-components";
+import { Tab as Tab$1, composeRenderProps, useContextProps } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.css";
 
@@ -35,12 +37,19 @@ import styles from "./styles.module.css";
 * @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.
 */
-function Tab({ children, className, ...rest }) {
+function Tab({ ref, ...props }) {
+	[props, ref] = useContextProps(props, ref, TabContext);
+	const { children, className, align, flex, ...rest } = {
+		...TabStyleDefaults,
+		...props
+	};
 	return /* @__PURE__ */ jsx(Tab$1, {
 		...rest,
-		className: composeRenderProps(className, (className$1) => clsx(styles.tab, className$1)),
+		className: composeRenderProps(className, (className$1) => clsx(styles.tab, styles[align], flex && styles.flex, className$1)),
 		children
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","names":["AriaTab","className"],"sources":["../../../src/components/tabs/tab.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  Tab as AriaTab,\n  composeRenderProps,\n  type TabProps,\n} from 'react-aria-components';\nimport styles from './styles.module.css';\n\n/**\n * Tab - Selectable tab within a TabList.\n *\n * @example\n * ```tsx\n * <TabList>\n *   <Tab id=\"profile\">Profile</Tab>\n *   <Tab id=\"settings\">Settings</Tab>\n *   <Tab id=\"notifications\" isDisabled>Notifications</Tab>\n * </TabList>\n * ```\n *\n * @param props - TabProps from react-aria-components.\n * @param props.children - Tab label content.\n * @param props.className - CSS class for the tab.\n * @returns The rendered Tab component.\n */\nexport function Tab({ children, className, ...rest }: TabProps) {\n  return (\n    <AriaTab\n      {...rest}\n      className={composeRenderProps(className, (className) =>\n        clsx(styles.tab, className),\n      )}\n    >\n      {children}\n    </AriaTab>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,SAAgB,IAAI,EAAE,UAAU,WAAW,GAAG,QAAkB;AAC9D,QACE,oBAACA;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,KAAKC,YAAU,CAC5B;EAEA;GACO"}
+{"version":3,"file":"tab.js","names":["AriaTab","className"],"sources":["../../../src/components/tabs/tab.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  Tab as AriaTab,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { TabStyleDefaults } from './constants';\nimport { TabContext } from './context';\nimport styles from './styles.module.css';\nimport type { TabProps } from './types';\n\n/**\n * Tab - Selectable tab within a TabList.\n *\n * @example\n * ```tsx\n * <TabList>\n *   <Tab id=\"profile\">Profile</Tab>\n *   <Tab id=\"settings\">Settings</Tab>\n *   <Tab id=\"notifications\" isDisabled>Notifications</Tab>\n * </TabList>\n * ```\n *\n * @param props - TabProps from react-aria-components.\n * @param props.children - Tab label content.\n * @param props.className - CSS class for the tab.\n * @param props.align - Justification alignment for content within the Tab (only applicable when orientation is horizontal)\n * @param props.flex - Boolean to determine if the Tab should grow in size (up to a max width). (only applicable when orientation is horizontal)\n * @returns The rendered Tab component.\n */\nexport function Tab({ ref, ...props }: TabProps) {\n  [props, ref] = useContextProps(props, ref, TabContext);\n\n  const { children, className, align, flex, ...rest } = {\n    ...TabStyleDefaults,\n    ...props,\n  };\n\n  return (\n    <AriaTab\n      {...rest}\n      className={composeRenderProps(className, (className) =>\n        clsx(styles.tab, styles[align], flex && styles.flex, className),\n      )}\n    >\n      {children}\n    </AriaTab>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAAgB,IAAI,EAAE,KAAK,GAAG,SAAmB;AAC/C,EAAC,OAAO,OAAO,gBAAgB,OAAO,KAAK,WAAW;CAEtD,MAAM,EAAE,UAAU,WAAW,OAAO,MAAM,GAAG,SAAS;EACpD,GAAG;EACH,GAAG;EACJ;AAED,QACE,oBAACA;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,gBACxC,KAAK,OAAO,KAAK,OAAO,QAAQ,QAAQ,OAAO,MAAMC,YAAU,CAChE;EAEA;GACO"}

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

@@ -11,13 +11,35 @@
  */
 
 import { RefAttributes } from "react";
-import { TabsProps as TabsProps$1 } from "react-aria-components";
+import { TabProps as TabProps$1, TabsProps as TabsProps$1 } from "react-aria-components";
 
 //#region src/components/tabs/types.d.ts
+type TabStyleProps = ({
+  orientation?: 'horizontal';
+} & {
+  /**
+   * Determines content alignment within a Tab
+   *
+   * @default 'start'
+   */
+  align?: 'start' | 'center' | 'end';
+  /**
+   * If set to true will cause the Tabs to flex to fill the available space, with a max width
+   *
+   * @default true
+   */
+  flex?: boolean;
+}) | ({
+  orientation: 'vertical';
+} & {
+  align?: never;
+  flex?: never;
+});
 /**
  * Props for the Tabs component.
  */
-type TabsProps = TabsProps$1 & RefAttributes<HTMLDivElement>;
+type TabsProps = TabsProps$1 & RefAttributes<HTMLDivElement> & TabStyleProps;
+type TabProps = TabProps$1 & RefAttributes<Element> & TabStyleProps;
 //#endregion
-export { TabsProps };
+export { TabProps, TabStyleProps, TabsProps };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/text-area-field/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { TextAreaFieldProps } from "./types.js";
 import "client-only";
-import * as react37 from "react";
+import * as react34 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime153 from "react/jsx-runtime";
+import * as react_jsx_runtime145 from "react/jsx-runtime";
 
 //#region src/components/text-area-field/context.d.ts
 /** Context for sharing props across TextAreaField components */
-declare const TextAreaFieldContext: react37.Context<ContextValue<TextAreaFieldProps, HTMLDivElement>>;
+declare const TextAreaFieldContext: react34.Context<ContextValue<TextAreaFieldProps, HTMLDivElement>>;
 /**
  * Sets default props for all TextAreaField components within.
  *
@@ -42,7 +42,7 @@ declare const TextAreaFieldContext: react37.Context<ContextValue<TextAreaFieldPr
 declare function TextAreaFieldProvider({
   children,
   ...props
-}: ProviderProps<TextAreaFieldProps>): react_jsx_runtime153.JSX.Element;
+}: ProviderProps<TextAreaFieldProps>): react_jsx_runtime145.JSX.Element;
 //#endregion
 export { TextAreaFieldContext, TextAreaFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/text-area-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TextAreaFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime141 from "react/jsx-runtime";
+import * as react_jsx_runtime146 from "react/jsx-runtime";
 
 //#region src/components/text-area-field/index.d.ts
 
@@ -44,7 +44,7 @@ import * as react_jsx_runtime141 from "react/jsx-runtime";
 declare function TextAreaField({
   ref,
   ...props
-}: TextAreaFieldProps): react_jsx_runtime141.JSX.Element;
+}: TextAreaFieldProps): react_jsx_runtime146.JSX.Element;
 //#endregion
 export { TextAreaField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/text-field/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { TextFieldProps as TextFieldProps$1 } from "./types.js";
 import "client-only";
-import * as react36 from "react";
+import * as react35 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime144 from "react/jsx-runtime";
+import * as react_jsx_runtime147 from "react/jsx-runtime";
 
 //#region src/components/text-field/context.d.ts
 /** Context for sharing props across TextField components */
-declare const TextFieldContext: react36.Context<ContextValue<TextFieldProps$1, HTMLDivElement>>;
+declare const TextFieldContext: react35.Context<ContextValue<TextFieldProps$1, HTMLDivElement>>;
 /**
  * Sets default props for all TextField components within.
  *
@@ -42,7 +42,7 @@ declare const TextFieldContext: react36.Context<ContextValue<TextFieldProps$1, H
 declare function TextFieldProvider({
   children,
   ...props
-}: ProviderProps<TextFieldProps$1>): react_jsx_runtime144.JSX.Element;
+}: ProviderProps<TextFieldProps$1>): react_jsx_runtime147.JSX.Element;
 //#endregion
 export { TextFieldContext, TextFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/text-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { TextFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime146 from "react/jsx-runtime";
+import * as react_jsx_runtime148 from "react/jsx-runtime";
 
 //#region src/components/text-field/index.d.ts
 
@@ -40,7 +40,7 @@ import * as react_jsx_runtime146 from "react/jsx-runtime";
 declare function TextField({
   ref,
   ...props
-}: TextFieldProps): react_jsx_runtime146.JSX.Element;
+}: TextFieldProps): react_jsx_runtime148.JSX.Element;
 //#endregion
 export { TextField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -12,12 +12,12 @@
 
 import { TooltipTriggerProps } from "./types.js";
 import "client-only";
-import * as react40 from "react";
+import * as react37 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/tooltip/context.d.ts
 /** Context for sharing props across TooltipTrigger components */
-declare const TooltipContext: react40.Context<ContextValue<TooltipTriggerProps, HTMLDivElement>>;
+declare const TooltipContext: react37.Context<ContextValue<TooltipTriggerProps, HTMLDivElement>>;
 //#endregion
 export { TooltipContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { TooltipProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime152 from "react/jsx-runtime";
+import * as react_jsx_runtime153 from "react/jsx-runtime";
 
 //#region src/components/tooltip/index.d.ts
 
@@ -44,7 +44,7 @@ declare function Tooltip({
   offset,
   placement,
   ...props
-}: TooltipProps): react_jsx_runtime152.JSX.Element;
+}: TooltipProps): react_jsx_runtime153.JSX.Element;
 //#endregion
 export { Tooltip };
 //# sourceMappingURL=index.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { TooltipTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime165 from "react/jsx-runtime";
+import * as react_jsx_runtime154 from "react/jsx-runtime";
 
 //#region src/components/tooltip/trigger.d.ts
 
@@ -38,7 +38,7 @@ import * as react_jsx_runtime165 from "react/jsx-runtime";
 declare function TooltipTrigger({
   ref,
   ...props
-}: TooltipTriggerProps): react_jsx_runtime165.JSX.Element;
+}: TooltipTriggerProps): react_jsx_runtime154.JSX.Element;
 //#endregion
 export { TooltipTrigger };
 //# sourceMappingURL=trigger.d.ts.map