azamat-ui-kit 0.1.1 → 0.2.0

package/dist/cli/index.js

@@ -124,7 +124,8 @@ var azamatUiThemeCss = `${AZAMAT_UI_THEME_START}
   --radius-4xl: calc(var(--radius) * 2.6);
 }
 
-:root {
+:root,
+.light {
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -328,90 +329,116 @@ var baseDependencies = [
   "@tanstack/react-table",
   "react-hook-form"
 ];
-async function initCommand() {
+var templateDefaults = {
+  vite: {
+    alias: "@",
+    componentsPath: "src/components",
+    uiPath: "src/components/ui",
+    hooksPath: "src/hooks",
+    utilsPath: "src/lib/utils.ts",
+    globalCssPath: "src/index.css"
+  },
+  next: {
+    alias: "@",
+    componentsPath: "components",
+    uiPath: "components/ui",
+    hooksPath: "hooks",
+    utilsPath: "lib/utils.ts",
+    globalCssPath: "app/globals.css"
+  }
+};
+function resolveTemplate(value) {
+  if (value === "next" || value === "vite") return value;
+  logger.warn(`Unknown template '${value}'. Falling back to vite defaults.`);
+  return "vite";
+}
+async function initCommand(options = {}) {
   const cwd = process.cwd();
   const packageJsonPath = path3.join(cwd, "package.json");
   if (!fs3.existsSync(packageJsonPath)) {
-    logger.error("package.json topilmadi. Commandni React/Vite project ichida ishlating.");
+    logger.error("package.json topilmadi / not found. Commandni React, Vite yoki Next project ichida ishlating.");
     process.exit(1);
   }
+  const defaults = templateDefaults[resolveTemplate(options.template)];
   const response = await prompts([
     {
       type: "confirm",
       name: "installDeps",
-      message: "Asosiy dependencylarni o\u2018rnataymi?",
-      initial: true
+      message: "Asosiy dependencylarni o\u2018rnataymi? / Install base dependencies?",
+      initial: !options.skipInstall
     },
     {
       type: "text",
       name: "alias",
-      message: "Path alias qanday?",
-      initial: "@"
+      message: "Path alias qanday? / Path alias?",
+      initial: defaults.alias
     },
     {
       type: "text",
       name: "componentsPath",
-      message: "Component root qayerda?",
-      initial: "src/components"
+      message: "Component root qayerda? / Component root?",
+      initial: defaults.componentsPath
     },
     {
       type: "text",
       name: "uiPath",
-      message: "UI primitives qayerga yozilsin?",
-      initial: "src/components/ui"
+      message: "UI primitives qayerga yozilsin? / UI primitives path?",
+      initial: defaults.uiPath
     },
     {
       type: "text",
       name: "hooksPath",
-      message: "Hooks qayerga yozilsin?",
-      initial: "src/hooks"
+      message: "Hooks qayerga yozilsin? / Hooks path?",
+      initial: defaults.hooksPath
     },
     {
       type: "text",
       name: "utilsPath",
-      message: "utils.ts qayerga yozilsin?",
-      initial: "src/lib/utils.ts"
+      message: "utils.ts qayerga yozilsin? / utils.ts path?",
+      initial: defaults.utilsPath
     },
     {
       type: "text",
       name: "globalCssPath",
-      message: "Theme tokenlar qaysi global CSS faylga yozilsin?",
-      initial: "src/index.css"
+      message: "Theme tokenlar qaysi global CSS faylga yozilsin? / Global CSS path?",
+      initial: defaults.globalCssPath
     },
     {
       type: "confirm",
       name: "writeThemeCss",
-      message: "Dark/light theme tokenlarni global CSS faylga yozaymi?",
+      message: "Dark/light theme tokenlarni global CSS faylga yozaymi? / Write theme tokens?",
       initial: true
     }
   ]);
   const packageManager = detectPackageManager(cwd);
   logger.info(`Package manager: ${packageManager}`);
-  if (response.installDeps) {
+  if (!options.skipInstall && response.installDeps) {
     await installPackages({
       cwd,
       packageManager,
       packages: baseDependencies
     });
   }
+  const utilsPath = response.utilsPath || defaults.utilsPath;
+  const globalCssPath = response.globalCssPath || defaults.globalCssPath;
   const config = {
     style: "default",
-    alias: response.alias || "@",
-    componentsPath: response.uiPath,
-    utilsPath: response.utilsPath,
-    cssPath: response.globalCssPath,
-    globalCssPath: response.globalCssPath,
+    alias: response.alias || defaults.alias,
+    componentsPath: response.uiPath || defaults.uiPath,
+    utilsPath,
+    cssPath: globalCssPath,
+    globalCssPath,
     paths: {
-      components: response.componentsPath,
-      ui: response.uiPath,
-      hooks: response.hooksPath,
-      lib: path3.dirname(response.utilsPath)
+      components: response.componentsPath || defaults.componentsPath,
+      ui: response.uiPath || defaults.uiPath,
+      hooks: response.hooksPath || defaults.hooksPath,
+      lib: path3.dirname(utilsPath)
     }
   };
   await fs3.writeJson(path3.join(cwd, "azamat-ui.json"), config, {
     spaces: 2
   });
-  const utilsFullPath = path3.join(cwd, response.utilsPath);
+  const utilsFullPath = path3.join(cwd, utilsPath);
   await fs3.ensureDir(path3.dirname(utilsFullPath));
   if (!fs3.existsSync(utilsFullPath)) {
     await fs3.writeFile(
@@ -425,19 +452,19 @@ export function cn(...inputs: ClassValue[]) {
 `
     );
   }
