@godxjp/ui 31.31.7 → 32.0.0

package/dist/components/navigation/conversations.js

@@ -1,371 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { ChevronDown, MoreHorizontal, Plus } from "lucide-react";
-import { useTranslation } from "../../i18n/use-translation.js";
-import { formatDate } from "../../lib/datetime/format-date.js";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../general/button.js";
-import { Text } from "../general/typography.js";
-import { Separator } from "../layout/separator.js";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from "./dropdown-menu.js";
-function isDivider(entry) {
-  return "type" in entry && entry.type === "divider";
-}
-function isRtl(element) {
-  return element?.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
-}
-function toSections(items, groupable) {
-  const collapsibleOption = typeof groupable === "object" ? groupable.collapsible : void 0;
-  const sections = [];
-  for (const entry of items) {
-    const group = !groupable || isDivider(entry) ? void 0 : entry.group;
-    if (group === void 0) {
-      const tail = sections[sections.length - 1];
-      if (tail && tail.group === void 0) {
-        tail.entries.push(entry);
-        continue;
-      }
-      sections.push({ entries: [entry], collapsible: false });
-      continue;
-    }
-    const existing = sections.find((section) => section.group === group);
-    if (existing) {
-      existing.entries.push(entry);
-      continue;
-    }
-    sections.push({
-      group,
-      entries: [entry],
-      collapsible: typeof collapsibleOption === "function" ? collapsibleOption(group) : collapsibleOption ?? false
-    });
-  }
-  return sections;
-}
-const groupNavKey = (group) => `group:${group}`;
-const rowNavKey = (key) => `row:${key}`;
-const Conversations = React.forwardRef(
-  ({
-    items = [],
-    activeKey,
-    defaultActiveKey,
-    onActiveChange,
-    menu,
-    groupable,
-    creation,
-    label,
-    id,
-    className,
-    ...rest
-  }, ref) => {
-    const { t } = useTranslation();
-    const rootRef = React.useRef(null);
-    const setRootRef = React.useCallback(
-      (node) => {
-        rootRef.current = node;
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
-      [ref]
-    );
-    const [uncontrolledActive, setUncontrolledActive] = React.useState(defaultActiveKey);
-    const mergedActiveKey = activeKey ?? uncontrolledActive;
-    const sections = React.useMemo(() => toSections(items, groupable), [items, groupable]);
-    const groupOptions = typeof groupable === "object" ? groupable : {};
-    const collapsibleGroups = React.useMemo(
-      () => sections.filter((section) => section.collapsible && section.group).map((s) => s.group),
-      [sections]
-    );
-    const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(() => [
-      ...groupOptions.defaultExpandedKeys ?? collapsibleGroups
-    ]);
-    const expandedKeys = groupOptions.expandedKeys ? [...groupOptions.expandedKeys] : uncontrolledExpanded;
-    const toggleGroup = (group) => {
-      const next = expandedKeys.includes(group) ? expandedKeys.filter((key) => key !== group) : [...expandedKeys, group];
-      if (!groupOptions.expandedKeys) setUncontrolledExpanded(next);
-      groupOptions.onExpand?.(next);
-    };
-    const navKeys = [];
-    for (const section of sections) {
-      if (section.group && section.collapsible) {
-        navKeys.push(groupNavKey(section.group));
-        if (!expandedKeys.includes(section.group)) continue;
-      }
-      for (const entry of section.entries) {
-        if (!isDivider(entry) && !entry.disabled) navKeys.push(rowNavKey(entry.key));
-      }
-    }
-    const [focusKey, setFocusKey] = React.useState(null);
-    const activeNavKey = mergedActiveKey ? rowNavKey(mergedActiveKey) : void 0;
-    const tabStop = focusKey && navKeys.includes(focusKey) ? focusKey : activeNavKey && navKeys.includes(activeNavKey) ? activeNavKey : navKeys[0];
-    const nodes = React.useRef(/* @__PURE__ */ new Map());
-    const registerNode = (key) => (node) => {
-      if (node) nodes.current.set(key, node);
-      else nodes.current.delete(key);
-    };
-    const moveTo = (key) => {
-      if (!key) return;
-      setFocusKey(key);
-      nodes.current.get(key)?.focus();
-    };
-    const step = (from, delta) => {
-      if (navKeys.length === 0) return;
-      const index = navKeys.indexOf(from);
-      const next = index === -1 ? 0 : (index + delta + navKeys.length) % navKeys.length;
-      moveTo(navKeys[next]);
-    };
-    const handleNavKeyDown = (navKey) => (event) => {
-      const rtl = isRtl(event.currentTarget);
-      const forward = rtl ? "ArrowLeft" : "ArrowRight";
-      const backward = rtl ? "ArrowRight" : "ArrowLeft";
-      switch (event.key) {
-        case "ArrowDown":
-          event.preventDefault();
-          step(navKey, 1);
-          return;
-        case "ArrowUp":
-          event.preventDefault();
-          step(navKey, -1);
-          return;
-        case "Home":
-          event.preventDefault();
-          moveTo(navKeys[0]);
-          return;
-        case "End":
-          event.preventDefault();
-          moveTo(navKeys[navKeys.length - 1]);
-          return;
-        case forward: {
-          const trigger = nodes.current.get(`menu:${navKey}`);
-          if (!trigger) return;
-          event.preventDefault();
-          trigger.focus();
-          return;
-        }
-        case backward: {
-          if (!navKey.startsWith("menu:")) return;
-          event.preventDefault();
-          moveTo(navKey.slice("menu:".length));
-          return;
-        }
-        default:
-      }
-    };
-    const selectConversation = (item) => {
-      if (item.disabled) return;
-      if (activeKey === void 0) setUncontrolledActive(item.key);
-      onActiveChange?.(
-        item.key,
-        items.find((entry) => !isDivider(entry) && entry.key === item.key)
-      );
-    };
-    const menuFor = (item) => {
-      const resolved = typeof menu === "function" ? menu(item) : menu;
-      return resolved && resolved.items.length > 0 ? resolved : void 0;
-    };
-    const renderEntry = (entry, index) => {
-      if (isDivider(entry)) {
-        return /* @__PURE__ */ jsx("li", { className: "ui-conversations-rule", children: /* @__PURE__ */ jsx(
-          Separator,
-          {
-            "data-dashed": entry.dashed ? "true" : void 0,
-            className: "ui-conversations-separator"
-          }
-        ) }, entry.key ?? `divider-${index}`);
-      }
-      const navKey = rowNavKey(entry.key);
-      const active = mergedActiveKey === entry.key;
-      const rowMenu = entry.disabled ? void 0 : menuFor(entry);
-      const labelText = typeof entry.label === "string" ? entry.label : entry.key;
-      return /* @__PURE__ */ jsxs(
-        "li",
-        {
-          "data-slot": "conversations-item",
-          "data-active": active ? "true" : void 0,
-          className: "ui-conversations-item",
-          children: [
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                ref: registerNode(navKey),
-                type: "button",
-                variant: "ghost",
-                fullWidth: true,
-                align: "start",
-                disabled: entry.disabled,
-                "aria-current": active ? "true" : void 0,
-                tabIndex: tabStop === navKey ? 0 : -1,
-                className: "ui-conversations-row",
-                onFocus: () => setFocusKey(navKey),
-                onClick: () => selectConversation(entry),
-                onKeyDown: handleNavKeyDown(navKey),
-                children: [
-                  entry.icon ? /* @__PURE__ */ jsx("span", { className: "ui-conversations-icon", "aria-hidden": "true", children: entry.icon }) : null,
-                  /* @__PURE__ */ jsxs("span", { className: "ui-conversations-line", children: [
-                    /* @__PURE__ */ jsx(Text, { truncate: true, children: entry.label }),
-                    entry.timestamp === void 0 ? null : (
-                      /*
-                       * Through `formatDate`, never through `toLocaleString` or a sliced ISO string.
-                       * `docs/DATETIME.md` rule 1 forbids the alternatives for a measured reason: the
-                       * tenant's locale, timezone and 12/24h choice live in AppProvider, so the same
-                       * epoch has to read 2026/03/15 in a Japanese tenant and 15/03/2026 in a
-                       * Vietnamese one. A component that formats its own dates cannot do that.
-                       */
-                      /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", tabular: true, className: "ui-conversations-timestamp", children: formatDate(new Date(entry.timestamp)) })
-                    )
-                  ] })
-                ]
-              }
-            ),
-            rowMenu ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  ref: registerNode(`menu:${navKey}`),
-                  type: "button",
-                  variant: "ghost",
-                  size: "icon-sm",
-                  tabIndex: -1,
-                  className: "ui-conversations-menu-trigger",
-                  "aria-label": rowMenu.triggerLabel?.(entry) ?? t("navigation.conversations.rowActions", { label: labelText }),
-                  onKeyDown: handleNavKeyDown(`menu:${navKey}`),
-                  children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true" })
-                }
-              ) }),
-              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: rowMenu.items.map((command) => /* @__PURE__ */ jsxs(
-                DropdownMenuItem,
-                {
-                  disabled: command.disabled,
-                  variant: command.danger ? "destructive" : void 0,
-                  onSelect: () => rowMenu.onClick?.({ key: command.key, conversation: entry }),
-                  children: [
-                    command.icon,
-                    command.label
-                  ]
-                },
-                command.key
-              )) })
-            ] }) : null
-          ]
-        },
-        entry.key
-      );
-    };
-    const railLabel = label ?? t("navigation.conversations.label");
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: setRootRef,
-        id,
-        "data-slot": "conversations",
-        className: cn("ui-conversations", className),
-        ...rest,
-        children: [
-          creation ? /* @__PURE__ */ jsx(CreationButton, { creation }) : null,
-          sections.map((section, sectionIndex) => {
-            if (!section.group) {
-              return /* @__PURE__ */ jsx(
-                "ul",
-                {
-                  "aria-label": railLabel,
-                  className: "ui-conversations-list",
-                  children: section.entries.map(renderEntry)
-                },
-                `run-${sectionIndex}`
-              );
-            }
-            const heading = typeof groupOptions.label === "function" ? groupOptions.label(section.group) : groupOptions.label ?? section.group;
-            const navKey = groupNavKey(section.group);
-            const expanded = expandedKeys.includes(section.group);
-            const listId = `${id ?? "ui-conversations"}-${section.group}`;
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-slot": "conversations-group",
-                className: "ui-conversations-group",
-                children: [
-                  section.collapsible ? /* @__PURE__ */ jsxs(
-                    Button,
-                    {
-                      ref: registerNode(navKey),
-                      type: "button",
-                      variant: "ghost",
-                      size: "sm",
-                      fullWidth: true,
-                      align: "start",
-                      "aria-expanded": expanded,
-                      "aria-controls": listId,
-                      tabIndex: tabStop === navKey ? 0 : -1,
-                      className: "ui-conversations-group-trigger",
-                      onFocus: () => setFocusKey(navKey),
-                      onClick: () => toggleGroup(section.group),
-                      onKeyDown: handleNavKeyDown(navKey),
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          ChevronDown,
-                          {
-                            "aria-hidden": "true",
-                            className: "ui-conversations-group-chevron",
-                            "data-expanded": expanded ? "true" : void 0
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", weight: "medium", truncate: true, children: heading })
-                      ]
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      size: "xs",
-                      tone: "muted",
-                      weight: "medium",
-                      className: "ui-conversations-group-label",
-                      children: heading
-                    }
-                  ),
-                  section.collapsible && !expanded ? null : /* @__PURE__ */ jsx(
-                    "ul",
-                    {
-                      id: listId,
-                      "aria-label": typeof heading === "string" ? heading : section.group,
-                      className: "ui-conversations-list",
-                      children: section.entries.map(renderEntry)
-                    }
-                  )
-                ]
-              },
-              section.group
-            );
-          })
-        ]
-      }
-    );
-  }
-);
-Conversations.displayName = "Conversations";
-function CreationButton({ creation }) {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      type: "button",
-      variant: "outline",
-      fullWidth: true,
-      align: "start",
-      disabled: creation.disabled,
-      className: "ui-conversations-creation",
-      onClick: () => creation.onClick?.(),
-      children: [
-        creation.icon ?? /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
-        creation.label ?? t("navigation.conversations.creation")
-      ]
-    }
-  );
-}
-export {
-  Conversations
-};

