@s-hirano-ist/s-ui 1.2.0 → 1.3.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/display/loading.d.ts +14 -0
- package/dist/display/loading.d.ts.map +1 -1
- package/dist/display/loading.js +14 -0
- package/dist/display/loading.js.map +1 -1
- package/dist/display/status/status-code-view.d.ts +29 -2
- package/dist/display/status/status-code-view.d.ts.map +1 -1
- package/dist/display/status/status-code-view.js +18 -0
- package/dist/display/status/status-code-view.js.map +1 -1
- package/dist/forms/fields/form-dropdown-input.d.ts +61 -7
- package/dist/forms/fields/form-dropdown-input.d.ts.map +1 -1
- package/dist/forms/fields/form-dropdown-input.js +64 -11
- package/dist/forms/fields/form-dropdown-input.js.map +1 -1
- package/dist/forms/fields/form-file-input.d.ts +30 -3
- package/dist/forms/fields/form-file-input.d.ts.map +1 -1
- package/dist/forms/fields/form-file-input.js +21 -0
- package/dist/forms/fields/form-file-input.js.map +1 -1
- package/dist/forms/fields/form-input-with-button.d.ts +41 -3
- package/dist/forms/fields/form-input-with-button.d.ts.map +1 -1
- package/dist/forms/fields/form-input-with-button.js +28 -0
- package/dist/forms/fields/form-input-with-button.js.map +1 -1
- package/dist/forms/fields/form-input.d.ts +32 -3
- package/dist/forms/fields/form-input.d.ts.map +1 -1
- package/dist/forms/fields/form-input.js +23 -0
- package/dist/forms/fields/form-input.js.map +1 -1
- package/dist/forms/fields/form-textarea.d.ts +31 -3
- package/dist/forms/fields/form-textarea.d.ts.map +1 -1
- package/dist/forms/fields/form-textarea.js +22 -0
- package/dist/forms/fields/form-textarea.js.map +1 -1
- package/dist/forms/generic-form-wrapper.d.ts +66 -3
- package/dist/forms/generic-form-wrapper.d.ts.map +1 -1
- package/dist/forms/generic-form-wrapper.js +53 -0
- package/dist/forms/generic-form-wrapper.js.map +1 -1
- package/dist/hooks/use-infinite-scroll.d.ts +58 -3
- package/dist/hooks/use-infinite-scroll.d.ts.map +1 -1
- package/dist/hooks/use-infinite-scroll.js +40 -0
- package/dist/hooks/use-infinite-scroll.js.map +1 -1
- package/dist/index.d.ts +36 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +36 -0
- package/dist/index.js.map +1 -1
- package/dist/layouts/body/viewer-body.d.ts +49 -3
- package/dist/layouts/body/viewer-body.d.ts.map +1 -1
- package/dist/layouts/body/viewer-body.js +41 -1
- package/dist/layouts/body/viewer-body.js.map +1 -1
- package/dist/providers/theme-provider.d.ts +23 -0
- package/dist/providers/theme-provider.d.ts.map +1 -1
- package/dist/providers/theme-provider.js +23 -0
- package/dist/providers/theme-provider.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/ui/badge.d.ts +41 -0
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/badge.js +35 -0
- package/dist/ui/badge.js.map +1 -1
- package/dist/ui/button.d.ts +58 -0
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +50 -0
- package/dist/ui/button.js.map +1 -1
- package/dist/ui/card.d.ts +74 -0
- package/dist/ui/card.d.ts.map +1 -1
- package/dist/ui/card.js +74 -0
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/command.d.ts +117 -1
- package/dist/ui/command.d.ts.map +1 -1
- package/dist/ui/command.js +117 -1
- package/dist/ui/command.js.map +1 -1
- package/dist/ui/dialog.d.ts +88 -0
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +88 -0
- package/dist/ui/dialog.js.map +1 -1
- package/dist/ui/drawer.d.ts +85 -0
- package/dist/ui/drawer.d.ts.map +1 -1
- package/dist/ui/drawer.js +85 -0
- package/dist/ui/drawer.js.map +1 -1
- package/dist/ui/dropdown-menu.d.ts +88 -0
- package/dist/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/ui/dropdown-menu.js +88 -0
- package/dist/ui/dropdown-menu.js.map +1 -1
- package/dist/ui/input.d.ts +27 -0
- package/dist/ui/input.d.ts.map +1 -1
- package/dist/ui/input.js +22 -0
- package/dist/ui/input.js.map +1 -1
- package/dist/ui/label.d.ts +16 -0
- package/dist/ui/label.d.ts.map +1 -1
- package/dist/ui/label.js +20 -0
- package/dist/ui/label.js.map +1 -1
- package/dist/ui/popover.d.ts +50 -0
- package/dist/ui/popover.d.ts.map +1 -0
- package/dist/ui/popover.js +54 -0
- package/dist/ui/popover.js.map +1 -0
- package/dist/ui/sonner.d.ts +27 -0
- package/dist/ui/sonner.d.ts.map +1 -1
- package/dist/ui/sonner.js +22 -0
- package/dist/ui/sonner.js.map +1 -1
- package/dist/ui/tabs.d.ts +50 -0
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +50 -0
- package/dist/ui/tabs.js.map +1 -1
- package/dist/ui/textarea.d.ts +24 -0
- package/dist/ui/textarea.d.ts.map +1 -1
- package/dist/ui/textarea.js +19 -0
- package/dist/ui/textarea.js.map +1 -1
- package/dist/utils/cn.d.ts +19 -0
- package/dist/utils/cn.d.ts.map +1 -1
- package/dist/utils/cn.js +19 -0
- package/dist/utils/cn.js.map +1 -1
- package/package.json +1 -1
package/dist/ui/button.js
CHANGED
|
@@ -3,6 +3,27 @@ import { cva } from "class-variance-authority";
|
|
|
3
3
|
import { Slot as SlotPrimitive } from "radix-ui";
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { cn } from "../utils/cn";
|
|
6
|
+
/**
|
|
7
|
+
* Button style variants using class-variance-authority.
|
|
8
|
+
*
|
|
9
|
+
* @remarks
|
|
10
|
+
* Provides consistent button styling with multiple visual variants and sizes.
|
|
11
|
+
*
|
|
12
|
+
* Variants:
|
|
13
|
+
* - `default` - Primary gradient button
|
|
14
|
+
* - `destructive` - Red button for dangerous actions
|
|
15
|
+
* - `outline` - Bordered button with transparent background
|
|
16
|
+
* - `secondary` - Muted background button
|
|
17
|
+
* - `ghost` - Minimal button with hover effect only
|
|
18
|
+
* - `link` - Underlined text link style
|
|
19
|
+
* - `navSide` - Navigation sidebar button
|
|
20
|
+
* - `navCenter` - Centered navigation button
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```typescript
|
|
24
|
+
* const className = buttonVariants({ variant: "outline", size: "lg" });
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
6
27
|
const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50", {
|
|
7
28
|
variants: {
|
|
8
29
|
variant: {
|
|
@@ -29,6 +50,35 @@ const buttonVariants = cva("inline-flex items-center justify-center whitespace-n
|
|
|
29
50
|
size: "default",
|
|
30
51
|
},
|
|
31
52
|
});
|
|
53
|
+
/**
|
|
54
|
+
* A versatile button component with multiple variants and sizes.
|
|
55
|
+
*
|
|
56
|
+
* @remarks
|
|
57
|
+
* The Button component is built on top of class-variance-authority for
|
|
58
|
+
* consistent styling and supports the Radix UI Slot pattern for composition.
|
|
59
|
+
*
|
|
60
|
+
* @param props - Button props including variant, size, and standard button attributes
|
|
61
|
+
* @returns A styled button element
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* ```tsx
|
|
65
|
+
* // Default button
|
|
66
|
+
* <Button>Click me</Button>
|
|
67
|
+
*
|
|
68
|
+
* // Destructive action
|
|
69
|
+
* <Button variant="destructive">Delete</Button>
|
|
70
|
+
*
|
|
71
|
+
* // Large outline button
|
|
72
|
+
* <Button variant="outline" size="lg">Learn More</Button>
|
|
73
|
+
*
|
|
74
|
+
* // As child (renders as anchor)
|
|
75
|
+
* <Button asChild>
|
|
76
|
+
* <a href="/page">Link Button</a>
|
|
77
|
+
* </Button>
|
|
78
|
+
* ```
|
|
79
|
+
*
|
|
80
|
+
* @see {@link buttonVariants} for available style variants
|
|
81
|
+
*/
|
|
32
82
|
const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
33
83
|
const Comp = asChild ? SlotPrimitive.Slot : "button";
|
|
34
84
|
return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
|
package/dist/ui/button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../ui/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,MAAM,cAAc,GAAG,GAAG,CACzB,0OAA0O,EAC1O;IACC,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EACN,sFAAsF;YACvF,WAAW,EACV,6DAA6D;YAC9D,OAAO,EACN,wFAAwF;YACzF,SAAS,EAAE,4DAA4D;YACvE,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,+CAA+C;YACrD,OAAO,EAAE,0CAA0C;YACnD,SAAS,EAAE,wCAAwC;SACnD;QACD,IAAI,EAAE;YACL,OAAO,EAAE,eAAe;YACxB,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,sBAAsB;YAC1B,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE,sBAAsB;SACjC;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KACf;CACD,CACD,CAAC;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../ui/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,cAAc,GAAG,GAAG,CACzB,0OAA0O,EAC1O;IACC,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EACN,sFAAsF;YACvF,WAAW,EACV,6DAA6D;YAC9D,OAAO,EACN,wFAAwF;YACzF,SAAS,EAAE,4DAA4D;YACvE,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,+CAA+C;YACrD,OAAO,EAAE,0CAA0C;YACnD,SAAS,EAAE,wCAAwC;SACnD;QACD,IAAI,EAAE;YACL,OAAO,EAAE,eAAe;YACxB,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,sBAAsB;YAC1B,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE,sBAAsB;SACjC;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KACf;CACD,CACD,CAAC;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrD,OAAO,CACN,KAAC,IAAI,IACJ,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EAC3D,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC;AACH,CAAC,CACD,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
package/dist/ui/card.d.ts
CHANGED
|
@@ -1,9 +1,83 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* A container component for grouping related content.
|
|
4
|
+
*
|
|
5
|
+
* @remarks
|
|
6
|
+
* Card provides a visual container with rounded corners, border, and shadow.
|
|
7
|
+
* Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
|
|
8
|
+
* for semantic structure.
|
|
9
|
+
*
|
|
10
|
+
* @param props - Standard div attributes
|
|
11
|
+
* @returns A styled card container
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Card>
|
|
16
|
+
* <CardHeader>
|
|
17
|
+
* <CardTitle>Title</CardTitle>
|
|
18
|
+
* <CardDescription>Description text</CardDescription>
|
|
19
|
+
* </CardHeader>
|
|
20
|
+
* <CardContent>
|
|
21
|
+
* <p>Card content goes here</p>
|
|
22
|
+
* </CardContent>
|
|
23
|
+
* <CardFooter>
|
|
24
|
+
* <Button>Action</Button>
|
|
25
|
+
* </CardFooter>
|
|
26
|
+
* </Card>
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* @see {@link CardHeader} for card header section
|
|
30
|
+
* @see {@link CardContent} for card body section
|
|
31
|
+
* @see {@link CardFooter} for card footer section
|
|
32
|
+
*/
|
|
2
33
|
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
/**
|
|
35
|
+
* Header section of a Card component.
|
|
36
|
+
*
|
|
37
|
+
* @remarks
|
|
38
|
+
* Contains the title and description of the card with proper spacing.
|
|
39
|
+
*
|
|
40
|
+
* @see {@link Card} for the parent container
|
|
41
|
+
* @see {@link CardTitle} for the title element
|
|
42
|
+
* @see {@link CardDescription} for the description element
|
|
43
|
+
*/
|
|
3
44
|
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
45
|
+
/**
|
|
46
|
+
* Title element for a Card component.
|
|
47
|
+
*
|
|
48
|
+
* @remarks
|
|
49
|
+
* Renders as an h3 heading with bold styling.
|
|
50
|
+
*
|
|
51
|
+
* @see {@link CardHeader} for the parent section
|
|
52
|
+
*/
|
|
4
53
|
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
54
|
+
/**
|
|
55
|
+
* Description text for a Card component.
|
|
56
|
+
*
|
|
57
|
+
* @remarks
|
|
58
|
+
* Renders with muted styling for secondary information.
|
|
59
|
+
*
|
|
60
|
+
* @see {@link CardHeader} for the parent section
|
|
61
|
+
*/
|
|
5
62
|
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
63
|
+
/**
|
|
64
|
+
* Main content area of a Card component.
|
|
65
|
+
*
|
|
66
|
+
* @remarks
|
|
67
|
+
* Contains the primary content of the card with horizontal padding.
|
|
68
|
+
*
|
|
69
|
+
* @see {@link Card} for the parent container
|
|
70
|
+
*/
|
|
6
71
|
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
72
|
+
/**
|
|
73
|
+
* Footer section of a Card component.
|
|
74
|
+
*
|
|
75
|
+
* @remarks
|
|
76
|
+
* Typically contains actions like buttons.
|
|
77
|
+
* Uses flexbox for horizontal alignment.
|
|
78
|
+
*
|
|
79
|
+
* @see {@link Card} for the parent container
|
|
80
|
+
*/
|
|
7
81
|
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
8
82
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };
|
|
9
83
|
//# sourceMappingURL=card.d.ts.map
|
package/dist/ui/card.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,IAAI,6GAYR,CAAC;AAGH,QAAA,MAAM,UAAU,6GASd,CAAC;AAGH,QAAA,MAAM,SAAS,uHAYb,CAAC;AAGH,QAAA,MAAM,eAAe,6GASnB,CAAC;AAGH,QAAA,MAAM,WAAW,6GAKf,CAAC;AAGH,QAAA,MAAM,UAAU,6GASd,CAAC;AAGH,OAAO,EACN,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,GACX,CAAC"}
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,IAAI,6GAYR,CAAC;AAGH;;;;;;;;;GASG;AACH,QAAA,MAAM,UAAU,6GASd,CAAC;AAGH;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,uHAYb,CAAC;AAGH;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,6GASnB,CAAC;AAGH;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW,6GAKf,CAAC;AAGH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU,6GASd,CAAC;AAGH,OAAO,EACN,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,GACX,CAAC"}
|
package/dist/ui/card.js
CHANGED
|
@@ -1,16 +1,90 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { cn } from "../utils/cn";
|
|
4
|
+
/**
|
|
5
|
+
* A container component for grouping related content.
|
|
6
|
+
*
|
|
7
|
+
* @remarks
|
|
8
|
+
* Card provides a visual container with rounded corners, border, and shadow.
|
|
9
|
+
* Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
|
|
10
|
+
* for semantic structure.
|
|
11
|
+
*
|
|
12
|
+
* @param props - Standard div attributes
|
|
13
|
+
* @returns A styled card container
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Card>
|
|
18
|
+
* <CardHeader>
|
|
19
|
+
* <CardTitle>Title</CardTitle>
|
|
20
|
+
* <CardDescription>Description text</CardDescription>
|
|
21
|
+
* </CardHeader>
|
|
22
|
+
* <CardContent>
|
|
23
|
+
* <p>Card content goes here</p>
|
|
24
|
+
* </CardContent>
|
|
25
|
+
* <CardFooter>
|
|
26
|
+
* <Button>Action</Button>
|
|
27
|
+
* </CardFooter>
|
|
28
|
+
* </Card>
|
|
29
|
+
* ```
|
|
30
|
+
*
|
|
31
|
+
* @see {@link CardHeader} for card header section
|
|
32
|
+
* @see {@link CardContent} for card body section
|
|
33
|
+
* @see {@link CardFooter} for card footer section
|
|
34
|
+
*/
|
|
4
35
|
const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: cn("rounded-xl border border-muted bg-primary-foreground text-primary shadow-sm", className), ref: ref, ...props })));
|
|
5
36
|
Card.displayName = "Card";
|
|
37
|
+
/**
|
|
38
|
+
* Header section of a Card component.
|
|
39
|
+
*
|
|
40
|
+
* @remarks
|
|
41
|
+
* Contains the title and description of the card with proper spacing.
|
|
42
|
+
*
|
|
43
|
+
* @see {@link Card} for the parent container
|
|
44
|
+
* @see {@link CardTitle} for the title element
|
|
45
|
+
* @see {@link CardDescription} for the description element
|
|
46
|
+
*/
|
|
6
47
|
const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 p-6", className), ref: ref, ...props })));
|
|
7
48
|
CardHeader.displayName = "CardHeader";
|
|
49
|
+
/**
|
|
50
|
+
* Title element for a Card component.
|
|
51
|
+
*
|
|
52
|
+
* @remarks
|
|
53
|
+
* Renders as an h3 heading with bold styling.
|
|
54
|
+
*
|
|
55
|
+
* @see {@link CardHeader} for the parent section
|
|
56
|
+
*/
|
|
8
57
|
const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h3", { className: cn("bg-clip-text font-bold leading-normal tracking-tight", className), ref: ref, ...props })));
|
|
9
58
|
CardTitle.displayName = "CardTitle";
|
|
59
|
+
/**
|
|
60
|
+
* Description text for a Card component.
|
|
61
|
+
*
|
|
62
|
+
* @remarks
|
|
63
|
+
* Renders with muted styling for secondary information.
|
|
64
|
+
*
|
|
65
|
+
* @see {@link CardHeader} for the parent section
|
|
66
|
+
*/
|
|
10
67
|
const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: cn("text-muted-foreground text-sm", className), ref: ref, ...props })));
|
|
11
68
|
CardDescription.displayName = "CardDescription";
|
|
69
|
+
/**
|
|
70
|
+
* Main content area of a Card component.
|
|
71
|
+
*
|
|
72
|
+
* @remarks
|
|
73
|
+
* Contains the primary content of the card with horizontal padding.
|
|
74
|
+
*
|
|
75
|
+
* @see {@link Card} for the parent container
|
|
76
|
+
*/
|
|
12
77
|
const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: cn("p-6 pt-0", className), ref: ref, ...props })));
|
|
13
78
|
CardContent.displayName = "CardContent";
|
|
79
|
+
/**
|
|
80
|
+
* Footer section of a Card component.
|
|
81
|
+
*
|
|
82
|
+
* @remarks
|
|
83
|
+
* Typically contains actions like buttons.
|
|
84
|
+
* Uses flexbox for horizontal alignment.
|
|
85
|
+
*
|
|
86
|
+
* @see {@link Card} for the parent container
|
|
87
|
+
*/
|
|
14
88
|
const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: cn("flex items-center p-6 pt-0", className), ref: ref, ...props })));
|
|
15
89
|
CardFooter.displayName = "CardFooter";
|
|
16
90
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };
|
package/dist/ui/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../ui/card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,EAAE,CACZ,6EAA6E,EAC7E,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EACzD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,aACC,SAAS,EAAE,EAAE,CACZ,sDAAsD,EACtD,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EACzD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAClE,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EACtD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EACN,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,GACX,CAAC"}
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../ui/card.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,EAAE,CACZ,6EAA6E,EAC7E,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B;;;;;;;;;GASG;AACH,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EACzD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC;;;;;;;GAOG;AACH,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,aACC,SAAS,EAAE,EAAE,CACZ,sDAAsD,EACtD,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC;;;;;;;GAOG;AACH,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EACzD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAClE,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EACtD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EACN,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,GACX,CAAC"}
|
package/dist/ui/command.d.ts
CHANGED
|
@@ -1,7 +1,61 @@
|
|
|
1
1
|
import { Command as CommandPrimitive } from "cmdk";
|
|
2
2
|
import type * as React from "react";
|
|
3
3
|
import { Dialog } from "./dialog";
|
|
4
|
+
/**
|
|
5
|
+
* Root command palette component.
|
|
6
|
+
*
|
|
7
|
+
* @remarks
|
|
8
|
+
* Built on the cmdk library. Provides a searchable command menu
|
|
9
|
+
* with keyboard navigation. Use with CommandInput, CommandList,
|
|
10
|
+
* CommandGroup, and CommandItem for a complete command palette.
|
|
11
|
+
*
|
|
12
|
+
* @param props - cmdk Command props
|
|
13
|
+
* @returns A command palette container
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Command>
|
|
18
|
+
* <CommandInput placeholder="Search..." />
|
|
19
|
+
* <CommandList>
|
|
20
|
+
* <CommandGroup heading="Actions">
|
|
21
|
+
* <CommandItem>Action 1</CommandItem>
|
|
22
|
+
* <CommandItem>Action 2</CommandItem>
|
|
23
|
+
* </CommandGroup>
|
|
24
|
+
* </CommandList>
|
|
25
|
+
* </Command>
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @see {@link CommandDialog} for modal variant
|
|
29
|
+
* @see {@link CommandInput} for search input
|
|
30
|
+
* @see {@link CommandList} for scrollable list
|
|
31
|
+
*/
|
|
4
32
|
declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
/**
|
|
34
|
+
* Command palette displayed in a modal dialog.
|
|
35
|
+
*
|
|
36
|
+
* @remarks
|
|
37
|
+
* Combines Command with Dialog for a modal command palette experience.
|
|
38
|
+
* Includes accessible title and description for screen readers.
|
|
39
|
+
*
|
|
40
|
+
* @param props - Dialog props plus title, description, and layout options
|
|
41
|
+
* @returns A modal command palette
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* <CommandDialog open={open} onOpenChange={setOpen}>
|
|
46
|
+
* <CommandInput placeholder="Type a command..." />
|
|
47
|
+
* <CommandList>
|
|
48
|
+
* <CommandEmpty>No results found.</CommandEmpty>
|
|
49
|
+
* <CommandGroup heading="Commands">
|
|
50
|
+
* <CommandItem>Profile</CommandItem>
|
|
51
|
+
* <CommandItem>Settings</CommandItem>
|
|
52
|
+
* </CommandGroup>
|
|
53
|
+
* </CommandList>
|
|
54
|
+
* </CommandDialog>
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
* @see {@link Command} for non-modal variant
|
|
58
|
+
*/
|
|
5
59
|
declare function CommandDialog({ title, description, children, className, showCloseButton, fullWidth, ...props }: React.ComponentProps<typeof Dialog> & {
|
|
6
60
|
title?: string;
|
|
7
61
|
description?: string;
|
|
@@ -9,13 +63,75 @@ declare function CommandDialog({ title, description, children, className, showCl
|
|
|
9
63
|
showCloseButton?: boolean;
|
|
10
64
|
fullWidth?: boolean;
|
|
11
65
|
}): import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
/**
|
|
67
|
+
* Search input for the command palette.
|
|
68
|
+
*
|
|
69
|
+
* @remarks
|
|
70
|
+
* Filters command items as the user types.
|
|
71
|
+
* Optionally includes a search button for explicit search trigger.
|
|
72
|
+
*
|
|
73
|
+
* @param props - cmdk Input props plus optional onSearchClick handler
|
|
74
|
+
* @returns A styled search input
|
|
75
|
+
*
|
|
76
|
+
* @see {@link Command} for parent component
|
|
77
|
+
*/
|
|
12
78
|
declare function CommandInput({ className, onSearchClick, ...props }: React.ComponentProps<typeof CommandPrimitive.Input> & {
|
|
13
|
-
onSearchClick
|
|
79
|
+
onSearchClick?: () => Promise<void>;
|
|
14
80
|
}): import("react/jsx-runtime").JSX.Element;
|
|
81
|
+
/**
|
|
82
|
+
* Scrollable list container for command items.
|
|
83
|
+
*
|
|
84
|
+
* @remarks
|
|
85
|
+
* Contains CommandGroup and CommandItem components.
|
|
86
|
+
* Fixed height with overflow scrolling.
|
|
87
|
+
*
|
|
88
|
+
* @see {@link CommandGroup} for grouping items
|
|
89
|
+
* @see {@link CommandItem} for individual items
|
|
90
|
+
*/
|
|
15
91
|
declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
|
|
92
|
+
/**
|
|
93
|
+
* Empty state displayed when no command items match.
|
|
94
|
+
*
|
|
95
|
+
* @remarks
|
|
96
|
+
* Shown automatically when the filter returns no results.
|
|
97
|
+
*
|
|
98
|
+
* @see {@link CommandList} for parent component
|
|
99
|
+
*/
|
|
16
100
|
declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
|
|
101
|
+
/**
|
|
102
|
+
* Group container for related command items.
|
|
103
|
+
*
|
|
104
|
+
* @remarks
|
|
105
|
+
* Use the heading prop to label the group.
|
|
106
|
+
*
|
|
107
|
+
* @see {@link CommandList} for parent component
|
|
108
|
+
* @see {@link CommandItem} for items within the group
|
|
109
|
+
*/
|
|
17
110
|
declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
|
|
111
|
+
/**
|
|
112
|
+
* Individual selectable item in the command palette.
|
|
113
|
+
*
|
|
114
|
+
* @remarks
|
|
115
|
+
* Supports keyboard navigation and selection.
|
|
116
|
+
* Shows selected state with background highlight.
|
|
117
|
+
*
|
|
118
|
+
* @see {@link CommandGroup} for grouping items
|
|
119
|
+
*/
|
|
18
120
|
declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
121
|
+
/**
|
|
122
|
+
* Keyboard shortcut hint displayed in a command item.
|
|
123
|
+
*
|
|
124
|
+
* @remarks
|
|
125
|
+
* Positioned at the end of the command item with muted styling.
|
|
126
|
+
*
|
|
127
|
+
* @example
|
|
128
|
+
* ```tsx
|
|
129
|
+
* <CommandItem>
|
|
130
|
+
* Save
|
|
131
|
+
* <CommandShortcut>⌘S</CommandShortcut>
|
|
132
|
+
* </CommandItem>
|
|
133
|
+
* ```
|
|
134
|
+
*/
|
|
19
135
|
declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
20
136
|
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, };
|
|
21
137
|
//# sourceMappingURL=command.d.ts.map
|
package/dist/ui/command.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../ui/command.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAEnD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EACN,MAAM,EAKN,MAAM,UAAU,CAAC;AAElB,iBAAS,OAAO,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAW/C;AAED,iBAAS,aAAa,CAAC,EACtB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAsB,EACtB,SAAiB,EACjB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,2CAiBA;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG;IACxD,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../ui/command.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAEnD,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EACN,MAAM,EAKN,MAAM,UAAU,CAAC;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,OAAO,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAW/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,aAAa,CAAC,EACtB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAsB,EACtB,SAAiB,EACjB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,2CAiBA;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,GAAG;IACxD,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACpC,2CAqBA;AAED;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,EACrB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQrD;AAED;;;;;;;;GAQG;AACH,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAWrD;AAED;;;;;;;;GAQG;AACH,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,eAAe,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW9B;AAED,OAAO,EACN,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GACf,CAAC"}
|
package/dist/ui/command.js
CHANGED
|
@@ -5,27 +5,143 @@ import { SearchIcon } from "lucide-react";
|
|
|
5
5
|
import { cn } from "../utils/cn";
|
|
6
6
|
import { Button } from "./button";
|
|
7
7
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "./dialog";
|
|
8
|
+
/**
|
|
9
|
+
* Root command palette component.
|
|
10
|
+
*
|
|
11
|
+
* @remarks
|
|
12
|
+
* Built on the cmdk library. Provides a searchable command menu
|
|
13
|
+
* with keyboard navigation. Use with CommandInput, CommandList,
|
|
14
|
+
* CommandGroup, and CommandItem for a complete command palette.
|
|
15
|
+
*
|
|
16
|
+
* @param props - cmdk Command props
|
|
17
|
+
* @returns A command palette container
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```tsx
|
|
21
|
+
* <Command>
|
|
22
|
+
* <CommandInput placeholder="Search..." />
|
|
23
|
+
* <CommandList>
|
|
24
|
+
* <CommandGroup heading="Actions">
|
|
25
|
+
* <CommandItem>Action 1</CommandItem>
|
|
26
|
+
* <CommandItem>Action 2</CommandItem>
|
|
27
|
+
* </CommandGroup>
|
|
28
|
+
* </CommandList>
|
|
29
|
+
* </Command>
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* @see {@link CommandDialog} for modal variant
|
|
33
|
+
* @see {@link CommandInput} for search input
|
|
34
|
+
* @see {@link CommandList} for scrollable list
|
|
35
|
+
*/
|
|
8
36
|
function Command({ className, ...props }) {
|
|
9
37
|
return (_jsx(CommandPrimitive, { className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-foreground", className), "data-slot": "command", ...props }));
|
|
10
38
|
}
|
|
39
|
+
/**
|
|
40
|
+
* Command palette displayed in a modal dialog.
|
|
41
|
+
*
|
|
42
|
+
* @remarks
|
|
43
|
+
* Combines Command with Dialog for a modal command palette experience.
|
|
44
|
+
* Includes accessible title and description for screen readers.
|
|
45
|
+
*
|
|
46
|
+
* @param props - Dialog props plus title, description, and layout options
|
|
47
|
+
* @returns A modal command palette
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```tsx
|
|
51
|
+
* <CommandDialog open={open} onOpenChange={setOpen}>
|
|
52
|
+
* <CommandInput placeholder="Type a command..." />
|
|
53
|
+
* <CommandList>
|
|
54
|
+
* <CommandEmpty>No results found.</CommandEmpty>
|
|
55
|
+
* <CommandGroup heading="Commands">
|
|
56
|
+
* <CommandItem>Profile</CommandItem>
|
|
57
|
+
* <CommandItem>Settings</CommandItem>
|
|
58
|
+
* </CommandGroup>
|
|
59
|
+
* </CommandList>
|
|
60
|
+
* </CommandDialog>
|
|
61
|
+
* ```
|
|
62
|
+
*
|
|
63
|
+
* @see {@link Command} for non-modal variant
|
|
64
|
+
*/
|
|
11
65
|
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, fullWidth = false, ...props }) {
|
|
12
66
|
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("overflow-hidden p-0", className), fullWidth: fullWidth, children: _jsx(Command, { className: "**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) })] }));
|
|
13
67
|
}
|
|
68
|
+
/**
|
|
69
|
+
* Search input for the command palette.
|
|
70
|
+
*
|
|
71
|
+
* @remarks
|
|
72
|
+
* Filters command items as the user types.
|
|
73
|
+
* Optionally includes a search button for explicit search trigger.
|
|
74
|
+
*
|
|
75
|
+
* @param props - cmdk Input props plus optional onSearchClick handler
|
|
76
|
+
* @returns A styled search input
|
|
77
|
+
*
|
|
78
|
+
* @see {@link Command} for parent component
|
|
79
|
+
*/
|
|
14
80
|
function CommandInput({ className, onSearchClick, ...props }) {
|
|
15
|
-
return (_jsxs("div", { className: "flex h-9 items-center px-4", "data-slot": "command-input-wrapper", children: [_jsx(CommandPrimitive.Input, { className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className), "data-slot": "command-input", ...props }), _jsx(Button, { className: "shrink-0", onClick: onSearchClick, children: _jsx(SearchIcon, { className: "size-4" }) })] }));
|
|
81
|
+
return (_jsxs("div", { className: "flex h-9 items-center px-4", "data-slot": "command-input-wrapper", children: [_jsx(CommandPrimitive.Input, { className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className), "data-slot": "command-input", ...props }), onSearchClick && (_jsx(Button, { className: "shrink-0", onClick: onSearchClick, children: _jsx(SearchIcon, { className: "size-4" }) }))] }));
|
|
16
82
|
}
|
|
83
|
+
/**
|
|
84
|
+
* Scrollable list container for command items.
|
|
85
|
+
*
|
|
86
|
+
* @remarks
|
|
87
|
+
* Contains CommandGroup and CommandItem components.
|
|
88
|
+
* Fixed height with overflow scrolling.
|
|
89
|
+
*
|
|
90
|
+
* @see {@link CommandGroup} for grouping items
|
|
91
|
+
* @see {@link CommandItem} for individual items
|
|
92
|
+
*/
|
|
17
93
|
function CommandList({ className, ...props }) {
|
|
18
94
|
return (_jsx(CommandPrimitive.List, { className: cn("h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden", className), "data-slot": "command-list", ...props }));
|
|
19
95
|
}
|
|
96
|
+
/**
|
|
97
|
+
* Empty state displayed when no command items match.
|
|
98
|
+
*
|
|
99
|
+
* @remarks
|
|
100
|
+
* Shown automatically when the filter returns no results.
|
|
101
|
+
*
|
|
102
|
+
* @see {@link CommandList} for parent component
|
|
103
|
+
*/
|
|
20
104
|
function CommandEmpty({ ...props }) {
|
|
21
105
|
return (_jsx(CommandPrimitive.Empty, { className: "py-6 text-center text-sm", "data-slot": "command-empty", ...props }));
|
|
22
106
|
}
|
|
107
|
+
/**
|
|
108
|
+
* Group container for related command items.
|
|
109
|
+
*
|
|
110
|
+
* @remarks
|
|
111
|
+
* Use the heading prop to label the group.
|
|
112
|
+
*
|
|
113
|
+
* @see {@link CommandList} for parent component
|
|
114
|
+
* @see {@link CommandItem} for items within the group
|
|
115
|
+
*/
|
|
23
116
|
function CommandGroup({ className, ...props }) {
|
|
24
117
|
return (_jsx(CommandPrimitive.Group, { className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs", className), "data-slot": "command-group", ...props }));
|
|
25
118
|
}
|
|
119
|
+
/**
|
|
120
|
+
* Individual selectable item in the command palette.
|
|
121
|
+
*
|
|
122
|
+
* @remarks
|
|
123
|
+
* Supports keyboard navigation and selection.
|
|
124
|
+
* Shows selected state with background highlight.
|
|
125
|
+
*
|
|
126
|
+
* @see {@link CommandGroup} for grouping items
|
|
127
|
+
*/
|
|
26
128
|
function CommandItem({ className, ...props }) {
|
|
27
129
|
return (_jsx(CommandPrimitive.Item, { className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted data-[selected=true]:text-foreground data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", className), "data-slot": "command-item", ...props }));
|
|
28
130
|
}
|
|
131
|
+
/**
|
|
132
|
+
* Keyboard shortcut hint displayed in a command item.
|
|
133
|
+
*
|
|
134
|
+
* @remarks
|
|
135
|
+
* Positioned at the end of the command item with muted styling.
|
|
136
|
+
*
|
|
137
|
+
* @example
|
|
138
|
+
* ```tsx
|
|
139
|
+
* <CommandItem>
|
|
140
|
+
* Save
|
|
141
|
+
* <CommandShortcut>⌘S</CommandShortcut>
|
|
142
|
+
* </CommandItem>
|
|
143
|
+
* ```
|
|
144
|
+
*/
|
|
29
145
|
function CommandShortcut({ className, ...props }) {
|
|
30
146
|
return (_jsx("span", { className: cn("ml-auto text-muted-foreground text-xs tracking-widest", className), "data-slot": "command-shortcut", ...props }));
|
|
31
147
|
}
|
package/dist/ui/command.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.js","sourceRoot":"","sources":["../../ui/command.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EACN,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACX,MAAM,UAAU,CAAC;AAElB,SAAS,OAAO,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACuC;IAC/C,OAAO,CACN,KAAC,gBAAgB,IAChB,SAAS,EAAE,EAAE,CACZ,sFAAsF,EACtF,SAAS,CACT,eACS,SAAS,KACf,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,KAAK,GAAG,iBAAiB,EACzB,WAAW,GAAG,gCAAgC,EAC9C,QAAQ,EACR,SAAS,EACT,eAAe,GAAG,IAAI,EACtB,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EAOR;IACA,OAAO,CACN,MAAC,MAAM,OAAK,KAAK,aAChB,MAAC,YAAY,IAAC,SAAS,EAAC,SAAS,aAChC,KAAC,WAAW,cAAE,KAAK,GAAe,EAClC,KAAC,iBAAiB,cAAE,WAAW,GAAqB,IACtC,EACf,KAAC,aAAa,IACb,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC/C,SAAS,EAAE,SAAS,YAEpB,KAAC,OAAO,IAAC,SAAS,EAAC,uZAAuZ,YACxa,QAAQ,GACA,GACK,IACR,CACT,CAAC;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EACrB,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EAGR;IACA,OAAO,CACN,eACC,SAAS,EAAC,4BAA4B,eAC5B,uBAAuB,aAEjC,KAAC,gBAAgB,CAAC,KAAK,IACtB,SAAS,EAAE,EAAE,CACZ,4JAA4J,EAC5J,SAAS,CACT,eACS,eAAe,KACrB,KAAK,GACR,
|
|
1
|
+
{"version":3,"file":"command.js","sourceRoot":"","sources":["../../ui/command.tsx"],"names":[],"mappings":"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"}
|