@askrjs/themes 0.0.1

package/dist/components/index.d.ts

@@ -0,0 +1,49 @@
+import "../themes/default/index.css";
+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";
+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";
+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";
+export { EmptyState } from "./empty-state";
+export type { EmptyStateHeadingTag, EmptyStateProps } from "./empty-state";
+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/dist/components/index.js

@@ -0,0 +1,28 @@
+/* empty css                                      */
+import { DEFAULT_THEME_OPTIONS, ThemePicker, ThemeProvider, ThemeToggle, useTheme } from "../theme/theme.js";
+import { Badge } from "../badge/badge.js";
+import { AccessibleIcon } from "../accessible-icon/accessible-icon.js";
+import { AspectRatio } from "../aspect-ratio/aspect-ratio.js";
+import { Box } from "../box/box.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../card/card.js";
+import { Container } from "../container/container.js";
+import { Flex } from "../flex/flex.js";
+import { Grid } from "../grid/grid.js";
+import { Inline } from "../inline/index.js";
+import { GitHubLogo } from "../logos/github-logo.js";
+import { GoogleLogo } from "../logos/google-logo.js";
+import { MicrosoftLogo } from "../logos/microsoft-logo.js";
+import { Section } from "../section/section.js";
+import { Separator } from "../separator/separator.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { Spacer } from "../spacer/spacer.js";
+import { Stack } from "../stack/stack.js";
+import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "../breadcrumb/breadcrumb.js";
+import { Spinner } from "../spinner/spinner.js";
+import { EmptyState } from "../empty-state/empty-state.js";
+import { Header } from "../header/header.js";
+import { NavBrand, NavGroup, NavItem, Navbar } from "../navbar/navbar.js";
+import { SidebarLayout } from "../sidebar-layout/sidebar-layout.js";
+import { TopbarLayout } from "../topbar-layout/topbar-layout.js";
+import { Button } from "@askrjs/ui";
+export { AccessibleIcon, AspectRatio, Badge, Box, Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Container, DEFAULT_THEME_OPTIONS, Separator as Divider, EmptyState, Flex, GitHubLogo, GoogleLogo, Grid, Header, Inline, MicrosoftLogo, NavBrand, NavGroup, NavItem, Navbar, Section, Separator, SidebarLayout, Skeleton, Spacer, Spinner, Stack, ThemePicker, ThemeProvider, ThemeToggle, TopbarLayout, useTheme };

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

@@ -0,0 +1,6 @@
+import { Flex } from "../flex";
+import type { InlineProps } from "../flex";
+export declare function Inline(props: InlineProps): JSX.Element;
+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";

package/dist/components/logos/create-logo.d.ts

@@ -0,0 +1,5 @@
+import type { LogoNode, LogoProps } from "./types";
+export declare function createLogo(displayName: string, viewBox: string, logoNode: LogoNode): {
+    ({ size, title, class: className, style, ref, ...rest }: LogoProps): import("@askrjs/askr/foundations").JSXElement;
+    displayName: string;
+};

package/dist/components/logos/github-logo.d.ts

@@ -0,0 +1,4 @@
+export declare const GitHubLogo: {
+    ({ size, title, class: className, style, ref, ...rest }: import("./types").LogoProps): import("@askrjs/askr/foundations").JSXElement;
+    displayName: string;
+};

package/dist/components/logos/google-logo.d.ts

@@ -0,0 +1,4 @@
+export declare const GoogleLogo: {
+    ({ size, title, class: className, style, ref, ...rest }: import("./types").LogoProps): import("@askrjs/askr/foundations").JSXElement;
+    displayName: string;
+};

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

@@ -0,0 +1,5 @@
+export { createLogo } from "./create-logo";
+export type { IconSizeToken, LogoNode, LogoProps } from "./types";
+export { GitHubLogo } from "./github-logo";
+export { GoogleLogo } from "./google-logo";
+export { MicrosoftLogo } from "./microsoft-logo";

