@askrjs/themes 0.0.9 → 0.0.10

package/src/components/alert/alert.tsx

@@ -17,7 +17,6 @@ export function Alert(props: AlertProps): JSX.Element {
     class: className,
     description,
     dismissLabel = "Dismiss alert",
-    dismissible = false,
     icon,
     onDismiss,
     ref,
@@ -27,7 +26,7 @@ export function Alert(props: AlertProps): JSX.Element {
     role,
     ...rest
   } = props;
-  const shouldRenderDismiss = dismissible && onDismiss !== undefined;
+  const shouldRenderDismiss = onDismiss !== undefined;
   const resolvedRole = role ?? resolveAlertRole(variant);
   const hasVariant = variant !== "default";
 

package/src/components/alert/alert.types.ts

@@ -10,7 +10,6 @@ export type AlertProps = DivProps & {
   children?: unknown;
   description?: unknown;
   dismissLabel?: string;
-  dismissible?: boolean;
   icon?: unknown;
   onDismiss?: () => void;
   title?: unknown;

package/src/components/aside/aside.tsx

@@ -0,0 +1,12 @@
+import { Block } from "../block";
+import type { AsideProps } from "./aside.types";
+
+export function Aside(props: AsideProps): JSX.Element {
+  const { children, ...rest } = props;
+
+  return (
+    <Block as="aside" {...rest} data-slot="aside">
+      {children}
+    </Block>
+  );
+}

package/src/components/aside/aside.types.ts

@@ -0,0 +1,3 @@
+import type { BlockElementProps } from "../block";
+
+export type AsideProps = Omit<BlockElementProps<"aside">, "as">;

package/src/components/aside/index.ts

@@ -0,0 +1,2 @@
+export { Aside } from "./aside";
+export type { AsideProps } from "./aside.types";

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -1,6 +1,6 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
-import { mergeLayoutStyles } from "../_internal/layout";
+import { mergeLayoutStyles } from "../_internal/block-layout";
 import { styleDeclarationsToClass } from "../_internal/style";
 import type { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types";
 

package/src/components/badge/index.ts

@@ -1,3 +1,2 @@
 export { Badge } from "./badge";
-export { BADGE_A11Y_CONTRACT, type BadgeA11yContract } from "./badge.a11y";
 export type { BadgeOwnProps, BadgeProps, BadgeAsChildProps } from "./badge.types";

package/src/components/block/block.a11y.ts

@@ -2,12 +2,6 @@ export const BLOCK_A11Y_CONTRACT = {
   DATA_ATTRIBUTES: {
     slot: "data-slot" as const,
     layout: "data-ak-layout" as const,
-    gap: "data-gap" as const,
-    gapX: "data-gap-x" as const,
-    gapY: "data-gap-y" as const,
-    align: "data-align" as const,
-    justify: "data-justify" as const,
-    size: "data-size" as const,
   },
   SLOT_VALUES: {
     root: "block" as const,

package/src/components/block/block.tsx

@@ -1,71 +1,55 @@
 import { Slot } from "@askrjs/askr/foundations";
+import { classes } from "../_internal/classes";
+import {
+  applyBlockLayoutStyles,
+  mergeLayoutStyles,
+  splitBlockLayoutProps,
+} from "../_internal/block-layout";
 import { mergeProps } from "../_internal/merge-props";
-import { serializeResponsiveValueIf } from "../_internal/layout";
-import type { BlockAsChildProps, BlockDivProps, BlockSpanProps } from "./block.types";
+import { styleDeclarationsToClass } from "../_internal/style";
+import type { BlockAsChildProps, BlockNativeProps } from "./block.types";
 
-const SPACE_TOKENS = new Set([
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl",
-]);
+const DEFAULT_ELEMENT = "div";
 
-export function Block(props: BlockDivProps): JSX.Element;
-export function Block(props: BlockSpanProps): JSX.Element;
+export function Block(props: BlockNativeProps): JSX.Element;
 export function Block(props: BlockAsChildProps): JSX.Element;
-export function Block(props: BlockDivProps | BlockSpanProps | BlockAsChildProps) {
-  const as = "as" in props ? props.as : "div";
-  const { asChild, children, gap, gapX, gapY, align, justify, size = "md", ref, ...rest } = props;
+export function Block(props: BlockNativeProps | BlockAsChildProps) {
+  const as = "as" in props ? props.as : DEFAULT_ELEMENT;
+  const {
+    asChild,
+    children,
+    ref,
+    class: classProp,
+    className,
+    style: userStyle,
+    ...rest
+  } = props as (BlockNativeProps | BlockAsChildProps) & {
+    class?: unknown;
+    className?: unknown;
+    style?: unknown;
+  };
+
+  const { blockProps, rest: passthroughProps } = splitBlockLayoutProps(rest);
+  const layoutStyle: Record<string, string | number> = {};
+  applyBlockLayoutStyles(layoutStyle, blockProps);
+
+  const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(layoutStyle, userStyle));
+  const slot =
+    typeof (passthroughProps as Record<string, unknown>)["data-slot"] === "string"
+      ? String((passthroughProps as Record<string, unknown>)["data-slot"])
+      : "block";
 
-  const finalProps = mergeProps(rest, {
+  const finalProps = mergeProps(passthroughProps, {
     ref,
-    "data-slot": "block",
+    class: classes(classProp, className, layoutClass),
+    "data-slot": slot,
     "data-ak-layout": "true",
-    "data-gap": serializeResponsiveValueIf(
-      gap,
-      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
-    ),
-    "data-gap-x": serializeResponsiveValueIf(
-      gapX,
-      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
-    ),
-    "data-gap-y": serializeResponsiveValueIf(
-      gapY,
-      (value) => typeof value === "string" && SPACE_TOKENS.has(value.trim()),
-    ),
-    "data-align": serializeResponsiveValueIf(
-      align,
-      (value) =>
-        typeof value === "string" &&
-        ["start", "end", "center", "stretch", "baseline"].includes(value.trim()),
-    ),
-    "data-justify": serializeResponsiveValueIf(
-      justify,
-      (value) =>
-        typeof value === "string" && ["start", "end", "center", "between"].includes(value.trim()),
-    ),
-    "data-size": `initial:${size}`,
   });
 
   if (asChild) {
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  if (as === "span") {
-    return <span {...finalProps}>{children}</span>;
-  }
-
-  return <div {...finalProps}>{children}</div>;
+  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
+  return <Element {...finalProps}>{children}</Element>;
 }

package/src/components/block/block.types.ts

@@ -1,54 +1,71 @@
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
+import type {
+  BlockAlign,
+  BlockBackground,
+  BlockDirection,
+  BlockJustify,
+  BlockLayoutProps,
+  BlockMargin,
+  BlockRadius,
+  BlockRowFrom,
+  BlockShadow,
+  BlockSize,
+  BlockSpace,
+  BlockZIndex,
+  ResponsiveValue,
+} from "../_internal/block-layout";
 
-export type BlockSize = "xs" | "sm" | "md" | "lg" | "xl";
-
-export type BlockSpace =
-  | "1"
-  | "2"
-  | "3"
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "xs"
-  | "sm"
-  | "md"
-  | "lg"
-  | "xl"
-  | "2xl"
-  | "3xl";
-
-export type BlockAlign = "start" | "end" | "center" | "stretch" | "baseline";
+export type {
+  BlockAlign,
+  BlockBackground,
+  BlockDirection,
+  BlockJustify,
+  BlockMargin,
+  BlockRadius,
+  BlockRowFrom,
+  BlockShadow,
+  BlockSize,
+  BlockSpace,
+  BlockZIndex,
+  ResponsiveValue as BlockResponsiveValue,
+};
 
-export type BlockJustify = "start" | "end" | "center" | "between";
+export type BlockElement =
+  | "div"
+  | "span"
+  | "main"
+  | "header"
+  | "footer"
+  | "section"
+  | "aside"
+  | "nav"
+  | "a"
+  | "ul"
+  | "ol"
+  | "li"
+  | "form"
+  | "article";
 
-export type BlockOwnProps = {
-  gap?: BlockSpace;
-  gapX?: BlockSpace;
-  gapY?: BlockSpace;
-  align?: BlockAlign;
-  justify?: BlockJustify;
-  size?: BlockSize;
-  as?: "div" | "span";
+export type BlockOwnProps = BlockLayoutProps & {
+  as?: BlockElement;
   children?: unknown;
+  className?: string;
 };
 
-export type BlockNativeProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+export type BlockElementProps<TElement extends BlockElement> = Omit<
+  JSX.IntrinsicElements[TElement],
+  "children" | "ref"
+> &
   BlockOwnProps & {
-    as?: "div";
+    as?: TElement;
     asChild?: false;
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<unknown>;
   };
 
-export type BlockSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> &
-  BlockOwnProps & {
-    as: "span";
-    asChild?: false;
-    ref?: Ref<HTMLSpanElement>;
-  };
+export type BlockNativeProps = {
+  [TElement in BlockElement]: BlockElementProps<TElement>;
+}[BlockElement];
 
 export type BlockAsChildProps = Omit<BlockOwnProps, "as"> & {
   asChild: true;
@@ -56,5 +73,6 @@ export type BlockAsChildProps = Omit<BlockOwnProps, "as"> & {
   ref?: Ref<unknown>;
 };
 
-export type BlockDivProps = BlockNativeProps;
-export type BlockProps = BlockDivProps | BlockSpanProps | BlockAsChildProps;
+export type BlockDivProps = BlockElementProps<"div">;
+export type BlockSpanProps = BlockElementProps<"span">;
+export type BlockProps = BlockNativeProps | BlockAsChildProps;

package/src/components/block/index.ts

@@ -1,11 +1,2 @@
 export { Block } from "./block";
-export { BLOCK_A11Y_CONTRACT, type BlockA11yContract } from "./block.a11y";
-export type {
-  BlockAsChildProps,
-  BlockDivProps,
-  BlockNativeProps,
-  BlockOwnProps,
-  BlockProps,
-  BlockSize,
-  BlockSpanProps,
-} from "./block.types";
+export type * from "./block.types";

package/src/components/brand/brand.tsx

@@ -0,0 +1,61 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { classes } from "../_internal/classes";
+import { mergeProps } from "../_internal/merge-props";
+import type {
+  BrandAsChildProps,
+  BrandLabelProps,
+  BrandMarkProps,
+  BrandNativeProps,
+  BrandProps,
+} from "./brand.types";
+
+const DEFAULT_ELEMENT = "div";
+
+export function Brand<TElement extends "div" | "a" | "span" = "div">(
+  props: BrandProps<TElement>,
+): JSX.Element {
+  const {
+    as,
+    asChild,
+    children,
+    class: classProp,
+    className,
+    ref,
+    ...rest
+  } = props as BrandNativeProps | BrandAsChildProps;
+
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("brand", classProp, className),
+    "data-slot": "brand",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
+  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
+  return <Element {...finalProps}>{children}</Element>;
+}
+
+export function BrandMark(props: BrandMarkProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("brand-mark", className),
+    "data-slot": "brand-mark",
+  });
+
+  return <span {...finalProps}>{children}</span>;
+}
+
+export function BrandLabel(props: BrandLabelProps): JSX.Element {
+  const { children, class: className, ref, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("brand-label", className),
+    "data-slot": "brand-label",
+  });
+
+  return <span {...finalProps}>{children}</span>;
+}

package/src/components/brand/brand.types.ts

@@ -0,0 +1,39 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type BrandElement = "div" | "a" | "span";
+
+type BrandIntrinsicProps<TElement extends BrandElement> = Omit<
+  JSX.IntrinsicElements[TElement],
+  "children" | "ref"
+>;
+type SpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref">;
+
+export type BrandNativeProps<TElement extends BrandElement = "div"> =
+  BrandIntrinsicProps<TElement> & {
+    as?: TElement;
+    asChild?: false;
+    children?: unknown;
+    ref?: Ref<HTMLElement>;
+  };
+
+export type BrandAsChildProps = {
+  asChild: true;
+  children: JSX.Element;
+  class?: string;
+  className?: string;
+  ref?: Ref<HTMLElement>;
+};
+
+export type BrandProps<TElement extends BrandElement = "div"> =
+  | BrandNativeProps<TElement>
+  | BrandAsChildProps;
+
+export type BrandMarkProps = SpanProps & {
+  children?: unknown;
+  ref?: Ref<HTMLSpanElement>;
+};
+
+export type BrandLabelProps = SpanProps & {
+  children?: unknown;
+  ref?: Ref<HTMLSpanElement>;
+};

package/src/components/brand/index.ts

@@ -0,0 +1,2 @@
+export { Brand, BrandLabel, BrandMark } from "./brand";
+export type * from "./brand.types";

package/src/components/card/card.tsx

@@ -1,39 +1,27 @@
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import type {
-  CardActionsProps,
+  CardActionProps,
   CardContentProps,
   CardDescriptionProps,
   CardFooterProps,
   CardHeaderProps,
-  CardPadding,
   CardProps,
   CardTitleProps,
   CardVariant,
 } from "./card.types";
 
-function normalizePadding(padding: CardPadding | undefined) {
-  return padding && padding !== "md" ? padding : undefined;
-}
-
 function normalizeVariant(variant: CardVariant | undefined) {
   return variant && variant !== "default" ? variant : undefined;
 }
 
 export function Card(props: CardProps): JSX.Element {
-  const { children, class: className, variant, padding = "md", ref, ...rest } = props;
+  const { children, class: className, variant, ref, ...rest } = props;
   const normalizedVariant = normalizeVariant(variant);
-  const normalizedPadding = normalizePadding(padding);
 
   const finalProps = mergeProps(rest, {
     ref,
-    class: classes(
-      "card",
-      normalizedVariant && `card-${normalizedVariant}`,
-      normalizedPadding && `card-${normalizedPadding}`,
-      className,
-    ),
-    "data-padding": normalizedPadding,
+    class: classes("card", normalizedVariant && `card-${normalizedVariant}`, className),
     "data-slot": "card",
     "data-variant": normalizedVariant,
   });
@@ -96,12 +84,12 @@ export function CardFooter(props: CardFooterProps): JSX.Element {
   return <div {...finalProps}>{children}</div>;
 }
 
-export function CardActions(props: CardActionsProps): JSX.Element {
+export function CardAction(props: CardActionProps): JSX.Element {
   const { children, class: className, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {
     ref,
-    class: classes("card-actions", className),
-    "data-slot": "card-actions",
+    class: classes("card-action", className),
+    "data-slot": "card-action",
   });
 
   return <div {...finalProps}>{children}</div>;

package/src/components/card/card.types.ts

@@ -1,7 +1,6 @@
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type CardVariant = "default" | "raised";
-export type CardPadding = "sm" | "md" | "lg";
 
 type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
 type HeadingProps = Omit<JSX.IntrinsicElements["h3"], "children" | "ref">;
@@ -10,7 +9,6 @@ type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
 export type CardProps = DivProps & {
   children?: unknown;
   variant?: CardVariant;
-  padding?: CardPadding;
   ref?: Ref<HTMLDivElement>;
 };
 
@@ -19,27 +17,27 @@ export type CardHeaderProps = DivProps & {
   ref?: Ref<HTMLDivElement>;
 };
 
-export type CardContentProps = DivProps & {
+export type CardTitleProps = HeadingProps & {
   children?: unknown;
-  ref?: Ref<HTMLDivElement>;
+  ref?: Ref<HTMLHeadingElement>;
 };
 
-export type CardFooterProps = DivProps & {
+export type CardDescriptionProps = ParagraphProps & {
   children?: unknown;
-  ref?: Ref<HTMLDivElement>;
+  ref?: Ref<HTMLParagraphElement>;
 };
 
-export type CardActionsProps = DivProps & {
+export type CardContentProps = DivProps & {
   children?: unknown;
   ref?: Ref<HTMLDivElement>;
 };
 
-export type CardTitleProps = HeadingProps & {
+export type CardFooterProps = DivProps & {
   children?: unknown;
-  ref?: Ref<HTMLHeadingElement>;
+  ref?: Ref<HTMLDivElement>;
 };
 
-export type CardDescriptionProps = ParagraphProps & {
+export type CardActionProps = DivProps & {
   children?: unknown;
-  ref?: Ref<HTMLParagraphElement>;
+  ref?: Ref<HTMLDivElement>;
 };

package/src/components/card/index.ts

@@ -1,6 +1,6 @@
 export {
   Card,
-  CardActions,
+  CardAction,
   CardContent,
   CardDescription,
   CardFooter,
@@ -9,12 +9,11 @@ export {
 } from "./card";
 
 export type {
-  CardActionsProps,
+  CardActionProps,
   CardContentProps,
   CardDescriptionProps,
   CardFooterProps,
   CardHeaderProps,
-  CardPadding,
   CardProps,
   CardTitleProps,
   CardVariant,