@sdata/web-vue 3.9.0 → 3.11.0

package/es/index.css

@@ -14980,7 +14980,7 @@ body.sd-tour-active .sd-tour-popover * {
   min-width: 0;
   min-height: 0;
 }
-.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-audio-player, .sd-file-previewer-video, .sd-file-previewer-pdf {
+.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-audio-player, .sd-file-previewer-video {
   display: block;
   width: 100%;
   height: 100%;
@@ -15023,12 +15023,60 @@ body.sd-tour-active .sd-tour-popover * {
   width: 100%;
 }
 .sd-file-previewer-pdf {
-  background: var(--sd-color-bg-2);
-  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  height: 100%;
+}
+.sd-file-previewer-pdf-canvas-wrap {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--sd-color-bg-1);
   border-radius: var(--sd-border-radius-medium);
 }
-.sd-file-previewer-inline .sd-file-previewer-pdf {
-  border-radius: 0;
+.sd-file-previewer-pdf-canvas {
+  display: block;
+}
+.sd-file-previewer-pdf-toolbar {
+  display: flex;
+  flex-shrink: 0;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  color: var(--sd-color-white);
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-file-previewer-pdf-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sd-border-radius-small);
+  cursor: pointer;
+}
+.sd-file-previewer-pdf-btn:disabled {
+  color: var(--sd-color-fill-3);
+  cursor: not-allowed;
+}
+.sd-file-previewer-pdf-page {
+  min-width: 64px;
+  font-size: 14px;
+  text-align: center;
 }
 .sd-file-previewer-close-btn {
   position: absolute;
@@ -17753,6 +17801,210 @@ body.sd-tour-active .sd-tour-popover * {
   box-shadow: 0 4px 10px rgb(var(--sd-gray-1), 40%);
 }
 
+.sd-selectable-card {
+  position: relative;
+  box-sizing: border-box;
+  color: var(--sd-color-text-1);
+  background: var(--sd-color-bg-2);
+  border: 1px solid var(--sd-color-neutral-3);
+  border-radius: var(--sd-border-radius-large);
+  cursor: pointer;
+  transition: color 0.2s cubic-bezier(0, 0, 1, 1), background-color 0.2s cubic-bezier(0, 0, 1, 1), border-color 0.2s cubic-bezier(0, 0, 1, 1), box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
+}
+.sd-selectable-card::after {
+  position: absolute;
+  background: transparent;
+  border-radius: inherit;
+  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
+  content: "";
+  pointer-events: none;
+  inset: 0;
+}
+@media (hover: hover) {
+  .sd-selectable-card:not(.sd-selectable-card--disabled):hover::after {
+    background: rgba(0, 0, 0, 0.05);
+  }
+}
+.sd-selectable-card:not(.sd-selectable-card--disabled):active::after {
+  background: rgba(0, 0, 0, 0.1);
+}
+.sd-selectable-card:has(.sd-selectable-card-input:focus-visible) {
+  outline: 2px solid rgb(var(--sd-primary-6));
+  outline-offset: 2px;
+}
+.sd-selectable-card-body {
+  display: flex;
+  min-width: 0;
+}
+.sd-selectable-card-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.sd-selectable-card-figure {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--sd-selectable-card-accent);
+  font-size: 2em;
+}
+.sd-selectable-card-title {
+  color: var(--sd-color-text-2);
+  font-size: 14px;
+}
+.sd-selectable-card-value {
+  color: var(--sd-color-text-1);
+  font-weight: 600;
+  line-height: 1.25;
+}
+.sd-selectable-card-description, .sd-selectable-card-default {
+  color: var(--sd-color-text-3);
+  font-size: 13px;
+  line-height: 1.5715;
+}
+.sd-selectable-card-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.sd-selectable-card--layout-horizontal .sd-selectable-card-body {
+  flex-direction: row;
+  align-items: center;
+}
+.sd-selectable-card--layout-vertical .sd-selectable-card-body {
+  flex-direction: column;
+}
+.sd-selectable-card--align-center .sd-selectable-card-body, .sd-selectable-card--align-center .sd-selectable-card-content {
+  align-items: center;
+  text-align: center;
+}
+.sd-selectable-card--size-small {
+  padding: 12px;
+}
+.sd-selectable-card--size-small .sd-selectable-card-body, .sd-selectable-card--size-small .sd-selectable-card-content {
+  gap: 8px;
+}
+.sd-selectable-card--size-small .sd-selectable-card-value {
+  font-size: 16px;
+}
+.sd-selectable-card--size-medium {
+  padding: 16px;
+}
+.sd-selectable-card--size-medium .sd-selectable-card-body, .sd-selectable-card--size-medium .sd-selectable-card-content {
+  gap: 12px;
+}
+.sd-selectable-card--size-medium .sd-selectable-card-value {
+  font-size: 20px;
+}
+.sd-selectable-card--size-large {
+  padding: 24px;
+}
+.sd-selectable-card--size-large .sd-selectable-card-body, .sd-selectable-card--size-large .sd-selectable-card-content {
+  gap: 20px;
+}
+.sd-selectable-card--size-large .sd-selectable-card-value {
+  font-size: 24px;
+}
+.sd-selectable-card--color-red {
+  --sd-selectable-card-accent: rgb(var(--sd-red-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-red-1));
+  --sd-selectable-card-border: rgb(var(--sd-red-6));
+}
+.sd-selectable-card--color-orangered {
+  --sd-selectable-card-accent: rgb(var(--sd-orangered-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-orangered-1));
+  --sd-selectable-card-border: rgb(var(--sd-orangered-6));
+}
+.sd-selectable-card--color-orange {
+  --sd-selectable-card-accent: rgb(var(--sd-orange-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-orange-1));
+  --sd-selectable-card-border: rgb(var(--sd-orange-6));
+}
+.sd-selectable-card--color-gold {
+  --sd-selectable-card-accent: rgb(var(--sd-gold-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-gold-1));
+  --sd-selectable-card-border: rgb(var(--sd-gold-6));
+}
+.sd-selectable-card--color-lime {
+  --sd-selectable-card-accent: rgb(var(--sd-lime-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-lime-1));
+  --sd-selectable-card-border: rgb(var(--sd-lime-6));
+}
+.sd-selectable-card--color-green {
+  --sd-selectable-card-accent: rgb(var(--sd-green-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-green-1));
+  --sd-selectable-card-border: rgb(var(--sd-green-6));
+}
+.sd-selectable-card--color-cyan {
+  --sd-selectable-card-accent: rgb(var(--sd-cyan-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-cyan-1));
+  --sd-selectable-card-border: rgb(var(--sd-cyan-6));
+}
+.sd-selectable-card--color-blue {
+  --sd-selectable-card-accent: rgb(var(--sd-blue-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-blue-1));
+  --sd-selectable-card-border: rgb(var(--sd-blue-6));
+}
+.sd-selectable-card--color-sdblue {
+  --sd-selectable-card-accent: rgb(var(--sd-sdblue-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-sdblue-1));
+  --sd-selectable-card-border: rgb(var(--sd-sdblue-6));
+}
+.sd-selectable-card--color-purple {
+  --sd-selectable-card-accent: rgb(var(--sd-purple-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-purple-1));
+  --sd-selectable-card-border: rgb(var(--sd-purple-6));
+}
+.sd-selectable-card--color-pinkpurple {
+  --sd-selectable-card-accent: rgb(var(--sd-pinkpurple-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-pinkpurple-1));
+  --sd-selectable-card-border: rgb(var(--sd-pinkpurple-6));
+}
+.sd-selectable-card--color-magenta {
+  --sd-selectable-card-accent: rgb(var(--sd-magenta-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-magenta-1));
+  --sd-selectable-card-border: rgb(var(--sd-magenta-6));
+}
+.sd-selectable-card--color-gray {
+  --sd-selectable-card-accent: rgb(var(--sd-gray-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-gray-2));
+  --sd-selectable-card-border: rgb(var(--sd-gray-6));
+}
+.sd-selectable-card--selected {
+  border-color: var(--sd-selectable-card-border);
+  box-shadow: inset 0 0 0 2px var(--sd-selectable-card-border);
+}
+.sd-selectable-card--selected.sd-selectable-card--soft {
+  color: var(--sd-selectable-card-accent);
+  background: var(--sd-selectable-card-soft-bg);
+}
+.sd-selectable-card--selected.sd-selectable-card--filled {
+  color: #fff;
+  background: var(--sd-selectable-card-border);
+}
+.sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-title, .sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-value, .sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-description, .sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-default, .sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-figure {
+  color: inherit;
+}
+.sd-selectable-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.sd-selectable-card-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
 .sd-calendar--default-theme,
 [class$=-calendar--default-theme] {
   --sd-calendar-primary-color: rgb(var(--sd-primary-6));

package/es/index.d.ts

@@ -26,6 +26,8 @@ export { default as Card, CardGrid, CardMeta } from './card';
 export { default as Calendar } from './calendar';
 export type { CalendarInstance } from './calendar';
 export type { CardGridInstance, CardInstance, CardMetaInstance } from './card';
+export { default as SelectableCard } from './selectable-card';
+export type { SelectableCardAlign, SelectableCardColor, SelectableCardInstance, SelectableCardLayout, SelectableCardSize, SelectableCardSizeValue, SelectableCardVariant, } from './selectable-card';
 export { default as Carousel, CarouselItem } from './carousel';
 export type { CarouselArrowType, CarouselAutoPlayConfig, CarouselIndicatorPosition, CarouselIndicatorType, CarouselInstance, CarouselItemInstance, CarouselTriggerEvent, } from './carousel';
 export { default as Cascader, CascaderPanel } from './cascader';
@@ -70,7 +72,7 @@ export type { ColProps, GridColInstance, GridInstance, GridItemInstance, GridIte
 export { default as Icon } from './icon-component';
 export type { IconInstance, IconProps } from './icon-component';
 export { default as FilePreviewer } from './file-previewer';
-export type { FilePreviewerContentSlotProps, FilePreviewerImageProps, FilePreviewerInstance, FilePreviewerMediaProps, FilePreviewerMediaSkin, FilePreviewerPdfProps, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './file-previewer';
+export type { FilePreviewerContentSlotProps, FilePreviewerImageProps, FilePreviewerImageSlotProps, FilePreviewerInstance, FilePreviewerMediaProps, FilePreviewerMediaSkin, FilePreviewerMediaSlotProps, FilePreviewerPdfProps, FilePreviewerPdfRotation, FilePreviewerPdfSlotProps, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './file-previewer';
 export { default as Image, ImagePreviewAction, ImagePreview, ImagePreviewGroup } from './image';
 export type { ImageInstance, ImagePreviewActionInstance, ImagePreviewInstance, ImagePreviewGroupInstance, } from './image';
 export { default as Input, InputGroup, InputPassword, InputSearch } from './input';

package/es/index.js

@@ -113,6 +113,7 @@ import QrCode from "./qr-code/index.js";
 import ResizeBox from "./resize-box/index.js";
 import Result from "./result/index.js";
 import Secret from "./secret/index.js";
+import SelectableCard from "./selectable-card/index.js";
 import line_default from "./skeleton/line.js";
 import shape_default from "./skeleton/shape.js";
 import Skeleton from "./skeleton/index.js";
@@ -144,4 +145,4 @@ import Typography from "./typography/index.js";
 import Upload from "./upload/index.js";
 import Watermark from "./watermark/index.js";
 import SDVue from "./sd-vue.js";
-export { A2UI_0_8, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, month_picker_default as MonthPicker, Notification, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, ResizeBox, Result, grid_row_default as Row, Scrollbar, Secret, Select, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, defineJsonFormComponents, defineJsonFormSchemas, getCssVarToken, getLocale, useFormItem, useLocale };
+export { A2UI_0_8, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, month_picker_default as MonthPicker, Notification, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, ResizeBox, Result, grid_row_default as Row, Scrollbar, Secret, Select, SelectableCard, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, defineJsonFormComponents, defineJsonFormSchemas, getCssVarToken, getLocale, useFormItem, useLocale };

package/es/index.scss

@@ -75,6 +75,7 @@
 @use '@components/cascader/style/index.scss' as *;
 @use '@components/carousel/style/index.scss' as *;
 @use '@components/card/style/index.scss' as *;
+@use '@components/selectable-card/style/index.scss' as *;
 @use '@components/calendar/style/index.scss' as *;
 @use '@components/button/style/index.scss' as *;
 @use '@components/breadcrumb/style/index.scss' as *;

package/es/sd-vue.js

@@ -112,6 +112,7 @@ import QrCode from "./qr-code/index.js";
 import ResizeBox from "./resize-box/index.js";
 import Result from "./result/index.js";
 import Secret from "./secret/index.js";
+import SelectableCard from "./selectable-card/index.js";
 import line_default from "./skeleton/line.js";
 import shape_default from "./skeleton/shape.js";
 import Skeleton from "./skeleton/index.js";
@@ -155,6 +156,7 @@ var components = {
 	Badge,
 	Calendar,
 	Card,
+	SelectableCard,
 	Carousel,
 	Collapse,
 	Comment,

package/es/selectable-card/index.d.ts

@@ -0,0 +1,88 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _SelectableCard from './selectable-card.vue';
+declare const SelectableCard: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+        label: string;
+        isSelected: boolean;
+        isDisabled?: boolean;
+        color?: import("./types").SelectableCardColor;
+        variant?: import("./types").SelectableCardVariant;
+        size?: import("./types").SelectableCardSize;
+        layout?: import("./types").SelectableCardLayout;
+        align?: import("./types").SelectableCardAlign;
+        padding?: import("./types").SelectableCardSizeValue;
+        title?: string;
+        value?: string | number;
+        description?: string;
+        width?: import("./types").SelectableCardSizeValue;
+        height?: import("./types").SelectableCardSizeValue;
+        maxWidth?: import("./types").SelectableCardSizeValue;
+    }> & Readonly<{
+        onChange?: ((isSelected: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (isSelected: boolean) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        label: string;
+        isSelected: boolean;
+        isDisabled?: boolean;
+        color?: import("./types").SelectableCardColor;
+        variant?: import("./types").SelectableCardVariant;
+        size?: import("./types").SelectableCardSize;
+        layout?: import("./types").SelectableCardLayout;
+        align?: import("./types").SelectableCardAlign;
+        padding?: import("./types").SelectableCardSizeValue;
+        title?: string;
+        value?: string | number;
+        description?: string;
+        width?: import("./types").SelectableCardSizeValue;
+        height?: import("./types").SelectableCardSizeValue;
+        maxWidth?: import("./types").SelectableCardSizeValue;
+    }> & Readonly<{
+        onChange?: ((isSelected: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{
+    label: string;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    color?: import("./types").SelectableCardColor;
+    variant?: import("./types").SelectableCardVariant;
+    size?: import("./types").SelectableCardSize;
+    layout?: import("./types").SelectableCardLayout;
+    align?: import("./types").SelectableCardAlign;
+    padding?: import("./types").SelectableCardSizeValue;
+    title?: string;
+    value?: string | number;
+    description?: string;
+    width?: import("./types").SelectableCardSizeValue;
+    height?: import("./types").SelectableCardSizeValue;
+    maxWidth?: import("./types").SelectableCardSizeValue;
+}> & Readonly<{
+    onChange?: ((isSelected: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (isSelected: boolean) => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: () => unknown;
+        figure?: () => unknown;
+        title?: () => unknown;
+        value?: () => unknown;
+        description?: () => unknown;
+        actions?: () => unknown;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type SelectableCardInstance = InstanceType<typeof _SelectableCard>;
+export type { SelectableCardAlign, SelectableCardColor, SelectableCardLayout, SelectableCardSize, SelectableCardSizeValue, SelectableCardVariant, } from './types';
+export default SelectableCard;

package/es/selectable-card/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import selectable_card_default from "./selectable-card.js";
+//#region components/selectable-card/index.ts
+var SelectableCard = Object.assign(selectable_card_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + selectable_card_default.name, selectable_card_default);
+} });
+//#endregion
+export { SelectableCard as default };

package/es/selectable-card/selectable-card.js

@@ -0,0 +1,5 @@
+import selectable_card_vue_vue_type_script_setup_true_lang_default from "./selectable-card.vue_vue_type_script_setup_true_lang.js";
+//#region components/selectable-card/selectable-card.vue
+var selectable_card_default = selectable_card_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { selectable_card_default as default };

package/es/selectable-card/selectable-card.vue.d.ts

@@ -0,0 +1,39 @@
+import type { SelectableCardAlign, SelectableCardColor, SelectableCardLayout, SelectableCardSize, SelectableCardSizeValue, SelectableCardVariant } from './types';
+type __VLS_Props = {
+    label: string;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    color?: SelectableCardColor;
+    variant?: SelectableCardVariant;
+    size?: SelectableCardSize;
+    layout?: SelectableCardLayout;
+    align?: SelectableCardAlign;
+    padding?: SelectableCardSizeValue;
+    title?: string;
+    value?: string | number;
+    description?: string;
+    width?: SelectableCardSizeValue;
+    height?: SelectableCardSizeValue;
+    maxWidth?: SelectableCardSizeValue;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+    figure?: () => unknown;
+    title?: () => unknown;
+    value?: () => unknown;
+    description?: () => unknown;
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (isSelected: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((isSelected: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/selectable-card/selectable-card.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,115 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useId } from "vue";
+//#region components/selectable-card/selectable-card.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-selected", "data-variant"];
+var _hoisted_2 = [
+	"aria-label",
+	"checked",
+	"disabled"
+];
+var selectable_card_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "SelectableCard" }), {}, {
+	__name: "selectable-card",
+	props: {
+		label: {},
+		isSelected: { type: Boolean },
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		color: { default: "sdblue" },
+		variant: { default: "outline" },
+		size: { default: "medium" },
+		layout: { default: "vertical" },
+		align: { default: "start" },
+		padding: {},
+		title: {},
+		value: {},
+		description: {},
+		width: {},
+		height: {},
+		maxWidth: {}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const prefixCls = getPrefixCls("selectable-card");
+		const inputId = `selectable-card-${useId()}`;
+		const classes = computed(() => [
+			prefixCls,
+			`${prefixCls}--color-${__props.color}`,
+			`${prefixCls}--${__props.variant}`,
+			`${prefixCls}--size-${__props.size}`,
+			`${prefixCls}--layout-${__props.layout}`,
+			`${prefixCls}--align-${__props.align}`,
+			{
+				[`${prefixCls}--selected`]: __props.isSelected,
+				[`${prefixCls}--disabled`]: __props.isDisabled
+			}
+		]);
+		function toCssSize(value, spacing = false) {
+			if (value === void 0) return void 0;
+			return typeof value === "number" ? `${spacing ? value * 4 : value}px` : value;
+		}
+		const rootStyle = computed(() => ({
+			padding: toCssSize(__props.padding, true),
+			width: toCssSize(__props.width),
+			height: toCssSize(__props.height),
+			maxWidth: toCssSize(__props.maxWidth)
+		}));
+		function toggle() {
+			if (!__props.isDisabled) emit("change", !__props.isSelected);
+		}
+		function handleCardClick(event) {
+			if (__props.isDisabled) return;
+			if (event.target.closest("a, button, input, select, textarea, [role=\"button\"]")) return;
+			toggle();
+		}
+		function handleInputChange() {
+			toggle();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(classes.value),
+				style: normalizeStyle(rootStyle.value),
+				"data-selected": __props.isSelected,
+				"data-variant": __props.variant,
+				onClick: handleCardClick
+			}, [createElementVNode("input", {
+				id: inputId,
+				class: normalizeClass(`${unref(prefixCls)}-input`),
+				type: "checkbox",
+				"aria-label": __props.label,
+				checked: __props.isSelected,
+				disabled: __props.isDisabled,
+				onChange: handleInputChange
+			}, null, 42, _hoisted_2), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-body`) }, [_ctx.$slots.figure ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(`${unref(prefixCls)}-figure`)
+			}, [renderSlot(_ctx.$slots, "figure")], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-content`) }, [
+				_ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-title`)
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("", true),
+				_ctx.$slots.value || __props.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-value`)
+				}, [renderSlot(_ctx.$slots, "value", {}, () => [createTextVNode(toDisplayString(__props.value), 1)])], 2)) : createCommentVNode("", true),
+				_ctx.$slots.description || __props.description ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(`${unref(prefixCls)}-description`)
+				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 2)) : createCommentVNode("", true),
+				_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(`${unref(prefixCls)}-default`)
+				}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
+				_ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
+					key: 4,
+					class: normalizeClass(`${unref(prefixCls)}-actions`)
+				}, [renderSlot(_ctx.$slots, "actions")], 2)) : createCommentVNode("", true)
+			], 2)], 2)], 14, _hoisted_1);
+		};
+	}
+}));
+//#endregion
+export { selectable_card_vue_vue_type_script_setup_true_lang_default as default };

package/es/selectable-card/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";