@mks2508/mks-ui 0.5.2 → 0.5.7
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/react-ui/index.js +8 -3
- package/dist/react-ui/primitives/index.js +5 -0
- package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts +120 -0
- package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts.map +1 -0
- package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts +10 -0
- package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts.map +1 -0
- package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.js +190 -0
- package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.d.ts +7 -0
- package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.d.ts.map +1 -0
- package/dist/react-ui/primitives/waapi/Gooey/GooeyFilter.js +78 -0
- package/dist/react-ui/primitives/waapi/Gooey/MorphPath.d.ts +7 -0
- package/dist/react-ui/primitives/waapi/Gooey/MorphPath.d.ts.map +1 -0
- package/dist/react-ui/primitives/waapi/Gooey/MorphPath.js +51 -0
- package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts +94 -0
- package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.d.ts.map +1 -0
- package/dist/react-ui/primitives/waapi/Gooey/gooey-utils.js +182 -0
- package/dist/react-ui/primitives/waapi/Gooey/index.d.ts +28 -0
- package/dist/react-ui/primitives/waapi/Gooey/index.d.ts.map +1 -0
- package/dist/react-ui/primitives/waapi/Gooey/index.js +5 -0
- package/dist/react-ui/primitives/waapi/Gooey/useMorphPath.d.ts +7 -0
- package/dist/react-ui/primitives/waapi/Gooey/useMorphPath.d.ts.map +1 -0
- package/dist/react-ui/primitives/waapi/Gooey/useMorphPath.js +47 -0
- package/dist/react-ui/primitives/waapi/index.d.ts +2 -0
- package/dist/react-ui/primitives/waapi/index.d.ts.map +1 -1
- package/dist/react-ui/primitives/waapi/index.js +6 -0
- package/dist/react-ui/ui/DataCard/DataCard.styles.d.ts +26 -16
- package/dist/react-ui/ui/DataCard/DataCard.styles.d.ts.map +1 -1
- package/dist/react-ui/ui/DataCard/DataCard.styles.js +36 -74
- package/dist/react-ui/ui/DataCard/DataCard.types.d.ts +50 -70
- package/dist/react-ui/ui/DataCard/DataCard.types.d.ts.map +1 -1
- package/dist/react-ui/ui/DataCard/index.d.ts +24 -93
- package/dist/react-ui/ui/DataCard/index.d.ts.map +1 -1
- package/dist/react-ui/ui/DataCard/index.js +76 -118
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle-DOR3Ld-k.css +376 -0
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.css +376 -0
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.js +0 -0
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts +20 -8
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts.map +1 -1
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.js +55 -27
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts +69 -14
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts.map +1 -1
- package/dist/react-ui/ui/DynamicToggle/index.d.ts +22 -20
- package/dist/react-ui/ui/DynamicToggle/index.d.ts.map +1 -1
- package/dist/react-ui/ui/DynamicToggle/index.js +133 -96
- package/dist/react-ui/ui/Switch/index.js +1 -1
- package/dist/react-ui/ui/index.js +2 -2
- package/package.json +2 -2
- package/src/css.d.ts +1 -0
- package/src/react-ui/primitives/waapi/Gooey/Gooey.types.ts +141 -0
- package/src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx +217 -0
- package/src/react-ui/primitives/waapi/Gooey/GooeyFilter.tsx +77 -0
- package/src/react-ui/primitives/waapi/Gooey/MorphPath.tsx +58 -0
- package/src/react-ui/primitives/waapi/Gooey/gooey-utils.ts +253 -0
- package/src/react-ui/primitives/waapi/Gooey/index.ts +50 -0
- package/src/react-ui/primitives/waapi/Gooey/useMorphPath.ts +48 -0
- package/src/react-ui/primitives/waapi/index.ts +23 -0
- package/src/react-ui/ui/DataCard/DataCard.styles.ts +45 -101
- package/src/react-ui/ui/DataCard/DataCard.types.ts +52 -73
- package/src/react-ui/ui/DataCard/index.tsx +118 -184
- package/src/react-ui/ui/DynamicToggle/DynamicToggle.css +320 -94
- package/src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts +60 -40
- package/src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts +101 -14
- package/src/react-ui/ui/DynamicToggle/index.tsx +172 -96
- package/src/react-ui/ui/DynamicToggle/prototype-v7-ios.html +413 -0
- package/src/react-ui/ui/DynamicToggle/prototype-v7.html +615 -0
- package/src/react-ui/ui/DynamicToggle/prototype-v8-gooey-safari.html +560 -0
- package/src/react-ui/ui/DynamicToggle/prototype-v8b-react-structure.html +227 -0
- package/src/react-ui/ui/DynamicToggle/prototype.html +419 -0
- package/src/react-ui/ui/Switch/index.tsx +1 -1
- /package/dist/react-ui/blocks/Terminal/panel/{terminal-filter-dropdown.module-DAcl_XQZ.css → terminal-filter-dropdown.module-C6oDcFBS.css} +0 -0
- /package/dist/react-ui/blocks/Terminal/panel/{terminal-session-tabs.module-DNAop5e3.css → terminal-session-tabs.module-D_-sgyza.css} +0 -0
- /package/dist/react-ui/components/MorphingPopover/{morphing-popover.module-BJrjXisF.css → morphing-popover.module-B1ftlaYj.css} +0 -0
|
@@ -1,45 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DataCard type definitions.
|
|
3
|
+
*
|
|
4
|
+
* @module @mks2508/mks-ui/react/ui/DataCard
|
|
5
|
+
*/
|
|
1
6
|
import type { VariantProps } from 'class-variance-authority';
|
|
2
|
-
import type { SlotOverrides } from '../../../core/types';
|
|
7
|
+
import type { SlotOverrides, IBaseConfig } from '../../../core/types';
|
|
3
8
|
import type { dataCardVariants, DataCardSlot } from './DataCard.styles';
|
|
4
9
|
export type { DataCardSlot } from './DataCard.styles';
|
|
5
|
-
/**
|
|
6
|
-
* Available visual variants for DataCard.
|
|
7
|
-
* - 'default' - Standard glassmorphism with neutral borders
|
|
8
|
-
* - 'accent' - Cyan accent with primary glow
|
|
9
|
-
* - 'success' - Green accent for positive data
|
|
10
|
-
* - 'warning' - Amber accent for warnings
|
|
11
|
-
* - 'destructive' - Red accent for critical data
|
|
12
|
-
*/
|
|
10
|
+
/** Visual variant names */
|
|
13
11
|
export type DataCardVariant = 'default' | 'accent' | 'success' | 'warning' | 'destructive';
|
|
14
|
-
/**
|
|
15
|
-
* Size variants affecting padding and spacing.
|
|
16
|
-
* - 'compact' - Dense layout for dashboards
|
|
17
|
-
* - 'default' - Standard balanced spacing
|
|
18
|
-
* - 'spacious' - More breathing room
|
|
19
|
-
*/
|
|
12
|
+
/** Size variant names */
|
|
20
13
|
export type DataCardSize = 'compact' | 'default' | 'spacious';
|
|
21
14
|
/**
|
|
22
15
|
* Interaction state for state-based styling.
|
|
23
|
-
* Similar to Button's IButtonState pattern.
|
|
24
16
|
*/
|
|
25
17
|
export interface IDataCardState {
|
|
26
|
-
/** Whether card
|
|
18
|
+
/** Whether card is hovered */
|
|
27
19
|
hovered: boolean;
|
|
28
|
-
/** Whether card is pressed
|
|
20
|
+
/** Whether card is pressed */
|
|
29
21
|
pressed: boolean;
|
|
30
|
-
/** Whether card is disabled
|
|
22
|
+
/** Whether card is disabled */
|
|
31
23
|
disabled: boolean;
|
|
32
24
|
}
|
|
33
25
|
/**
|
|
34
26
|
* Configuration for DataCard behavior and animation.
|
|
35
|
-
*
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* <DataCard config={{ animateBrackets: true, counterStiffness: 150 }}>...</DataCard>
|
|
31
|
+
* ```
|
|
36
32
|
*/
|
|
37
|
-
export interface IDataCardConfig {
|
|
38
|
-
/** Enable
|
|
33
|
+
export interface IDataCardConfig extends IBaseConfig {
|
|
34
|
+
/** Enable corner bracket hover animation (default: true) */
|
|
39
35
|
animateBrackets?: boolean;
|
|
40
|
-
/** Spring stiffness for
|
|
36
|
+
/** Spring stiffness for CountingNumber (default: 90) */
|
|
41
37
|
counterStiffness?: number;
|
|
42
|
-
/** Spring damping for
|
|
38
|
+
/** Spring damping for CountingNumber (default: 10) */
|
|
43
39
|
counterDamping?: number;
|
|
44
40
|
}
|
|
45
41
|
/**
|
|
@@ -48,88 +44,72 @@ export interface IDataCardConfig {
|
|
|
48
44
|
* @example
|
|
49
45
|
* ```tsx
|
|
50
46
|
* <DataCard variant="accent" size="default">
|
|
51
|
-
* <
|
|
52
|
-
* <
|
|
47
|
+
* <DataCardLabel title="Revenue" description="This month" />
|
|
48
|
+
* <DataCardValue number={45678} unit="$" />
|
|
53
49
|
* </DataCard>
|
|
54
50
|
* ```
|
|
55
51
|
*/
|
|
56
52
|
export interface IDataCardProps extends VariantProps<typeof dataCardVariants> {
|
|
57
|
-
/** Visual style variant
|
|
53
|
+
/** Visual style variant */
|
|
58
54
|
variant?: DataCardVariant;
|
|
59
|
-
/** Size variant affecting spacing
|
|
55
|
+
/** Size variant affecting spacing */
|
|
60
56
|
size?: DataCardSize;
|
|
61
|
-
/** Whether card is disabled
|
|
57
|
+
/** Whether card is disabled */
|
|
62
58
|
disabled?: boolean;
|
|
63
|
-
/** Override classes
|
|
59
|
+
/** Override classes per slot */
|
|
64
60
|
slots?: SlotOverrides<DataCardSlot>;
|
|
65
|
-
/**
|
|
61
|
+
/** Behavior/animation configuration */
|
|
66
62
|
config?: IDataCardConfig;
|
|
67
|
-
/** CSS class or
|
|
63
|
+
/** CSS class or state-based class function */
|
|
68
64
|
className?: string | ((state: IDataCardState) => string | undefined);
|
|
69
|
-
/** CSS styles or
|
|
65
|
+
/** CSS styles or state-based styles function */
|
|
70
66
|
style?: React.CSSProperties | ((state: IDataCardState) => React.CSSProperties | undefined);
|
|
71
|
-
/** Enable glassmorphism
|
|
67
|
+
/** Enable glassmorphism blur (default: true) */
|
|
72
68
|
glass?: boolean;
|
|
73
|
-
/** Show corner brackets (default: true)
|
|
69
|
+
/** Show corner brackets (default: true) */
|
|
74
70
|
showBrackets?: boolean;
|
|
75
|
-
/** Child elements
|
|
71
|
+
/** Child elements */
|
|
76
72
|
children?: React.ReactNode;
|
|
77
73
|
}
|
|
78
|
-
/**
|
|
79
|
-
* Props for DataCardValue - displays animated number.
|
|
80
|
-
*/
|
|
74
|
+
/** Props for DataCardValue */
|
|
81
75
|
export interface IDataCardValueProps {
|
|
82
|
-
/** Target number to animate to
|
|
76
|
+
/** Target number to animate to */
|
|
83
77
|
number: number;
|
|
84
|
-
/** Label displayed above
|
|
78
|
+
/** Label displayed above number */
|
|
85
79
|
label?: string;
|
|
86
|
-
/** Unit/suffix
|
|
80
|
+
/** Unit/suffix after number */
|
|
87
81
|
unit?: string;
|
|
88
|
-
/** Decimal places
|
|
82
|
+
/** Decimal places (default: 0) */
|
|
89
83
|
decimalPlaces?: number;
|
|
90
|
-
/** Pad number with leading zeros
|
|
84
|
+
/** Pad number with leading zeros */
|
|
91
85
|
padStart?: boolean;
|
|
92
86
|
}
|
|
93
|
-
/**
|
|
94
|
-
* Props for DataCardLabel - title/description text.
|
|
95
|
-
*/
|
|
87
|
+
/** Props for DataCardLabel */
|
|
96
88
|
export interface IDataCardLabelProps extends React.ComponentProps<'div'> {
|
|
97
|
-
/** Primary title text
|
|
89
|
+
/** Primary title text */
|
|
98
90
|
title?: string;
|
|
99
|
-
/** Secondary description
|
|
91
|
+
/** Secondary description */
|
|
100
92
|
description?: string;
|
|
101
93
|
}
|
|
102
|
-
/**
|
|
103
|
-
* Props for DataCardToggle - interactive switch element.
|
|
104
|
-
*/
|
|
94
|
+
/** Props for DataCardToggle */
|
|
105
95
|
export interface IDataCardToggleProps {
|
|
106
|
-
/** Whether toggle is checked
|
|
96
|
+
/** Whether toggle is checked */
|
|
107
97
|
checked?: boolean;
|
|
108
|
-
/** Callback when toggle
|
|
98
|
+
/** Callback when toggle changes */
|
|
109
99
|
onCheckedChange?: (checked: boolean) => void;
|
|
110
|
-
/**
|
|
111
|
-
checkedIcon?: React.ReactNode;
|
|
112
|
-
/** Icon to show when unchecked (off). */
|
|
113
|
-
uncheckedIcon?: React.ReactNode;
|
|
114
|
-
/** Label for: toggle. */
|
|
100
|
+
/** Label for the toggle */
|
|
115
101
|
label?: string;
|
|
116
|
-
/** Override classes for toggle regions. */
|
|
117
|
-
slots?: SlotOverrides<DataCardSlot>;
|
|
118
102
|
}
|
|
119
|
-
/**
|
|
120
|
-
* Props for DataCardActions - action button container.
|
|
121
|
-
*/
|
|
103
|
+
/** Props for DataCardActions */
|
|
122
104
|
export interface IDataCardActionsProps extends React.ComponentProps<'div'> {
|
|
123
|
-
/**
|
|
105
|
+
/** Button alignment */
|
|
124
106
|
align?: 'start' | 'center' | 'end';
|
|
125
107
|
}
|
|
126
|
-
/**
|
|
127
|
-
* Props for DataCardBracket - decorative corner element.
|
|
128
|
-
*/
|
|
108
|
+
/** Props for DataCardBracket */
|
|
129
109
|
export interface IDataCardBracketProps extends React.ComponentProps<'div'> {
|
|
130
|
-
/**
|
|
110
|
+
/** Corner position */
|
|
131
111
|
position: 'tl' | 'tr' | 'bl' | 'br';
|
|
132
|
-
/**
|
|
112
|
+
/** Variant override */
|
|
133
113
|
variant?: 'default' | 'accent';
|
|
134
114
|
}
|
|
135
115
|
//# sourceMappingURL=DataCard.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataCard.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"DataCard.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/DataCard.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,127 +1,58 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { dataCardVariants } from './DataCard.styles';
|
|
3
2
|
import type { SlotOverrides } from '../../../core/types';
|
|
4
|
-
import type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps,
|
|
5
|
-
/**
|
|
6
|
-
* Context type for DataCard state management.
|
|
7
|
-
*/
|
|
3
|
+
import type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardConfig, DataCardSlot } from './DataCard.types';
|
|
8
4
|
type DataCardContextType = {
|
|
9
|
-
/** Current variant of: card. */
|
|
10
5
|
variant: IDataCardProps['variant'];
|
|
11
|
-
/** Current size of: card. */
|
|
12
6
|
size: IDataCardProps['size'];
|
|
13
|
-
/** Whether card is disabled. */
|
|
14
7
|
disabled: boolean;
|
|
15
|
-
/** Whether glass effect is enabled. */
|
|
16
8
|
glass: boolean;
|
|
17
|
-
|
|
9
|
+
config?: IDataCardConfig;
|
|
18
10
|
slots?: SlotOverrides<DataCardSlot>;
|
|
19
|
-
/** Update interaction state. */
|
|
20
|
-
setState: React.Dispatch<React.SetStateAction<IDataCardState>>;
|
|
21
11
|
};
|
|
22
12
|
declare const useDataCard: () => DataCardContextType;
|
|
23
13
|
/**
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* Features:
|
|
27
|
-
* - Slot overrides for customization
|
|
28
|
-
* - State-based styling (hover, pressed, disabled)
|
|
29
|
-
* - CVA variants (size, color variant)
|
|
30
|
-
* - asChild composition pattern
|
|
31
|
-
* - Motion/animation integration
|
|
32
|
-
* - Custom render functions
|
|
33
|
-
* - Form field integration
|
|
34
|
-
* - Icon composition
|
|
35
|
-
* - Glassmorphism effects
|
|
14
|
+
* Root card container with glassmorphism, corner brackets, and state tracking.
|
|
36
15
|
*
|
|
37
|
-
* @
|
|
38
|
-
*
|
|
39
|
-
* <DataCard variant="accent" size="default">
|
|
40
|
-
* <DataCardValue number={1234} />
|
|
41
|
-
* <DataCardToggle />
|
|
42
|
-
* </DataCard>
|
|
43
|
-
* ```
|
|
16
|
+
* @param props - {@link IDataCardProps}
|
|
17
|
+
* @returns A motion.div card with context provider
|
|
44
18
|
*/
|
|
45
|
-
declare function DataCard({ variant, size, disabled, glass, showBrackets, className, style, slots, config, children,
|
|
19
|
+
declare function DataCard({ variant, size, disabled, glass, showBrackets, className, style, slots, config, children, }: IDataCardProps): import("react/jsx-runtime").JSX.Element;
|
|
46
20
|
/**
|
|
47
|
-
*
|
|
21
|
+
* Animated number display with optional label and unit.
|
|
48
22
|
*
|
|
49
|
-
* @
|
|
50
|
-
*
|
|
51
|
-
* <DataCardValue
|
|
52
|
-
* number={1234}
|
|
53
|
-
* label="Active Users"
|
|
54
|
-
* unit="users"
|
|
55
|
-
* />
|
|
56
|
-
* ```
|
|
23
|
+
* @param props - {@link IDataCardValueProps}
|
|
24
|
+
* @returns Animated number with CountingNumber primitive
|
|
57
25
|
*/
|
|
58
26
|
declare function DataCardValue({ number, label, unit, decimalPlaces, padStart, }: IDataCardValueProps): import("react/jsx-runtime").JSX.Element;
|
|
59
27
|
/**
|
|
60
|
-
*
|
|
28
|
+
* Title + description label.
|
|
61
29
|
*
|
|
62
|
-
* @
|
|
63
|
-
*
|
|
64
|
-
* <DataCardLabel
|
|
65
|
-
* title="Revenue"
|
|
66
|
-
* description="This month"
|
|
67
|
-
* />
|
|
68
|
-
* ```
|
|
30
|
+
* @param props - {@link IDataCardLabelProps}
|
|
31
|
+
* @returns Title and optional description text
|
|
69
32
|
*/
|
|
70
33
|
declare function DataCardLabel({ title, description, className, ...props }: IDataCardLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
71
34
|
/**
|
|
72
|
-
*
|
|
35
|
+
* Switch toggle control inside a DataCard.
|
|
73
36
|
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
* @example
|
|
77
|
-
* ```tsx
|
|
78
|
-
* <DataCardToggle
|
|
79
|
-
* checked={enabled}
|
|
80
|
-
* onCheckedChange={setEnabled}
|
|
81
|
-
* label="Enable notifications"
|
|
82
|
-
* checkedIcon={<BellIcon />}
|
|
83
|
-
* uncheckedIcon={<BellOffIcon />}
|
|
84
|
-
* />
|
|
85
|
-
* ```
|
|
37
|
+
* @param props - {@link IDataCardToggleProps}
|
|
38
|
+
* @returns Label + Switch toggle
|
|
86
39
|
*/
|
|
87
|
-
declare function DataCardToggle({ checked, onCheckedChange,
|
|
40
|
+
declare function DataCardToggle({ checked, onCheckedChange, label, }: IDataCardToggleProps): import("react/jsx-runtime").JSX.Element;
|
|
88
41
|
/**
|
|
89
|
-
*
|
|
42
|
+
* Action button container.
|
|
90
43
|
*
|
|
91
|
-
* @
|
|
92
|
-
*
|
|
93
|
-
* <DataCardActions align="end">
|
|
94
|
-
* <Button size="sm">Edit</Button>
|
|
95
|
-
* <Button size="sm" variant="ghost">Delete</Button>
|
|
96
|
-
* </DataCardActions>
|
|
97
|
-
* ```
|
|
44
|
+
* @param props - {@link IDataCardActionsProps}
|
|
45
|
+
* @returns Flex container for action buttons
|
|
98
46
|
*/
|
|
99
47
|
declare function DataCardActions({ align, className, children, ...props }: IDataCardActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
100
48
|
/**
|
|
101
|
-
*
|
|
102
|
-
*
|
|
103
|
-
* Wraps CornerBracket with motion animations.
|
|
104
|
-
*
|
|
105
|
-
* @example
|
|
106
|
-
* ```tsx
|
|
107
|
-
* <DataCardBracket position="tl" variant="accent" />
|
|
108
|
-
* ```
|
|
109
|
-
*/
|
|
110
|
-
declare function DataCardBracket({ position, variant, className, }: IDataCardBracketProps): import("react/jsx-runtime").JSX.Element;
|
|
111
|
-
/**
|
|
112
|
-
* Hook to access DataCard context.
|
|
113
|
-
* Must be used within DataCard provider.
|
|
114
|
-
*
|
|
115
|
-
* @returns The current DataCard context
|
|
49
|
+
* Decorative corner bracket. Rendered directly via CornerBracket
|
|
50
|
+
* (no wrapper div — the SVG positions itself via absolute positioning).
|
|
116
51
|
*
|
|
117
|
-
* @
|
|
118
|
-
*
|
|
119
|
-
* function MyComponent() {
|
|
120
|
-
* const { variant, size, disabled } = useDataCard();
|
|
121
|
-
* return <div>Current variant: {variant}</div>;
|
|
122
|
-
* }
|
|
123
|
-
* ```
|
|
52
|
+
* @param props - {@link IDataCardBracketProps}
|
|
53
|
+
* @returns CornerBracket SVG at the specified corner
|
|
124
54
|
*/
|
|
55
|
+
declare function DataCardBracket({ position, variant, }: IDataCardBracketProps): import("react/jsx-runtime").JSX.Element;
|
|
125
56
|
export { useDataCard };
|
|
126
57
|
export { DataCard, DataCardValue, DataCardLabel, DataCardToggle, DataCardActions, DataCardBracket, dataCardVariants, };
|
|
127
58
|
export type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardState, IDataCardConfig, DataCardVariant, DataCardSize, DataCardSlot, } from './DataCard.types';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DataCard/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,gBAAgB,EAAmC,MAAM,mBAAmB,CAAC;AACtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EAErB,eAAe,EACf,YAAY,EACb,MAAM,kBAAkB,CAAC;AAM1B,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACnC,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEF,QAAA,MAAyB,WAAW,2BACsB,CAAC;AAM3D;;;;;GAKG;AACH,iBAAS,QAAQ,CAAC,EAChB,OAAmB,EACnB,IAAgB,EAChB,QAAgB,EAChB,KAAY,EACZ,YAAmB,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,cAAc,2CAgDhB;AAMD;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,aAAiB,EACjB,QAAgB,GACjB,EAAE,mBAAmB,2CA8BrB;AAMD;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAarB;AAMD;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,eAAe,EACf,KAAK,GACN,EAAE,oBAAoB,2CAgBtB;AAMD;;;;;GAKG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAoBvB;AAMD;;;;;;GAMG;AACH,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,OAAmB,GACpB,EAAE,qBAAqB,2CAiBvB;AAMD,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,OAAO,EACL,QAAQ,EACR,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,GACjB,CAAC;AAEF,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
|