package/dist/components/logos/microsoft-logo.d.ts

@@ -0,0 +1,4 @@
+export declare const MicrosoftLogo: {
+    ({ size, title, class: className, style, ref, ...rest }: import("./types").LogoProps): import("@askrjs/askr/foundations").JSXElement;
+    displayName: string;
+};

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

@@ -0,0 +1,14 @@
+export type IconSizeToken = "sm" | "md" | "lg" | "xl";
+export type LogoStyleObject = Record<string, unknown>;
+export type LogoOwnProps = {
+    size?: number | string;
+    title?: string;
+    class?: string;
+    style?: string | LogoStyleObject;
+    iconName?: string;
+};
+export type LogoProps = Omit<JSX.IntrinsicElements["svg"], "children" | "class" | "height" | "ref" | "role" | "stroke" | "style" | "title" | "width"> & LogoOwnProps & {
+    children?: unknown;
+    ref?: unknown;
+};
+export type LogoNode = ReadonlyArray<readonly [tag: string, attrs: Readonly<Record<string, string>>]>;

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

@@ -0,0 +1,2 @@
+export { NavBrand, Navbar, NavGroup, NavItem } from "./navbar";
+export type { NavBrandProps, NavbarProps, NavGroupProps, NavItemAsChildProps, NavItemProps, NavItemVariant, } from "./navbar.types";

package/dist/components/navbar/navbar.d.ts

@@ -0,0 +1,6 @@
+import type { NavBrandProps, NavGroupProps, NavItemAsChildProps, NavItemProps, NavbarProps } from "./navbar.types";
+export declare function Navbar(props: NavbarProps): JSX.Element;
+export declare function NavBrand(props: NavBrandProps): JSX.Element;
+export declare function NavGroup(props: NavGroupProps): JSX.Element;
+export declare function NavItem(props: NavItemProps): JSX.Element;
+export declare function NavItem(props: NavItemAsChildProps): JSX.Element;

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

@@ -0,0 +1,24 @@
+export type NavbarProps = Omit<JSX.IntrinsicElements["nav"], "children"> & {
+    children?: unknown;
+};
+export type NavBrandProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+    children?: unknown;
+};
+export type NavGroupProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+    children?: unknown;
+};
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+export type NavItemVariant = "default" | "icon";
+export type NavItemOwnProps = {
+    children?: unknown;
+    variant?: NavItemVariant;
+};
+export type NavItemProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLAnchorElement>;
+};
+export type NavItemAsChildProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & NavItemOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+};

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

@@ -0,0 +1,3 @@
+export { Section } from "./section";
+export { SECTION_A11Y_CONTRACT, type SectionA11yContract } from "./section.a11y";
+export type { SectionProps, SectionOwnProps, SectionElementProps, SectionAsChildProps, } from "./section.types";

package/dist/components/section/section.a11y.d.ts

@@ -0,0 +1,11 @@
+export declare const SECTION_A11Y_CONTRACT: {
+    readonly DATA_ATTRIBUTES: {
+        readonly slot: "data-slot";
+        readonly layout: "data-ak-layout";
+        readonly size: "data-size";
+    };
+    readonly SLOT_VALUES: {
+        readonly root: "section";
+    };
+};
+export type SectionA11yContract = typeof SECTION_A11Y_CONTRACT;

package/dist/components/section/section.d.ts

@@ -0,0 +1,3 @@
+import type { SectionAsChildProps, SectionElementProps } from "./section.types";
+export declare function Section(props: SectionElementProps): JSX.Element;
+export declare function Section(props: SectionAsChildProps): JSX.Element;

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

