@cakejp/design-system 0.11.0 → 0.13.0

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import "./index.css";
 export { cn } from "./lib/utils";
+export { toast } from "sonner";
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/foundations/accordion";
 export { Alert, AlertDescription, AlertTitle } from "./components/foundations/alert";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/foundations/alert-dialog";
@@ -9,10 +10,12 @@ export { Badge, badgeVariants } from "./components/foundations/badge";
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/foundations/breadcrumb";
 export { Button, buttonVariants } from "./components/foundations/button";
 export { Calendar } from "./components/foundations/calendar";
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/foundations/card";
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/foundations/card";
 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";
@@ -20,29 +23,40 @@ 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 { 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";
 export { HoverCard, HoverCardContent, HoverCardTrigger } from "./components/foundations/hover-card";
 export { IconBadge, iconBadgeVariants } from "./components/foundations/icon-badge";
 export { Input } from "./components/foundations/input";
+export type { InputProps } from "./components/foundations/input";
 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";
+export type { RadioGroupVariant } from "./components/foundations/radio-group";
 export { ScrollArea, ScrollBar } from "./components/foundations/scroll-area";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/foundations/select";
 export { Separator } from "./components/foundations/separator";
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/foundations/sheet";
 export { Skeleton } from "./components/foundations/skeleton";
+export { SkipLink } from "./components/foundations/skip-link";
+export type { SkipLinkProps } from "./components/foundations/skip-link";
 export { Slider } from "./components/foundations/slider";
 export { Spinner } from "./components/foundations/spinner";
 export { Switch } from "./components/foundations/switch";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/foundations/table";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/foundations/tabs";
 export { Textarea } from "./components/foundations/textarea";
+export type { TextareaProps } from "./components/foundations/textarea";
 export { Toaster } from "./components/foundations/sonner";
 export { Toggle, toggleVariants } from "./components/foundations/toggle";
 export { ToggleGroup, ToggleGroupItem } from "./components/foundations/toggle-group";
@@ -52,14 +66,22 @@ export type { AdminSideNavProps, AdminNavItem, AdminNavSubItem, AdminNavIconCont
 export { AdminHeader } from "./components/primitives/admin-header";
 export type { AdminHeaderProps } from "./components/primitives/admin-header";
 export { CoachMark } from "./components/primitives/coach-mark";
+export type { CoachMarkProps, CoachMarkDirection } from "./components/primitives/coach-mark";
 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, 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";
 export { BulkActionBar } from "./components/primitives/bulk-action-bar";
+export type { BulkActionBarProps } from "./components/primitives/bulk-action-bar";
 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";
@@ -73,38 +95,70 @@ export { StandardPageShell as EcPageShell } from "./components/primitives/standa
 /** @deprecated 旧名。`StandardPageShellProps` を使うこと。次のメジャーで削除する。 */
 export type { StandardPageShellProps as EcPageShellProps } from "./components/primitives/standard-page-shell";
 export { EmptyState } from "./components/primitives/empty-state";
-export { ErrorState } from "./components/primitives/error-state";
+export type { EmptyStateProps } from "./components/primitives/empty-state";
+export { DatePicker, DateTimePicker } from "./components/primitives/date-picker";
+export type { DatePickerProps, DateTimePickerProps } from "./components/primitives/date-picker";
+export { ErrorState, NotFoundIllustration } from "./components/primitives/error-state";
+export type { ErrorStateProps, ErrorStateKind, NotFoundIllustrationProps } from "./components/primitives/error-state";
 export { FilterBar } from "./components/primitives/filter-bar";
+export type { FilterBarProps, FilterChip } from "./components/primitives/filter-bar";
 export { Footer } from "./components/primitives/footer";
+export type { FooterProps, FooterLink, FooterLinkGroup, FooterPaymentMethod, FooterTrustBadge } from "./components/primitives/footer";
 export { FormField as CakeFormField } from "./components/primitives/form-field";
+export type { FormFieldProps as CakeFormFieldProps } from "./components/primitives/form-field";
 export { FunnelShell } from "./components/primitives/funnel-shell";
 export type { FunnelShellProps, FunnelStep } from "./components/primitives/funnel-shell";
 export { Header } from "./components/primitives/header";
+export type { HeaderProps, HeaderAction, HeaderNavItem } from "./components/primitives/header";
 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";
+export type { KebabMenuProps, KebabMenuItem } from "./components/primitives/kebab-menu";
 export { ListItem } from "./components/primitives/list-item";
+export type { ListItemProps } from "./components/primitives/list-item";
 export { MenuDrawer } from "./components/primitives/menu-drawer";
+export type { MenuDrawerProps, MenuSection, MenuItem, MenuBanner } from "./components/primitives/menu-drawer";
 export { SubNav } from "./components/primitives/sub-nav";
+export type { SubNavProps, SubNavItem } from "./components/primitives/sub-nav";
 export { NotificationBadge, notificationBadgeVariants } from "./components/primitives/notification-badge";
+export type { NotificationBadgeProps } from "./components/primitives/notification-badge";
 export { NotificationList } from "./components/primitives/notification-list";
+export type { NotificationListProps, NotificationItem } from "./components/primitives/notification-list";
 export { PriceDisplay, priceDisplayVariants } from "./components/primitives/price-display";
+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";
+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 { 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";
+export type { ShareButtonsProps } from "./components/primitives/share-buttons";
 export { SideNav } from "./components/primitives/side-nav";
 export type { SideNavProps, SideNavGroup, SideNavItem } from "./components/primitives/side-nav";
 export { SocialLoginButton } from "./components/primitives/social-login-button";
+export type { SocialLoginButtonProps, SocialProvider } from "./components/primitives/social-login-button";
 export { StatusCountTabs } from "./components/primitives/status-count-tabs";
+export type { StatusCountTabsProps } from "./components/primitives/status-count-tabs";
 export { Tag, tagVariants } from "./components/primitives/tag";
+export type { TagProps } from "./components/primitives/tag";
 export { WorkspaceShell } from "./components/primitives/workspace-shell";
 export type { WorkspaceShellProps } from "./components/primitives/workspace-shell";
 /**
@@ -126,27 +180,49 @@ export { AdminShell as AdminLayout } from "./components/ec/admin-shell";
 /** @deprecated 旧名。`AdminShellProps` を使うこと。次のメジャーで削除する。 */
 export type { AdminShellProps as AdminLayoutProps } from "./components/ec/admin-shell";
 export { AnniversaryCard } from "./components/ec/anniversary-card";
+export type { AnniversaryCardProps } from "./components/ec/anniversary-card";
 export { CakeLogo } from "./components/ec/cake-logo";
+export type { CakeLogoProps } from "./components/ec/cake-logo";
 export { ChartControls } from "./components/ec/chart-controls";
+export type { ChartControlsProps, ChartGranularity, ChartPeriod } from "./components/ec/chart-controls";
 export { CountdownTimer } from "./components/ec/countdown-timer";
+export type { CountdownTimerProps } from "./components/ec/countdown-timer";
 export { CouponCard } from "./components/ec/coupon-card";
+export type { CouponCardProps } from "./components/ec/coupon-card";
 export { DeliveryCalendar } from "./components/ec/delivery-calendar";
+export type { DeliveryCalendarProps, DayAvailability, CalendarDay } from "./components/ec/delivery-calendar";
 export { mypageMenuGroups } from "./components/ec/_mypage-menu-data";
 export { OrderSection } from "./components/ec/order-section";
+export type { OrderSectionProps } from "./components/ec/order-section";
 export { OrderSummary } from "./components/ec/order-summary";
+export type { OrderSummaryProps, OrderSummaryLineItem } from "./components/ec/order-summary";
 export { PaymentMethodDisplay, CreditCardIcon } from "./components/ec/payment-method";
+export type { PaymentMethodDisplayProps, CreditCardIconProps, CreditCardBrand } from "./components/ec/payment-method";
 export { ProductCard } from "./components/ec/product-card";
+export type { ProductCardProps } from "./components/ec/product-card";
 export { ProductCarousel } from "./components/ec/product-carousel";
+export type { ProductCarouselProps } from "./components/ec/product-carousel";
 export { ProductCTA } from "./components/ec/product-cta";
+export type { ProductCTAProps, ProductCTAVariant } from "./components/ec/product-cta";
 export { ProductDetailBar } from "./components/ec/product-detail-bar";
+export type { ProductDetailBarProps, ProductDetailBarTab } from "./components/ec/product-detail-bar";
 export { ProductDetailSidebar } from "./components/ec/product-detail-sidebar";
+export type { ProductDetailSidebarProps, SizeOption, CouponInfo, ProductTag, PromoBanner, PointInfo } from "./components/ec/product-detail-sidebar";
 export { ProductListItem } from "./components/ec/product-list-item";
+export type { ProductListItemProps, ProductListItemTag } from "./components/ec/product-list-item";
 export { ProductOption, OptionQuantity, OptionSelect, OptionText, OptionImageUpload } from "./components/ec/product-option";
+export type { ProductOptionProps, ProductOptionType, OptionQuantityProps, OptionSelectProps, OptionTextProps } from "./components/ec/product-option";
 export { RatingStars, SparkleIcon } from "./components/ec/rating-stars";
+export type { RatingStarsProps } from "./components/ec/rating-stars";
 export { ReviewCard } from "./components/ec/review-card";
+export type { ReviewCardProps } from "./components/ec/review-card";
 export { ReviewForm } from "./components/ec/review-form";
+export type { ReviewFormProps } from "./components/ec/review-form";
 export { ReviewSummary, ReviewItem } from "./components/ec/review-summary";
+export type { ReviewSummaryProps, ReviewGaugeItem, ReviewItemProps } from "./components/ec/review-summary";
 export { MypageShell } from "./components/ec/mypage-shell";
 export type { MypageShellProps, MypageShellBreadcrumb } from "./components/ec/mypage-shell";
 export { ShopCard } from "./components/ec/shop-card";
+export type { ShopCardProps } from "./components/ec/shop-card";
 export { StatCard } from "./components/ec/stat-card";
+export type { StatCardProps } from "./components/ec/stat-card";

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.11.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

@@ -26,11 +26,312 @@
  * 以下の「Typography Helper」セクションで提供する。
  * ============================================ */
 
-/* --- Layer 1: Primitive Colors --- */
-@import "./styles/primitive.css";
+/* --- Layer 1: Primitive Colors ---
+ *
+ * 正本 src/styles/primitive.css のメインカラーファミリー（Orange/Gray/Forest/
+ * Sun/Teal/Sea/Wood/Berry/Black）は `@theme { ... }` ブロック内にあり、Tailwind CSS v4 の
+ * ビルド時変数解決に依存するため、Tailwind を通さない consumer（素の HTML + `<link>`）では
+ * ブロックごと無効な CSS として破棄され、`var(--Primitive-Gray-900)` 等が一切解決されない
+ * （`@import` するだけでは効かない。#113 と同根で、実機 Chromium で `getComputedStyle` を
+ * 検証して確認済み。primitive.css の alpha 変数は素の `:root` にあるので効いている）。
+ * そのため、primitive.css の全トークン（@theme のカラーファミリー全量 + :root の alpha 全量）を
+ * 素の `:root` として値ごと逐語展開している。
+ *
+ * primitive.css を変更した場合は、このブロックも合わせて更新すること
+ * （整合は __tests__/preset-standalone-coverage.test.ts でガードしている）。
+ */
+:root {
+  /* Orange */
+  --Primitive-Orange-50: #FFECD9FF;
+  --Primitive-Orange-100: #FFD4B2FF;
+  --Primitive-Orange-200: #FFBA84FF;
+  --Primitive-Orange-300: #FFA66BFF;
+  --Primitive-Orange-400: #FF8E4CFF;
+  --Primitive-Orange-500: #F97732FF;
+  --Primitive-Orange-600: #F16311FF;
+  --Primitive-Orange-700: #E04B00FF; /* primary */
+  --Primitive-Orange-800: #BD3200FF;
+  --Primitive-Orange-900: #A62700FF;
+
+  /* Gray */
+  --Primitive-Gray-50: #FBF9F8FF;
+  --Primitive-Gray-100: #F4F2F1FF;
+  --Primitive-Gray-200: #EBE9E8FF;
+  --Primitive-Gray-300: #DBD9D8FF;
+  --Primitive-Gray-400: #B7B5B4FF;
+  --Primitive-Gray-500: #979594FF;
+  --Primitive-Gray-600: #787675FF;
+  --Primitive-Gray-700: #575352FF;
+  --Primitive-Gray-800: #3A3736FF;
+  --Primitive-Gray-900: #1C1A1AFF;
+
+  /* Forest */
+  --Primitive-Forest-50: #E6F5ECFF;
+  --Primitive-Forest-100: #C2E5D1FF;
+  --Primitive-Forest-200: #9BD4B5FF;
+  --Primitive-Forest-300: #71C598FF;
+  --Primitive-Forest-400: #51B883FF;
+  --Primitive-Forest-500: #2CAC6EFF;
+  --Primitive-Forest-600: #259D63FF;
+  --Primitive-Forest-700: #1D8B56FF;
+  --Primitive-Forest-800: #197A4BFF; /* primary */
+  --Primitive-Forest-900: #115A36FF;
+
+  /* Sun */
+  --Primitive-Sun-50: #FFE7E6FF;
+  --Primitive-Sun-100: #FFC8B8FF;
+  --Primitive-Sun-200: #FFA28BFF;
+  --Primitive-Sun-300: #FF7B5CFF;
+  --Primitive-Sun-400: #FF5838FF;
+  --Primitive-Sun-500: #FF4B36FF;
+  --Primitive-Sun-600: #FF220DFF;
+  --Primitive-Sun-700: #FA1606FF;
+  --Primitive-Sun-800: #EC0000FF; /* primary */
+  --Primitive-Sun-900: #D50000FF;
 
-/* --- Layer 2: Semantic Colors (+ dark mode) --- */
-@import "./styles/semantic.css";
+  /* Teal */
+  --Primitive-Teal-50: #F0FCF8FF;
+  --Primitive-Teal-100: #D0F6E9FF;
+  --Primitive-Teal-200: #ACEED8FF;
+  --Primitive-Teal-300: #81E6C4FF;
+  --Primitive-Teal-400: #59D9AEFF;
+  --Primitive-Teal-500: #51C79FFF;
+  --Primitive-Teal-600: #49B18EFF;
+  --Primitive-Teal-700: #3E987AFF;
+  --Primitive-Teal-800: #317860FF; /* primary */
+  --Primitive-Teal-900: #1D4739FF;
+
+  /* Sea */
+  --Primitive-Sea-50: #E8F1FEFF;
+  --Primitive-Sea-100: #C5D7FBFF;
+  --Primitive-Sea-200: #9DB7F9FF;
+  --Primitive-Sea-300: #7096F8FF;
+  --Primitive-Sea-400: #4979F5FF;
+  --Primitive-Sea-500: #295FF3FF;
+  --Primitive-Sea-600: #003EE5FF; /* primary */
+  --Primitive-Sea-700: #0031D8FF;
+  --Primitive-Sea-800: #0024CEFF;
+  --Primitive-Sea-900: #0017B6FF;
+
+  /* Wood */
+  --Primitive-Wood-50: #F8F1E0FF;
+  --Primitive-Wood-100: #EFDBB1FF;
+  --Primitive-Wood-200: #E5C47FFF;
+  --Primitive-Wood-300: #DCAC4DFF;
+  --Primitive-Wood-400: #D69C2BFF;
+  --Primitive-Wood-500: #D18D0FFF;
+  --Primitive-Wood-600: #CD820AFF;
+  --Primitive-Wood-700: #C87504FF;
+  --Primitive-Wood-800: #C16800FF; /* primary */
+  --Primitive-Wood-900: #B65200FF;
+
+  /* Berry */
+  --Primitive-Berry-50: #FBD4E0FF;
+  --Primitive-Berry-100: #F7B1C8FF;
+  --Primitive-Berry-200: #F491B2FF;
+  --Primitive-Berry-300: #F1749EFF;
+  --Primitive-Berry-400: #EE598BFF;
+  --Primitive-Berry-500: #EC407AFF;
+  --Primitive-Berry-600: #EA296AFF;
+  --Primitive-Berry-700: #E5175CFF; /* primary */
+  --Primitive-Berry-800: #B5175CFF;
+  --Primitive-Berry-900: #9E103FFF;
+
+  /* Black */
+  --Primitive-Black-2-1000: #000000FF;
+
+  /* Gray alpha */
+  --Primitive-Gray-alpha-50: #0000000D;
+  --Primitive-Gray-alpha-100: #0000001A;
+  --Primitive-Gray-alpha-200: #00000033;
+  --Primitive-Gray-alpha-300: #0000004D;
+  --Primitive-Gray-alpha-400: #00000066;
+  --Primitive-Gray-alpha-500: #00000080;
+  --Primitive-Gray-alpha-600: #00000099;
+  --Primitive-Gray-alpha-700: #000000B2;
+  --Primitive-Gray-alpha-800: #000000CC;
+  --Primitive-Gray-alpha-900: #000000E5;
+  --Primitive-Gray-alpha-1000: #000000FF;
+
+  /* White alpha */
+  --Primitive-White-alpha-50: #FFFFFF0D;
+  --Primitive-White-alpha-100: #FFFFFF1A;
+  --Primitive-White-alpha-200: #FFFFFF33;
+  --Primitive-White-alpha-300: #FFFFFF4D;
+  --Primitive-White-alpha-400: #FFFFFF66;
+  --Primitive-White-alpha-500: #FFFFFF80;
+  --Primitive-White-alpha-600: #FFFFFF99;
+  --Primitive-White-alpha-700: #FFFFFFB2;
+  --Primitive-White-alpha-800: #FFFFFFCC;
+  --Primitive-White-alpha-900: #FFFFFFE5;
+  --Primitive-White-alpha-1000: #FFFFFFFF;
+}
+
+/* --- Layer 2: Semantic Colors (+ dark mode) ---
+ *
+ * 正本 src/styles/semantic.css は `@theme inline` 構文（Tailwind CSS v4 の
+ * ビルド時変数解決に依存）のため、Tailwind を通さない consumer では
+ * ブロックごと無視され、CSS変数として一切展開されない（`@import` するだけでは効かない）。
+ * そのため、以下は semantic.css の light/dark 値を tokens.json の hex キャッシュ
+ * （および tokens.json 未収録グループは primitive 実値）まで解決し、
+ * 素の `:root` / `.dark` として展開したもの。
+ *
+ * 展開対象（全 76 semantic トークン名）: Surface-* / Text-* / Object-* / Hover-* /
+ * Active-* / Border-* / Brand-* / Overlay-* / Surface-Glass-* / Caution-* /
+ * Focus-High-Emphasis / Third-Party-*。一覧・hex 整合は
+ * __tests__/preset-standalone-coverage.test.ts でガードしている。
+ *
+ * semantic.css を変更した場合は、この2ブロックも合わせて再生成すること
+ * （tokens.json の hex キャッシュ + src/styles/semantic.css の var() チェーンを
+ * 解決するスクリプトで手で写経せず生成し、貼り直す）。
+ */
+:root {
+  --Surface-Primary: #FFFFFF;
+  --Surface-Secondary: #FBF9F8;
+  --Surface-Tertiary: #F4F2F1;
+  --Surface-Caution: #EC0000;
+  --Surface-Caution-Light: #FFE7E6;
+  --Surface-Accent-Primary: #E04B00;
+  --Surface-Accent-Primary-Light: #FFECD9;
+  --Surface-Success: #259D63;
+  --Surface-Warning: #F8F1E0;
+  --Surface-Info: #003EE5;
+  --Surface-Info-Light: #E8F1FE;
+  --Text-High-Emphasis: #1C1A1A;
+  --Text-Medium-Emphasis: #575352;
+  --Text-Low-Emphasis: #787675;
+  --Text-Disable: #B7B5B4;
+  --Text-Accent-Primary: #E04B00;
+  --Text-Accent-Secondary: #FFBA84;
+  --Text-on-Inverse: #FFFFFF;
+  --Text-Success: #259D63;
+  --Text-Caution: #EC0000;
+  --Text-Warning: #C16800;
+  --Text-Info: #003EE5;
+  --Object-Favorite: #E04B00;
+  --Object-Accent-Primary: #E04B00;
+  --Object-Accent-Primary-Light: #FFECD9;
+  --Object-High-Emphasis: #1C1A1A;
+  --Object-Medium-Emphasis: #575352;
+  --Object-Low-Emphasis: #787675;
+  --Object-Disable: #B7B5B4;
+  --Object-High-Emphasis-on-Inverse: #FFFFFF;
+  --Object-Caution: #EC0000;
+  --Object-Warning: #C16800;
+  --Object-Success: #259D63;
+  --Object-Info: #003EE5;
+  --Hover-Primary-Button: #BD3200;
+  --Hover-Secondary-Button: #FFD4B2;
+  --Hover-Tertiary-Button: #EBE9E8;
+  --Hover-Text-Button: #EBE9E8;
+  --Hover-Caution-Button: #FFC8B8;
+  --Active-Primary-Button: #BD3200;
+  --Active-Secondary-Button: #FFD4B2;
+  --Active-Tertiary-Button: #EBE9E8;
+  --Active-Text-Button: #F4F2F1;
+  --Active-Caution-Button: #FFC8B8;
+  --Border-High-Emphasis: #575352;
+  --Border-Medium-Emphasis: #DBD9D8;
+  --Border-Low-Emphasis: #FBF9F8;
+  --Border-Accent-Primary: #E04B00;
+  --Border-Favorite: #E04B00;
+  --Border-Caution: #EC0000;
+  --Border-Info: #003EE5;
+  --Brand-Cake-Orange: #E04B00;
+  --Brand-Cake-Orange-Light: #FFD4B2;
+  --Brand-Cake-Orange-Ultra-Light: #FFECD9;
+  --Overlay-Dark: #000000CC;
+  --Overlay-Medium: #00000099;
+  --Overlay-Light: #00000033;
+  --Overlay-Scrim: rgba(17, 17, 17, 0.28);
+  --Surface-Glass: #FFFFFFCC;
+  --Surface-Glass-Soft: rgba(255, 255, 255, 0.76);
+  --Surface-Glass-Faint: #FFFFFFB2;
+  --Surface-Brand-Ghost: rgba(255, 236, 217, 0.7);
+  --Surface-Overlay-Light: #FFFFFFCC;
+  --Surface-Overlay-Dark: #00000066;
+  --Border-Hairline: rgba(28, 26, 26, 0.08);
+  --Border-Brand-Subtle: rgba(224, 75, 0, 0.16);
+  --Caution-Base: #EC0000;
+  --Caution-Light: #FFA28B;
+  --Caution-Ultra-Light: #FFE7E6;
+  --Focus-High-Emphasis: #0C9E66;
+  --Third-Party-Youtube: #FF0000;
+  --Third-Party-Facebook: #1877F2;
+  --Third-Party-Twitter: #1DA1F2;
+  --Third-Party-Instagram-Pink: #F20076;
+  --Third-Party-Amazon: #FAD676;
+  --Third-Party-LINE: #06C755;
+  --Third-Party-Apple: #000000;
+  --Third-Party-X: #000000;
+}
+
+.dark {
+  --Surface-Primary: #000000E5;
+  --Surface-Secondary: #FFFFFF1A;
+  --Surface-Tertiary: #FFFFFF33;
+  --Surface-Caution: #EC0000;
+  --Surface-Caution-Light: #FFE7E6;
+  --Surface-Accent-Primary: #E04B00;
+  --Surface-Accent-Primary-Light: #E04B0026;
+  --Surface-Success: #259D63;
+  --Surface-Warning: #F8F1E0;
+  --Surface-Info: #003EE5;
+  --Surface-Info-Light: #E8F1FE;
+  --Text-High-Emphasis: #FFFFFF;
+  --Text-Medium-Emphasis: #FFFFFFCC;
+  --Text-Low-Emphasis: #FFFFFF99;
+  --Text-Disable: #FFFFFF4D;
+  --Text-Accent-Primary: #F16311;
+  --Text-Accent-Secondary: #FFD4B2;
+  --Text-on-Inverse: #FFFFFF;
+  --Text-Success: #259D63;
+  --Text-Caution: #FF5838;
+  --Text-Warning: #C16800;
+  --Text-Info: #4979F5;
+  --Object-Favorite: #F16311;
+  --Object-Accent-Primary: #F16311;
+  --Object-Accent-Primary-Light: #FFECD9;
+  --Object-High-Emphasis: #FFFFFF;
+  --Object-Medium-Emphasis: #FFFFFFCC;
+  --Object-Low-Emphasis: #FFFFFF99;
+  --Object-Disable: #FFFFFF66;
+  --Object-High-Emphasis-on-Inverse: #FFFFFF;
+  --Object-Caution: #FFA28B;
+  --Object-Warning: #C16800;
+  --Object-Success: #259D63;
+  --Object-Info: #4979F5;
+  --Hover-Primary-Button: #BD3200;
+  --Hover-Secondary-Button: #FFFFFF1A;
+  --Hover-Tertiary-Button: #FFFFFF0D;
+  --Hover-Text-Button: #FFFFFF33;
+  --Hover-Caution-Button: #FFE7E6;
+  --Active-Primary-Button: #BD3200;
+  --Active-Secondary-Button: #FFFFFF1A;
+  --Active-Tertiary-Button: #FFFFFF0D;
+  --Active-Text-Button: #FFFFFF1A;
+  --Active-Caution-Button: #FFE7E6;
+  --Border-High-Emphasis: #FFFFFF80;
+  --Border-Medium-Emphasis: #FFFFFF33;
+  --Border-Low-Emphasis: #FFFFFF0D;
+  --Border-Accent-Primary: #F16311;
+  --Border-Favorite: #F16311;
+  --Border-Caution: #EC0000;
+  --Border-Info: #4979F5;
+  --Brand-Cake-Orange: #E04B00;
+  --Brand-Cake-Orange-Light: #FFD4B2;
+  --Brand-Cake-Orange-Ultra-Light: #FFECD9;
+  --Overlay-Dark: #FFFFFF4D;
+  --Overlay-Medium: #FFFFFF33;
+  --Overlay-Light: #FFFFFF1A;
+  --Overlay-Scrim: rgba(0, 0, 0, 0.48);
+  --Surface-Glass: #FFFFFF1A;
+  --Surface-Glass-Soft: #FFFFFF1A;
+  --Surface-Glass-Faint: #FFFFFF0D;
+  --Surface-Brand-Ghost: rgba(224, 75, 0, 0.12);
+  --Border-Hairline: #FFFFFF1A;
+  --Border-Brand-Subtle: rgba(224, 75, 0, 0.24);
+}
 
 /* --- Bridge: Semantic → shadcn tokens --- */
 :root {
@@ -104,6 +405,8 @@
  */
 
 /* 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; }
 .typo-heading-xl  { font-size: 21px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
@@ -122,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 {
   * {