@askrjs/themes 0.0.2 → 0.0.4

package/src/components/logos/create-logo.tsx

@@ -1,103 +0,0 @@
-import { jsx as createSvgNode, jsxs as createSvgNodes } from "@askrjs/askr/jsx-runtime";
-import type { IconSizeToken, LogoNode, LogoProps, LogoStyleObject } from "./types";
-
-const ICON_SIZE_TOKENS: readonly IconSizeToken[] = ["sm", "md", "lg", "xl"];
-
-function isIconSizeToken(value: unknown): value is IconSizeToken {
-  return typeof value === "string" && ICON_SIZE_TOKENS.includes(value as IconSizeToken);
-}
-
-function normalizeIconSizeValue(size: number | string): string {
-  if (typeof size === "number") return `${size}px`;
-  return size;
-}
-
-function resolveIconSizeVariable(size: number | string): string {
-  if (isIconSizeToken(size)) {
-    return `var(--ak-icon-size-${size}, var(--ak-icon-size-md, 1.25rem))`;
-  }
-
-  return normalizeIconSizeValue(size);
-}
-
-function camelToKebab(key: string): string {
-  return key.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
-}
-
-function serializeLogoStyle(style: string | LogoStyleObject | undefined): string {
-  if (!style) return "";
-  if (typeof style === "string") return style.trim();
-
-  return Object.entries(style)
-    .filter(([, value]) => value !== undefined && value !== null)
-    .map(([key, value]) => `${camelToKebab(key)}:${String(value)}`)
-    .join(";");
-}
-
-function joinLogoStyle(...styles: Array<string | undefined>): string | undefined {
-  const merged = styles.map((style) => style?.trim()).filter(Boolean);
-  return merged.length > 0 ? merged.join(";") : undefined;
-}
-
-function getLogoContractProps({
-  size = 20,
-  title,
-  style,
-  iconName,
-}: Pick<LogoProps, "iconName" | "size" | "style" | "title">) {
-  const sizeToken = isIconSizeToken(size) ? size : undefined;
-  const decorative = title ? undefined : "true";
-  const resolvedSize = resolveIconSizeVariable(size);
-  const logoStyle = joinLogoStyle(
-    `--ak-icon-size:${resolvedSize}`,
-    "display:inline-block",
-    "flex-shrink:0",
-    "width:var(--ak-icon-size)",
-    "height:var(--ak-icon-size)",
-    serializeLogoStyle(style),
-  );
-
-  return {
-    attrs: {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      role: "img",
-      "aria-hidden": title ? undefined : "true",
-      style: logoStyle,
-      "data-slot": "icon",
-      "data-icon": iconName,
-      "data-size": sizeToken,
-      "data-decorative": decorative,
-    },
-  };
-}
-
-export function createLogo(displayName: string, viewBox: string, logoNode: LogoNode) {
-  function Logo({ size = 20, title, class: className, style, ref, ...rest }: LogoProps) {
-    const { attrs } = getLogoContractProps({
-      size,
-      title,
-      style,
-      iconName: displayName,
-    });
-
-    const children = logoNode.map(([tag, nodeAttrs], index) =>
-      createSvgNode(tag, nodeAttrs as Record<string, unknown>, index),
-    );
-
-    return createSvgNodes("svg", {
-      ...rest,
-      ...attrs,
-      viewBox,
-      fill: "none",
-      stroke: "none",
-      class: className,
-      ref,
-      children: title ? [createSvgNode("title", { children: title }), ...children] : children,
-    });
-  }
-
-  Logo.displayName = displayName;
-  return Logo;
-}

package/src/components/logos/github-logo.tsx

@@ -1,13 +0,0 @@
-import { createLogo } from "./create-logo";
-
-const GITHUB_LOGO_NODE = [
-  [
-    "path",
-    {
-      fill: "#181717",
-      d: "M12 1C5.923 1 1 5.924 1 12.002c0 4.862 3.151 8.987 7.521 10.443.55.102.751-.239.751-.53 0-.262-.01-.956-.015-1.876-3.059.665-3.706-1.475-3.706-1.475-.5-1.271-1.22-1.609-1.22-1.609-.998-.682.076-.668.076-.668 1.104.078 1.685 1.134 1.685 1.134.981 1.682 2.575 1.196 3.203.915.1-.711.384-1.196.698-1.471-2.442-.278-5.01-1.221-5.01-5.436 0-1.201.429-2.184 1.133-2.954-.114-.278-.491-1.397.107-2.913 0 0 .924-.296 3.026 1.128A10.52 10.52 0 0 1 12 6.32c.935.004 1.876.127 2.755.373 2.1-1.424 3.023-1.128 3.023-1.128.6 1.516.223 2.635.109 2.913.706.77 1.131 1.753 1.131 2.954 0 4.225-2.572 5.155-5.02 5.427.395.34.746 1.011.746 2.038 0 1.472-.013 2.659-.013 3.021 0 .294.198.637.757.529C19.851 20.985 23 16.862 23 12.002 23 5.924 18.075 1 12 1Z",
-    },
-  ],
-] as const;
-
-export const GitHubLogo = createLogo("GitHubLogo", "0 0 24 24", GITHUB_LOGO_NODE);

