@cakejp/design-system 0.3.5 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.js +1163 -1118
- package/dist/types/components/foundations/checkbox.d.ts +40 -1
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,43 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Checkbox as CheckboxPrimitive } from "radix-ui";
|
|
3
|
-
|
|
3
|
+
type CheckboxRootProps = React.ComponentProps<typeof CheckboxPrimitive.Root>;
|
|
4
|
+
export interface CheckboxProps extends CheckboxRootProps {
|
|
5
|
+
/**
|
|
6
|
+
* ラベル文字列または ReactNode を渡すと、Checkbox を `<label>` でラップして
|
|
7
|
+
* 行型レイアウトに切り替える。filter sidebar / 設定画面で典型的な「行全体クリッカブル」
|
|
8
|
+
* パターン。未指定なら従来通り Checkbox 単体（外側で Label を組む使い方も継続可能）。
|
|
9
|
+
*/
|
|
10
|
+
label?: React.ReactNode;
|
|
11
|
+
/** サブテキスト（label 指定時のみ有効） */
|
|
12
|
+
description?: React.ReactNode;
|
|
13
|
+
/** 右端に表示する件数バッジ（label 指定時のみ有効） */
|
|
14
|
+
count?: number;
|
|
15
|
+
/** label モード時の行コンテナに付けるクラス */
|
|
16
|
+
containerClassName?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Checkbox（チェックボックス）
|
|
20
|
+
*
|
|
21
|
+
* 2 つの使い方:
|
|
22
|
+
*
|
|
23
|
+
* 1. **素の Checkbox** — `label` を渡さない場合
|
|
24
|
+
* ```tsx
|
|
25
|
+
* <Checkbox checked={...} onCheckedChange={...} />
|
|
26
|
+
* ```
|
|
27
|
+
* 外側で `<Label>` や `<FormField>` と組み合わせて使う。
|
|
28
|
+
*
|
|
29
|
+
* 2. **行型レイアウト** — `label` を渡すと自動で `<label>` ラップ + 行全体 hover
|
|
30
|
+
* ```tsx
|
|
31
|
+
* <Checkbox
|
|
32
|
+
* label="正社員"
|
|
33
|
+
* count={1234}
|
|
34
|
+
* checked={...}
|
|
35
|
+
* onCheckedChange={...}
|
|
36
|
+
* />
|
|
37
|
+
* ```
|
|
38
|
+
* filter sidebar / 設定画面の典型パターン。行全体クリッカブル、hover で背景強調。
|
|
39
|
+
*
|
|
40
|
+
* カード型の選択肢には `CheckboxCard` (foundations) を使用。
|
|
41
|
+
*/
|
|
42
|
+
declare function Checkbox({ label, description, count, containerClassName, className, id, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
|
|
4
43
|
export { Checkbox };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export { Button, buttonVariants } from "./components/foundations/button";
|
|
|
11
11
|
export { Calendar } from "./components/foundations/calendar";
|
|
12
12
|
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/foundations/card";
|
|
13
13
|
export { Checkbox } from "./components/foundations/checkbox";
|
|
14
|
+
export type { CheckboxProps } from "./components/foundations/checkbox";
|
|
14
15
|
export { CheckboxCardGroup, CheckboxCardItem } from "./components/foundations/checkbox-card";
|
|
15
16
|
export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/foundations/collapsible";
|
|
16
17
|
export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/foundations/command";
|