@askrjs/themes 0.0.8 → 0.0.10

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,