package/src/components/logos/google-logo.tsx

@@ -1,34 +0,0 @@
-import { createLogo } from "./create-logo";
-
-const GOOGLE_LOGO_NODE = [
-  [
-    "path",
-    {
-      fill: "#4285F4",
-      d: "M23.49 12.276c0-.816-.073-1.6-.209-2.351H12v4.451h6.437a5.505 5.505 0 0 1-2.387 3.613v2.997h3.861c2.259-2.079 3.579-5.142 3.579-8.71Z",
-    },
-  ],
-  [
-    "path",
-    {
-      fill: "#34A853",
-      d: "M12 24c3.24 0 5.957-1.074 7.943-2.914l-3.861-2.997c-1.074.72-2.448 1.146-4.082 1.146-3.136 0-5.793-2.118-6.741-4.965H1.267v3.092A11.997 11.997 0 0 0 12 24Z",
-    },
-  ],
-  [
-    "path",
-    {
-      fill: "#FBBC05",
-      d: "M5.259 14.27A7.192 7.192 0 0 1 4.882 12c0-.788.135-1.553.377-2.27V6.638H1.267A11.997 11.997 0 0 0 0 12c0 1.937.464 3.771 1.267 5.362L5.259 14.27Z",
-    },
-  ],
-  [
-    "path",
-    {
-      fill: "#EA4335",
-      d: "M12 4.765c1.762 0 3.344.606 4.589 1.795l3.44-3.44C17.952 1.181 15.236 0 12 0 7.307 0 3.267 2.691 1.267 6.638L5.259 9.73c.948-2.847 3.605-4.965 6.741-4.965Z",
-    },
-  ],
-] as const;
-
-export const GoogleLogo = createLogo("GoogleLogo", "0 0 24 24", GOOGLE_LOGO_NODE);

package/src/components/logos/index.ts

@@ -1,5 +0,0 @@
-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/src/components/logos/microsoft-logo.tsx

@@ -1,10 +0,0 @@
-import { createLogo } from "./create-logo";
-
-const MICROSOFT_LOGO_NODE = [
-  ["rect", { x: "2", y: "2", width: "9", height: "9", fill: "#F25022" }],
-  ["rect", { x: "13", y: "2", width: "9", height: "9", fill: "#7FBA00" }],
-  ["rect", { x: "2", y: "13", width: "9", height: "9", fill: "#00A4EF" }],
-  ["rect", { x: "13", y: "13", width: "9", height: "9", fill: "#FFB900" }],
-] as const;
-
-export const MicrosoftLogo = createLogo("MicrosoftLogo", "0 0 24 24", MICROSOFT_LOGO_NODE);

package/src/components/logos/types.ts

@@ -1,24 +0,0 @@
-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/src/components/sidebar-layout/index.ts

@@ -1,6 +0,0 @@
-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/src/components/sidebar-layout/sidebar-layout.a11y.ts

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

package/src/components/sidebar-layout/sidebar-layout.tsx

@@ -1,59 +0,0 @@
-import { isCssLength, mergeLayoutStyles, serializeValueIf } from "../_internal/layout";
-import type { SidebarLayoutProps } from "./sidebar-layout.types";
-
-function isThemeGapToken(value: unknown): value is string {
-  return typeof value === "string" && ["sm", "md", "lg", "xl"].includes(value.trim());
-}
-
-function isThemeSidebarWidthToken(value: unknown): value is string {
-  return typeof value === "string" && ["sm", "md", "lg", "xl"].includes(value.trim());
-}
-
-export function SidebarLayout(props: SidebarLayoutProps): JSX.Element {
-  const {
-    sidebar,
-    children,
-    sidebarPosition = "start",
-    sidebarWidth,
-    gap,
-    collapseBelow,
-    ref,
-    style: userStyle,
-    ...rest
-  } = props;
-
-  const wrapperStyle: Record<string, string | number> = {};
-  if (isCssLength(gap)) wrapperStyle.gap = gap!;
-
-  const sidebarStyle: Record<string, string | number> = {};
-  if (isCssLength(sidebarWidth)) {
-    sidebarStyle.width = sidebarWidth!;
-    sidebarStyle.flexBasis = sidebarWidth!;
-  }
-
-  return (
-    <div
-      {...rest}
-      ref={ref}
-      data-slot="sidebar-layout"
-      data-sidebar-position={sidebarPosition}
-      data-sidebar-width={serializeValueIf(sidebarWidth, isThemeSidebarWidthToken)}
-      data-gap={serializeValueIf(gap, isThemeGapToken)}
-      data-collapse-below={collapseBelow}
-      style={mergeLayoutStyles(wrapperStyle, userStyle)}
-    >
-      {[
-        <aside
-          key="sidebar-layout-sidebar"
-          data-slot="sidebar"
-          style={mergeLayoutStyles(sidebarStyle, undefined)}
-        >
-          {sidebar}
-        </aside>,
-        <main key="sidebar-layout-main" data-slot="main">
-          {children}
-        </main>,
-      ]}
-    </div>
-  );
-}

