@atmos.build/ui 0.1.7 → 0.1.9
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.
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from '../lib/cn.js';
|
|
4
4
|
export function EmptyState({ icon: Icon, title, description, action, className, busy, }) {
|
|
5
|
-
return (_jsxs("div", { role: "status", className: cn('flex flex-col items-center justify-center gap-2 py-10 px-6 text-center', className), children: [Icon ? (_jsx(Icon, { className: cn('size-
|
|
5
|
+
return (_jsxs("div", { role: "status", className: cn('flex flex-col items-center justify-center gap-2 py-10 px-6 text-center', className), children: [Icon ? (_jsx(Icon, { className: cn('size-4 text-muted-foreground/60', busy && 'animate-spin motion-reduce:animate-none'), strokeWidth: 1.5, "aria-hidden": true })) : null, _jsx("div", { className: "text-[13px] font-normal text-muted-foreground", children: title }), description ? (_jsx("div", { className: "text-[12px] text-muted-foreground max-w-[36ch]", children: description })) : null, action ? _jsx("div", { className: "mt-2", children: action }) : null] }));
|
|
6
6
|
}
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const selectableCardVariants: (props?: ({
|
|
4
4
|
layout?: "grid" | "row" | null | undefined;
|
|
5
|
+
appearance?: "list" | "card" | null | undefined;
|
|
5
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
7
|
type SelectableCardOwnProps = {
|
|
7
8
|
selected?: boolean;
|
|
@@ -19,6 +20,7 @@ type SelectableCardOwnProps = {
|
|
|
19
20
|
export type SelectableCardProps = Omit<React.ComponentPropsWithoutRef<'button'>, keyof SelectableCardOwnProps | 'value'> & SelectableCardOwnProps & VariantProps<typeof selectableCardVariants>;
|
|
20
21
|
declare const SelectableCard: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value" | keyof SelectableCardOwnProps> & SelectableCardOwnProps & VariantProps<(props?: ({
|
|
21
22
|
layout?: "grid" | "row" | null | undefined;
|
|
23
|
+
appearance?: "list" | "card" | null | undefined;
|
|
22
24
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
|
|
23
25
|
export type SelectableCardGroupProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> & {
|
|
24
26
|
value?: string | null;
|
|
@@ -30,4 +32,4 @@ declare function SelectableCardGroup({ value, onChange, orientation, className,
|
|
|
30
32
|
declare const SelectableCardGroupItem: React.ForwardRefExoticComponent<Omit<SelectableCardProps, "role" | "selected"> & {
|
|
31
33
|
value: string;
|
|
32
34
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
33
|
-
export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants
|
|
35
|
+
export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants };
|
|
@@ -12,10 +12,18 @@ const selectableCardVariants = cva([
|
|
|
12
12
|
], {
|
|
13
13
|
variants: {
|
|
14
14
|
layout: { row: 'items-center gap-3 p-3', grid: 'flex-col items-start gap-2 p-4' },
|
|
15
|
+
appearance: {
|
|
16
|
+
card: '',
|
|
17
|
+
list: [
|
|
18
|
+
'border-transparent bg-transparent shadow-none',
|
|
19
|
+
'hover:border-transparent hover:bg-accent/60',
|
|
20
|
+
'data-[selected=true]:border-transparent data-[selected=true]:bg-accent/70 data-[selected=true]:shadow-none data-[selected=true]:ring-0',
|
|
21
|
+
],
|
|
22
|
+
},
|
|
15
23
|
},
|
|
16
|
-
defaultVariants: { layout: 'row' },
|
|
24
|
+
defaultVariants: { layout: 'row', appearance: 'card' },
|
|
17
25
|
});
|
|
18
|
-
const SelectableCard = React.forwardRef(function SelectableCard({ selected = false, onSelect, icon, title, description, trailing, hideIndicator = false, indicator = 'check', role = 'radio', layout = 'row', disabled, className, children, onClick, onKeyDown, ...props }, ref) {
|
|
26
|
+
const SelectableCard = React.forwardRef(function SelectableCard({ selected = false, onSelect, icon, title, description, trailing, hideIndicator = false, indicator = 'check', role = 'radio', layout = 'row', appearance = 'card', disabled, className, children, onClick, onKeyDown, ...props }, ref) {
|
|
19
27
|
const handleClick = (event) => {
|
|
20
28
|
onClick?.(event);
|
|
21
29
|
if (!event.defaultPrevented && !disabled)
|
|
@@ -30,8 +38,10 @@ const SelectableCard = React.forwardRef(function SelectableCard({ selected = fal
|
|
|
30
38
|
};
|
|
31
39
|
const showIndicator = !hideIndicator && trailing === undefined;
|
|
32
40
|
const trailingNode = trailing ??
|
|
33
|
-
(showIndicator && indicator === 'radio' ? (_jsx("span", { "aria-hidden": true, className: cn('flex size-[18px] shrink-0 items-center justify-center rounded-full border transition-colors', layout === 'grid' && 'absolute end-3 top-3', selected
|
|
34
|
-
|
|
41
|
+
(showIndicator && indicator === 'radio' ? (_jsx("span", { "aria-hidden": true, className: cn('flex size-[18px] shrink-0 items-center justify-center rounded-full border transition-colors', layout === 'grid' && 'absolute end-3 top-3', selected
|
|
42
|
+
? 'border-primary'
|
|
43
|
+
: 'border-border group-hover/selectable-card:border-primary/50'), children: _jsx("span", { className: cn('bg-primary size-2.5 rounded-full transition-transform', selected ? 'scale-100' : 'scale-0') }) })) : showIndicator ? (_jsx(Check, { "aria-hidden": true, className: cn('text-primary size-4 shrink-0 transition-opacity', layout === 'grid' && 'absolute end-3 top-3', selected ? 'opacity-100' : 'opacity-0'), strokeWidth: 2 })) : null);
|
|
44
|
+
return (_jsxs("button", { ref: ref, type: "button", role: role, "aria-checked": selected, "aria-disabled": disabled || undefined, disabled: disabled, "data-slot": "selectable-card", "data-selected": selected, "data-layout": layout, "data-appearance": appearance, onClick: handleClick, onKeyDown: handleKeyDown, className: cn(selectableCardVariants({ layout, appearance }), className), ...props, children: [icon != null ? (_jsx("span", { "data-slot": "selectable-card-icon", className: "flex shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: icon })) : null, children, title != null || description != null ? (_jsxs("span", { "data-slot": "selectable-card-body", className: "min-w-0 flex-1", children: [title != null ? (_jsx("span", { className: "block truncate text-sm font-medium", children: title })) : null, description != null ? (_jsx("span", { className: "text-muted-foreground mt-0.5 block text-xs leading-snug", children: description })) : null] })) : null, trailingNode] }));
|
|
35
45
|
});
|
|
36
46
|
const SelectableCardGroupContext = React.createContext(null);
|
|
37
47
|
function SelectableCardGroup({ value, onChange, orientation = 'vertical', className, children, onKeyDown, ...props }) {
|
|
@@ -63,4 +73,4 @@ const SelectableCardGroupItem = React.forwardRef(function SelectableCardGroupIte
|
|
|
63
73
|
context?.onChange?.(value);
|
|
64
74
|
}, ...props }));
|
|
65
75
|
});
|
|
66
|
-
export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants
|
|
76
|
+
export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants };
|