kaze-design-system 0.4.2 → 0.6.1

package/dist/types/components/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-export type ToastVariant = "default" | "positive" | "negative" | "warning";
+export type ToastVariant = "default" | "positive" | "negative" | "warning" | "info";
 export interface ToastData {
     id: string;
     title: string;
@@ -24,7 +24,7 @@ interface ToastContextValue {
     toast: (options: ToastOptions) => void;
 }
 export declare function useToast(): ToastContextValue;
-export declare function ToastProvider({ children, closeLabel, containerLabel }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastProvider({ children, closeLabel, containerLabel, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ToastProvider {
     var displayName: string;
 }

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

@@ -41,7 +41,7 @@ export type { DialogProps, DialogHeaderProps, DialogTitleProps, DialogBodyProps,
 export { Divider } from "./Divider";
 export type { DividerProps } from "./Divider";
 export { Sidebar, NavItem, SidebarGroupLabel, SidebarDivider } from "./Sidebar";
-export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps } from "./Sidebar";
+export type { SidebarProps, NavItemProps, SidebarGroupLabelProps, SidebarDividerProps, } from "./Sidebar";
 export { TopBar } from "./TopBar";
 export type { TopBarProps } from "./TopBar";
 export { AppLayout } from "./Layout";
@@ -57,7 +57,7 @@ export type { DropdownProps, DropdownTriggerProps, DropdownMenuProps, DropdownIt
 export { CommandPalette } from "./CommandPalette";
 export type { CommandPaletteProps, Command } from "./CommandPalette";
 export { Icon } from "./Icon";
-export type { IconProps, IconSize } from "./Icon";
+export type { IconComponent, IconProps, IconSize } from "./Icon";
 export { Heading } from "./Heading";
 export type { HeadingProps, HeadingLevel } from "./Heading";
 export { Text } from "./Text";

package/dist/types/components/marketing.d.ts

@@ -0,0 +1,22 @@
+export { Navbar, NavbarLinks, NavbarLink } from "./Navbar";
+export type { NavbarProps, NavbarLinksProps, NavbarLinkProps } from "./Navbar";
+export { Hero } from "./Hero";
+export type { HeroProps } from "./Hero";
+export { Section, SectionHeader } from "./Section";
+export type { SectionProps, SectionHeaderProps, SectionSize, SectionBackground } from "./Section";
+export { SplitSection } from "./SplitSection";
+export type { SplitSectionProps } from "./SplitSection";
+export { FeatureGrid, FeatureCard } from "./FeatureGrid";
+export type { FeatureGridProps, FeatureCardProps, FeatureGridColumns } from "./FeatureGrid";
+export { Stats, StatItem } from "./Stats";
+export type { StatsProps, StatItemProps } from "./Stats";
+export { PricingGrid, PricingCard } from "./Pricing";
+export type { PricingGridProps, PricingCardProps } from "./Pricing";
+export { TestimonialGrid, TestimonialCard } from "./Testimonial";
+export type { TestimonialGridProps, TestimonialCardProps } from "./Testimonial";
+export { FAQ, FAQItem } from "./FAQ";
+export type { FAQProps, FAQItemProps } from "./FAQ";
+export { CTABanner } from "./CTABanner";
+export type { CTABannerProps } from "./CTABanner";
+export { LPFooter } from "./LPFooter";
+export type { LPFooterProps, FooterColumn } from "./LPFooter";

package/dist/types/hooks/useTheme.d.ts

@@ -13,5 +13,5 @@ export interface ThemeProviderProps {
     children: ReactNode;
     defaultTheme?: Theme;
 }
-export declare function ThemeProvider({ children, defaultTheme, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTheme(): ThemeContextValue;

package/dist/types/lib/utils.d.ts

@@ -1,2 +1,2 @@
-import { type ClassValue } from "./types";
+import type { ClassValue } from "./types";
 export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/tokens/tokens.d.ts

@@ -82,5 +82,18 @@ export declare const radius: {
     readonly "2xl": "var(--radius-2xl)";
     readonly full: "var(--radius-full)";
 };
+/** Switched by `data-density="compact"` on an ancestor. */
+export declare const density: {
+    readonly controlHeight: "var(--density-control-height)";
+    readonly rowPy: "var(--density-row-py)";
+    readonly rowPx: "var(--density-row-px)";
+    readonly fontSizeUi: "var(--density-font-size-ui)";
+    readonly lineHeightUi: "var(--density-line-height-ui)";
+    readonly navPy: "var(--density-nav-py)";
+    readonly navGap: "var(--density-nav-gap)";
+    readonly dropdownPy: "var(--density-dropdown-py)";
+    readonly tabPy: "var(--density-tab-py)";
+};
 export type Theme = "light" | "dark";
 export type Palette = "warm" | "cool";
+export type Density = "default" | "compact";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.4.2",
+  "version": "0.6.1",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -12,7 +12,7 @@
   "bugs": {
     "url": "https://github.com/yuki930/kaze-design-system/issues"
   },
-  "description": "Minimal React design system for dashboards and Japanese UI — quiet neutral grays, 63 components, light/dark themes, typography tuned for CJK text",
+  "description": "Minimal React design system for dashboards, landing pages and Japanese UI: warm neutral grays, 63 components, light/dark themes, typography tuned for CJK text",
   "keywords": [
     "design-system",
     "react",
@@ -32,6 +32,10 @@
       "types": "./dist/types/components/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./marketing": {
+      "types": "./dist/types/components/marketing.d.ts",
+      "import": "./dist/marketing.js"
+    },
     "./hooks": {
       "types": "./dist/types/hooks/index.d.ts",
       "import": "./dist/hooks.js"
@@ -40,6 +44,7 @@
       "types": "./dist/types/tokens/tokens.d.ts",
       "import": "./dist/tokens.js"
     },
+    "./package.json": "./package.json",
     "./css/tokens": "./tokens.css",
     "./css/reset": "./reset.css",
     "./css/components": "./components.css",
@@ -54,6 +59,9 @@
     "utilities.css",
     "kaze.css"
   ],
+  "engines": {
+    "node": ">=18"
+  },
   "sideEffects": [
     "*.css"
   ],
@@ -63,19 +71,19 @@
     "build": "next build",
     "docs:llms": "node scripts/generate-llms.mjs",
     "docs:stories": "node scripts/generate-stories.mjs",
-    "test": "vitest run",
+    "size": "npm run build:lib && node scripts/measure-size.mjs",
+    "test": "vitest run --project unit",
+    "test:storybook": "vitest run --project storybook",
+    "test:all": "vitest run",
     "test:watch": "vitest",
     "start": "next start",
     "build:lib": "rm -rf dist && vite build --config vite.config.lib.ts && tsc -p tsconfig.build.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "lucide-react": "^0.575.0",
-    "next": "^16.1.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "typecheck": "tsc --noEmit",
+    "lint": "biome lint .",
+    "format": "biome format .",
+    "format:fix": "biome check --write ."
   },
   "peerDependencies": {
     "lucide-react": "^0.575.0",
@@ -88,6 +96,7 @@
     }
   },
   "devDependencies": {
+    "@biomejs/biome": "2.6.3",
     "@chromatic-com/storybook": "^5.0.1",
     "@storybook/addon-a11y": "^10.2.10",
     "@storybook/addon-docs": "^10.2.10",
@@ -104,7 +113,11 @@
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "jsdom": "^28.1.0",
+    "lucide-react": "^0.575.0",
+    "next": "^16.1.6",
     "playwright": "^1.58.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "storybook": "^10.2.10",
     "typescript": "^5.9.3",

package/tokens.css

@@ -296,6 +296,22 @@
   --topbar-height: 3.5rem;
   --content-max-width: 1280px;
 
+  /* ── Density (component sizing — orthogonal to color theme) ──
+     Two-stage system: normal values here, [data-density="compact"]
+     overrides below. Attach the attribute to :root or any container;
+     custom properties inherit down the subtree either way.
+     Every normal value below equals the literal it replaces, so the
+     default appearance does not change when this section is added. */
+  --density-control-height:  2.25rem;              /* Input / Select / Button (default size) */
+  --density-row-py:          var(--space-3);       /* Table cell / List-item vertical padding */
+  --density-row-px:          var(--space-4);       /* Table cell horizontal padding */
+  --density-font-size-ui:    var(--font-size-sm);  /* Table / List / Tabs / Dropdown / Sidebar / controls */
+  --density-line-height-ui:  var(--line-height-normal); /* Table / List row line-height */
+  --density-nav-py:          var(--space-2);       /* Sidebar nav-item vertical padding */
+  --density-nav-gap:         var(--space-2-5);     /* Sidebar nav-item icon gap */
+  --density-dropdown-py:     var(--space-1-5);     /* Dropdown item vertical padding */
+  --density-tab-py:          var(--space-2);       /* Tabs vertical padding */
+
   /* ── Fluid Typography (inspired by Pico CSS) ─────────── */
   /* Root font-size scales fluidly between 640px and 1280px viewport */
   /* Components using rem will scale proportionally */
@@ -310,6 +326,24 @@
   /* 2xl: 1536px — 超ワイド */
 }
 
+/* ── Density: compact ──────────────────────────────────────────
+   Tightens control height, row padding, UI font-size and line-height
+   by roughly one step. Works wherever the attribute is applied —
+   :root for a whole app, or a single container (e.g. a dense table
+   panel) — since custom properties inherit to descendants either way.
+   Orthogonal to [data-theme] / [data-palette]: combine freely. ──── */
+[data-density="compact"] {
+  --density-control-height:  2rem;
+  --density-row-py:          var(--space-2);
+  --density-row-px:          var(--space-3);
+  --density-font-size-ui:    var(--font-size-xs);
+  --density-line-height-ui:  var(--line-height-snug);
+  --density-nav-py:          var(--space-1-5);
+  --density-nav-gap:         var(--space-2);
+  --density-dropdown-py:     var(--space-1);
+  --density-tab-py:          var(--space-1-5);
+}
+
 /* ── Dark Theme ────────────────────────────────────────────── */
 [data-theme="dark"] {
   --color-bg:            var(--zinc-950);
@@ -446,8 +480,10 @@
 /* ── Dark Theme Fallback (JS-disabled) ────────────────────── */
 /* When JS is unavailable, respect OS dark mode preference.
    If JS sets data-theme="light", this will NOT apply (thanks to :not()).
-   If JS sets data-theme="dark", the [data-theme="dark"] block above
-   takes precedence due to higher specificity. */
+   If JS sets data-theme="dark", this block applies too (same values as
+   [data-theme="dark"]; :root:not(...) is the higher specificity).
+   The cool palette needs its own fallback below, otherwise this block
+   (0,2,0, later in source) overrides [data-palette="cool"][data-theme="dark"]. */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --color-bg:            var(--zinc-950);
@@ -515,3 +551,37 @@
     --ring-color:  rgba(168, 162, 158, 0.3);
   }
 }
+
+/* Cool palette × OS dark fallback (specificity 0,3,0 beats the zinc fallback) */
+@media (prefers-color-scheme: dark) {
+  :root[data-palette="cool"]:not([data-theme="light"]) {
+    --color-bg:            var(--slate-950);
+    --color-bg-secondary:  var(--slate-900);
+    --color-bg-tertiary:   var(--slate-800);
+    --color-bg-inverse:    #ffffff;
+
+    --color-fg:            var(--slate-50);
+    --color-fg-secondary:  var(--slate-400);
+    --color-fg-tertiary:   var(--slate-400);
+    --color-fg-inverse:    var(--slate-950);
+    --color-fg-muted:      var(--slate-400);
+
+    --color-border:        var(--slate-800);
+    --color-border-strong: var(--slate-700);
+    --color-border-subtle: var(--slate-900);
+
+    --color-surface:       var(--slate-900);
+    --color-surface-hover: var(--slate-800);
+    --color-surface-active: var(--slate-700);
+
+    --color-primary:       #ffffff;
+    --color-primary-fg:    var(--slate-950);
+    --color-primary-hover: var(--slate-200);
+
+    --color-secondary:     var(--slate-800);
+    --color-secondary-fg:  var(--slate-100);
+    --color-secondary-hover: var(--slate-700);
+
+    --ring-color:  rgba(204, 202, 216, 0.3);
+  }
+}

package/utilities.css

@@ -404,6 +404,11 @@
 [data-theme="dark"] .theme-photo {
   filter: brightness(0.8) contrast(1.1);
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .theme-photo {
+    filter: brightness(0.8) contrast(1.1);
+  }
+}
 
 /* ============================================================
    Responsive Utilities