@scaleflex/ui-tw 0.0.3 → 0.0.6
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/card/card.component.d.ts +9 -0
- package/card/card.component.js +59 -0
- package/card/index.d.ts +1 -0
- package/card/index.js +1 -0
- package/form/components/form-field-group.component.d.ts +3 -1
- package/form/components/form-field-group.component.js +14 -2
- package/form/form.component.d.ts +4 -1
- package/form/form.component.js +11 -5
- package/label/label.component.js +8 -5
- package/package.json +2 -2
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
declare function Card({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
|
|
4
|
+
declare function CardHeader({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
|
|
5
|
+
declare function CardTitle({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
|
|
6
|
+
declare function CardDescription({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
|
|
7
|
+
declare function CardContent({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
|
|
8
|
+
declare function CardSetting({ className, ...rest }: ComponentProps<'div'>): React.JSX.Element;
|
|
9
|
+
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardSetting };
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["className"],
|
|
4
|
+
_excluded2 = ["className"],
|
|
5
|
+
_excluded3 = ["className"],
|
|
6
|
+
_excluded4 = ["className"],
|
|
7
|
+
_excluded5 = ["className"],
|
|
8
|
+
_excluded6 = ["className"];
|
|
9
|
+
import { cn } from '@scaleflex/ui-tw/utils/cn';
|
|
10
|
+
import React from 'react';
|
|
11
|
+
function Card(_ref) {
|
|
12
|
+
var className = _ref.className,
|
|
13
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
14
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
15
|
+
"data-slot": "card",
|
|
16
|
+
className: cn('bg-card lg:border-border border-y-border shadow-shadow mt-8 max-w-7xl border-y shadow-md lg:rounded-xl lg:border', className)
|
|
17
|
+
}, rest));
|
|
18
|
+
}
|
|
19
|
+
function CardHeader(_ref2) {
|
|
20
|
+
var className = _ref2.className,
|
|
21
|
+
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
22
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
23
|
+
"data-slot": "card-header",
|
|
24
|
+
className: cn('border-border flex flex-col gap-1 border-b px-6 py-6 text-xl font-medium lg:rounded-t-xl', className)
|
|
25
|
+
}, rest));
|
|
26
|
+
}
|
|
27
|
+
function CardTitle(_ref3) {
|
|
28
|
+
var className = _ref3.className,
|
|
29
|
+
rest = _objectWithoutProperties(_ref3, _excluded3);
|
|
30
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
31
|
+
"data-slot": "card-title",
|
|
32
|
+
className: cn(className)
|
|
33
|
+
}, rest));
|
|
34
|
+
}
|
|
35
|
+
function CardDescription(_ref4) {
|
|
36
|
+
var className = _ref4.className,
|
|
37
|
+
rest = _objectWithoutProperties(_ref4, _excluded4);
|
|
38
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
39
|
+
"data-slot": "card-description",
|
|
40
|
+
className: cn('text-secondary-foreground max-w-4xl text-sm font-normal', className)
|
|
41
|
+
}, rest));
|
|
42
|
+
}
|
|
43
|
+
function CardContent(_ref5) {
|
|
44
|
+
var className = _ref5.className,
|
|
45
|
+
rest = _objectWithoutProperties(_ref5, _excluded5);
|
|
46
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
47
|
+
"data-slot": "card-content",
|
|
48
|
+
className: cn('flex flex-col gap-6 rounded-b-xl p-6', className)
|
|
49
|
+
}, rest));
|
|
50
|
+
}
|
|
51
|
+
function CardSetting(_ref6) {
|
|
52
|
+
var className = _ref6.className,
|
|
53
|
+
rest = _objectWithoutProperties(_ref6, _excluded6);
|
|
54
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
55
|
+
"data-slot": "card-setting",
|
|
56
|
+
className: cn('flex min-h-[2.5rem] items-center justify-between gap-4 text-base', className)
|
|
57
|
+
}, rest));
|
|
58
|
+
}
|
|
59
|
+
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardSetting };
|
package/card/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Card, CardHeader, CardContent, CardTitle, CardDescription, CardSetting } from './card.component';
|
package/card/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Card, CardHeader, CardContent, CardTitle, CardDescription, CardSetting } from './card.component';
|
|
@@ -13,7 +13,9 @@ export interface FormFieldGroupProps<TFieldValues extends FieldValues, TName ext
|
|
|
13
13
|
size?: InputSizeType;
|
|
14
14
|
readOnly?: boolean;
|
|
15
15
|
highlight?: boolean;
|
|
16
|
+
horizontal?: boolean;
|
|
17
|
+
horizontalLabelWidth?: string;
|
|
16
18
|
children: (field: ControllerRenderProps<TFieldValues, TName>, args?: FormFieldArgs) => ReactNode;
|
|
17
19
|
}
|
|
18
|
-
declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, highlight, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
|
|
20
|
+
declare function FormFieldGroup<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>({ control, name, label, description, size, readOnly, disabled, tooltip, highlight, horizontal, horizontalLabelWidth, children, }: FormFieldGroupProps<TFieldValues, TName>): React.JSX.Element;
|
|
19
21
|
export { FormFieldGroup };
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
1
2
|
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@scaleflex/ui-tw/form';
|
|
3
|
+
import { InputSize } from '@scaleflex/ui-tw/input/input.types';
|
|
4
|
+
import { cn } from '@scaleflex/ui-tw/utils/cn';
|
|
2
5
|
import React from 'react';
|
|
6
|
+
var labelHeightVariants = _defineProperty(_defineProperty(_defineProperty({}, InputSize.Sm, 'h-8'), InputSize.Md, 'h-10'), InputSize.Lg, 'h-12');
|
|
3
7
|
function FormFieldGroup(_ref) {
|
|
4
8
|
var control = _ref.control,
|
|
5
9
|
name = _ref.name,
|
|
@@ -13,6 +17,9 @@ function FormFieldGroup(_ref) {
|
|
|
13
17
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
14
18
|
tooltip = _ref.tooltip,
|
|
15
19
|
highlight = _ref.highlight,
|
|
20
|
+
_ref$horizontal = _ref.horizontal,
|
|
21
|
+
horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
|
|
22
|
+
horizontalLabelWidth = _ref.horizontalLabelWidth,
|
|
16
23
|
children = _ref.children;
|
|
17
24
|
return /*#__PURE__*/React.createElement(FormField, {
|
|
18
25
|
control: control,
|
|
@@ -21,12 +28,17 @@ function FormFieldGroup(_ref) {
|
|
|
21
28
|
var field = _ref2.field;
|
|
22
29
|
return /*#__PURE__*/React.createElement(FormItem, {
|
|
23
30
|
className: "group",
|
|
31
|
+
horizontal: horizontal,
|
|
32
|
+
firstColumnWidth: horizontalLabelWidth,
|
|
24
33
|
"data-disabled": disabled,
|
|
25
34
|
"data-highlight": highlight
|
|
26
35
|
}, label && /*#__PURE__*/React.createElement(FormLabel, {
|
|
36
|
+
className: cn(horizontal && 'self-start', horizontal && labelHeightVariants[size]),
|
|
27
37
|
size: size,
|
|
28
38
|
tooltip: tooltip
|
|
29
|
-
}, label), /*#__PURE__*/React.createElement(
|
|
39
|
+
}, label), /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: "grid gap-1.5"
|
|
41
|
+
}, /*#__PURE__*/React.createElement(FormControl, null, children(field, {
|
|
30
42
|
size: size,
|
|
31
43
|
readOnly: readOnly,
|
|
32
44
|
disabled: disabled
|
|
@@ -34,7 +46,7 @@ function FormFieldGroup(_ref) {
|
|
|
34
46
|
size: size
|
|
35
47
|
}, description), /*#__PURE__*/React.createElement(FormMessage, {
|
|
36
48
|
size: size
|
|
37
|
-
}));
|
|
49
|
+
})));
|
|
38
50
|
}
|
|
39
51
|
});
|
|
40
52
|
}
|
package/form/form.component.d.ts
CHANGED
|
@@ -18,7 +18,10 @@ declare const useFormField: () => {
|
|
|
18
18
|
formDescriptionId: string;
|
|
19
19
|
formMessageId: string;
|
|
20
20
|
};
|
|
21
|
-
declare function FormItem({ className, ...props }: ComponentProps<'div'>
|
|
21
|
+
declare function FormItem({ className, horizontal, firstColumnWidth, ...props }: ComponentProps<'div'> & {
|
|
22
|
+
horizontal?: boolean;
|
|
23
|
+
firstColumnWidth?: string;
|
|
24
|
+
}): React.JSX.Element;
|
|
22
25
|
declare function FormLabel({ className, ...props }: LabelProps): React.JSX.Element;
|
|
23
26
|
declare function FormControl({ ...props }: ComponentProps<typeof Slot>): React.JSX.Element;
|
|
24
27
|
declare function FormDescription({ className, size, ...props }: ComponentProps<'p'> & {
|
package/form/form.component.js
CHANGED
|
@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
|
|
4
4
|
import _extends from "@babel/runtime/helpers/extends";
|
|
5
|
-
var _excluded = ["className"],
|
|
5
|
+
var _excluded = ["className", "horizontal", "firstColumnWidth"],
|
|
6
6
|
_excluded2 = ["className"],
|
|
7
7
|
_excluded3 = ["className", "size"],
|
|
8
8
|
_excluded4 = ["className", "size"];
|
|
@@ -49,6 +49,9 @@ var useFormField = function useFormField() {
|
|
|
49
49
|
var FormItemContext = /*#__PURE__*/createContext({});
|
|
50
50
|
function FormItem(_ref2) {
|
|
51
51
|
var className = _ref2.className,
|
|
52
|
+
horizontal = _ref2.horizontal,
|
|
53
|
+
_ref2$firstColumnWidt = _ref2.firstColumnWidth,
|
|
54
|
+
firstColumnWidth = _ref2$firstColumnWidt === void 0 ? '11.25rem' : _ref2$firstColumnWidt,
|
|
52
55
|
props = _objectWithoutProperties(_ref2, _excluded);
|
|
53
56
|
var id = useId();
|
|
54
57
|
return /*#__PURE__*/React.createElement(FormItemContext.Provider, {
|
|
@@ -57,7 +60,10 @@ function FormItem(_ref2) {
|
|
|
57
60
|
}
|
|
58
61
|
}, /*#__PURE__*/React.createElement("div", _extends({
|
|
59
62
|
"data-slot": "form-item",
|
|
60
|
-
className: cn('grid gap-1.5', className)
|
|
63
|
+
className: cn('grid gap-1.5', horizontal && 'items-start gap-4', className),
|
|
64
|
+
style: horizontal ? {
|
|
65
|
+
gridTemplateColumns: "".concat(firstColumnWidth, " 1fr")
|
|
66
|
+
} : undefined
|
|
61
67
|
}, props)));
|
|
62
68
|
}
|
|
63
69
|
function FormLabel(_ref3) {
|
|
@@ -69,7 +75,7 @@ function FormLabel(_ref3) {
|
|
|
69
75
|
return /*#__PURE__*/React.createElement(Label, _extends({
|
|
70
76
|
"data-slot": "form-label",
|
|
71
77
|
"data-error": !!error,
|
|
72
|
-
className: cn('data-[error=true]:text-destructive', className),
|
|
78
|
+
className: cn('truncate', 'data-[error=true]:text-destructive-foreground', className),
|
|
73
79
|
htmlFor: formItemId
|
|
74
80
|
}, props));
|
|
75
81
|
}
|
|
@@ -98,7 +104,7 @@ function FormDescription(_ref5) {
|
|
|
98
104
|
return /*#__PURE__*/React.createElement("p", _extends({
|
|
99
105
|
"data-slot": "form-description",
|
|
100
106
|
id: formDescriptionId,
|
|
101
|
-
className: cn('text-muted-foreground', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning', formMessageSizeOptions[size], className)
|
|
107
|
+
className: cn('text-muted-foreground', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning-foreground', formMessageSizeOptions[size], className)
|
|
102
108
|
}, props));
|
|
103
109
|
}
|
|
104
110
|
function FormMessage(_ref6) {
|
|
@@ -117,7 +123,7 @@ function FormMessage(_ref6) {
|
|
|
117
123
|
return /*#__PURE__*/React.createElement("p", _extends({
|
|
118
124
|
"data-slot": "form-message",
|
|
119
125
|
id: formMessageId,
|
|
120
|
-
className: cn('text-destructive', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', formMessageSizeOptions[size], className)
|
|
126
|
+
className: cn('text-destructive-foreground', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', formMessageSizeOptions[size], className)
|
|
121
127
|
}, props), body);
|
|
122
128
|
}
|
|
123
129
|
export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
|
package/label/label.component.js
CHANGED
|
@@ -29,16 +29,19 @@ function Label(_ref) {
|
|
|
29
29
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
30
30
|
return /*#__PURE__*/React.createElement(LabelPrimitive.Root, _extends({
|
|
31
31
|
"data-slot": "label",
|
|
32
|
-
className: cn('text-secondary-foreground flex items-center
|
|
32
|
+
className: cn('text-secondary-foreground flex items-center leading-none font-normal select-none', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-50', 'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', 'group-data-[highlight=true]:text-warning-foreground', labelVariants({
|
|
33
33
|
size: size,
|
|
34
34
|
className: className
|
|
35
35
|
}))
|
|
36
|
-
}, props),
|
|
37
|
-
className: "
|
|
38
|
-
|
|
36
|
+
}, props), /*#__PURE__*/React.createElement("span", {
|
|
37
|
+
className: "truncate",
|
|
38
|
+
style: {
|
|
39
|
+
maxWidth: icon || tooltip ? 'calc(100% - 2rem)' : undefined
|
|
40
|
+
}
|
|
41
|
+
}, children), (icon || tooltip) && /*#__PURE__*/React.createElement(LabelIcon, {
|
|
39
42
|
size: size,
|
|
40
43
|
icon: icon,
|
|
41
44
|
tooltip: tooltip
|
|
42
|
-
}))
|
|
45
|
+
}));
|
|
43
46
|
}
|
|
44
47
|
export { Label };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scaleflex/ui-tw",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"author": "scaleflex",
|
|
5
5
|
"repository": "github:scaleflex/ui",
|
|
6
6
|
"homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"@radix-ui/react-label": "^2.1.6",
|
|
17
17
|
"@radix-ui/react-slot": "^1.1.2",
|
|
18
18
|
"@radix-ui/react-tooltip": "^1.2.6",
|
|
19
|
-
"@scaleflex/icons-tw": "^0.0.
|
|
19
|
+
"@scaleflex/icons-tw": "^0.0.6",
|
|
20
20
|
"@types/lodash.merge": "^4.6.9",
|
|
21
21
|
"class-variance-authority": "^0.7.1",
|
|
22
22
|
"lodash.merge": "^4.6.2",
|