@wallarm-org/design-system 0.8.0 → 0.9.0

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import type { FC, HTMLAttributes, MouseEventHandler, ReactNode, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { cardVariants } from './classes';
+type CardVariantProps = Omit<VariantProps<typeof cardVariants>, 'interactive' | 'disabled'>;
+export interface CardProps extends CardVariantProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    ref?: Ref<HTMLDivElement>;
+    asChild?: boolean;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const Card: FC<CardProps>;
+export {};

package/dist/components/Card/Card.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { cardVariants } from "./classes.js";
+const INTERACTIVE_SELECTORS = 'a[href],button,input,select,textarea,[tabindex]';
+const Card = ({ ref, color = 'primary', asChild = false, disabled = false, className, children, ...props })=>{
+    const Comp = asChild ? Slot : 'div';
+    const interactive = Object.keys(props).some((key)=>key.startsWith('on') && 'function' == typeof props[key]);
+    const handleClick = (e)=>{
+        if (!props.onClick) return;
+        const target = e.target;
+        const card = e.currentTarget;
+        if (target !== card && target.closest(INTERACTIVE_SELECTORS) !== card) return;
+        props.onClick(e);
+    };
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        ref: ref,
+        "data-slot": "card",
+        tabIndex: interactive && !disabled ? 0 : void 0,
+        "aria-disabled": disabled || void 0,
+        onClick: disabled ? void 0 : handleClick,
+        className: cn(cardVariants({
+            color,
+            interactive,
+            disabled
+        }), className),
+        children: children
+    });
+};
+Card.displayName = 'Card';
+export { Card };

package/dist/components/Card/CardContent.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    asChild?: boolean;
+    children?: ReactNode;
+}
+export declare const CardContent: FC<CardContentProps>;

package/dist/components/Card/CardContent.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+const CardContent = ({ ref, asChild = false, className, children, ...props })=>{
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        ref: ref,
+        "data-slot": "card-content",
+        className: cn('px-16 text-md', className),
+        children: children
+    });
+};
+CardContent.displayName = 'CardContent';
+export { CardContent };

package/dist/components/Card/CardFooter.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    asChild?: boolean;
+    children?: ReactNode;
+}
+export declare const CardFooter: FC<CardFooterProps>;

package/dist/components/Card/CardFooter.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+const CardFooter = ({ ref, asChild = false, className, children, ...props })=>{
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        ref: ref,
+        "data-slot": "card-footer",
+        className: cn('mt-auto flex items-center justify-end gap-8 px-16', className),
+        children: children
+    });
+};
+CardFooter.displayName = 'CardFooter';
+export { CardFooter };

package/dist/components/Card/CardHeader.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    asChild?: boolean;
+    children?: ReactNode;
+}
+export declare const CardHeader: FC<CardHeaderProps>;

package/dist/components/Card/CardHeader.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+const CardHeader = ({ ref, asChild = false, className, children, ...props })=>{
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        ref: ref,
+        "data-slot": "card-header",
+        className: cn('flex items-center justify-between gap-8 px-16', className),
+        children: children
+    });
+};
+CardHeader.displayName = 'CardHeader';
+export { CardHeader };

package/dist/components/Card/CardTitle.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface CardTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+export declare const CardTitle: FC<CardTitleProps>;

package/dist/components/Card/CardTitle.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/index.js";
+const CardTitle = ({ ref, icon, className, children, ...props })=>/*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "card-title",
+        className: cn('flex items-center gap-8', className),
+        children: [
+            icon && /*#__PURE__*/ jsx("span", {
+                className: "shrink-0",
+                children: icon
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                size: "md",
+                weight: "medium",
+                color: "primary",
+                children: children
+            })
+        ]
+    });
+CardTitle.displayName = 'CardTitle';
+export { CardTitle };

package/dist/components/Card/classes.d.ts

