@cakejp/design-system 0.12.0 → 0.13.0

package/dist/types/index.d.ts

@@ -14,6 +14,8 @@ export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 export { Checkbox } from "./components/foundations/checkbox";
 export type { CheckboxProps } from "./components/foundations/checkbox";
 export { CheckboxCardGroup, CheckboxCardItem } from "./components/foundations/checkbox-card";
+export { CheckboxGroup, CheckboxGroupItem } from "./components/foundations/checkbox-group";
+export type { CheckboxGroupProps } from "./components/foundations/checkbox-group";
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/foundations/collapsible";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/foundations/command";
 export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/foundations/context-menu";
@@ -21,7 +23,8 @@ export { DataTable } from "./components/foundations/data-table";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/foundations/dialog";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/foundations/drawer";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/foundations/dropdown-menu";
-export { FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator } from "./components/foundations/field";
+export { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator, fieldVariants } from "./components/foundations/field";
+export type { FieldProps } from "./components/foundations/field";
 export { FileInput, formatFileNames, validateFileSize } from "./components/foundations/file-input";
 export type { FileInputProps, FileInputError } from "./components/foundations/file-input";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./components/foundations/form";
@@ -33,7 +36,9 @@ export { Label } from "./components/foundations/label";
 export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from "./components/foundations/menubar";
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./components/foundations/navigation-menu";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/foundations/pagination";
-export { Popover, PopoverContent, PopoverTrigger } from "./components/foundations/popover";
+export { getPaginationRange } from "./lib/pagination-range";
+export type { GetPaginationRangeOptions, PaginationRangeItem } from "./lib/pagination-range";
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./components/foundations/popover";
 export { Progress } from "./components/foundations/progress";
 export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, useIsMobile } from "./components/foundations/responsive-dialog";
 export { RadioGroup, RadioGroupItem } from "./components/foundations/radio-group";
@@ -65,7 +70,7 @@ export type { CoachMarkProps, CoachMarkDirection } from "./components/primitives
 export { BannerCarousel } from "./components/primitives/banner-carousel";
 export type { BannerCarouselProps, BannerItem } from "./components/primitives/banner-carousel";
 export { ContentCarousel } from "./components/primitives/content-carousel";
-export type { ContentCarouselProps } from "./components/primitives/content-carousel";
+export type { ContentCarouselProps, ContentCarouselItemsPerView } from "./components/primitives/content-carousel";
 export { StickyActionBar } from "./components/primitives/sticky-action-bar";
 export { BottomTabBar } from "./components/primitives/bottom-tab-bar";
 export type { BottomTabBarProps, BottomTabBarItem } from "./components/primitives/bottom-tab-bar";
@@ -75,6 +80,8 @@ export { CategoryShortcuts } from "./components/primitives/category-shortcuts";
 export type { CategoryShortcutsProps, CategoryShortcutsItem } from "./components/primitives/category-shortcuts";
 export { CategoryScroll } from "./components/primitives/category-scroll";
 export type { CategoryScrollProps, CategoryItem } from "./components/primitives/category-scroll";
+export { ChatComposer } from "./components/primitives/chat-composer";
+export type { ChatComposerProps, ChatComposerAttachmentError } from "./components/primitives/chat-composer";
 export { Chip, chipVariants } from "./components/primitives/chip";
 export type { ChipProps } from "./components/primitives/chip";
 export { StandardPageShell } from "./components/primitives/standard-page-shell";
@@ -107,6 +114,8 @@ export { ImageCarousel } from "./components/primitives/image-carousel";
 export type { ImageCarouselProps } from "./components/primitives/image-carousel";
 export { ImageGallery } from "./components/primitives/image-gallery";
 export type { ImageGalleryProps } from "./components/primitives/image-gallery";
+export { ImageInput, imageInputPreviewVariants } from "./components/primitives/image-input";
+export type { ImageInputProps, ImageInputValidationError } from "./components/primitives/image-input";
 export { ImageUploader } from "./components/primitives/image-uploader";
 export type { ImageUploaderProps, ImageUploaderImage } from "./components/primitives/image-uploader";
 export { KebabMenu } from "./components/primitives/kebab-menu";
@@ -125,6 +134,8 @@ export { PriceDisplay, priceDisplayVariants } from "./components/primitives/pric
 export type { PriceDisplayProps } from "./components/primitives/price-display";
 export { ProgressSteps } from "./components/primitives/progress-steps";
 export type { ProgressStepsProps } from "./components/primitives/progress-steps";
+export { Timeline } from "./components/primitives/timeline";
+export type { TimelineItem, TimelineProps } from "./components/primitives/timeline";
 export { QuantitySelector } from "./components/primitives/quantity-selector";
 export type { QuantitySelectorProps } from "./components/primitives/quantity-selector";
 export { SearchBar } from "./components/primitives/search-bar";
