@godxjp/ui 18.2.0 → 18.3.0

package/README.md

@@ -70,7 +70,7 @@ Components emit `data-slot` / `data-*`; the look lives in `styles/*-layout.css`.
 | **Layout**         | `@godxjp/ui/layout`       | `Flex`, `PageContainer`, `ResponsiveGrid`, `AppShell`, `Sidebar`, `Separator`, `AspectRatio`, `Resizable`                                                                                                                               |
 | **General**        | `@godxjp/ui/general`      | `Button`                                                                                                                                                                                                                                |
 | **Data Entry**     | `@godxjp/ui/data-entry`   | `Input`, `Select`, `FormField`, `Field`, `DatePicker`, `TimePicker`, `Combobox`, `Switch`, `Toggle`, `Upload`, `Cascader`, `TreeSelect`, `ColorPicker`, `Slider`, `PasswordInput`, `PasswordStrength`, `InputOTP`, `Rating`, `TagInput` |
-| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                                                       |
+| **Data Display**   | `@godxjp/ui/data-display` | `Table`, `DataTable`, `Card`, `StatCard`, `Badge`, `Avatar`, `Descriptions`, `Timeline`, `EmptyState`, `Progress`, `QrCode`, `CredentialReveal`, `Accordion`, `HoverCard`, `Carousel`, `Popover`, `Collapsible`                                  |
 | **Feedback**       | `@godxjp/ui/feedback`     | `Dialog`, `AlertDialog`, `Sheet` (side), `Drawer` (bottom-sheet), `Toast`, `Skeleton`, `Alert`, `Tooltip`                                                                                                                               |
 | **Query**          | `@godxjp/ui/query`        | `DataState`, `InfiniteQueryState`, `PrefetchLink` (adapter subpath — pulls TanStack Query)                                                                                                                                              |
 | **Navigation**     | `@godxjp/ui/navigation`   | `Tabs`, `Toolbar`, `DropdownMenu`, `ContextMenu`, `Menubar`, `NavigationMenu`, `Steps`, `Pagination`, `Breadcrumb`, `AppSettingPicker`                                                                                                  |

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

@@ -4,6 +4,9 @@ export { ListRow } from "./list-row.js";
 export type { ListRowProps } from "./list-row.js";
 export { CredentialReveal } from "./credential-reveal.js";
 export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "./credential-reveal.js";
+export { QrCode } from "./qr-code.js";
+export type { QrCodeProps } from "./qr-code.js";
+export type { QrCodeProp } from "../../props/components/data-display.prop.js";
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
 export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card.js";
 export type { StatCardProps, CardBarProps } from "./card.js";

package/dist/components/data-display/index.js

@@ -1,6 +1,7 @@
 import { Badge } from "./badge.js";
 import { ListRow } from "./list-row.js";
 import { CredentialReveal } from "./credential-reveal.js";
+import { QrCode } from "./qr-code.js";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
 import {
   Card,
@@ -86,6 +87,7 @@ export {
   PopoverTitle,
   PopoverTrigger,
   Progress,
+  QrCode,
   ScrollArea,
   ScrollBar,
   StatCard,

package/dist/components/data-display/qr-code.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import type { QrCodeProp } from "../../props/components/data-display.prop.js";
+export type QrCodeProps = QrCodeProp & Omit<React.ComponentPropsWithoutRef<"svg">, keyof QrCodeProp | "children" | "role" | "style" | "type">;
+/**
+ * Renders a QR code entirely in-process. The encoded value is never sent to a network service,
+ * written to an element attribute, or included in accessible text.
+ */
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProp & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref">, "style" | "children" | "role" | "type" | keyof QrCodeProp> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/data-display/qr-code.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { QRCodeSVG } from "qrcode.react";
+import { cn } from "../../lib/utils.js";
+const QR_INTRINSIC_SIZE = 256;
+const QrCode = React.forwardRef(
+  ({ value, label, size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      QRCodeSVG,
+      {
+        ref,
+        ...props,
+        value,
+        title: label,
+        size: QR_INTRINSIC_SIZE,
+        level: "M",
+        boostLevel: true,
+        marginSize: 4,
+        bgColor: "hsl(var(--qr-code-background))",
+        fgColor: "hsl(var(--qr-code-foreground))",
+        role: "img",
+        "aria-label": label,
+        focusable: "false",
+        "data-slot": "qr-code",
+        "data-size": size,
+        className: cn("ui-qr-code", className)
+      }
+    );
+  }
+);
+QrCode.displayName = "QrCode";
+export {
+  QrCode
+};

package/dist/props/components/data-display.prop.d.ts

@@ -110,6 +110,17 @@ export type CredentialRevealProp = {
     id?: IdProp;
     "aria-label"?: string;
 };
+/** @see QrCode */
+export type QrCodeProp = {
+    /** Sensitive or public value encoded locally into the QR modules. */
+    value: string;
+    /** Purpose-specific accessible name. The encoded value is never used as accessible text. */
+    label: string;
+    /** Natural display size. Default `md`. */
+    size?: SizeProp;
+    className?: ClassNameProp;
+    id?: IdProp;
+};
 /** @see DataTable */
 export type DataTableProp<T> = {
     data: T[];

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

@@ -1,7 +1,7 @@
 export type { AppShellProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
 export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, DateRangePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
-export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, } from "./data-display.prop.js";
+export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";

package/dist/props/registry.d.ts

@@ -734,6 +734,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["LabelProp", "SizeProp", "ToneProp", "OnValueChangeProp", "HandlerProp", "ClassNameProp", "IdProp"];
     };
+    readonly QrCodeProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["ValueProp", "LabelProp", "SizeProp", "ClassNameProp", "IdProp"];
+    };
     readonly ChartSeriesProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";

package/dist/props/registry.js

@@ -810,6 +810,11 @@ const COMPONENT_PROP_REGISTRY = {
       "IdProp"
     ]
   },
