@tcn/ui 0.0.1 → 0.0.3

package/src/actions/button/button/button.tsx

@@ -1,6 +1,6 @@
-import cln from 'classnames';
 import React from 'react';
-import { BaseButton, BaseButtonProps } from '../base_button/base_button.js';
+import cln from 'classnames';
+import { BaseButton, type BaseButtonProps } from '../base_button/base_button.js';
 import styles from './button.module.css';
 
 export interface ButtonProps extends BaseButtonProps {}
@@ -10,9 +10,15 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   ref
 ) {
   return (
-    <BaseButton ref={ref} className={cln(styles.button, 'button', className)} {...props}>
+    <BaseButton
+      ref={ref}
+      className={cln(styles.button, 'button', 'tcn-button', className)}
+      {...props}
+    >
       {typeof children === 'string' ? (
-        <span className={cln(styles['button-text'], 'button-text')}>{children}</span>
+        <span className={cln(styles['button-text'], 'button-text', 'tcn-button-text')}>
+          {children}
+        </span>
       ) : (
         children
       )}

package/src/form/field/common/status_input/status_input.tsx

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import styles from './status_input.module.css';
 
 /*
- TODO: I really want to make these themable.
+ TODO: I really want to make these themeable.
  The way we do that is simply put a div placeholder with
  a class that the theme can override. They can use svgs as 
  backgrounds for icons. This would make it so the component

package/src/form/field/h_field/h_field.tsx

@@ -4,7 +4,7 @@ import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import styles from './h_field.module.css';
-import { FieldInput } from '../common/types.js';
+import type { FieldInput } from '../common/types.js';
 import { FieldHeader } from '../common/field_header.js';
 import { FieldControl } from '../common/field_control/field_control.js';
 import { FieldStatusInput } from '../common/status_input/status_input.js';

package/src/form/field/v_field/v_field.tsx

@@ -7,7 +7,7 @@ import styles from './v_field.module.css';
 import { FieldControl } from '../common/field_control/field_control.js';
 import { FieldHeader } from '../common/field_header.js';
 import { FieldStatusInput } from '../common/status_input/status_input.js';
-import { FieldInput } from '../common/types.js';
+import type { FieldInput } from '../common/types.js';
 
 export interface VFieldOwnProps extends FieldInput {
   children: React.ReactNode;

package/src/form/field_presenters/options_field_presenter.ts

@@ -1,5 +1,5 @@
 import { Signal } from '@tcn/state';
-import { FieldOptions, FieldPresenter, FieldState } from './field_presenter.js';
+import { type FieldOptions, FieldPresenter, type FieldState } from './field_presenter.js';
 
 export interface OptionsFieldState<TValue = string, TOption = string>
   extends FieldState<TValue> {

package/src/form/form_field.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useSignalValue } from '@tcn/state';
-import { FieldPresenter, FieldState } from './field_presenters/field_presenter.js';
+import { FieldPresenter, type FieldState } from './field_presenters/field_presenter.js';
 
 export function FormField<T>({
   field,

package/src/form/index.ts

@@ -1,5 +1,50 @@
-export * from './form_field.js';
-export * from './field_presenters/field_presenter.js';
-export * from './field_presenters/options_field_presenter.js';
-export * from './field_set/field_set.js';
-export * from './form_field.js';
+export {
+  type FieldControlOwnProps,
+  type FieldControlProps,
+  FieldControl,
+} from './field/common/field_control/field_control.js';
+export {
+  AdornmentMap,
+  type StatusInputState,
+  type StatusInputOwnProps,
+  type StatusInputProps,
+  FieldStatusInput,
+} from './field/common/status_input/status_input.js';
+export {
+  FieldDescription,
+  type FieldDescriptionOwnProps,
+} from './field/common/field_description.js';
+export {
+  type FieldErrorMessageOwnProps,
+  FieldErrorMessage,
+} from './field/common/field_error.js';
+export {
+  FieldHeader,
+  type FieldHeaderProps,
+  type FieldHeaderOwnProps,
+} from './field/common/field_header.js';
+export { FieldLabel, type FieldLabelOwnProps } from './field/common/field_label.js';
+export type { FieldInput } from './field/common/types.js';
+export {
+  HField,
+  type HFieldProps,
+  type HFieldOwnProps,
+} from './field/h_field/h_field.js';
+export {
+  VField,
+  type VFieldProps,
+  type VFieldOwnProps,
+} from './field/v_field/v_field.js';
+export { Field, type FieldProps } from './field/field.js';
+export {
+  FieldPresenter,
+  type FieldState,
+  type FieldOptions,
+} from './field_presenters/field_presenter.js';
+export {
+  OptionsFieldPresenter,
+  type OptionsFieldState,
+  type OptionsFieldOptions,
+} from './field_presenters/options_field_presenter.js';
+export { FieldSet, type FieldSetProps } from './field_set/field_set.js';
+export { FormField } from './form_field.js';

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -51,10 +51,10 @@ function createCountryOptions(allowedCountryCodes?: string[]) {
     });
     return countryList
       .filter(c => Boolean(allowedMap[c.value]))
-      .map((i, index) => {
+      .map(i => {
         return (
           <Option
-            key={index}
+            key={i.value}
             value={i.value}
             label={i.selectedLabel}
             keywords={i.keywords}
@@ -64,9 +64,14 @@ function createCountryOptions(allowedCountryCodes?: string[]) {
         );
       });
   } else {
-    return countryList.map((i, index) => {
+    return countryList.map(i => {
       return (
-        <Option key={index} value={i.value} label={i.selectedLabel} keywords={i.keywords}>
+        <Option
+          key={i.value}
+          value={i.value}
+          label={i.selectedLabel}
+          keywords={i.keywords}
+        >
           {i.optionLabel}
         </Option>
       );

package/src/layouts/body/h_body.module.css

@@ -0,0 +1,5 @@
+.h-body {
+  min-width: 0;
+  flex-grow: 1;
+  height: 100%;
+}

package/src/layouts/body/h_body.tsx

@@ -0,0 +1,23 @@
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './h_body.module.css';
+
+export interface HBodyProps extends Omit<HStackProps, 'as'> {}
+
+export const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(
+  { children, className, overflowX = 'auto', ...props }: HBodyProps,
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      as="div"
+      overflowX={overflowX}
+      className={classNames(styles['h-body'], className, 'tcn-h-body', 'body')}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/layouts/body/v_body.module.css

@@ -0,0 +1,5 @@
+.v-body {
+  min-height: 0;
+  flex-grow: 1;
+  width: 100%;
+}

package/src/layouts/body/v_body.tsx

@@ -0,0 +1,23 @@
+import { VStack, type VStackProps } from '../../stacks/v_stack.js';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './v_body.module.css';
+
+export interface VBodyProps extends Omit<VStackProps, 'as'> {}
+
+export const VBody = React.forwardRef<HTMLElement, VBodyProps>(function VBody(
+  { children, className, overflowY = 'auto', ...props }: VBodyProps,
+  ref
+) {
+  return (
+    <VStack
+      ref={ref}
+      as="div"
+      overflowY={overflowY}
+      className={classNames(styles['v-body'], className, 'tcn-body', 'tcn-v-body')}
+      {...props}
+    >
+      {children}
+    </VStack>
+  );
+});

package/src/layouts/divider/divider.tsx

@@ -1,7 +1,7 @@
-import { Emphasis, Size } from '../../utils/index.js';
-import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import React, { type CSSProperties } from 'react';
 import classnames from 'classnames';
-import React, { CSSProperties } from 'react';
+import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import type { Emphasis, Size } from '../../utils/index.js';
 import styles from './divider.module.css';
 
 export type DividerOrientation =
@@ -59,7 +59,7 @@ export const Divider: React.FC<DividerProps> = ({
       data-thickness={thickness}
       data-length={length}
       data-orientation={orientation}
-      className={classnames(styles[`divider`], 'divider', className)}
+      className={classnames(styles[`divider`], 'divider', 'tcn-divider', className)}
       {...props}
     >
       <div
@@ -71,6 +71,7 @@ export const Divider: React.FC<DividerProps> = ({
         className={classnames(
           styles[`divider-line`],
           'divider-line',
+          'tcn-divider-line',
           'material',
           className
         )}

package/src/layouts/footer/footer.tsx

@@ -1,8 +1,8 @@
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
 import React from 'react';
-import styles from './footer.module.css';
+import classNames from 'classnames';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
+import styles from './footer.module.css';
 
 export interface FooterProps extends Omit<HStackProps, 'as' | 'children'> {
   hierarchy?: Hierarchy;
@@ -18,7 +18,7 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer
     <HStack
       ref={ref}
       as="footer"
-      className={classNames(styles.footer, className, 'footer')}
+      className={classNames(styles.footer, className, 'footer', 'tcn-footer')}
       data-hierarchy={hierarchy}
       data-size={size}
       {...props}

package/src/layouts/header/header.tsx

@@ -1,8 +1,8 @@
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
 import React from 'react';
-import styles from './header.module.css';
+import classNames from 'classnames';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
+import styles from './header.module.css';
 
 // UtilityBar
 export interface HeaderProps extends Omit<HStackProps, 'as'> {
@@ -25,7 +25,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
     <HStack
       ref={ref}
       as="header"
-      className={classNames(styles.header, className, 'header')}
+      className={classNames(styles.header, className, 'tcn-header', 'header')}
       data-hierarchy={hierarchy}
       data-size={size}
       height={height}

package/src/layouts/index.ts

@@ -1,9 +1,5 @@
 export * from './column/column.js';
 export * from './divider/divider.js';
-export * from './drawers/drawer_bottom/drawer_bottom.js';
-export * from './drawers/drawer_top/drawer_top.js';
-export * from './drawers/drawer_start/drawer_start.js';
-export * from './drawers/drawer_end/drawer_end.js';
 export * from './footer/footer.js';
 export * from './grid/grid.js';
 export * from './header/header.js';
@@ -12,3 +8,5 @@ export * from './list/list.js';
 export * from './list/section_header.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
+export * from './body/h_body.js';
+export * from './body/v_body.js';

package/src/layouts/utility_bar/utility_bar.tsx

@@ -1,8 +1,8 @@
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
 import React from 'react';
-import styles from './utility_bar.module.css';
+import classNames from 'classnames';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
+import styles from './utility_bar.module.css';
 
 // UtilityBar
 export interface UtilityBarProps extends Omit<HStackProps, 'as'> {
@@ -26,7 +26,12 @@ export const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(
       <HStack
         ref={ref}
         as="header"
-        className={classNames(styles['utility-bar'], className, 'utility-bar')}
+        className={classNames(
+          styles['utility-bar'],
+          className,
+          'utility-bar',
+          'tcn-utility-bar'
+        )}
         data-hierarchy={hierarchy}
         data-size={size}
         height={height}

package/src/overlay/index.ts

@@ -0,0 +1,5 @@
+export * from './portal/portal.js';
+export * from './context_menu/context_menu.js';
+export * from './menu/menu.js';
+export * from './tooltip/tooltip.js';
+export * from './popper/popper.js';

package/src/stacks/stack.module.css

@@ -20,7 +20,8 @@ HStack CSS
   display: inline-grid;
 }
 
-.box[data-height="flex"] {
+.box[data-height="flex"],
+.box[data-height="fill"] {
   height: auto;
 }
 
@@ -127,13 +128,30 @@ HStack CSS
 :where(.h-stack > .h-stack[data-width="flex"]),
 :where(.h-stack > .z-stack[data-width="flex"]),
 :where(.h-stack > .v-stack[data-width="flex"]),
-:where(.h-stack > .stack-flex[data-width="flex"]) {
+:where(.h-stack > .stack-flex[data-width="flex"]),
+:where(.h-stack > .h-stack[data-width="fill"]),
+:where(.h-stack > .z-stack[data-width="fill"]),
+:where(.h-stack > .v-stack[data-width="fill"]),
+:where(.h-stack > .stack-flex[data-width="fill"]),
+:where(.h-stack > .box[data-width="fill"]) {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0%;
   width: auto;
 }
 
+:where(.h-stack > .h-stack[data-height="flex"]),
+:where(.h-stack > .z-stack[data-height="flex"]),
+:where(.h-stack > .v-stack[data-height="flex"]),
+:where(.h-stack > .stack-flex[data-height="flex"]),
+:where(.h-stack > .h-stack[data-height="fill"]),
+:where(.h-stack > .z-stack[data-height="fill"]),
+:where(.h-stack > .v-stack[data-height="fill"]),
+:where(.h-stack > .stack-flex[data-height="fill"]),
+:where(.h-stack > .box[data-height="fill"]) {
+  height: 100%;
+}
+
 :where(.reveal-layout .h-stack:after),
 :where(.reveal-h-stack .h-stack:after) {
   content: "";
@@ -189,17 +207,38 @@ HStack CSS
 :where(.v-stack > .h-stack[data-height="flex"]),
 :where(.v-stack > .z-stack[data-height="flex"]),
 :where(.v-stack > .v-stack[data-height="flex"]),
-:where(.v-stack > .stack-flex[data-height="flex"]) {
+:where(.v-stack > .stack-flex[data-height="flex"]),
+:where(.v-stack > .h-stack[data-height="fill"]),
+:where(.v-stack > .z-stack[data-height="fill"]),
+:where(.v-stack > .v-stack[data-height="fill"]),
+:where(.v-stack > .stack-flex[data-height="fill"]),
+:where(.v-stack > .box[data-height="fill"]) {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0%;
   height: auto;
 }
 
+:where(.v-stack > .h-stack[data-width="flex"]),
+:where(.v-stack > .z-stack[data-width="flex"]),
+:where(.v-stack > .v-stack[data-width="flex"]),
+:where(.v-stack > .stack-flex[data-width="flex"]),
+:where(.v-stack > .h-stack[data-width="fill"]),
+:where(.v-stack > .z-stack[data-width="fill"]),
+:where(.v-stack > .v-stack[data-width="fill"]),
+:where(.v-stack > .stack-flex[data-width="fill"]),
+:where(.v-stack > .box[data-width="fill"]) {
+  width: 100%;
+}
+
 :where(.v-stack[data-height="auto"] > .h-stack[data-height="flex"]),
 :where(.v-stack[data-height="auto"] > .z-stack[data-height="flex"]),
 :where(.v-stack[data-height="auto"] > .v-stack[data-height="flex"]),
-:where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]) {
+:where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]),
+:where(.v-stack[data-height="auto"] > .h-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .z-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .v-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .stack-flex[data-height="fill"]) {
   flex-basis: auto;
 }
 
@@ -259,12 +298,18 @@ ZStack CSS
 
 :where(.z-stack > .h-stack[data-height="flex"]),
 :where(.z-stack > .v-stack[data-height="flex"]),
+:where(.z-stack > .h-stack[data-height="fill"]),
+:where(.z-stack > .v-stack[data-height="fill"]),
+:where(.z-stack > .stack-flex[data-height="fill"]),
 :where(.z-stack > .stack-flex[data-height="default"]) {
   height: 100%;
 }
 
 :where(.z-stack > .h-stack[data-width="flex"]),
 :where(.z-stack > .v-stack[data-width="flex"]),
+:where(.z-stack > .h-stack[data-width="fill"]),
+:where(.z-stack > .v-stack[data-width="fill"]),
+:where(.z-stack > .stack-flex[data-width="fill"]),
 :where(.z-stack > .stack-flex[data-width="default"]) {
   width: 100%;
 }
@@ -311,7 +356,11 @@ Defaults CSS
 :where(.h-stack[data-width="auto"] > .h-stack[data-width="flex"]),
 :where(.h-stack[data-width="auto"] > .z-stack[data-width="flex"]),
 :where(.h-stack[data-width="auto"] > .v-stack[data-width="flex"]),
-:where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]) {
+:where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]),
+:where(.h-stack[data-width="auto"] > .h-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .z-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .v-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .stack-flex[data-width="fill"]) {
   flex-basis: auto;
 }
 

package/src/stacks/stacks.mdx

@@ -34,14 +34,14 @@ Here is the list of components that you will use with stacks:
 ### HStack
 
 This example uses `HStack` to arrange elements horizontally. It places a `Box` on either
-side and a `Box` with width set to `flex` in the middle, creating a simple, evenly spaced layout. The `Box`
-components are set to occupy 25% of the width each, while the `Box` with width set to `flex` automatically
+side and a `Box` with width set to `fill` in the middle, creating a simple, evenly spaced layout. The `Box`
+components are set to occupy 25% of the width each, while the `Box` with width set to `fill` automatically
 takes up the remaining space.
 
 <StyleBox height="auto" padding="10px" border="1px solid #ccc">
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
 </StyleBox>
@@ -49,22 +49,22 @@ takes up the remaining space.
 ```tsx
 <HStack height="100px">
   <Box width="25%">25%</Box>
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Box width="25%">25%</Box>
 </HStack>
 ```
 
 ---
 
-Here, two `Box` components with width set to `flex` are placed between `Box` elements. Each `Box` will
-evenly share the available space between them, making it ideal for creating flexible
+Here, two `Box` components with width set to `fill` are placed between `Box` elements. Each `Box` will
+evenly share the available space between them, making it ideal for creating fillible
 layouts where multiple components need equal space.
 
 <StyleBox height="auto" padding="10px" border="1px solid #ccc">
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
 </StyleBox>
@@ -72,15 +72,15 @@ layouts where multiple components need equal space.
 ```tsx
 <HStack height="100px">
   <Box width="25%">25%</Box>
-  <Box width="flex">flex</Box>
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
+  <Box width="fill">fill</Box>
   <Box width="25%">25%</Box>
 </HStack>
 ```
 
 ---
 
-Using `Spacer` components between the `Box` components with width set to `flex` evenly distributes space
+Using `Spacer` components between the `Box` components with width set to `fill` evenly distributes space
 between the elements. This is useful when you want to create consistent gaps between
 components without needing to specify exact widths.
 
@@ -88,9 +88,9 @@ components without needing to specify exact widths.
   <HStack height="100px">
     <Rect color="#abdef0" width="25%">25%</Rect>
     <Spacer />
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Spacer />
-    <Rect color="#89d9c8" width="flex">flex</Rect>
+    <Rect color="#89d9c8" width="fill">fill</Rect>
     <Spacer />
     <Rect color="#abdef0" width="25%">25%</Rect>
   </HStack>
@@ -100,9 +100,9 @@ components without needing to specify exact widths.
 <HStack height="100px">
   <Box width="25%">25%</Box>
   <Spacer />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer />
   <Box width="25%">25%</Box>
 </HStack>
@@ -118,9 +118,9 @@ automatically fill the available space.
   <HStack height="100px">
     <Rect width="25%" color="#abdef0">25%</Rect>
     <Spacer width="10px" />
-    <Rect width="flex" color="#89d9c8">flex</Rect>
+    <Rect width="fill" color="#89d9c8">fill</Rect>
     <Spacer width="10px" />
-    <Rect width="flex" color="#89d9c8">flex</Rect>
+    <Rect width="fill" color="#89d9c8">fill</Rect>
     <Spacer width="10px" />
     <Rect width="25%" color="#abdef0">25%</Rect>
   </HStack>
@@ -130,9 +130,9 @@ automatically fill the available space.
 <HStack height="100px">
   <Box width="25%">25%</Box>
   <Spacer width="10px" />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer width="10px" />
-  <Box width="flex">flex</Box>
+  <Box width="fill">fill</Box>
   <Spacer width="10px" />
   <Box width="25%">25%</Box>
 </HStack>
@@ -143,13 +143,13 @@ automatically fill the available space.
 ### VStack
 
 This example uses `VStack` to arrange elements vertically. The `Box` components at the top
-and bottom occupy 25% of the height each, while the `Box` with height set to `flex` fills the remaining space,
+and bottom occupy 25% of the height each, while the `Box` with height set to `fill` fills the remaining space,
 making it ideal for creating header-body-footer layouts.
 
 <StyleBox height="400px" padding="10px" border="1px solid #ccc">
   <VStack height="100%">
     <Rect height="25%" color="#abdef0">25%</Rect>
-    <Rect height="flex" color="#89d9c8">flex</Rect>
+    <Rect height="fill" color="#89d9c8">fill</Rect>
     <Rect height="25%" color="#abdef0">25%</Rect>
   </VStack>
 </StyleBox>
@@ -157,7 +157,7 @@ making it ideal for creating header-body-footer layouts.
 ```tsx
 <VStack height="100%">
   <Box height="25%">25%</Box>
-  <Box height="flex">flex</Box>
+  <Box height="fill">fill</Box>
   <Box height="25%">25%</Box>
 </VStack>
 ```
@@ -170,7 +170,7 @@ prop to create consistent gaps between the header, body, and footer sections.
 <StyleBox height="400px" width="100%" padding="10px" border="1px solid #ccc">
   <VStack height="100%" gap="10px">
     <Rect height="40px" color="#abdef0">Header</Rect>
-    <Rect height="flex" color="#ededed">Body</Rect>
+    <Rect height="fill" color="#ededed">Body</Rect>
     <Rect height="40px" color="#abdef0">Footer</Rect>
   </VStack>
 </StyleBox>
@@ -178,7 +178,7 @@ prop to create consistent gaps between the header, body, and footer sections.
 ```tsx
 <VStack height="100%" gap="10px">
   <Box height="40px">Header</Box>
-  <Box height="flex">Body</Box>
+  <Box height="fill">Body</Box>
   <Box height="40px">Footer</Box>
 </VStack>
 ```
@@ -192,9 +192,9 @@ between the header, sidebar, and footer sections.
 <StyleBox height="400px" width="100%" padding="10px" border="1px solid #ccc">
   <VStack height="100%" gap="10px">
     <Rect height="40px" color="#abdef0">Header</Rect>
-    <HStack height="flex" gap="10px">
+    <HStack height="fill" gap="10px">
       <Rect width="200px" minWidth="200px" height="100%" zIndex="1" enableResizeOnEnd color="#ededed">Sidebar</Rect>
-      <Rect width="flex" height="100%" color="#ededed">
+      <Rect width="fill" height="100%" color="#ededed">
         <VStack width="100%" height="100%" overflowY="auto">
           <Grid itemHeight={100} itemWidth={100} columnAmount={4} gap="10px" padding="10px">
             <Rect width="100%" height="100%" color="#abdef0">1</Rect>
@@ -218,9 +218,9 @@ between the header, sidebar, and footer sections.
 ```tsx
 <VStack height="100%" gap="10px">
     <Box height="40px">Header</Box>
-    <HStack height="flex" gap="10px">
+    <HStack height="fill" gap="10px">
       <Box width="200px" minWidth="200px" height="100%" zIndex="1" enableResizeOnEnd>Sidebar</Box>
-      <VStack width="flex" height="100%" overflowY="auto">
+      <VStack width="fill" height="100%" overflowY="auto">
         <Grid itemHeight={100} itemWidth={100} columnAmount={4} gap="10px" padding="10px">
           <Box width="100%" height="100%">1</Box>
           <Box width="100%" height="100%">2</Box>

package/src/stacks/types/styles.ts

@@ -3,10 +3,10 @@ import { Alignment } from './alignment.js';
 export interface StackStyleProps {
   hAlign?: Alignment;
   vAlign?: Alignment;
-  width?: 'default' | 'flex' | 'auto' | string | number;
+  width?: 'default' | 'flex' | 'auto' | 'fill' | string | number;
   minWidth?: string | number;
   maxWidth?: string | number;
-  height?: 'default' | 'flex' | 'auto' | string | number;
+  height?: 'default' | 'flex' | 'auto' | 'fill' | string | number;
   minHeight?: string | number;
   maxHeight?: string | number;
   growWeight?: number;