package/dist/components/ui/accordion.d.ts

@@ -1,51 +0,0 @@
-import * as React from "react";
-interface AccordionBaseProps extends Omit<React.ComponentPropsWithRef<"div">, "dir"> {
-    /** Trục xếp mục — đổi cặp phím mũi tên điều hướng. */
-    orientation?: "vertical" | "horizontal";
-    /** Chiều viết; chỉ đổi mũi tên trái/phải khi `orientation="horizontal"`. */
-    dir?: "ltr" | "rtl";
-    /** Khoá mọi mục. */
-    disabled?: boolean;
-}
-interface AccordionSingleProps extends AccordionBaseProps {
-    /** Chỉ một mục mở tại một thời điểm. */
-    type: "single";
-    /** Mục đang mở, có kiểm soát. */
-    value?: string;
-    /** Mục mở ban đầu khi không kiểm soát. */
-    defaultValue?: string;
-    /** Gọi khi mục đang mở đổi; chuỗi rỗng nghĩa là đã đóng hết. */
-    onValueChange?: (value: string) => void;
-    /** Cho phép đóng chính mục đang mở. Mặc định sai, như Radix. */
-    collapsible?: boolean;
-}
-interface AccordionMultipleProps extends AccordionBaseProps {
-    /** Nhiều mục mở độc lập. */
-    type: "multiple";
-    /** Các mục đang mở, có kiểm soát. */
-    value?: string[];
-    /** Các mục mở ban đầu khi không kiểm soát. */
-    defaultValue?: string[];
-    /** Gọi khi tập mục đang mở đổi. */
-    onValueChange?: (value: string[]) => void;
-}
-type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
-export declare function Accordion(accordionProps: AccordionProps): React.JSX.Element;
-interface AccordionItemProps extends React.ComponentPropsWithRef<"div"> {
-    /** Khoá riêng mục này. */
-    disabled?: boolean;
-    /** Khoá định danh của mục — khớp với `value` của `Accordion`. */
-    value: string;
-}
-export declare function AccordionItem({ className, disabled, value, children, ref, ...props }: AccordionItemProps): React.JSX.Element;
-interface AccordionTriggerProps extends React.ComponentPropsWithRef<"button"> {
-    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
-    asChild?: boolean;
-}
-export declare function AccordionTrigger({ asChild, className, children, onClick, ...props }: AccordionTriggerProps): React.JSX.Element;
-interface AccordionContentProps extends React.ComponentPropsWithRef<"div"> {
-    /** Giữ nội dung trong DOM cả khi đóng. */
-    forceMount?: true;
-}
-export declare function AccordionContent({ className, forceMount, children, ref, ...props }: AccordionContentProps): React.JSX.Element;
-export {};