-  if (response.writeThemeCss && response.globalCssPath) {
+  if (response.writeThemeCss && globalCssPath) {
     const cssTarget = await upsertThemeCss({
       cwd,
-      cssPath: response.globalCssPath
+      cssPath: globalCssPath
     });
-    logger.success(`Theme CSS yozildi: ${cssTarget}`);
+    logger.success(`Theme CSS yozildi / written: ${cssTarget}`);
   }
-  logger.success("Azamat UI Kit init qilindi.");
-  logger.info("Componentlarni ko\u2018rish:");
+  logger.success("Azamat UI Kit init qilindi / initialized.");
+  logger.info("Componentlarni ko\u2018rish / list components:");
   logger.info("npx azamat-ui-kit list");
-  logger.info("Component qo\u2018shish:");
+  logger.info("Component qo\u2018shish / add components:");
   logger.info("npx azamat-ui-kit add button input data-table");
-  logger.info("Theme CSS ni yangilash:");
+  logger.info("Theme CSS ni yangilash / update theme CSS:");
   logger.info("npx azamat-ui-kit theme");
 }
 
@@ -681,6 +708,123 @@ async function addCommand(components, options = {}) {
   logger.success("Componentlar muvaffaqiyatli qo\u2018shildi.");
 }
 
+// cli/registry-status.ts
+var registryStatus = {
+  utils: "internal",
+  button: "stable",
+  input: "stable",
+  textarea: "stable",
+  checkbox: "stable",
+  switch: "stable",
+  badge: "stable",
+  card: "stable",
+  dialog: "stable",
+  "dropdown-menu": "stable",
+  popover: "stable",
+  select: "stable",
+  table: "stable",
+  "dialog-actions": "stable",
+  "modal-shell": "stable",
+  "confirm-dialog": "stable",
+  "sheet-shell": "stable",
+  overlay: "stable",
+  pagination: "stable",
+  "clearable-input": "preview",
+  "search-input": "preview",
+  "password-input": "preview",
+  "number-input": "preview",
+  "date-input": "preview",
+  "date-range-input": "preview",
+  "money-input": "preview",
+  "quantity-input": "preview",
+  "masked-input": "preview",
+  "phone-input": "preview",
+  "simple-select": "preview",
+  "async-select": "preview",
+  inputs: "preview",
+  "form-field-shell": "preview",
+  "form-input": "preview",
+  "form-select": "preview",
+  "form-async-select": "preview",
+  "form-textarea": "preview",
+  "form-switch": "preview",
+  "form-search-input": "preview",
+  "form-password-input": "preview",
+  "form-number-input": "preview",
+  "form-phone-input": "preview",
+  "form-date-input": "preview",
+  "form-date-range-input": "preview",
+  "form-date-picker": "preview",
+  "form-date-range-picker": "preview",
+  form: "preview",
+  "empty-state": "stable",
+  "loading-state": "stable",
+  "status-badge": "stable",
+  feedback: "stable",
+  "description-list": "stable",
+  progress: "stable",
+  result: "stable",
+  timeline: "stable",
+  "metric-grid": "stable",
+  "info-card": "stable",
+  "activity-feed": "stable",
+  display: "stable",
+  "action-menu": "stable",
+  actions: "stable",
+  "page-header": "stable",
+  "stat-card": "stable",
+  "app-shell": "stable",
+  "app-header": "stable",
+  "app-sidebar": "stable",
+  "sidebar-nav": "stable",
+  breadcrumbs: "stable",
+  "page-container": "stable",
+  layout: "stable",
+  "filter-bar": "stable",
+  filters: "stable",
+  "data-table-toolbar": "preview",
+  "data-table-pagination": "preview",
+  "data-table-column-visibility-menu": "preview",
+  "data-table-select-column": "preview",
+  "data-table-sortable-header": "preview",
+  "data-table-row-actions": "preview",
+  "data-table-actions-column": "preview",
+  "data-table-bulk-actions": "preview",
+  "data-table-view-presets": "preview",
+  "data-table": "preview",
+  calendar: "preview",
+  "date-picker": "preview",
+  "date-range-picker": "preview",
+  "calendar-kit": "preview",
+  "file-upload": "preview",
+  "image-upload": "preview",
+  upload: "preview",
+  stepper: "preview",
+  wizard: "preview",
+  "wizard-kit": "preview",
+  toast: "preview",
+  notifications: "preview",
+  "command-palette": "preview",
+  command: "preview",
+  "resource-page": "preview",
+  "resource-detail-page": "preview",
+  "form-builder": "experimental",
+  "form-builder-presets": "experimental",
+  patterns: "preview",
+  "use-session-storage-state": "stable",
+  "use-before-unload-when-dirty": "stable",
+  "use-is-mobile": "stable",
+  "use-disclosure": "stable",
+  "use-debounce": "stable",
+  "use-data-table-view-state": "preview",
+  hooks: "stable",
+  dashboard: "preview",
+  all: "preview"
+};
+function getRegistryStatus(name) {
+  return registryStatus[name] ?? "preview";
+}
+
 // cli/commands/list.ts
 function listCommand() {
   const grouped = registryNames.filter((name) => registry[name].category !== "lib").reduce((acc, name) => {
@@ -694,10 +838,16 @@ function listCommand() {
 ${category}`);
     names.sort().forEach((name) => {
       const item = registry[name];
+      const status = getRegistryStatus(name);
       const deps = item.registryDependencies?.length ? ` -> ${item.registryDependencies.join(", ")}` : "";
-      console.log(`  ${name}${deps}`);
+      console.log(`  ${name} [${status}]${deps}`);
     });
   }
+  console.log("\nStatus:");
+  console.log("  stable = safe public API");
+  console.log("  preview = usable but API may change");
+  console.log("  experimental = not ready for stable app contracts");
+  console.log("  internal = helper metadata");
   console.log("\nUsage:");
   console.log("  npx azamat-ui-kit add button input data-table");
   console.log("  npx azamat-ui-kit add form --overwrite");
@@ -717,8 +867,8 @@ async function themeCommand(cssPathArg) {
 
 // cli/index.ts
 var program = new Command();
-program.name("azamat-ui-kit").description("Azamat UI Kit CLI").version("0.0.1");
-program.command("init").description("Initialize Azamat UI Kit in your project").action(initCommand);
+program.name("azamat-ui-kit").description("Azamat UI Kit CLI").version("0.1.1");
+program.command("init").description("Initialize Azamat UI Kit in your project").option("--template <template>", "Project defaults: vite or next", "vite").option("--skip-install", "Do not install base dependencies").action(initCommand);
 program.command("list").description("List available registry components").action(listCommand);
 program.command("add").description("Add components to your project").argument("[components...]", "components to add").option("-o, --overwrite", "overwrite existing files").option("--dry-run", "show files without writing").option("--skip-install", "do not install package dependencies").action(addCommand);
 program.command("theme").description("Write or update Azamat UI theme CSS in your global CSS file").argument("[cssPath]", "global CSS path, default from azamat-ui.json or src/index.css").action(themeCommand);

package/dist/components/actions/button-group.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+type ButtonProps = React.ComponentProps<typeof Button>;
+export type ButtonGroupItem = Omit<ButtonProps, "children"> & {
+    key: string;
+    label: React.ReactNode;
+};
+export type ButtonGroupProps = React.ComponentProps<"div"> & {
+    items?: ButtonGroupItem[];
+    attached?: boolean;
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+};
+declare function ButtonGroup({ items, attached, size, variant, className, children, ...props }: ButtonGroupProps): React.JSX.Element;
+export { ButtonGroup };

package/dist/components/actions/copy-field.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type CopyButtonProps } from "@/components/actions/copy-button";
+export type CopyFieldProps = React.ComponentProps<"div"> & {
+    value: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    copyButtonProps?: Omit<CopyButtonProps, "value">;
+    monospace?: boolean;
+};
+declare function CopyField({ value, label, description, copyButtonProps, monospace, className, ...props }: CopyFieldProps): React.JSX.Element;
+export { CopyField };

package/dist/components/actions/index.d.ts

@@ -1,3 +1,5 @@
-export * from "./action-menu";
-export * from "./copy-button";
-export * from "./quick-action-grid";
+export * from './action-menu';
+export * from './copy-button';
+export * from './copy-field';
+export * from './button-group';
+export * from './quick-action-grid';

package/dist/components/calendar/calendar.d.ts

@@ -3,10 +3,12 @@ export type CalendarDateRange = {
     from?: string | null;
     to?: string | null;
 };
+export type CalendarDisabledReason = "disabled" | "min" | "max" | "range";
 export type CalendarLabels = {
     previousMonth?: string;
     nextMonth?: string;
     selectDate?: (date: string) => string;
+    disabledDate?: (date: string, reason: CalendarDisabledReason) => string;
 };
 export type CalendarProps = React.ComponentProps<"div"> & {
     value?: string | null;

package/dist/components/charts/charts.d.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type ChartDatum = {
+    label: React.ReactNode;
+    value: number;
+    description?: React.ReactNode;
+    color?: string;
+};
+export type ChartSeries = {
+    key: string;
+    label: React.ReactNode;
+    data: number[];
+    color?: string;
+};
+export type ChartAxisLabel = string | number | React.ReactNode;
+export type ChartSize = "sm" | "md" | "lg";
+export type ChartFrameProps = React.ComponentProps<typeof Card> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+};
+declare function ChartFrame({ title, description, action, className, children, ...props }: ChartFrameProps): React.JSX.Element;
+export type BarChartProps = React.ComponentProps<"div"> & {
+    data: ChartDatum[];
+    size?: ChartSize;
+    max?: number;
+    showLabels?: boolean;
+    showValues?: boolean;
+    barClassName?: string;
+};
+declare function BarChart({ data, size, max, showLabels, showValues, className, barClassName, ...props }: BarChartProps): React.JSX.Element;
+export type LineChartProps = Omit<React.ComponentProps<"svg">, "values"> & {
+    values: number[];
+    size?: ChartSize;
+    width?: number;
+    showArea?: boolean;
+    stroke?: string;
+};
+declare function LineChart({ values, size, width, showArea, stroke, className, ...props }: LineChartProps): React.JSX.Element;
+export type SparklineProps = Omit<LineChartProps, "size" | "showArea"> & {
+    values: number[];
+    positive?: boolean;
+};
+declare function Sparkline({ values, positive, stroke, className, ...props }: SparklineProps): React.JSX.Element;
+export type DonutChartProps = React.ComponentProps<"svg"> & {
+    data: ChartDatum[];
+    size?: number;
+    strokeWidth?: number;
+    centerLabel?: React.ReactNode;
+    centerValue?: React.ReactNode;
+};
+declare function DonutChart({ data, size, strokeWidth, centerLabel, centerValue, className, ...props }: DonutChartProps): React.JSX.Element;
+export type ChartLegendProps = React.ComponentProps<"div"> & {
+    data: ChartDatum[];
+};
+declare function ChartLegend({ data, className, ...props }: ChartLegendProps): React.JSX.Element;
+export type MetricTrendProps = React.ComponentProps<"div"> & {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    change?: React.ReactNode;
+    positive?: boolean;
+    values?: number[];
+};
+declare function MetricTrend({ label, value, change, positive, values, className, ...props }: MetricTrendProps): React.JSX.Element;
+export { BarChart, ChartFrame, ChartLegend, DonutChart, LineChart, MetricTrend, Sparkline };

package/dist/components/charts/index.d.ts

@@ -0,0 +1 @@
+export * from "./charts";

package/dist/components/data-table/data-table.d.ts

@@ -6,6 +6,7 @@ import { type DataTableRowAction } from "@/components/data-table/data-table-row-
 import { type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar";
 import { type EmptyStateProps } from "@/components/feedback/empty-state";
 import { type LoadingStateProps } from "@/components/feedback/loading-state";
+import { type SearchInputProps } from "@/components/inputs/search-input";
 export type DataTableDensity = "compact" | "default" | "comfortable";
 export type DataTableLoadingVariant = "skeleton" | "state";
 export type DataTableFeatureConfig = {
@@ -16,12 +17,9 @@ export type DataTableFeatureConfig = {
     refresh?: boolean;
     export?: boolean;
 };
-export type DataTableSearchConfig = {
-    value: string;
-    onValueChange: (value: string) => void;
-    placeholder?: string;
+export type DataTableSearchConfig = Pick<SearchInputProps, "value" | "onValueChange" | "placeholder" | "inputClassName" | "disabled" | "clearable" | "clearLabel" | "searchIcon"> & {
     className?: string;
-    inputClassName?: string;
+    wrapperClassName?: string;
 };
 export type DataTableActionContext<TData> = {
     table: TanStackTable<TData>;

package/dist/components/display/code-block.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type CodeBlockProps = React.ComponentProps<"div"> & {
+    code: string;
+    language?: string;
+    title?: React.ReactNode;
+    showCopy?: boolean;
+    wrap?: boolean;
+};
+declare function CodeBlock({ code, language, title, showCopy, wrap, className, ...props }: CodeBlockProps): React.JSX.Element;
+export { CodeBlock };

package/dist/components/display/data-card.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type DataCardProps = React.ComponentProps<typeof Card> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    value?: React.ReactNode;
+    meta?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    footer?: React.ReactNode;
+};
+declare function DataCard({ title, description, value, meta, icon, action, footer, className, children, ...props }: DataCardProps): React.JSX.Element;
+export { DataCard };

package/dist/components/display/descriptions.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export type DescriptionItem = {
+    key: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    span?: 1 | 2 | 3 | 4;
+};
+export type DescriptionsProps = React.ComponentProps<"div"> & {
+    items: DescriptionItem[];
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    bordered?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    size?: "sm" | "md" | "lg";
+    labelClassName?: string;
+    valueClassName?: string;
+};
+declare function Descriptions({ items, title, extra, bordered, columns, size, labelClassName, valueClassName, className, ...props }: DescriptionsProps): React.JSX.Element;
+export { Descriptions };

package/dist/components/display/file-card.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type FileCardProps = React.ComponentProps<"div"> & {
+    name: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    icon?: React.ReactNode;
+    preview?: React.ReactNode;
+    actions?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    onOpen?: () => void;
+};
+declare function FileCard({ name, description, meta, icon, preview, actions, selected, disabled, onOpen, className, ...props }: FileCardProps): React.JSX.Element;
+export { FileCard };

package/dist/components/display/index.d.ts

@@ -1,10 +1,22 @@
-export * from "./description-list";
-export * from "./progress";
-export * from "./result";
-export * from "./timeline";
-export * from "./metric-grid";
-export * from "./info-card";
-export * from "./activity-feed";
-export * from "./status-legend";
-export * from "./avatar";
-export * from "./data-state";
+export * from './description-list';
+export * from './progress';
+export * from './result';
+export * from './timeline';
+export * from './metric-grid';
+export * from './info-card';
+export * from './activity-feed';
+export * from './status-legend';
+export * from './avatar';
+export * from './data-state';
+export * from './statistic';
+export * from './list';
+export * from './descriptions';
+export * from './kanban';
+export * from './tag-list';
+export * from './tree-view';
+export * from './keyboard-shortcut';
+export * from './code-block';
+export * from './file-card';
+export * from './property-grid';
+export * from './data-card';
+export * from './user-card';

package/dist/components/display/kanban.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export type KanbanCard = {
+    key: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    meta?: React.ReactNode;
+    extra?: React.ReactNode;
+    disabled?: boolean;
+};
+export type KanbanColumn = {
+    key: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    cards: KanbanCard[];
+    count?: React.ReactNode;
+};
+export type KanbanBoardProps = React.ComponentProps<"div"> & {
+    columns: KanbanColumn[];
+    renderCard?: (card: KanbanCard, column: KanbanColumn) => React.ReactNode;
+    onCardClick?: (card: KanbanCard, column: KanbanColumn) => void;
+    columnClassName?: string;
+    cardClassName?: string;
+};
+declare function KanbanBoard({ columns, renderCard, onCardClick, columnClassName, cardClassName, className, ...props }: KanbanBoardProps): React.JSX.Element;
+export { KanbanBoard };

package/dist/components/display/keyboard-shortcut.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type KeyboardShortcutProps = React.ComponentProps<"kbd"> & {
+    keys?: React.ReactNode[];
+    separator?: React.ReactNode;
+};
+declare function KeyboardShortcut({ keys, separator, className, children, ...props }: KeyboardShortcutProps): React.JSX.Element;
+export { KeyboardShortcut };

package/dist/components/display/list.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type ListItem = {
+    key: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    avatar?: React.ReactNode;
+    extra?: React.ReactNode;
+    href?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+export type ListProps = React.ComponentProps<"div"> & {
+    items?: ListItem[];
+    bordered?: boolean;
+    split?: boolean;
+    size?: "sm" | "md" | "lg";
+    renderItem?: (item: ListItem, index: number) => React.ReactNode;
+};
+declare function List({ items, bordered, split, size, renderItem, className, children, ...props }: ListProps): React.JSX.Element;
+export type ListRowProps = React.ComponentProps<"div"> & {
+    item: ListItem;
+    split?: boolean;
+    size?: "sm" | "md" | "lg";
+};
+declare function ListRow({ item, split, size, className, ...props }: ListRowProps): React.JSX.Element;
+export { List, ListRow };

package/dist/components/display/property-grid.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type PropertyGridItem = {
+    key: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    description?: React.ReactNode;
+    span?: 1 | 2 | 3 | 4;
+};
+export type PropertyGridProps = React.ComponentProps<"div"> & {
+    items: PropertyGridItem[];
+    columns?: 1 | 2 | 3 | 4;
+    bordered?: boolean;
+};
+declare function PropertyGrid({ items, columns, bordered, className, ...props }: PropertyGridProps): React.JSX.Element;
+export { PropertyGrid };