@@ -0,0 +1,17 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
+export type SectionOwnProps = BoxLayoutOwnProps & {
+    size?: LayoutResponsive<"1" | "2" | "3" | "4">;
+    children?: unknown;
+};
+export type SectionElementProps = Omit<JSX.IntrinsicElements["section"], "children" | "ref"> & SectionOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLElement>;
+};
+export type SectionAsChildProps = SectionOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+    style?: JSX.IntrinsicElements["section"]["style"];
+};
+export type SectionProps = SectionElementProps | SectionAsChildProps;

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

@@ -0,0 +1,3 @@
+export { Separator, Separator as Divider } from "./separator";
+export { SEPARATOR_A11Y_CONTRACT, type SeparatorA11yContract } from "./separator.a11y";
+export type { SeparatorProps, SeparatorProps as DividerProps, SeparatorOwnProps, SeparatorOwnProps as DividerOwnProps, SeparatorNativeProps, SeparatorNativeProps as DividerNativeProps, SeparatorAsChildProps, SeparatorAsChildProps as DividerAsChildProps, } from "./separator.types";

package/dist/components/separator/separator.a11y.d.ts

@@ -0,0 +1,13 @@
+/**
+ * WAI-ARIA Separator Pattern.
+ */
+export declare const SEPARATOR_A11Y_CONTRACT: {
+    readonly ROLE: "separator";
+    readonly DECORATIVE_ROLE: "presentation";
+    readonly ORIENTATION_ATTRIBUTE: "aria-orientation";
+    readonly DATA_ATTRIBUTES: {
+        readonly orientation: "data-orientation";
+    };
+    readonly DEFAULT_ORIENTATION: "horizontal";
+};
+export type SeparatorA11yContract = typeof SEPARATOR_A11Y_CONTRACT;

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,3 @@
+import type { SeparatorAsChildProps, SeparatorNativeProps } from "./separator.types";
+export declare function Separator(props: SeparatorNativeProps): JSX.Element;
+export declare function Separator(props: SeparatorAsChildProps): JSX.Element;

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

@@ -0,0 +1,16 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+export type SeparatorOwnProps = {
+    decorative?: boolean;
+    orientation?: "horizontal" | "vertical";
+    children?: unknown;
+};
+export type SeparatorNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SeparatorOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+};
+export type SeparatorAsChildProps = SeparatorOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+};
+export type SeparatorProps = SeparatorNativeProps | SeparatorAsChildProps;

package/dist/components/sidebar-layout/index.d.ts

@@ -0,0 +1,3 @@
+export { SidebarLayout } from "./sidebar-layout";
+export { SIDEBAR_LAYOUT_A11Y_CONTRACT, type SidebarLayoutA11yContract, } from "./sidebar-layout.a11y";
+export type { SidebarLayoutProps, SidebarPosition } from "./sidebar-layout.types";

package/dist/components/sidebar-layout/sidebar-layout.a11y.d.ts

@@ -0,0 +1,15 @@
+export declare const SIDEBAR_LAYOUT_A11Y_CONTRACT: {
+    readonly DATA_ATTRIBUTES: {
+        readonly slot: "data-slot";
+        readonly sidebarPosition: "data-sidebar-position";
+        readonly sidebarWidth: "data-sidebar-width";
+        readonly gap: "data-gap";
+        readonly collapseBelow: "data-collapse-below";
+    };
+    readonly SLOT_VALUES: {
+        readonly root: "sidebar-layout";
+        readonly sidebar: "sidebar";
+        readonly main: "main";
+    };
+};
+export type SidebarLayoutA11yContract = typeof SIDEBAR_LAYOUT_A11Y_CONTRACT;

package/dist/components/sidebar-layout/sidebar-layout.d.ts

@@ -0,0 +1,2 @@
+import type { SidebarLayoutProps } from "./sidebar-layout.types";
+export declare function SidebarLayout(props: SidebarLayoutProps): JSX.Element;

package/dist/components/sidebar-layout/sidebar-layout.types.d.ts

