@cakejp/design-system 0.3.5 → 0.5.0

package/dist/types/components/ec/product-carousel.d.ts

@@ -50,7 +50,7 @@ export interface ProductCarouselProps {
  * - `showCartButton` でカート追加ボタンを表示
  * - `sectionImage` でコラボ・ブランドロゴ等の画像をヘッダー左に表示
  * - `description` でセクション説明文を追加（コラボ紹介、特集説明等）
- * - 横パディングは SectionHeader（px-4）とスクロールコンテナ（px-4）が持つ
+ * - 横パディング(px-4)はヘッダー行（SectionHeader もしくは画像ラッパー）とスクロールコンテナが各自で持つ
  */
 declare function ProductCarousel({ title, subtitle, description, sectionImage, sectionImageAlt, sectionImageHref, moreHref, moreLabel, onMoreClick, headerSize, products, cardSize, showRanking, showCartButton, className, }: ProductCarouselProps): import("react/jsx-runtime").JSX.Element;
 export { ProductCarousel };

package/dist/types/components/foundations/checkbox.d.ts

@@ -1,4 +1,43 @@
 import * as React from "react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
-declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+type CheckboxRootProps = React.ComponentProps<typeof CheckboxPrimitive.Root>;
+export interface CheckboxProps extends CheckboxRootProps {
+    /**
+     * ラベル文字列または ReactNode を渡すと、Checkbox を `<label>` でラップして
+     * 行型レイアウトに切り替える。filter sidebar / 設定画面で典型的な「行全体クリッカブル」
+     * パターン。未指定なら従来通り Checkbox 単体（外側で Label を組む使い方も継続可能）。
+     */
+    label?: React.ReactNode;
+    /** サブテキスト（label 指定時のみ有効） */
+    description?: React.ReactNode;
+    /** 右端に表示する件数バッジ（label 指定時のみ有効） */
+    count?: number;
+    /** label モード時の行コンテナに付けるクラス */
+    containerClassName?: string;
+}
+/**
+ * Checkbox（チェックボックス）
+ *
+ * 2 つの使い方:
+ *
+ * 1. **素の Checkbox** — `label` を渡さない場合
+ *    ```tsx
+ *    <Checkbox checked={...} onCheckedChange={...} />
+ *    ```
+ *    外側で `<Label>` や `<FormField>` と組み合わせて使う。
+ *
+ * 2. **行型レイアウト** — `label` を渡すと自動で `<label>` ラップ + 行全体 hover
+ *    ```tsx
+ *    <Checkbox
+ *      label="正社員"
+ *      count={1234}
+ *      checked={...}
+ *      onCheckedChange={...}
+ *    />
+ *    ```
+ *    filter sidebar / 設定画面の典型パターン。行全体クリッカブル、hover で背景強調。
+ *
+ * カード型の選択肢には `CheckboxCard` (foundations) を使用。
+ */
+declare function Checkbox({ label, description, count, containerClassName, className, id, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export { Checkbox };

package/dist/types/components/primitives/form-field.d.ts

@@ -16,6 +16,7 @@
  * | required | boolean | false | 必須バッジ表示 |
  * | optional | boolean | false | 任意バッジ表示 |
  * | description | string | — | 補足テキスト |
+ * | descriptionPosition | "above" \| "below" | "above" | description の表示位置 |
  * | error | string | — | エラーメッセージ |
  * | children | ReactNode | — | 入力要素 |
  *
@@ -34,6 +35,14 @@ export interface FormFieldProps {
     optional?: boolean;
     /** 補足テキスト */
     description?: string;
+    /**
+     * description の表示位置。
+     * - `"above"` (デフォルト): ラベル直下・入力要素の上
+     * - `"below"`: 入力要素の下
+     *
+     * グリッド配置で横並びフィールドの高さを揃えたい場合は `"below"` を使う。
+     */
+    descriptionPosition?: "above" | "below";
     /** エラーメッセージ */
     error?: string;
     /** htmlFor 属性 */
@@ -43,4 +52,4 @@ export interface FormFieldProps {
     /** 追加クラス */
     className?: string;
 }
-export declare function FormField({ label, required, optional, description, error, htmlFor, children, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormField({ label, required, optional, description, descriptionPosition, error, htmlFor, children, className, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -11,6 +11,7 @@ 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 { Checkbox } from "./components/foundations/checkbox";
+export type { CheckboxProps } from "./components/foundations/checkbox";
 export { CheckboxCardGroup, CheckboxCardItem } from "./components/foundations/checkbox-card";
 export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/foundations/collapsible";
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/foundations/command";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.3.5",
+  "version": "0.5.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",