@7onic-ui/react 0.2.6 → 0.2.8

package/README.md

@@ -33,6 +33,7 @@
 | **🔓** | **Framework-agnostic tokens** | Tokens ship as pure CSS variables. Use with Vue, Angular, Svelte, or vanilla CSS — no React required. |
 | **🤖** | **AI-ready** | Ships with `llms.txt` — AI builds with design tokens, not hardcoded values. Zero config for Claude, Cursor, Copilot. |
 | **🌏** | **CJK-first typography** | Type scale tuned for Japanese kanji, Korean hangul, and Latin — not an afterthought. |
+| **🔐** | **Supply chain verified** | Cryptographically signed releases (npm provenance), automated vulnerability scanning in CI, reproducible builds. You can verify every package came from this exact GitHub commit — not a hijacked account. |
 | **🔥** | **Relentlessly updated** | Actively maintained with continuous research, refinement, and new features. Not abandoned — ever. |
 
 ---
@@ -263,10 +264,12 @@ Works with Claude Code, Cursor, GitHub Copilot, ChatGPT, and any AI tool that re
 - [x] Automated doc verification (8 checks, AST-powered, blocks publish on error)
 - [x] Automated component verification (7 checks — hardcoded colors, tokens, dark mode, dead code)
 - [x] Multilingual documentation — English, Japanese, Korean (powered by next-intl)
-- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.2.5
+- [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.2.7
 - [x] AI integration — `llms.txt` standard, setup guides for Claude Code / Cursor / Copilot / ChatGPT
 - [x] `npx 7onic add` CLI (shadcn-style) — source copy with dependency resolution
 - [x] `npx 7onic init` Vite support — `tsconfig.app.json` detection, `@import "tailwindcss"` + `@source` auto-inject, `@/` path alias auto-configure
+- [x] Technical blog — [blog.7onic.design](https://blog.7onic.design) ("Design to Code" series)
+- [x] Enterprise-grade supply chain security — cryptographically signed releases (npm provenance), automated vulnerability scanning on every build, reproducible installs. Protection against npm package hijacking attacks (like the 2026 axios incident)
 - [ ] Theme Customizer — live palette preview + CSS variable export
 - [ ] Figma UI Kit
 - [ ] Dashboard / landing templates
@@ -290,5 +293,5 @@ MIT
 <p align="center">
   <strong>One JSON, every format — from Figma to production.</strong><br>
   Independently built.<br>
-  <sub>Last updated: 2026-04-15 (v0.2.5)</sub>
+  <sub>Last updated: 2026-04-16 (v0.2.7)</sub>
 </p>

package/dist/chart.d.mts

@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
     labelKey?: string;
 };
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
-declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
 type LegendPayloadItem = {
     value?: string;
     type?: string;
@@ -150,7 +150,7 @@ declare const Chart: typeof ChartContainer & {
     Pie: typeof ChartPie;
     Tooltip: typeof ChartTooltip;
     TooltipContent: typeof ChartTooltipContent;
-    Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+    Legend: typeof RechartsPrimitive.Legend;
     LegendContent: typeof ChartLegendContent;
     XAxis: typeof ChartXAxis;
     YAxis: typeof ChartYAxis;

package/dist/chart.d.ts

@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
     labelKey?: string;
 };
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
-declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
 type LegendPayloadItem = {
     value?: string;
     type?: string;
@@ -150,7 +150,7 @@ declare const Chart: typeof ChartContainer & {
     Pie: typeof ChartPie;
     Tooltip: typeof ChartTooltip;
     TooltipContent: typeof ChartTooltipContent;
-    Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+    Legend: typeof RechartsPrimitive.Legend;
     LegendContent: typeof ChartLegendContent;
     XAxis: typeof ChartXAxis;
     YAxis: typeof ChartYAxis;

package/dist/index.js

@@ -1614,7 +1614,7 @@ var Field = Object.assign(FieldRoot, {
 var inputVariants = (0, import_class_variance_authority9.cva)(
   [
     "flex w-full bg-background text-foreground placeholder:text-foreground/30",
-    "border transition-colors duration-micro",
+    "border transition-colors duration-micro outline-transparent",
     "focus:[outline:2px_solid_transparent]",
     "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted",
     "file:border-0 file:bg-transparent file:text-sm file:font-semibold"
@@ -1823,7 +1823,7 @@ var import_class_variance_authority10 = require("class-variance-authority");
 var textareaVariants = (0, import_class_variance_authority10.cva)(
   [
     "flex w-full bg-background text-foreground placeholder:text-foreground/30",
-    "border transition-colors duration-micro",
+    "border transition-colors duration-micro outline-transparent",
     "focus:[outline:2px_solid_transparent]",
     "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted"
   ].join(" "),
@@ -2563,7 +2563,7 @@ var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, radiu
       onCloseAutoFocus?.(e);
     },
     className: cn(
-      "z-dropdown min-w-[8rem] overflow-hidden border border-border bg-background shadow-lg",
+      "z-dropdown min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg",
       flush ? "py-1" : "p-1",
       contentRadiusMap[radius],
       className
@@ -2702,7 +2702,7 @@ var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) =
     {
       ref,
       className: cn(
-        "z-dropdown min-w-[8rem] overflow-hidden border border-border bg-background shadow-lg",
+        "z-dropdown min-w-[8rem] overflow-hidden border border-border bg-background text-foreground shadow-lg",
         flush ? "py-1" : "p-1",
         contentRadiusMap[radius],
         className
@@ -2862,7 +2862,7 @@ var SelectTrigger = React18.forwardRef(({ className, children, ...props }, ref)
         "flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted",
         "border border-border",
         triggerRadiusMap[radius],
-        "transition-colors duration-micro",
+        "transition-colors duration-micro outline-transparent",
         "focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)] focus:[outline:2px_solid_transparent]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[placeholder]:text-foreground/30",
@@ -2920,7 +2920,7 @@ var SelectContent = React18.forwardRef(({ className, children, position = "poppe
         onCloseAutoFocus?.(e);
       },
       className: cn(
-        "relative z-dropdown min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background shadow-lg",
+        "relative z-dropdown min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-border bg-background text-foreground shadow-lg",
         flush ? "py-1" : "p-1",
         contentRadiusMap2[contentRadius],
         position === "popper" && "max-h-[var(--radix-select-content-available-height)]",
@@ -5255,7 +5255,7 @@ var ModalContent = React27.forwardRef(({ className, children, size = "sm", scrol
         "div",
         {
           className: cn(
-            "relative w-full rounded-xl bg-background shadow-xl overflow-hidden",
+            "relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden",
             modalContentVariants({ size }),
             className
           ),
@@ -5271,7 +5271,7 @@ var ModalContent = React27.forwardRef(({ className, children, size = "sm", scrol
     {
       ref,
       className: cn(
-        "relative w-full rounded-xl bg-background shadow-xl overflow-hidden",
+        "relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden",
         "focus:outline-none",
         "data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit",
         modalContentVariants({ size }),
@@ -5375,7 +5375,7 @@ var AlertModalContent = React27.forwardRef(({ className, children, size = "sm",
   {
     ref,
     className: cn(
-      "relative w-full rounded-xl bg-background shadow-xl",
+      "relative w-full rounded-xl bg-background text-foreground shadow-xl",
       "focus:outline-none",
       "data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit",
       alertModalContentVariants({ size }),
@@ -5557,7 +5557,7 @@ var DrawerContent = React28.forwardRef(({ className, children, side = "right", s
     {
       ref,
       className: cn(
-        "fixed z-modal flex flex-col bg-background shadow-xl",
+        "fixed z-modal flex flex-col bg-background text-foreground shadow-xl",
         "focus:outline-none",
         SIDE_POSITION[side],
         isHorizontal ? "max-w-full h-full" : "max-h-full w-full",
@@ -5751,8 +5751,8 @@ var popoverContentVariants = (0, import_class_variance_authority25.cva)(
   {
     variants: {
       variant: {
-        default: "bg-background-paper border border-border shadow-lg",
-        elevated: "bg-background-paper/95 border border-border-subtle shadow-xl backdrop-blur-sm"
+        default: "bg-background-paper text-foreground border border-border shadow-lg",
+        elevated: "bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm"
       },
       size: {
         sm: "text-sm p-3 rounded-lg",