@@ -0,0 +1,20 @@
+import type { Ref } from "@askrjs/askr/foundations";
+export type SidebarPosition = "start" | "end";
+export type SidebarLayoutProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & {
+    /** Content rendered into the sidebar slot (aside). */
+    sidebar?: unknown;
+    /** Content rendered into the main slot. */
+    children?: unknown;
+    /** Which side the sidebar appears on. Defaults to 'start'. */
+    sidebarPosition?: SidebarPosition;
+    /** CSS width for the sidebar. Applied as inline style only when it is a real CSS length. */
+    sidebarWidth?: string;
+    /** CSS gap between sidebar and main. Applied as inline style only when it is a real CSS length. */
+    gap?: string;
+    /**
+     * Named breakpoint below which the layout collapses to a single column.
+     * Official themes recognize `sm`, `md`, `lg`, and `xl`.
+     */
+    collapseBelow?: string;
+    ref?: Ref<HTMLDivElement>;
+};

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

@@ -0,0 +1,3 @@
+export { Skeleton } from "./skeleton";
+export { SKELETON_A11Y_CONTRACT, type SkeletonA11yContract } from "./skeleton.a11y";
+export type { SkeletonOwnProps, SkeletonProps, SkeletonAsChildProps } from "./skeleton.types";

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

@@ -0,0 +1,12 @@
+/**
+ * Accessibility contract for Skeleton.
+ */
+export declare const SKELETON_A11Y_CONTRACT: {
+    readonly DATA_ATTRIBUTES: {
+        readonly slot: "data-slot";
+    };
+    readonly MARKER: "data-skeleton";
+    readonly DECORATIVE_ATTRIBUTE: "aria-hidden";
+    readonly DECORATIVE_VALUE: "true";
+};
+export type SkeletonA11yContract = typeof SKELETON_A11Y_CONTRACT;

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

@@ -0,0 +1,3 @@
+import type { SkeletonAsChildProps, SkeletonProps } from "./skeleton.types";
+export declare function Skeleton(props: SkeletonProps): JSX.Element;
+export declare function Skeleton(props: SkeletonAsChildProps): JSX.Element;

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

@@ -0,0 +1,13 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+export type SkeletonOwnProps = {
+    children?: unknown;
+};
+export type SkeletonProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SkeletonOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+};
+export type SkeletonAsChildProps = SkeletonOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+};

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

@@ -0,0 +1,3 @@
+export { Spacer } from "./spacer";
+export { SPACER_A11Y_CONTRACT, type SpacerA11yContract } from "./spacer.a11y";
+export type { SpacerProps, SpacerOwnProps, SpacerAxis, SpacerNativeProps, SpacerAsChildProps, } from "./spacer.types";

package/dist/components/spacer/spacer.a11y.d.ts

@@ -0,0 +1,13 @@
+export declare const SPACER_A11Y_CONTRACT: {
+    readonly DATA_ATTRIBUTES: {
+        readonly slot: "data-slot";
+        readonly axis: "data-axis";
+        readonly grow: "data-grow";
+        readonly shrink: "data-shrink";
+        readonly basis: "data-basis";
+    };
+    readonly SLOT_VALUES: {
+        readonly root: "spacer";
+    };
+};
+export type SpacerA11yContract = typeof SPACER_A11Y_CONTRACT;

package/dist/components/spacer/spacer.d.ts

@@ -0,0 +1,3 @@
+import type { SpacerAsChildProps, SpacerNativeProps } from "./spacer.types";
+export declare function Spacer(props: SpacerNativeProps): JSX.Element;
+export declare function Spacer(props: SpacerAsChildProps): JSX.Element;

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