@@ -132,9 +143,10 @@ export type { SearchBarProps } from "./components/primitives/search-bar";
 export { SearchPanel } from "./components/primitives/search-panel";
 export type { SearchPanelProps } from "./components/primitives/search-panel";
 export { Container, containerVariants } from "./components/primitives/container";
-export { Section, sectionVariants } from "./components/primitives/section";
+export { Section, sectionVariants, sectionScrimVariants } from "./components/primitives/section";
+export type { SectionProps, SectionScrim } from "./components/primitives/section";
 export { SectionHeader } from "./components/primitives/section-header";
-export type { SectionHeaderProps, SectionHeaderSize } from "./components/primitives/section-header";
+export type { SectionHeaderDesktopSize, SectionHeaderProps, SectionHeaderSize, } from "./components/primitives/section-header";
 export { SectionNav } from "./components/primitives/section-nav";
 export type { SectionNavProps, SectionNavItem } from "./components/primitives/section-nav";
 export { ShareButtons } from "./components/primitives/share-buttons";

package/dist/types/lib/pagination-range.d.ts

@@ -0,0 +1,16 @@
+export type PaginationRangeItem = number | "ellipsis";
+export interface GetPaginationRangeOptions {
+    /** 現在ページ（1始まり）。範囲外は 1〜totalPages に丸める */
+    currentPage: number;
+    /** 総ページ数。0以下は空配列を返す */
+    totalPages: number;
+    /** 現在ページの左右に常時表示するページ数 */
+    siblingCount?: number;
+}
+/**
+ * ページネーションに表示するページ番号と省略記号の窓を返す。
+ *
+ * 先頭・末尾ページは常に残し、現在ページの前後を siblingCount 件ずつ表示する。
+ * 描画は既存の PaginationItem / PaginationLink / PaginationEllipsis を使う。
+ */
+export declare function getPaginationRange({ currentPage, totalPages, siblingCount, }: GetPaginationRangeOptions): PaginationRangeItem[];