+  QrCodeProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["ValueProp", "LabelProp", "SizeProp", "ClassNameProp", "IdProp"]
+  },
   ChartSeriesProp: {
     group: "data-display",
     file: "components/charts.prop.ts",

package/dist/styles/data-display-layout.css

@@ -534,4 +534,23 @@
     display: flex;
     justify-content: flex-end;
   }
+
+  /* QrCode — a quiet, scanner-safe SVG surface with an ISO/IEC-style four-module quiet zone
+   * supplied by the encoder. Sizing is natural rather than stretched across its container. */
+  .ui-qr-code {
+    display: block;
+    inline-size: var(--qr-code-size-md);
+    block-size: auto;
+    max-inline-size: 100%;
+    aspect-ratio: 1;
+  }
+  .ui-qr-code[data-size="xs"] {
+    inline-size: var(--qr-code-size-xs);
+  }
+  .ui-qr-code[data-size="sm"] {
+    inline-size: var(--qr-code-size-sm);
+  }
+  .ui-qr-code[data-size="lg"] {
+    inline-size: var(--qr-code-size-lg);
+  }
 }

package/dist/styles/dialog-layout.css

@@ -132,4 +132,8 @@
     font-size: var(--font-size-base);
     color: hsl(var(--muted-foreground));
   }
+
+  [data-slot="dialog-header"]:not([data-tone="default"]) [data-slot="dialog-description"] {
+    color: hsl(var(--foreground));
+  }
 }

package/dist/tokens/components/data-display.css

@@ -31,4 +31,13 @@
      re-resolves under a scoped theme. Defaults = hsl(var(--primary) / 0.3) border · 0.05 fill. */
   --tree-item-active-border: initial;
   --tree-item-active-background: initial;
+
+  /* QR codes stay scanner-safe in light and dark application themes. Consumers may override these
+     component tokens only when the resulting pair retains strong contrast. */
+  --qr-code-foreground: 0 0% 0%;
+  --qr-code-background: 0 0% 100%;
+  --qr-code-size-xs: 6rem;
+  --qr-code-size-sm: 8rem;
+  --qr-code-size-md: 10rem;
+  --qr-code-size-lg: 12.5rem;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.2.0",
-  "godxUiMcp": "18.2.0",
+  "version": "18.3.0",
+  "godxUiMcp": "18.3.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "pnpm": {
@@ -410,6 +410,7 @@
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^1.25.0",
+    "qrcode.react": "4.2.0",
     "react-day-picker": "^10.0.1",
     "react-resizable-panels": "^4.12.2",
     "sonner": "^2.0.7",
@@ -427,6 +428,7 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.19.19",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
@@ -437,7 +439,9 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^15.15.0",
     "jsdom": "^29.1.1",
+    "jsqr": "^1.4.0",
     "playwright": "^1.61.1",
+    "pngjs": "^7.0.0",
     "prettier": "^3.9.5",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "react": "^19.2.7",