package/src/components/sidebar-layout/sidebar-layout.types.ts

@@ -1,22 +0,0 @@
-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/src/components/topbar-layout/index.ts

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

package/src/components/topbar-layout/topbar-layout.a11y.ts

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

package/src/components/topbar-layout/topbar-layout.tsx

@@ -1,39 +0,0 @@
-import { isCssLength, mergeLayoutStyles, serializeValueIf } from "../_internal/layout";
-import type { TopbarLayoutProps } from "./topbar-layout.types";
-
-function isThemeGapToken(value: unknown): value is string {
-  return typeof value === "string" && ["sm", "md", "lg", "xl"].includes(value.trim());
-}
-
-export function TopbarLayout(props: TopbarLayoutProps): JSX.Element {
-  const { topbar, children, topbarHeight, gap, ref, style: userStyle, ...rest } = props;
-
-  const wrapperStyle: Record<string, string | number> = {};
-  if (isCssLength(gap)) wrapperStyle.gap = gap!;
-
-  const navbarStyle: Record<string, string | number> = {};
-  if (isCssLength(topbarHeight)) navbarStyle.height = topbarHeight!;
-
-  return (
-    <div
-      {...rest}
-      ref={ref}
-      data-slot="topbar-layout"
-      data-gap={serializeValueIf(gap, isThemeGapToken)}
-      style={mergeLayoutStyles(wrapperStyle, userStyle)}
-    >
-      {[
-        <header
-          key="topbar-layout-navbar"
-          data-slot="navbar"
-          style={mergeLayoutStyles(navbarStyle, undefined)}
-        >
-          {topbar}
-        </header>,
-        <main key="topbar-layout-main" data-slot="main">
-          {children}
-        </main>,
-      ]}
-    </div>
-  );
-}

package/src/components/topbar-layout/topbar-layout.types.ts

@@ -1,13 +0,0 @@
-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/src/themes/default/styles/layout/dashboard-layout.css

