@stasho/ds 0.5.0 → 0.6.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stasho/ds",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "stasho design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
"./combobox": "./src/components/combobox/combobox.tsx",
|
|
42
42
|
"./slider": "./src/components/slider/slider.tsx",
|
|
43
43
|
"./radio-group": "./src/components/radio-group/radio-group.tsx",
|
|
44
|
+
"./selectable-card": "./src/components/selectable-card/selectable-card.tsx",
|
|
44
45
|
"./ui/skeleton": "./src/components/ui/skeleton.tsx",
|
|
45
46
|
"./multi-select": "./src/components/multi-select/multi-select.tsx",
|
|
46
47
|
"./pagination": "./src/components/pagination/pagination.tsx",
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import {
|
|
2
|
+
forwardRef,
|
|
3
|
+
type ButtonHTMLAttributes,
|
|
4
|
+
type ComponentPropsWithoutRef,
|
|
5
|
+
type ReactNode,
|
|
6
|
+
} from "react";
|
|
7
|
+
import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
|
|
8
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
9
|
+
import { Check } from "@phosphor-icons/react";
|
|
10
|
+
import { cn } from "@ac/lib/cn";
|
|
11
|
+
|
|
12
|
+
const selectableCardVariants = cva(
|
|
13
|
+
[
|
|
14
|
+
"relative rounded-lg border border-edge bg-surface text-left",
|
|
15
|
+
"transition-[colors,box-shadow]",
|
|
16
|
+
"hover:border-edge-hover",
|
|
17
|
+
"focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2",
|
|
18
|
+
"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-edge",
|
|
19
|
+
// selected (data-[state=on]) — only SelectableCard receives this state
|
|
20
|
+
"data-[state=on]:border-accent data-[state=on]:bg-accent/5",
|
|
21
|
+
].join(" "),
|
|
22
|
+
{
|
|
23
|
+
variants: {
|
|
24
|
+
padding: {
|
|
25
|
+
sm: "p-4",
|
|
26
|
+
md: "p-6",
|
|
27
|
+
lg: "p-8",
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
defaultVariants: {
|
|
31
|
+
padding: "md",
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
type CardPadding = VariantProps<typeof selectableCardVariants>;
|
|
37
|
+
|
|
38
|
+
type ActionCardProps = ButtonHTMLAttributes<HTMLButtonElement> &
|
|
39
|
+
CardPadding & {
|
|
40
|
+
children: ReactNode;
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(
|
|
44
|
+
({ padding, className, children, type, ...rest }, ref) => (
|
|
45
|
+
<button
|
|
46
|
+
ref={ref}
|
|
47
|
+
type={type ?? "button"}
|
|
48
|
+
className={cn(selectableCardVariants({ padding }), className)}
|
|
49
|
+
{...rest}
|
|
50
|
+
>
|
|
51
|
+
{children}
|
|
52
|
+
</button>
|
|
53
|
+
),
|
|
54
|
+
);
|
|
55
|
+
ActionCard.displayName = "ActionCard";
|
|
56
|
+
|
|
57
|
+
type SelectableCardGroupProps = ComponentPropsWithoutRef<
|
|
58
|
+
typeof ToggleGroupPrimitive.Root
|
|
59
|
+
>;
|
|
60
|
+
|
|
61
|
+
const SelectableCardGroup = forwardRef<
|
|
62
|
+
HTMLDivElement,
|
|
63
|
+
SelectableCardGroupProps
|
|
64
|
+
>(({ className, ...rest }, ref) => (
|
|
65
|
+
<ToggleGroupPrimitive.Root ref={ref} className={className} {...rest} />
|
|
66
|
+
));
|
|
67
|
+
SelectableCardGroup.displayName = "SelectableCardGroup";
|
|
68
|
+
|
|
69
|
+
type SelectableCardProps = ComponentPropsWithoutRef<
|
|
70
|
+
typeof ToggleGroupPrimitive.Item
|
|
71
|
+
> &
|
|
72
|
+
CardPadding;
|
|
73
|
+
|
|
74
|
+
const SelectableCard = forwardRef<HTMLButtonElement, SelectableCardProps>(
|
|
75
|
+
({ padding, className, children, ...rest }, ref) => (
|
|
76
|
+
<ToggleGroupPrimitive.Item
|
|
77
|
+
ref={ref}
|
|
78
|
+
className={cn(selectableCardVariants({ padding }), className)}
|
|
79
|
+
{...rest}
|
|
80
|
+
>
|
|
81
|
+
<span
|
|
82
|
+
data-testid="selectable-card-check"
|
|
83
|
+
aria-hidden="true"
|
|
84
|
+
className={cn(
|
|
85
|
+
"absolute right-3 top-3 text-accent",
|
|
86
|
+
"opacity-0 transition-opacity",
|
|
87
|
+
"[[data-state=on]_&]:opacity-100",
|
|
88
|
+
)}
|
|
89
|
+
>
|
|
90
|
+
<Check weight="bold" />
|
|
91
|
+
</span>
|
|
92
|
+
{children}
|
|
93
|
+
</ToggleGroupPrimitive.Item>
|
|
94
|
+
),
|
|
95
|
+
);
|
|
96
|
+
SelectableCard.displayName = "SelectableCard";
|
|
97
|
+
|
|
98
|
+
export {
|
|
99
|
+
ActionCard,
|
|
100
|
+
SelectableCard,
|
|
101
|
+
SelectableCardGroup,
|
|
102
|
+
selectableCardVariants,
|
|
103
|
+
type ActionCardProps,
|
|
104
|
+
type SelectableCardProps,
|
|
105
|
+
type SelectableCardGroupProps,
|
|
106
|
+
};
|