@askrjs/themes 0.0.1

package/src/components/flex/flex.tsx

@@ -0,0 +1,160 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import {
+  applyBoxLayoutStyles,
+  splitBoxLayoutProps,
+  withBoxLayoutStyle,
+} from "../_internal/box-layout";
+import {
+  isResponsiveValue,
+  resolveAlignValue,
+  resolveJustifyValue,
+  resolveSpaceValue,
+  serializeResponsiveValueIf,
+  setResponsiveStyleVar,
+} from "../_internal/layout";
+import type { FlexAsChildProps, FlexDivProps, FlexSpanProps } from "./flex.types";
+
+const SPACE_TOKENS = new Set([
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+]);
+
+function isResponsiveObject(value: unknown): boolean {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function isCssCoveredSpaceValue(value: unknown): value is string {
+  return typeof value === "string" && SPACE_TOKENS.has(value.trim());
+}
+
+function isCssCoveredDirectionValue(value: unknown): value is string {
+  return (
+    typeof value === "string" &&
+    ["row", "column", "row-reverse", "column-reverse"].includes(value.trim())
+  );
+}
+
+function isCssCoveredAlignValue(value: unknown): value is string {
+  return (
+    typeof value === "string" &&
+    ["start", "end", "center", "stretch", "baseline"].includes(value.trim())
+  );
+}
+
+function isCssCoveredJustifyValue(value: unknown): value is string {
+  return typeof value === "string" && ["start", "end", "center", "between"].includes(value.trim());
+}
+
+function isCssCoveredWrapValue(value: unknown): value is string {
+  return typeof value === "string" && ["wrap", "nowrap", "wrap-reverse"].includes(value.trim());
+}
+
+function serializeStaticThemeValue<T>(
+  value: T | Partial<Record<"initial" | "sm" | "md" | "lg" | "xl", T>> | undefined,
+  predicate: (value: T) => boolean,
+): string | undefined {
+  if (isResponsiveValue(value)) return undefined;
+  return serializeResponsiveValueIf(value, predicate);
+}
+
+const SLOTS = {
+  root: "flex",
+} as const;
+
+export function Flex(props: FlexDivProps): JSX.Element;
+export function Flex(props: FlexSpanProps): JSX.Element;
+export function Flex(props: FlexAsChildProps): JSX.Element;
+export function Flex(props: FlexDivProps | FlexSpanProps | FlexAsChildProps) {
+  const as = "as" in props ? props.as : "div";
+  const {
+    asChild,
+    children,
+    direction = "row",
+    gap,
+    gapX,
+    gapY,
+    align,
+    justify,
+    wrap,
+    collapseBelow,
+    ref,
+    style: userStyle,
+    ...rest
+  } = props;
+
+  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
+  const rootSlot =
+    typeof (passthroughProps as Record<string, unknown>)["data-slot"] === "string"
+      ? String((passthroughProps as Record<string, unknown>)["data-slot"])
+      : SLOTS.root;
+  const layoutStyle: Record<string, string | number> = {};
+  applyBoxLayoutStyles(layoutStyle, boxProps);
+
+  if (boxProps.display !== undefined) {
+    setResponsiveStyleVar(layoutStyle, "display", boxProps.display, (value) => value);
+  }
+  if (
+    direction !== "row" &&
+    (!isCssCoveredDirectionValue(direction) || isResponsiveObject(direction))
+  ) {
+    setResponsiveStyleVar(layoutStyle, "flex-direction", direction, (value) => value);
+  }
+  if (!isCssCoveredSpaceValue(gap) || isResponsiveObject(gap)) {
+    setResponsiveStyleVar(layoutStyle, "gap", gap, resolveSpaceValue);
+  }
+  if (!isCssCoveredSpaceValue(gapX) || isResponsiveObject(gapX)) {
+    setResponsiveStyleVar(layoutStyle, "column-gap", gapX, resolveSpaceValue);
+  }
+  if (!isCssCoveredSpaceValue(gapY) || isResponsiveObject(gapY)) {
+    setResponsiveStyleVar(layoutStyle, "row-gap", gapY, resolveSpaceValue);
+  }
+  if (!isCssCoveredAlignValue(align) || isResponsiveObject(align)) {
+    setResponsiveStyleVar(layoutStyle, "align-items", align, resolveAlignValue);
+  }
+  if (!isCssCoveredJustifyValue(justify) || isResponsiveObject(justify)) {
+    setResponsiveStyleVar(layoutStyle, "justify-content", justify, resolveJustifyValue);
+  }
+  if (!isCssCoveredWrapValue(wrap) || isResponsiveObject(wrap)) {
+    setResponsiveStyleVar(layoutStyle, "flex-wrap", wrap, (value) => value);
+  }
+
+  const finalProps = mergeProps(passthroughProps, {
+    ref,
+    "data-slot": rootSlot,
+    "data-ak-layout": "true",
+    "data-direction": serializeStaticThemeValue(direction, isCssCoveredDirectionValue),
+    "data-gap": serializeStaticThemeValue(gap, isCssCoveredSpaceValue),
+    "data-gap-x": serializeStaticThemeValue(gapX, isCssCoveredSpaceValue),
+    "data-gap-y": serializeStaticThemeValue(gapY, isCssCoveredSpaceValue),
+    "data-align": serializeStaticThemeValue(align, isCssCoveredAlignValue),
+    "data-justify": serializeStaticThemeValue(justify, isCssCoveredJustifyValue),
+    "data-wrap": serializeStaticThemeValue(wrap, isCssCoveredWrapValue),
+    "data-collapse-below": collapseBelow,
+    style: withBoxLayoutStyle(layoutStyle, userStyle),
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  if (as === "span") {
+    return <span {...finalProps}>{children}</span>;
+  }
+
+  return <div {...finalProps}>{children}</div>;
+}

package/src/components/flex/flex.types.ts

@@ -0,0 +1,50 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
+
+export type FlexOwnProps = BoxLayoutOwnProps & {
+  direction?: LayoutResponsive<"row" | "column" | "row-reverse" | "column-reverse">;
+  gap?: LayoutResponsive<string | number>;
+  gapX?: LayoutResponsive<string | number>;
+  gapY?: LayoutResponsive<string | number>;
+  align?: LayoutResponsive<string>;
+  justify?: LayoutResponsive<string>;
+  wrap?: LayoutResponsive<"wrap" | "nowrap" | "wrap-reverse">;
+  /**
+   * Compatibility breakpoint helper. Prefer responsive `direction` instead.
+   */
+  collapseBelow?: string;
+  as?: "div" | "span";
+  children?: unknown;
+};
+
+export type FlexNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  FlexOwnProps & {
+    as?: "div";
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type FlexSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> &
+  FlexOwnProps & {
+    as: "span";
+    asChild?: false;
+    ref?: Ref<HTMLSpanElement>;
+  };
+
+export type FlexAsChildProps = Omit<FlexOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["div"]["style"];
+};
+
+export type FlexDivProps = FlexNativeProps;
+
+export type FlexProps = FlexDivProps | FlexSpanProps | FlexAsChildProps;
+
+export type InlineOwnProps = FlexOwnProps;
+export type InlineNativeProps = FlexNativeProps;
+export type InlineDivProps = FlexDivProps;
+export type InlineSpanProps = FlexSpanProps;
+export type InlineAsChildProps = FlexAsChildProps;
+export type InlineProps = FlexProps;

package/src/components/flex/index.ts

@@ -0,0 +1,16 @@
+export { Flex } from "./flex";
+export { FLEX_A11Y_CONTRACT, type FlexA11yContract } from "./flex.a11y";
+export type {
+  FlexProps,
+  FlexOwnProps,
+  FlexNativeProps,
+  FlexDivProps,
+  FlexSpanProps,
+  FlexAsChildProps,
+  InlineProps,
+  InlineOwnProps,
+  InlineNativeProps,
+  InlineDivProps,
+  InlineSpanProps,
+  InlineAsChildProps,
+} from "./flex.types";

package/src/components/grid/grid.a11y.ts

@@ -0,0 +1,22 @@
+export const GRID_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    layout: "data-ak-layout" as const,
+    areas: "data-areas" as const,
+    columns: "data-columns" as const,
+    rows: "data-rows" as const,
+    flow: "data-flow" as const,
+    minItemWidth: "data-min-item-width" as const,
+    gap: "data-gap" as const,
+    gapX: "data-gap-x" as const,
+    gapY: "data-gap-y" as const,
+    autoFit: "data-auto-fit" as const,
+    align: "data-align" as const,
+    justify: "data-justify" as const,
+  },
+  SLOT_VALUES: {
+    root: "grid" as const,
+  },
+} as const;
+
+export type GridA11yContract = typeof GRID_A11Y_CONTRACT;

package/src/components/grid/grid.tsx

@@ -0,0 +1,172 @@
+import { For } from "@askrjs/askr";
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "../_internal/merge-props";
+import {
+  applyBoxLayoutStyles,
+  splitBoxLayoutProps,
+  withBoxLayoutStyle,
+} from "../_internal/box-layout";
+import { isJsxElement, toChildArray } from "../_internal/jsx";
+import {
+  isResponsiveValue,
+  resolveAlignValue,
+  resolveGridTrackValue,
+  resolveJustifyValue,
+  resolveSpaceValue,
+  serializeResponsiveValueIf,
+  serializeValueIf,
+  setResponsiveStyleVar,
+} from "../_internal/layout";
+import type { GridAsChildProps, GridDivProps, GridSpanProps } from "./grid.types";
+
+const SPACE_TOKENS = new Set([
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+]);
+
+function isResponsiveObject(value: unknown): boolean {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function isCssCoveredSpaceValue(value: unknown): value is string {
+  return typeof value === "string" && SPACE_TOKENS.has(value.trim());
+}
+
+function isCssCoveredAlignValue(value: unknown): value is string {
+  return (
+    typeof value === "string" &&
+    ["start", "end", "center", "stretch", "baseline"].includes(value.trim())
+  );
+}
+
+function isCssCoveredJustifyValue(value: unknown): value is string {
+  return typeof value === "string" && ["start", "end", "center", "between"].includes(value.trim());
+}
+
+function isCssCoveredGridColumnValue(value: unknown): boolean {
+  return typeof value === "number" || (typeof value === "string" && /^\d+$/.test(value.trim()));
+}
+
+function isCssCoveredAutoFitValue(value: unknown): value is boolean {
+  return typeof value === "boolean";
+}
+
+function serializeStaticThemeValue<T>(
+  value: T | Partial<Record<"initial" | "sm" | "md" | "lg" | "xl", T>> | undefined,
+  predicate: (value: T) => boolean,
+): string | undefined {
+  if (isResponsiveValue(value)) return undefined;
+  return serializeResponsiveValueIf(value, predicate);
+}
+
+function resolveCompatibilityGridTemplate(
+  minItemWidth: string | undefined,
+  autoFit: boolean | undefined,
+): string | undefined {
+  if (!minItemWidth) return undefined;
+  const fitKeyword = autoFit === false ? "auto-fill" : "auto-fit";
+  return `repeat(${fitKeyword}, minmax(${minItemWidth}, 1fr))`;
+}
+
+export function Grid(props: GridDivProps): JSX.Element;
+export function Grid(props: GridSpanProps): JSX.Element;
+export function Grid(props: GridAsChildProps): JSX.Element;
+export function Grid(props: GridDivProps | GridSpanProps | GridAsChildProps) {
+  const as = "as" in props ? props.as : "div";
+  const {
+    asChild,
+    children,
+    areas,
+    columns,
+    rows,
+    flow,
+    gap,
+    gapX,
+    gapY,
+    align,
+    justify,
+    minItemWidth,
+    autoFit,
+    ref,
+    style: userStyle,
+    ...rest
+  } = props;
+
+  const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
+  const layoutStyle: Record<string, string | number> = {};
+  applyBoxLayoutStyles(layoutStyle, boxProps);
+
+  if (boxProps.display !== undefined) {
+    setResponsiveStyleVar(layoutStyle, "display", boxProps.display, (value) => value);
+  }
+  setResponsiveStyleVar(layoutStyle, "grid-template-areas", areas, (value) => value);
+  setResponsiveStyleVar(
+    layoutStyle,
+    "grid-template-columns",
+    columns ?? resolveCompatibilityGridTemplate(minItemWidth, autoFit),
+    resolveGridTrackValue,
+  );
+  setResponsiveStyleVar(layoutStyle, "grid-template-rows", rows, resolveGridTrackValue);
+  setResponsiveStyleVar(layoutStyle, "grid-auto-flow", flow, (value) => value);
+  if (!isCssCoveredSpaceValue(gap) || isResponsiveObject(gap)) {
+    setResponsiveStyleVar(layoutStyle, "gap", gap, resolveSpaceValue);
+  }
+  if (!isCssCoveredSpaceValue(gapX) || isResponsiveObject(gapX)) {
+    setResponsiveStyleVar(layoutStyle, "column-gap", gapX, resolveSpaceValue);
+  }
+  if (!isCssCoveredSpaceValue(gapY) || isResponsiveObject(gapY)) {
+    setResponsiveStyleVar(layoutStyle, "row-gap", gapY, resolveSpaceValue);
+  }
+  if (!isCssCoveredAlignValue(align) || isResponsiveObject(align)) {
+    setResponsiveStyleVar(layoutStyle, "align-items", align, resolveAlignValue);
+  }
+  if (!isCssCoveredJustifyValue(justify) || isResponsiveObject(justify)) {
+    setResponsiveStyleVar(layoutStyle, "justify-content", justify, resolveJustifyValue);
+  }
+
+  const finalProps = mergeProps(passthroughProps, {
+    ref,
+    "data-slot": "grid",
+    "data-ak-layout": "true",
+    "data-columns": serializeStaticThemeValue(columns, isCssCoveredGridColumnValue),
+    "data-gap": serializeStaticThemeValue(gap, isCssCoveredSpaceValue),
+    "data-gap-x": serializeStaticThemeValue(gapX, isCssCoveredSpaceValue),
+    "data-gap-y": serializeStaticThemeValue(gapY, isCssCoveredSpaceValue),
+    "data-align": serializeStaticThemeValue(align, isCssCoveredAlignValue),
+    "data-justify": serializeStaticThemeValue(justify, isCssCoveredJustifyValue),
+    "data-auto-fit": serializeValueIf(autoFit, isCssCoveredAutoFitValue),
+    style: withBoxLayoutStyle(layoutStyle, userStyle),
+  });
+  const keyedChildren = (
+    <For
+      each={() => toChildArray(children)}
+      by={(child, index) => (isJsxElement(child) && child.key != null ? child.key : index)}
+    >
+      {(child) => child as never}
+    </For>
+  );
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  if (as === "span") {
+    return <span {...finalProps}>{keyedChildren}</span>;
+  }
+
+  return <div {...finalProps}>{keyedChildren}</div>;
+}

package/src/components/grid/grid.types.ts

@@ -0,0 +1,45 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
+
+export type GridOwnProps = BoxLayoutOwnProps & {
+  areas?: LayoutResponsive<string>;
+  columns?: LayoutResponsive<number | string>;
+  rows?: LayoutResponsive<number | string>;
+  flow?: LayoutResponsive<string>;
+  gap?: LayoutResponsive<string | number>;
+  gapX?: LayoutResponsive<string | number>;
+  gapY?: LayoutResponsive<string | number>;
+  align?: LayoutResponsive<string>;
+  justify?: LayoutResponsive<string>;
+  /** Compatibility helper for auto-fit grids. */
+  minItemWidth?: string;
+  /** Compatibility helper for auto-fit grids. */
+  autoFit?: boolean;
+  as?: "div" | "span";
+  children?: unknown;
+};
+
+export type GridNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  GridOwnProps & {
+    as?: "div";
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type GridSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> &
+  GridOwnProps & {
+    as: "span";
+    asChild?: false;
+    ref?: Ref<HTMLSpanElement>;
+  };
+
+export type GridAsChildProps = Omit<GridOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+  style?: JSX.IntrinsicElements["div"]["style"];
+};
+
+export type GridDivProps = GridNativeProps;
+
+export type GridProps = GridDivProps | GridSpanProps | GridAsChildProps;

package/src/components/grid/index.ts

@@ -0,0 +1,10 @@
+export { Grid } from "./grid";
+export { GRID_A11Y_CONTRACT, type GridA11yContract } from "./grid.a11y";
+export type {
+  GridProps,
+  GridOwnProps,
+  GridNativeProps,
+  GridDivProps,
+  GridSpanProps,
+  GridAsChildProps,
+} from "./grid.types";

package/src/components/header/header.a11y.ts

@@ -0,0 +1,11 @@
+export const HEADER_A11Y_CONTRACT = {
+  DATA_ATTRIBUTES: {
+    slot: "data-slot" as const,
+    position: "data-position" as const,
+  },
+  SLOT_VALUES: {
+    root: "header" as const,
+  },
+} as const;
+
+export type HeaderA11yContract = typeof HEADER_A11Y_CONTRACT;

package/src/components/header/header.tsx

@@ -0,0 +1,18 @@
+import { classes } from "../_internal/classes";
+import type { HeaderProps } from "./header.types";
+
+export function Header(props: HeaderProps): JSX.Element {
+  const { children, position = "static", ref, class: className, ...rest } = props;
+
+  return (
+    <header
+      {...rest}
+      ref={ref}
+      class={classes("header", className)}
+      data-slot="header"
+      data-position={position}
+    >
+      {children}
+    </header>
+  );
+}

package/src/components/header/header.types.ts

@@ -0,0 +1,6 @@
+export type HeaderPosition = "static" | "relative" | "sticky" | "absolute" | "fixed";
+
+export type HeaderProps = Omit<JSX.IntrinsicElements["header"], "children"> & {
+  position?: HeaderPosition;
+  children?: unknown;
+};

package/src/components/header/index.ts

@@ -0,0 +1,3 @@
+export { Header } from "./header";
+export { HEADER_A11Y_CONTRACT, type HeaderA11yContract } from "./header.a11y";
+export type { HeaderProps, HeaderPosition } from "./header.types";

package/src/components/index.ts

@@ -0,0 +1,107 @@
+import "../themes/default/index.css";
+
+// Theme controls
+export { Button } from "@askrjs/ui";
+export type {
+  ButtonAsChildProps,
+  ButtonNativeProps,
+  ButtonOwnProps,
+  ButtonProps,
+} from "@askrjs/ui";
+export { DEFAULT_THEME_OPTIONS, ThemePicker, ThemeProvider, ThemeToggle, useTheme } from "./theme";
+export type {
+  ThemeContextValue,
+  ThemeName,
+  ThemeOption,
+  ThemePickerProps,
+  ThemeProviderProps,
+  ThemeToggleProps,
+  ThemeToggleRenderContext,
+} from "./theme";
+
+// Visual primitives
+export { Badge } from "./badge";
+export type { BadgeProps } from "./badge";
+export { AccessibleIcon } from "./accessible-icon";
+export type { AccessibleIconProps } from "./accessible-icon";
+export { AspectRatio } from "./aspect-ratio";
+export type { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio";
+export { Box } from "./box";
+export type { BoxProps } from "./box";
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card";
+export type {
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+} from "./card";
+export { Container } from "./container";
+export type { ContainerProps, ContainerVariant } from "./container";
+export { Flex } from "./flex";
+export type { FlexProps } from "./flex";
+export { Grid } from "./grid";
+export type { GridProps } from "./grid";
+export { Inline } from "./inline";
+export type { InlineProps } from "./inline";
+export { GitHubLogo, GoogleLogo, MicrosoftLogo } from "./logos";
+export type { LogoProps } from "./logos";
+export { Section } from "./section";
+export type { SectionProps } from "./section";
+export { Divider, Separator } from "./separator";
+export type { DividerProps, SeparatorProps } from "./separator";
+export { Skeleton } from "./skeleton";
+export type { SkeletonProps } from "./skeleton";
+export { Spacer } from "./spacer";
+export type { SpacerProps } from "./spacer";
+export { Stack } from "./stack";
+export type { StackProps } from "./stack";
+
+// Theme-owned wrappers
+export {
+  Breadcrumb,
+  BreadcrumbCurrent,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "./breadcrumb";
+export type {
+  BreadcrumbAsChildProps,
+  BreadcrumbCurrentAsChildProps,
+  BreadcrumbCurrentProps,
+  BreadcrumbItemAsChildProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkAsChildProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListAsChildProps,
+  BreadcrumbListProps,
+  BreadcrumbOwnProps,
+  BreadcrumbProps,
+  BreadcrumbSeparatorAsChildProps,
+  BreadcrumbSeparatorProps,
+} from "./breadcrumb";
+export { Spinner } from "./spinner";
+export type { SpinnerOwnProps, SpinnerProps } from "./spinner";
+
+// Empty state
+export { EmptyState } from "./empty-state";
+export type { EmptyStateHeadingTag, EmptyStateProps } from "./empty-state";
+
+// Shell / chrome
+export { Header } from "./header";
+export type { HeaderPosition, HeaderProps } from "./header";
+export { NavBrand, Navbar, NavGroup, NavItem } from "./navbar";
+export type {
+  NavBrandProps,
+  NavbarProps,
+  NavGroupProps,
+  NavItemAsChildProps,
+  NavItemProps,
+  NavItemVariant,
+} from "./navbar";
+export { SidebarLayout } from "./sidebar-layout";
+export type { SidebarLayoutProps, SidebarPosition } from "./sidebar-layout";
+export { TopbarLayout } from "./topbar-layout";
+export type { TopbarLayoutProps } from "./topbar-layout";

package/src/components/inline/index.tsx

@@ -0,0 +1,28 @@
+import { Flex } from "../flex";
+import type { InlineProps } from "../flex";
+
+export function Inline(props: InlineProps): JSX.Element {
+  return <Flex {...(props as Record<string, unknown>)} data-slot="inline" />;
+}
+
+export { Flex };
+export {
+  FLEX_A11Y_CONTRACT,
+  FLEX_A11Y_CONTRACT as INLINE_A11Y_CONTRACT,
+  type FlexA11yContract,
+  type FlexA11yContract as InlineA11yContract,
+} from "../flex/flex.a11y";
+export type {
+  FlexProps,
+  FlexOwnProps,
+  FlexNativeProps,
+  FlexDivProps,
+  FlexSpanProps,
+  FlexAsChildProps,
+  FlexProps as InlineProps,
+  FlexOwnProps as InlineOwnProps,
+  FlexNativeProps as InlineNativeProps,
+  FlexDivProps as InlineDivProps,
+  FlexSpanProps as InlineSpanProps,
+  FlexAsChildProps as InlineAsChildProps,
+} from "../flex/flex.types";