@@ -0,0 +1,5 @@
+export declare const cardVariants: (props?: ({
+    color?: "primary" | "secondary" | null | undefined;
+    interactive?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Card/classes.js

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+const cardVariants = cva('flex flex-col gap-8 rounded-8 border-1 shadow-sm min-w-[240px] overflow-hidden py-16 transition-colors duration-200', {
+    variants: {
+        color: {
+            primary: 'bg-bg-surface-1 border-border-primary-light',
+            secondary: 'bg-bg-light-primary border-border-primary-light'
+        },
+        interactive: {
+            true: [
+                'cursor-pointer overlay',
+                'hover:not-disabled:overlay-states-primary-hover',
+                '[&:active:not(:has(a:active,button:active,input:active,select:active,textarea:active))]:not-disabled:overlay-states-primary-pressed',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-primary'
+            ],
+            false: ''
+        },
+        disabled: {
+            true: 'opacity-50 pointer-events-none cursor-not-allowed',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        color: 'primary',
+        interactive: false,
+        disabled: false
+    }
+});
+export { cardVariants };

package/dist/components/Card/index.d.ts

@@ -0,0 +1,6 @@
+export { Card, type CardProps } from './Card';
+export { CardContent, type CardContentProps } from './CardContent';
+export { CardFooter, type CardFooterProps } from './CardFooter';
+export { CardHeader, type CardHeaderProps } from './CardHeader';
+export { CardTitle, type CardTitleProps } from './CardTitle';
+export { cardVariants } from './classes';

package/dist/components/Card/index.js

@@ -0,0 +1,7 @@
+import { Card } from "./Card.js";
+import { CardContent } from "./CardContent.js";
+import { CardFooter } from "./CardFooter.js";
+import { CardHeader } from "./CardHeader.js";
+import { CardTitle } from "./CardTitle.js";
+import { cardVariants } from "./classes.js";
+export { Card, CardContent, CardFooter, CardHeader, CardTitle, cardVariants };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { Alert, AlertClose, type AlertCloseProps, type AlertColor, AlertContent, type AlertContentProps, AlertControls, type AlertControlsProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, AlertTitle, type AlertTitleProps, } from './components/Alert';
 export { Badge, type BadgeProps } from './components/Badge';
 export { Button, type ButtonProps } from './components/Button';
+export { Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, cardVariants, } from './components/Card';
 export { Checkbox, CheckboxDescription, type CheckboxDescriptionProps, CheckboxGroup, type CheckboxGroupProps, CheckboxIndicator, CheckboxLabel, type CheckboxLabelProps, type CheckboxProps, } from './components/Checkbox';
 export { Code, type CodeProps } from './components/Code';
 export { Country, CountryFlag, type CountryFlagProps, CountryName, type CountryNameProps, type CountryProps, } from './components/Country';

package/dist/index.js

@@ -1,6 +1,7 @@
 import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle } from "./components/Alert/index.js";
 import { Badge } from "./components/Badge/index.js";
 import { Button } from "./components/Button/index.js";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/Card/index.js";
 import { Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel } from "./components/Checkbox/index.js";
 import { Code } from "./components/Code/index.js";
 import { Country, CountryFlag, CountryName } from "./components/Country/index.js";
@@ -40,4 +41,4 @@ import { Toast, ToastActions, Toaster, toaster } from "./components/Toast/index.
 import { ToggleButton } from "./components/ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
-export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DateTime, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Flex, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, QueryBar, QueryBarChip, QueryBarFieldMenu, QueryBarOperatorMenu, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Skeleton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, Text, Textarea, ThemeProvider, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, proxyTypes, sourceLabels, toaster, useDrawerContext, useTheme, useTour, waitForStepEvent };
+export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DateTime, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Flex, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, QueryBar, QueryBarChip, QueryBarFieldMenu, QueryBarOperatorMenu, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Skeleton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, Text, Textarea, ThemeProvider, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, proxyTypes, sourceLabels, toaster, useDrawerContext, useTheme, useTour, waitForStepEvent };