@@ -1,15 +0,0 @@
-[data-slot="container"] {
-  max-inline-size: var(--ak-layout-content-max-width);
-}
-
-[data-slot="grid"] {
-  gap: var(--ak-space-md);
-}
-
-[data-slot="grid"][data-columns="2"] {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-[data-slot="grid"][data-columns="3"] {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}

package/src/themes/default/styles/layout/docs-layout.css

@@ -1,10 +0,0 @@
-[data-slot="sidebar-layout"] > [data-slot="sidebar"] {
-  position: sticky;
-  inset-block-start: 0;
-  block-size: 100vh;
-  overflow: auto;
-}
-
-[data-slot="sidebar-layout"] > [data-slot="main"] {
-  max-inline-size: var(--ak-layout-content-max-width);
-}

package/src/themes/default/styles/layout/sidebar.css

@@ -1,10 +0,0 @@
-[data-slot="sidebar-layout"] > [data-slot="sidebar"] {
-  inline-size: var(--ak-layout-sidebar-width);
-  max-inline-size: 100%;
-  background: var(--ak-color-surface);
-  border-inline-end: 1px solid var(--ak-color-border);
-}
-
-[data-slot="sidebar-layout"] > [data-slot="main"] {
-  min-inline-size: 0;
-}

package/src/themes/default/styles/navigation/navigation-menu.css

@@ -1,90 +0,0 @@
-[data-slot="navigation-menu"] {
-  position: relative;
-}
-
-[data-slot="navigation-menu-list"] {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-[data-slot="navigation-menu-trigger"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.25rem;
-  padding: 0 var(--ak-space-sm);
-  border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-sm);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
-  cursor: pointer;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    border-color var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard),
-    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-[data-slot="navigation-menu-trigger"][data-state="open"] {
-  border-color: var(--ak-color-primary);
-  background: var(--ak-color-primary-soft);
-  color: var(--ak-color-primary-ink);
-}
-
-[data-slot="navigation-menu-trigger"]:hover {
-  background: var(--ak-color-hover);
-  border-color: var(--ak-color-border-strong);
-}
-
-[data-slot="navigation-menu-content"] {
-  display: grid;
-  gap: 0.25rem;
-  min-width: 14rem;
-  max-block-size: min(20rem, calc(100vh - 4rem));
-  overflow-y: auto;
-  padding: var(--ak-space-sm);
-  border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface-raised);
-  color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
-}
-
-[data-slot="navigation-menu-link"],
-[data-slot="navigation-menu-sub-trigger"] {
-  display: flex;
-  align-items: center;
-  min-height: 2.25rem;
-  padding: 0 var(--ak-space-sm);
-  border-radius: var(--ak-radius-sm);
-  color: var(--ak-color-text);
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-[data-slot="navigation-menu-link"]:hover,
-[data-slot="navigation-menu-sub-trigger"]:hover {
-  background: var(--ak-color-surface-muted);
-}
-
-[data-slot="navigation-menu-sub-trigger"][data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-[data-slot="navigation-menu-viewport"] {
-  margin-top: var(--ak-space-sm);
-}
-
-[data-slot="navigation-menu-indicator"] {
-  block-size: 2px;
-  inline-size: 2rem;
-  margin-top: 0.125rem;
-  border-radius: 999px;
-  background: var(--ak-color-primary);
-}

package/src/themes/default/styles/navigation/tabs.css

@@ -1,61 +0,0 @@
-[data-slot="tabs"] {
-  display: grid;
-  gap: var(--ak-space-md);
-}
-
-[data-slot="tabs-list"] {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  border: 1px solid var(--ak-color-border);
-  border-radius: calc(var(--ak-radius-md) + 2px);
-  background: var(--ak-color-surface-muted);
-}
-
-[data-slot="tabs-list"][data-orientation="vertical"] {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-[data-slot="tabs-trigger"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
-  border: 0;
-  border-radius: var(--ak-radius-sm);
-  background: transparent;
-  color: var(--ak-color-text-muted);
-  cursor: pointer;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard),
-    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-[data-slot="tabs-trigger"][data-state="active"] {
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
-}
-
-[data-slot="tabs-trigger"]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
-}
-
-[data-slot="tabs-trigger"][data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-[data-slot="tabs-content"] {
-  padding: var(--ak-space-md);
-  border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
-}

package/src/themes/default/styles/overlays/dropdown-menu.css

@@ -1,109 +0,0 @@
-[data-slot="dropdown-menu-trigger"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
-  border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
-  cursor: pointer;
-  transition:
-    border-color var(--ak-duration-fast) var(--ak-ease-standard),
-    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-[data-slot="dropdown-menu-trigger"][data-state="open"] {
-  border-color: var(--ak-color-primary);
-}
-
-[data-slot="dropdown-menu-trigger"][data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-@keyframes ak-menu-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes ak-menu-out {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-}
-
-[data-slot="dropdown-menu-content"] {
-  display: grid;
-  gap: 0.25rem;
-  min-width: 12rem;
-  max-block-size: min(20rem, calc(100vh - 4rem));
-  overflow-y: auto;
-  padding: var(--ak-space-sm);
-  border: 1px solid var(--ak-color-border);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface-raised);
-  color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
-  animation: ak-menu-in var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-[data-slot="dropdown-menu-content"][data-state="closed"] {
-  animation: ak-menu-out var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-[data-slot="dropdown-menu-item"] {
-  display: flex;
-  align-items: center;
-  min-height: 2.25rem;
-  padding: 0 var(--ak-space-sm);
-  border: 0;
-  border-radius: var(--ak-radius-sm);
-  background: transparent;
-  color: var(--ak-color-text);
-  cursor: pointer;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-[data-slot="dropdown-menu-item"]:hover {
-  background: var(--ak-color-surface-muted);
-}
-
-[data-slot="dropdown-menu-item"]:focus-visible {
-  outline: none;
-  background: var(--ak-color-surface-muted);
-}
-
-[data-slot="dropdown-menu-item"][data-disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-[data-slot="dropdown-menu-label"] {
-  padding: 0 var(--ak-space-sm);
-  color: var(--ak-color-text-muted);
-  font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-semibold);
-}
-
-[data-slot="dropdown-menu-separator"] {
-  block-size: 1px;
-  margin: 0.25rem 0;
-  background: var(--ak-color-border);
-}