package/dist/components/ui/accordion.js

@@ -1,254 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { chain, mergeRefs } from "@react-aria/utils";
-import {
-  ButtonContext,
-  Disclosure,
-  DisclosureGroup,
-  DisclosureGroupStateContext,
-  DisclosurePanel,
-  DisclosureStateContext,
-  useSlottedContext
-} from "react-aria-components";
-import { ChevronDown } from "lucide-react";
-import { cn } from "../../lib/utils.js";
-import { Slot } from "../../lib/slot.js";
-const AccordionGroupContext = React.createContext({
-  orientation: "vertical"
-});
-const AccordionItemContext = React.createContext(null);
-function useAccordionItem(component) {
-  const item = React.useContext(AccordionItemContext);
-  const state = React.useContext(DisclosureStateContext);
-  if (!item || !state) {
-    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`AccordionItem\`.`);
-  }
-  return { item, state };
-}
-const TRIGGER_SELECTOR = '[data-slot="accordion-trigger"]:not([disabled])';
-function toArray(value) {
-  if (value === void 0) {
-    return [];
-  }
-  return Array.isArray(value) ? value : [value];
-}
-function Accordion(accordionProps) {
-  const {
-    type,
-    value,
-    defaultValue,
-    onValueChange,
-    collapsible,
-    orientation = "vertical",
-    dir,
-    disabled,
-    onKeyDown,
-    children,
-    ref,
-    ...props
-  } = accordionProps;
-  const [uncontrolled, setUncontrolled] = React.useState(() => toArray(defaultValue));
-  const isControlled = value !== void 0;
-  const expandedKeys = new Set(isControlled ? toArray(value) : uncontrolled);
-  function handleExpandedChange(keys) {
-    const next = [...keys].map(String);
-    if (type === "single" && !collapsible && next.length === 0) {
-      return;
-    }
-    if (!isControlled) {
-      setUncontrolled(next);
-    }
-    onValueChange?.(type === "multiple" ? next : next[0] ?? "");
-  }
-  function moveFocus(event) {
-    const from = event.target.closest?.(TRIGGER_SELECTOR);
-    if (!from) {
-      return;
-    }
-    const horizontal = orientation === "horizontal";
-    const forward = horizontal ? dir === "rtl" ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
-    const backward = horizontal ? dir === "rtl" ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
-    const triggers = [...event.currentTarget.querySelectorAll(TRIGGER_SELECTOR)];
-    const at = triggers.indexOf(from);
-    if (at < 0) {
-      return;
-    }
-    let to;
-    if (event.key === forward) {
-      to = (at + 1) % triggers.length;
-    } else if (event.key === backward) {
-      to = (at - 1 + triggers.length) % triggers.length;
-    } else if (event.key === "Home") {
-      to = 0;
-    } else if (event.key === "End") {
-      to = triggers.length - 1;
-    } else {
-      return;
-    }
-    event.preventDefault();
-    triggers[to].focus();
-  }
-  return /* @__PURE__ */ jsx(
-    DisclosureGroup,
-    {
-      allowsMultipleExpanded: type === "multiple",
-      expandedKeys,
-      onExpandedChange: handleExpandedChange,
-      isDisabled: disabled,
-      render: (racProps) => {
-        const {
-          className: _racClass,
-          "data-rac": _rac,
-          ref: racRef,
-          ...rest
-        } = racProps;
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...props,
-            ...rest,
-            ref: mergeRefs(ref, racRef),
-            dir,
-            "data-orientation": orientation,
-            onKeyDown: chain(onKeyDown, moveFocus)
-          }
-        );
-      },
-      children: /* @__PURE__ */ jsx(AccordionGroupContext.Provider, { value: { orientation }, children })
-    }
-  );
-}
-function AccordionItem({
-  className,
-  disabled,
-  value,
-  children,
-  ref,
-  ...props
-}) {
-  const { orientation } = React.useContext(AccordionGroupContext);
-  const groupState = React.useContext(DisclosureGroupStateContext);
-  const isDisabled = Boolean(disabled || groupState?.isDisabled);
-  return /* @__PURE__ */ jsx(
-    Disclosure,
-    {
-      id: value,
-      isDisabled,
-      render: (racProps, { isExpanded }) => {
-        const {
-          className: _racClass,
-          "data-rac": _rac,
-          ref: racRef,
-          ...rest
-        } = racProps;
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "accordion-item",
-            className: cn("ui-accordion-item", className),
-            ...props,
-            ...rest,
-            ref: mergeRefs(ref, racRef),
-            "data-state": isExpanded ? "open" : "closed",
-            "data-disabled": isDisabled ? "" : void 0,
-            "data-orientation": orientation,
-            children: /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { orientation, isDisabled }, children })
-          }
-        );
-      }
-    }
-  );
-}
-function AccordionTrigger({
-  asChild,
-  className,
-  children,
-  onClick,
-  ...props
-}) {
-  const { item, state } = useAccordionItem("AccordionTrigger");
-  const trigger = useSlottedContext(ButtonContext, "trigger");
-  const Comp = asChild ? Slot : "button";
-  const dataState = state.isExpanded ? "open" : "closed";
-  const dataDisabled = item.isDisabled ? "" : void 0;
-  return /* @__PURE__ */ jsx(
-    "h3",
-    {
-      className: "ui-accordion-header",
-      "data-orientation": item.orientation,
-      "data-state": dataState,
-      "data-disabled": dataDisabled,
-      children: /* @__PURE__ */ jsxs(
-        Comp,
-        {
-          type: "button",
-          id: trigger?.id,
-          "aria-controls": state.isExpanded ? trigger?.["aria-controls"] : void 0,
-          "aria-expanded": state.isExpanded,
-          "data-slot": "accordion-trigger",
-          "data-state": dataState,
-          "data-disabled": dataDisabled,
-          "data-orientation": item.orientation,
-          disabled: item.isDisabled,
-          className: cn("ui-accordion-trigger", className),
-          ...props,
-          onClick: chain(onClick, () => {
-            if (!item.isDisabled) {
-              state.toggle();
-            }
-          }),
-          children: [
-            children,
-            /* @__PURE__ */ jsx(ChevronDown, { className: "ui-accordion-chevron", "aria-hidden": "true" })
-          ]
-        }
-      )
-    }
-  );
-}
-function AccordionContent({
-  className,
-  forceMount,
-  children,
-  ref,
-  ...props
-}) {
-  const { item, state } = useAccordionItem("AccordionContent");
-  return /* @__PURE__ */ jsx(
-    DisclosurePanel,
-    {
-      role: "region",
-      render: (racProps) => {
-        const {
-          className: _racClass,
-          "data-rac": _rac,
-          children: _racChildren,
-          ref: racRef,
-          ...rest
-        } = racProps;
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "accordion-content",
-            className: cn("ui-accordion-content", className),
-            ...props,
-            ...rest,
-            ref: mergeRefs(ref, racRef),
-            "data-state": state.isExpanded ? "open" : "closed",
-            "data-disabled": item.isDisabled ? "" : void 0,
-            "data-orientation": item.orientation,
-            children: state.isExpanded || forceMount ? /* @__PURE__ */ jsx("div", { className: "ui-accordion-content-inner", children }) : null
-          }
-        );
-      },
-      children: null
-    }
-  );
-}
-export {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-};