@@ -0,0 +1,24 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+export type SpacerAxis = "inline" | "block";
+export type SpacerOwnProps = {
+    /** flex-grow factor (default 1 when no axis is set). */
+    grow?: number;
+    /** flex-shrink factor (default 1 when no axis is set, 0 when axis is set). */
+    shrink?: number;
+    /** CSS flex-basis / width (axis=inline) / height (axis=block) value. Applied as inline style only when it is a real CSS length. */
+    basis?: string;
+    /** When set, renders a fixed space along the given axis instead of a flex-grow spacer. */
+    axis?: SpacerAxis;
+    children?: unknown;
+};
+export type SpacerNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & SpacerOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+};
+export type SpacerAsChildProps = SpacerOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+    style?: JSX.IntrinsicElements["div"]["style"];
+};
+export type SpacerProps = SpacerNativeProps | SpacerAsChildProps;

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

@@ -0,0 +1,2 @@
+export { Spinner } from "./spinner";
+export type { SpinnerOwnProps, SpinnerProps } from "./spinner.types";

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,2 @@
+import type { SpinnerProps } from "./spinner.types";
+export declare function Spinner(props: SpinnerProps): JSX.Element;

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

@@ -0,0 +1,5 @@
+import type { ProgressCircleProps } from "@askrjs/ui";
+export type SpinnerOwnProps = Omit<ProgressCircleProps, "value" | "getValueLabel"> & {
+    label?: string;
+};
+export type SpinnerProps = SpinnerOwnProps;

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

@@ -0,0 +1,3 @@
+export { Stack } from "./stack";
+export { STACK_A11Y_CONTRACT, type StackA11yContract } from "./stack.a11y";
+export type { StackProps, StackOwnProps, StackDivProps, StackAsChildProps } from "./stack.types";

package/dist/components/stack/stack.a11y.d.ts

@@ -0,0 +1,14 @@
+export declare const STACK_A11Y_CONTRACT: {
+    readonly DATA_ATTRIBUTES: {
+        readonly slot: "data-slot";
+        readonly layout: "data-ak-layout";
+        readonly gap: "data-gap";
+        readonly align: "data-align";
+        readonly justify: "data-justify";
+        readonly wrap: "data-wrap";
+    };
+    readonly SLOT_VALUES: {
+        readonly root: "stack";
+    };
+};
+export type StackA11yContract = typeof STACK_A11Y_CONTRACT;

package/dist/components/stack/stack.d.ts

@@ -0,0 +1,3 @@
+import type { StackAsChildProps, StackDivProps } from "./stack.types";
+export declare function Stack(props: StackDivProps): JSX.Element;
+export declare function Stack(props: StackAsChildProps): JSX.Element;

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

@@ -0,0 +1,16 @@
+import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { FlexOwnProps } from "../flex/flex.types";
+export type StackOwnProps = Omit<FlexOwnProps, "direction" | "as"> & {
+    children?: unknown;
+};
+export type StackDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & StackOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+};
+export type StackAsChildProps = StackOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+    style?: JSX.IntrinsicElements["div"]["style"];
+};
+export type StackProps = StackDivProps | StackAsChildProps;

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

@@ -0,0 +1,2 @@
+export { DEFAULT_THEME_OPTIONS, ThemePicker, ThemeProvider, ThemeToggle, useTheme } from "./theme";
+export type { ThemeContextValue, ThemeName, ThemeOption, ThemePickerProps, ThemeProviderProps, ThemeToggleProps, ThemeToggleRenderContext, } from "./theme";

package/dist/components/theme/theme.d.ts

