@askrjs/themes 0.0.8 → 0.0.10

package/src/components/box/box.types.ts

@@ -1,76 +0,0 @@
-import type { JSXElement } from "@askrjs/askr/foundations";
-import type { Ref } from "@askrjs/askr/foundations/utilities";
-import type { ResponsiveValue } from "../_internal/layout";
-
-export type LayoutResponsive<T> = ResponsiveValue<T>;
-
-export type BoxLayoutOwnProps = {
-  display?: ResponsiveValue<string>;
-  m?: ResponsiveValue<string | number>;
-  mx?: ResponsiveValue<string | number>;
-  my?: ResponsiveValue<string | number>;
-  mt?: ResponsiveValue<string | number>;
-  mr?: ResponsiveValue<string | number>;
-  mb?: ResponsiveValue<string | number>;
-  ml?: ResponsiveValue<string | number>;
-  p?: ResponsiveValue<string | number>;
-  px?: ResponsiveValue<string | number>;
-  py?: ResponsiveValue<string | number>;
-  pt?: ResponsiveValue<string | number>;
-  pr?: ResponsiveValue<string | number>;
-  pb?: ResponsiveValue<string | number>;
-  pl?: ResponsiveValue<string | number>;
-  width?: ResponsiveValue<string>;
-  minWidth?: ResponsiveValue<string>;
-  maxWidth?: ResponsiveValue<string>;
-  height?: ResponsiveValue<string>;
-  minHeight?: ResponsiveValue<string>;
-  maxHeight?: ResponsiveValue<string>;
-  position?: ResponsiveValue<string>;
-  inset?: ResponsiveValue<string | number>;
-  top?: ResponsiveValue<string | number>;
-  right?: ResponsiveValue<string | number>;
-  bottom?: ResponsiveValue<string | number>;
-  left?: ResponsiveValue<string | number>;
-  overflow?: ResponsiveValue<string>;
-  overflowX?: ResponsiveValue<string>;
-  overflowY?: ResponsiveValue<string>;
-  flexBasis?: ResponsiveValue<string>;
-  flexGrow?: ResponsiveValue<string | number>;
-  flexShrink?: ResponsiveValue<string | number>;
-  gridArea?: ResponsiveValue<string>;
-  gridColumn?: ResponsiveValue<string>;
-  gridColumnStart?: ResponsiveValue<string>;
-  gridColumnEnd?: ResponsiveValue<string>;
-  gridRow?: ResponsiveValue<string>;
-  gridRowStart?: ResponsiveValue<string>;
-  gridRowEnd?: ResponsiveValue<string>;
-  children?: unknown;
-};
-
-export type BoxOwnProps = BoxLayoutOwnProps & {
-  as?: "div" | "span";
-};
-
-export type BoxDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  BoxOwnProps & {
-    as?: "div";
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
-  };
-
-export type BoxSpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> &
-  BoxOwnProps & {
-    as: "span";
-    asChild?: false;
-    ref?: Ref<HTMLSpanElement>;
-  };
-
-export type BoxAsChildProps = Omit<BoxOwnProps, "as"> & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-  style?: JSX.IntrinsicElements["div"]["style"];
-};
-
-export type BoxProps = BoxDivProps | BoxSpanProps | BoxAsChildProps;

package/src/components/box/index.ts

@@ -1,11 +0,0 @@
-export { Box } from "./box";
-export { BOX_A11Y_CONTRACT, type BoxA11yContract } from "./box.a11y";
-export type {
-  BoxProps,
-  BoxOwnProps,
-  BoxLayoutOwnProps,
-  BoxDivProps,
-  BoxSpanProps,
-  BoxAsChildProps,
-  LayoutResponsive,
-} from "./box.types";

package/src/components/breadcrumb/breadcrumb.a11y.ts

@@ -1,15 +0,0 @@
-/**
- * Breadcrumb accessibility contract.
- */
-
-export const BREADCRUMB_A11Y_CONTRACT = {
-  DATA_ATTRIBUTES: {
-    slot: "data-slot" as const,
-  },
-  NAV_ROLE: "navigation" as const,
-  CURRENT_PAGE_ATTRIBUTE: "aria-current" as const,
-  CURRENT_PAGE_VALUE: "page" as const,
-  SEPARATOR_MARKER: "data-breadcrumb-separator" as const,
-} as const;
-
-export type BreadcrumbA11yContract = typeof BREADCRUMB_A11Y_CONTRACT;

package/src/components/breadcrumb/breadcrumb.tsx