package/dist/types/lib/use-value-length.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+type CountableElement = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * `showCount` 用の文字数を求めるための内部フック。
+ *
+ * 制御（`value` 指定）のときは `value` をそのまま数える。
+ * 非制御のときは **内部 state ではなく実際の DOM の `value`** を数える。
+ * react-hook-form の `register()` は `ref` 経由で DOM に直接初期値を書き込み
+ * （`reset()` / `defaultValues`）、その経路では `onChange` が発火しないため、
+ * 内部 state だけを見ていると初期表示のカウントが 0 のままになる。
+ *
+ * 初期表示は layout effect で DOM を読み、以後の programmatic な `.value` 代入は
+ * 要素自身の value descriptor を監視して拾う。MutationObserver は DOM property の
+ * 変更を観測できず、RHF の `setValue()` は再 render を伴わない場合があるため。
+ * 元 descriptor（React の value tracker を含む）へ処理を委譲し、detach 時に復元する。
+ *
+ * consumer の callback ref が返す cleanup は保持し、detach 時に実行する。
+ * cleanup を返さない従来の callback ref は detach 時に null を渡すため、
+ * React 18/19 どちらの ref 契約も維持する。
+ */
+export declare function useValueLength<T extends CountableElement>({ enabled, value, defaultValue, forwardedRef, }: {
+    enabled: boolean;
+    value: string | number | readonly string[] | undefined;
+    defaultValue: string | number | readonly string[] | undefined;
+    forwardedRef: React.Ref<T> | undefined;
+}): {
+    ref: React.RefCallback<T>;
+    length: number;
+    syncFromDom: () => void;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -153,6 +153,7 @@
     "eslint-plugin-storybook": "^10.3.3",
     "globals": "^16.5.0",
     "iconsax-reactjs": "^0.0.8",
+    "jsdom": "^29.1.1",
     "lucide-react": "^0.577.0",
     "next-themes": "^0.4.6",
     "playwright": "^1.58.2",

package/src/preset-standalone.css

@@ -405,6 +405,7 @@
  */
 
 /* Heading */
+.typo-heading-5xl { font-size: 40px; line-height: 1.35; letter-spacing: 0.04em; font-weight: 700; }
 .typo-heading-4xl { font-size: 32px; line-height: 1.4; letter-spacing: 0.04em; font-weight: 700; }
 .typo-heading-3xl { font-size: 28px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
 .typo-heading-2xl { font-size: 24px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
@@ -424,3 +425,18 @@
 .typo-label-md { font-size: 14px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
 .typo-label-sm { font-size: 12px; line-height: 1.5;  font-weight: 500; }
 .typo-label-xs { font-size: 10px; line-height: 1.5;  font-weight: 500; }
+
+/* --- Touch target utility ---
+ * Tailwind を使わない consumer でも preset と同じ44px操作領域を利用できる。 */
+.tap-target {
+  position: relative;
+}
+.tap-target::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, 2.75rem);
+  height: max(100%, 2.75rem);
+  transform: translate(-50%, -50%);
+}

package/src/preset.css

@@ -18,6 +18,7 @@
  *   - Tailwind 標準色 → Cake.jp マッピング（bg-red-600 等）
  *   - シャドウ・角丸トークン
  *   - アニメーションユーティリティ
+ *   - 見た目を変えず44pxの操作領域を確保する tap-target ユーティリティ
  * ============================================ */
 
 /* --- Layer 1: Primitive Colors --- */
@@ -302,6 +303,22 @@
   animation: slide-in-left 200ms ease-out;
 }
 
+/* --- Touch target utility ---
+ * 見た目が44px未満の小型操作部品に付け、透明な疑似要素で実効操作領域だけを拡張する。
+ * 隣接ターゲットと重なる密度では使わず、親レイアウト側の gap も確保する。 */
+.tap-target {
+  position: relative;
+}
+.tap-target::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, 2.75rem);
+  height: max(100%, 2.75rem);
+  transform: translate(-50%, -50%);
+}
+
 /* --- Base layer --- */
 @layer base {
   * {

package/src/styles/typography.css

@@ -32,6 +32,13 @@
 
 /* ─── Heading ─── */
 
+@utility typo-heading-5xl {
+  font-size: 2.5rem;         /* 40px */
+  line-height: 1.35;         /* 54px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
 @utility typo-heading-4xl {
   font-size: 2rem;           /* 32px */
   line-height: 1.4;          /* 44.8px */

package/templates/AGENTS.md

@@ -41,6 +41,8 @@ DS に該当パターンが無い場合のみカスタム実装を許可。そ
 3. それでも無ければ、手元に台帳を作らず **flashpark/cake-design-system に issue を立てる**。
 4. やむを得ずローカル実装する場合は、「DS に X が追加されたら削除」の条件コメントを必ず添える。
 
+**意図的にローカル実装を残すとき（check-duplicates の抑制）**: 対象 export の直前のコメント行（または行末コメント）に `// cakejp-ds-allow-duplicate: <理由>` を書くと、その 1 件だけ検出から外れる。**理由が空なら抑制されない**（形骸化防止）。抑制した件数と理由はサマリに出るので、`--strict` を CI に入れたまま運用できる。
+
 ## 使用方法
 
 ### CSS のセットアップ（重要）

package/templates/CLAUDE.md

@@ -43,6 +43,8 @@ DS に該当パターンが無い場合のみカスタム実装を許可。そ
 3. それでも無ければ、手元に台帳を作らず **flashpark/cake-design-system に issue を立てる**。
 4. やむを得ずローカル実装する場合は、「DS に X が追加されたら削除」の条件コメントを必ず添える。
 
+**意図的にローカル実装を残すとき（check-duplicates の抑制）**: 対象 export の直前のコメント行（または行末コメント）に `// cakejp-ds-allow-duplicate: <理由>` を書くと、その 1 件だけ検出から外れる。**理由が空なら抑制されない**（形骸化防止）。抑制した件数と理由はサマリに出るので、`--strict` を CI に入れたまま運用できる。
+
 ## 使用方法
 
 ### CSS のセットアップ（重要）

package/tokens.json

@@ -58,14 +58,21 @@
 
   "typography": {
     "heading": {
+      "5xl": {
+        "fontSize": "40px",
+        "lineHeight": 1.35,
+        "letterSpacing": "0.04em",
+        "fontWeight": 700,
+        "usage": "LP・マーケティング系ヒーローの PC 見出し。SP は 3xl（28px）を基準に段階を上げる。通常ページでは使わない"
+      },
       "4xl": {
         "fontSize": "32px",
         "lineHeight": 1.4,
         "letterSpacing": "0.04em",
         "fontWeight": 700,
-        "usage": "ヒーロー・ページ大見出し"
+        "usage": "LP・マーケティング系ヒーローの PC 見出し（5xlより抑えた表現）。通常ページでは使わない"
       },
-      "3xl": { "fontSize": "28px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "ページタイトル" },
+      "3xl": { "fontSize": "28px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "通常ページの主見出し・ページタイトル。LPではSP側のヒーロー見出しにも使用" },
       "2xl": { "fontSize": "24px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "主要セクション見出し" },
       "xl":  { "fontSize": "21px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "サブセクション見出し" },
       "lg":  { "fontSize": "18px", "lineHeight": 1.5, "letterSpacing": "0.04em", "fontWeight": 700, "usage": "グループ見出し" },