@@ -0,0 +1,40 @@
+import type { ButtonNativeProps, PressEvent } from "@askrjs/ui";
+export type ThemeName = "light" | "dark" | "system" | (string & {});
+export type ThemeOption = {
+    value: ThemeName;
+    label: string;
+};
+export type ThemeContextValue = {
+    theme: () => ThemeName;
+    setTheme: (theme: ThemeName) => void;
+    themes: readonly ThemeOption[];
+    storageKey: string;
+};
+export type ThemeProviderProps = {
+    children?: unknown;
+    defaultTheme?: ThemeName;
+    themes?: readonly ThemeOption[];
+    storageKey?: string;
+};
+export type ThemePickerProps = Omit<JSX.IntrinsicElements["select"], "children" | "value" | "defaultValue" | "onChange"> & {
+    themes?: readonly ThemeOption[];
+    label?: string;
+};
+export type ThemeToggleRenderContext = {
+    theme: ThemeName;
+    nextTheme: ThemeName;
+};
+export type ThemeToggleProps = Omit<ButtonNativeProps, "children" | "onPress"> & {
+    children?: unknown | ((context: ThemeToggleRenderContext) => unknown);
+    lightIcon?: unknown;
+    darkIcon?: unknown;
+    systemIcon?: unknown;
+    toggleThemes?: readonly ThemeName[];
+    onPress?: (event: PressEvent) => void;
+};
+export declare const DEFAULT_THEME_OPTIONS: readonly ThemeOption[];
+export declare function useTheme(): ThemeContextValue;
+export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+export declare function ThemePicker(props: ThemePickerProps): JSX.Element;
+export declare function ThemeToggle(props: ThemeToggleProps): JSX.Element;
+export declare function resolveThemeToggleIcon(theme: ThemeName, nextTheme: ThemeName, icons: Pick<ThemeToggleProps, "lightIcon" | "darkIcon" | "systemIcon">): unknown;

package/dist/components/topbar-layout/index.d.ts

@@ -0,0 +1,3 @@
+export { TopbarLayout } from "./topbar-layout";
+export { TOPBAR_LAYOUT_A11Y_CONTRACT, type TopbarLayoutA11yContract } from "./topbar-layout.a11y";
+export type { TopbarLayoutProps } from "./topbar-layout.types";

package/dist/components/topbar-layout/topbar-layout.a11y.d.ts

@@ -0,0 +1,13 @@
+export declare const TOPBAR_LAYOUT_A11Y_CONTRACT: {
+    readonly DATA_ATTRIBUTES: {
+        readonly slot: "data-slot";
+        readonly topbarHeight: "data-topbar-height";
+        readonly gap: "data-gap";
+    };
+    readonly SLOT_VALUES: {
+        readonly root: "topbar-layout";
+        readonly navbar: "navbar";
+        readonly main: "main";
+    };
+};
+export type TopbarLayoutA11yContract = typeof TOPBAR_LAYOUT_A11Y_CONTRACT;

package/dist/components/topbar-layout/topbar-layout.d.ts

@@ -0,0 +1,2 @@
+import type { TopbarLayoutProps } from "./topbar-layout.types";
+export declare function TopbarLayout(props: TopbarLayoutProps): JSX.Element;

package/dist/components/topbar-layout/topbar-layout.types.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from "@askrjs/askr/foundations";
+export type TopbarLayoutProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> & {
+    /** Content rendered into the topbar/navbar slot (header). */
+    topbar?: unknown;
+    /** Content rendered into the main slot. */
+    children?: unknown;
+    /** CSS height for the topbar. Applied as inline style only when it is a real CSS length. */
+    topbarHeight?: string;
+    /** CSS gap between topbar and main. Applied as inline style only when it is a real CSS length. */
+    gap?: string;
+    ref?: Ref<HTMLDivElement>;
+};

package/dist/container/container.d.ts

@@ -0,0 +1,8 @@
+import { ContainerAsChildProps, ContainerNativeProps } from "./container.types.js";
+
+//#region src/components/container/container.d.ts
+declare function Container(props: ContainerNativeProps): JSX.Element;
+declare function Container(props: ContainerAsChildProps): JSX.Element;
+//#endregion
+export { Container };
+//# sourceMappingURL=container.d.ts.map

package/dist/container/container.js