package/dist/components/ui/aspect-ratio.d.ts

@@ -1,24 +0,0 @@
-import * as React from "react";
-/**
- * AspectRatio — hộp giữ tỉ lệ, dựng bằng thuộc tính CSS `aspect-ratio`.
- *
- * Radix dựng cái này bằng mẹo `padding-bottom` thời chưa có `aspect-ratio`: một
- * div bọc `position: relative; width: 100%; padding-bottom: (100/ratio)%`, rồi
- * div THẬT nằm trong nó ở `position: absolute; inset: 0`. Hai node, hai lớp
- * định vị, chỉ để nói một câu mà CSS ngày nay nói được bằng một khai báo.
- *
- * Nên node bọc biến mất và `.ui-aspect-ratio` giờ LÀ hộp tỉ lệ. Kiểm trước khi
- * đổi: không luật nào trong `src/styles/` bám vào `[data-radix-aspect-ratio-wrapper]`
- * hay vào việc `.ui-aspect-ratio` phải là con của một node khác — luật duy nhất
- * chạm tới nó là `.ui-aspect-ratio { overflow: clip; overflow-clip-margin }`
- * trong `layout.css`, và nó bám vào CHÍNH node này, node vẫn còn.
- *
- * `position: relative` được giữ lại dù không còn cần cho mẹo padding: node bọc
- * trước đây là containing block của mọi con `position: absolute` mà consumer
- * đặt vào (một overlay, một badge góc). Bỏ nó đi thì những con ấy lặng lẽ nhảy
- * ra neo vào tổ tiên định vị gần nhất ở ngoài.
- */
-export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean;
-    ratio?: number;
-} & React.RefAttributes<HTMLDivElement>>;