@@ -1,123 +0,0 @@
-import { Slot } from "@askrjs/askr/foundations";
-import { mergeProps } from "../_internal/merge-props";
-import type {
-  BreadcrumbAsChildProps,
-  BreadcrumbCurrentAsChildProps,
-  BreadcrumbCurrentProps,
-  BreadcrumbItemAsChildProps,
-  BreadcrumbItemProps,
-  BreadcrumbLinkAsChildProps,
-  BreadcrumbLinkProps,
-  BreadcrumbListAsChildProps,
-  BreadcrumbListProps,
-  BreadcrumbProps,
-  BreadcrumbSeparatorAsChildProps,
-  BreadcrumbSeparatorProps,
-} from "./breadcrumb.types";
-
-export function Breadcrumb(props: BreadcrumbProps): JSX.Element;
-export function Breadcrumb(props: BreadcrumbAsChildProps): JSX.Element;
-export function Breadcrumb(props: BreadcrumbProps | BreadcrumbAsChildProps) {
-  const { asChild, children, ref, "aria-label": ariaLabel, ...rest } = props;
-  const finalProps = mergeProps(rest, {
-    ref,
-    "aria-label": ariaLabel ?? "Breadcrumb",
-    "data-slot": "breadcrumb",
-    "data-breadcrumb": "true",
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <nav {...finalProps}>{children}</nav>;
-}
-
-export function BreadcrumbList(props: BreadcrumbListProps): JSX.Element;
-export function BreadcrumbList(props: BreadcrumbListAsChildProps): JSX.Element;
-export function BreadcrumbList(props: BreadcrumbListProps | BreadcrumbListAsChildProps) {
-  const { asChild, children, ref, ...rest } = props;
-  const finalProps = mergeProps(rest, {
-    ref,
-    "data-slot": "breadcrumb-list",
-    "data-breadcrumb-list": "true",
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <ol {...finalProps}>{children}</ol>;
-}
-
-export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element;
-export function BreadcrumbItem(props: BreadcrumbItemAsChildProps): JSX.Element;
-export function BreadcrumbItem(props: BreadcrumbItemProps | BreadcrumbItemAsChildProps) {
-  const { asChild, children, ref, ...rest } = props;
-  const finalProps = mergeProps(rest, {
-    ref,
-    "data-slot": "breadcrumb-item",
-    "data-breadcrumb-item": "true",
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <li {...finalProps}>{children}</li>;
-}
-
-export function BreadcrumbLink(props: BreadcrumbLinkProps): JSX.Element;
-export function BreadcrumbLink(props: BreadcrumbLinkAsChildProps): JSX.Element;
-export function BreadcrumbLink(props: BreadcrumbLinkProps | BreadcrumbLinkAsChildProps) {
-  const { asChild, children, ref, ...rest } = props;
-  const finalProps = mergeProps(rest, {
-    ref,
-    "data-slot": "breadcrumb-link",
-    "data-breadcrumb-link": "true",
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <a {...finalProps}>{children}</a>;
-}
-
-export function BreadcrumbCurrent(props: BreadcrumbCurrentProps): JSX.Element;
-export function BreadcrumbCurrent(props: BreadcrumbCurrentAsChildProps): JSX.Element;
-export function BreadcrumbCurrent(props: BreadcrumbCurrentProps | BreadcrumbCurrentAsChildProps) {
-  const { asChild, children, ref, ...rest } = props;
-  const finalProps = mergeProps(rest, {
-    ref,
-    "aria-current": "page",
-    "data-slot": "breadcrumb-current",
-    "data-breadcrumb-current": "true",
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <span {...finalProps}>{children}</span>;
-}
-
-export function BreadcrumbSeparator(props: BreadcrumbSeparatorProps): JSX.Element;
-export function BreadcrumbSeparator(props: BreadcrumbSeparatorAsChildProps): JSX.Element;
-export function BreadcrumbSeparator(
-  props: BreadcrumbSeparatorProps | BreadcrumbSeparatorAsChildProps,
-) {
-  const { asChild, children, ref, ...rest } = props;
-  const finalProps = mergeProps(rest, {
-    ref,
-    "aria-hidden": "true",
-    "data-slot": "breadcrumb-separator",
-    "data-breadcrumb-separator": "true",
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children ?? "/"} />;
-  }
-
-  return <span {...finalProps}>{children ?? "/"}</span>;
-}

package/src/components/breadcrumb/breadcrumb.types.ts

@@ -1,74 +0,0 @@
-import type { JSXElement } from "@askrjs/askr/foundations";
-import type { Ref } from "@askrjs/askr/foundations/utilities";
-
-export type BreadcrumbOwnProps = {
-  children?: unknown;
-  "aria-label"?: string;
-};
-
-export type BreadcrumbProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> &
-  BreadcrumbOwnProps & {
-    asChild?: false;
-    ref?: Ref<HTMLElement>;
-  };
-
-export type BreadcrumbAsChildProps = BreadcrumbOwnProps & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type BreadcrumbListProps = Omit<JSX.IntrinsicElements["ol"], "children" | "ref"> & {
-  asChild?: false;
-  ref?: Ref<HTMLOListElement>;
-};
-
-export type BreadcrumbListAsChildProps = {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type BreadcrumbItemProps = Omit<JSX.IntrinsicElements["li"], "children" | "ref"> & {
-  asChild?: false;
-  ref?: Ref<HTMLLIElement>;
-};
-
-export type BreadcrumbItemAsChildProps = {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type BreadcrumbLinkProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> & {
-  asChild?: false;
-  ref?: Ref<HTMLAnchorElement>;
-};
-
-export type BreadcrumbLinkAsChildProps = {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type BreadcrumbCurrentProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & {
-  asChild?: false;
-  ref?: Ref<HTMLSpanElement>;
-};
-
-export type BreadcrumbCurrentAsChildProps = {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type BreadcrumbSeparatorProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref"> & {
-  asChild?: false;
-  ref?: Ref<HTMLSpanElement>;
-};
-
-export type BreadcrumbSeparatorAsChildProps = {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};

package/src/components/breadcrumb/index.ts

@@ -1,24 +0,0 @@
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbCurrent,
-  BreadcrumbSeparator,
-} from "./breadcrumb";
-export { BREADCRUMB_A11Y_CONTRACT, type BreadcrumbA11yContract } from "./breadcrumb.a11y";
-export type {
-  BreadcrumbOwnProps,
-  BreadcrumbProps,
-  BreadcrumbAsChildProps,
-  BreadcrumbListProps,
-  BreadcrumbListAsChildProps,
-  BreadcrumbItemProps,
-  BreadcrumbItemAsChildProps,
-  BreadcrumbLinkProps,
-  BreadcrumbLinkAsChildProps,
-  BreadcrumbCurrentProps,
-  BreadcrumbCurrentAsChildProps,
-  BreadcrumbSeparatorProps,
-  BreadcrumbSeparatorAsChildProps,
-} from "./breadcrumb.types";

package/src/components/flex/flex.a11y.ts

@@ -1,19 +0,0 @@
-export const FLEX_A11Y_CONTRACT = {
-  DATA_ATTRIBUTES: {
-    slot: "data-slot" as const,
-    layout: "data-ak-layout" as const,
-    direction: "data-direction" 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,
-    wrap: "data-wrap" as const,
-    collapseBelow: "data-collapse-below" as const,
-  },
-  SLOT_VALUES: {
-    root: "flex" as const,
-  },
-} as const;
-
-export type FlexA11yContract = typeof FLEX_A11Y_CONTRACT;

package/src/components/flex/flex.tsx

@@ -1,162 +0,0 @@
-import { Slot } from "@askrjs/askr/foundations";
-import { mergeProps } from "../_internal/merge-props";
-import {
-  applyBoxLayoutStyles,
-  splitBoxLayoutProps,
-  withBoxLayoutClass,
-} 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 layoutClass = withBoxLayoutClass(layoutStyle, userStyle);
-
-  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,
-    ...(layoutClass ? { class: layoutClass } : {}),
-  });
-
-  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

@@ -1,51 +0,0 @@
-import type { JSXElement } from "@askrjs/askr/foundations";
-import type { Ref } from "@askrjs/askr/foundations/utilities";
-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

@@ -1,16 +0,0 @@
-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/inline/index.tsx

@@ -1,28 +0,0 @@
-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";

package/src/components/list-group/index.ts

@@ -1,7 +0,0 @@
-export { ListGroup, ListGroupItem } from "./list-group";
-export type {
-  ListGroupItemAsChildProps,
-  ListGroupItemProps,
-  ListGroupOrientation,
-  ListGroupProps,
-} from "./list-group.types";

package/src/components/list-group/list-group.tsx

@@ -1,74 +0,0 @@
-import { Slot } from "@askrjs/askr/foundations";
-import { mergeProps } from "@askrjs/askr/foundations/utilities";
-import { classes } from "../_internal/classes";
-import type {
-  ListGroupItemAsChildProps,
-  ListGroupItemProps,
-  ListGroupProps,
-} from "./list-group.types";
-
-export function ListGroup(props: ListGroupProps): JSX.Element {
-  const {
-    children,
-    class: className,
-    flush = false,
-    orientation = "vertical",
-    ref,
-    ...rest
-  } = props;
-
-  return (
-    <ul
-      {...rest}
-      ref={ref}
-      class={classes(
-        "list-group",
-        flush ? "list-group-flush" : undefined,
-        orientation === "horizontal" ? "list-group-horizontal" : undefined,
-        className,
-      )}
-      data-flush={flush ? "true" : "false"}
-      data-orientation={orientation}
-      data-slot="list-group"
-    >
-      {children}
-    </ul>
-  );
-}
-
-export function ListGroupItem(props: ListGroupItemProps): JSX.Element;
-export function ListGroupItem(props: ListGroupItemAsChildProps): JSX.Element;
-export function ListGroupItem(props: ListGroupItemProps | ListGroupItemAsChildProps): JSX.Element {
-  const {
-    action = false,
-    active = false,
-    asChild,
-    children,
-    disabled = false,
-    ref,
-    class: className,
-    ...rest
-  } = props;
-  const finalProps = mergeProps(rest, {
-    class: classes(
-      "list-group-item",
-      action ? "list-group-item-action" : undefined,
-      active ? "active" : undefined,
-      disabled ? "disabled" : undefined,
-      className,
-    ),
-    ref,
-    "aria-current": active ? "page" : undefined,
-    "aria-disabled": disabled ? "true" : undefined,
-    "data-action": action ? "true" : undefined,
-    "data-active": active ? "true" : undefined,
-    "data-disabled": disabled ? "true" : undefined,
-    "data-slot": "list-group-item",
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <li {...finalProps}>{children}</li>;
-}