@@ -0,0 +1,82 @@
+import { mergeProps } from "../_internal/merge-props.js";
+import { isResponsiveValue, resolveContainerSizeValue, resolveInlineAlignValue, resolveSpaceValue, serializeResponsiveValueIf, setResponsiveStyleVar } from "../_internal/layout.js";
+import { applyBoxLayoutStyles, splitBoxLayoutProps, withBoxLayoutStyle } from "../_internal/box-layout.js";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+import { Slot } from "@askrjs/askr/foundations";
+//#region src/components/container/container.tsx
+const CONTAINER_WIDTH_TOKENS = new Set([
+	"1",
+	"2",
+	"3",
+	"4",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+]);
+function isContainerWidthToken(value) {
+	return typeof value === "string" && CONTAINER_WIDTH_TOKENS.has(value.trim());
+}
+function isContainerAlignToken(value) {
+	return typeof value === "string" && [
+		"left",
+		"center",
+		"right"
+	].includes(value.trim());
+}
+function hasStyleValue(value) {
+	if (typeof value === "string") return value.trim().length > 0;
+	if (value && typeof value === "object") return Object.keys(value).length > 0;
+	return false;
+}
+function isStaticValue(value) {
+	return !isResponsiveValue(value);
+}
+function Container(props) {
+	const { asChild, children, variant, fluid = false, maxWidth, padding, size, align = "center", ref, style: userStyle, ...rest } = props;
+	const responsiveVariant = fluid || size === void 0 && maxWidth === void 0 ? fluid ? "fluid" : variant ?? "default" : void 0;
+	const { boxProps, rest: passthroughProps } = splitBoxLayoutProps(rest);
+	const layoutStyle = {
+		boxSizing: "border-box",
+		width: "100%"
+	};
+	applyBoxLayoutStyles(layoutStyle, boxProps);
+	const widthValue = fluid ? void 0 : maxWidth ?? size;
+	if (boxProps.maxWidth === void 0 && widthValue !== void 0 && (isResponsiveValue(widthValue) || !isContainerWidthToken(widthValue))) setResponsiveStyleVar(layoutStyle, "max-width", widthValue, (value) => typeof value === "string" && isContainerWidthToken(value) ? resolveContainerSizeValue(value) : value);
+	if (padding !== void 0 && boxProps.px === void 0 && boxProps.pl === void 0 && boxProps.pr === void 0) setResponsiveStyleVar(layoutStyle, "px", padding, resolveSpaceValue);
+	const applyAlign = (side, value) => {
+		setResponsiveStyleVar(layoutStyle, side === "marginLeft" ? "ml" : "mr", value, (input) => {
+			const margins = resolveInlineAlignValue(input);
+			return side === "marginLeft" ? margins.marginLeft : margins.marginRight;
+		});
+	};
+	if (boxProps.ml === void 0 && boxProps.mr === void 0 && isResponsiveValue(align)) {
+		applyAlign("marginLeft", align);
+		applyAlign("marginRight", align);
+	}
+	const mergedStyle = Object.keys(layoutStyle).length > 2 || hasStyleValue(userStyle) ? withBoxLayoutStyle(layoutStyle, userStyle) : void 0;
+	const finalProps = mergeProps(passthroughProps, {
+		ref,
+		"data-slot": "container",
+		"data-ak-layout": "true",
+		"data-variant": responsiveVariant,
+		"data-fluid": fluid ? "true" : void 0,
+		"data-size": fluid ? void 0 : isStaticValue(size) ? serializeResponsiveValueIf(size, isContainerWidthToken) : void 0,
+		"data-align": isStaticValue(align) ? serializeResponsiveValueIf(align, isContainerAlignToken) : void 0,
+		"data-max-width": fluid ? void 0 : isStaticValue(maxWidth) ? serializeResponsiveValueIf(maxWidth, isContainerWidthToken) : void 0,
+		style: mergedStyle
+	});
+	if (asChild) return /* @__PURE__ */ jsx(Slot, {
+		asChild: true,
+		...finalProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...finalProps,
+		children
+	});
+}
+//#endregion
+export { Container };
+
+//# sourceMappingURL=container.js.map