@spies-ui/react 1.0.8 → 1.0.10
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/index.d.mts +15 -1
- package/dist/index.d.ts +15 -1
- package/dist/index.js +100 -46
- package/dist/index.mjs +100 -46
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -885,6 +885,7 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
|
|
|
885
885
|
|
|
886
886
|
interface AvatarProps extends ComponentProps<typeof AvatarImage> {
|
|
887
887
|
size: 'default' | 'large';
|
|
888
|
+
border: 'none' | 'default' | 'primary' | 'success' | 'danger' | 'warning';
|
|
888
889
|
}
|
|
889
890
|
declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
890
891
|
declare namespace Avatar {
|
|
@@ -1333,6 +1334,10 @@ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'size'> {
|
|
|
1333
1334
|
hint?: string;
|
|
1334
1335
|
required?: boolean;
|
|
1335
1336
|
size?: 'default' | 'small';
|
|
1337
|
+
labelProps?: Omit<TextProps, 'children'>;
|
|
1338
|
+
errorProps?: Omit<TextProps, 'children'>;
|
|
1339
|
+
hintProps?: Omit<TextProps, 'children'>;
|
|
1340
|
+
requiredAsteriskProps?: Omit<TextProps, 'children'>;
|
|
1336
1341
|
}
|
|
1337
1342
|
declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
1338
1343
|
|
|
@@ -1557,11 +1562,16 @@ interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
|
|
|
1557
1562
|
error?: string;
|
|
1558
1563
|
hint?: string;
|
|
1559
1564
|
required?: boolean;
|
|
1565
|
+
labelProps?: Omit<TextProps, 'children'>;
|
|
1566
|
+
errorProps?: Omit<TextProps, 'children'>;
|
|
1567
|
+
hintProps?: Omit<TextProps, 'children'>;
|
|
1568
|
+
requiredAsteriskProps?: Omit<TextProps, 'children'>;
|
|
1560
1569
|
}
|
|
1561
1570
|
declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
1562
1571
|
|
|
1563
1572
|
declare const CheckboxContainer: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, {
|
|
1564
1573
|
errored?: boolean | "true" | undefined;
|
|
1574
|
+
radius?: "xs" | "sm" | "md" | "lg" | "px" | "full" | undefined;
|
|
1565
1575
|
}, {}, _stitches_react_types_css_util.CSS<{}, {
|
|
1566
1576
|
colors: {
|
|
1567
1577
|
black: string;
|
|
@@ -1781,8 +1791,12 @@ interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
|
|
|
1781
1791
|
error?: string;
|
|
1782
1792
|
hint?: string;
|
|
1783
1793
|
required?: boolean;
|
|
1794
|
+
labelProps?: Omit<ComponentProps<typeof Text>, 'children'>;
|
|
1795
|
+
errorProps?: Omit<ComponentProps<typeof Text>, 'children'>;
|
|
1796
|
+
hintProps?: Omit<ComponentProps<typeof Text>, 'children'>;
|
|
1797
|
+
requiredAsteriskProps?: Omit<ComponentProps<typeof Text>, 'children'>;
|
|
1784
1798
|
}
|
|
1785
|
-
declare function Checkbox({ label, error, hint, required, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
1799
|
+
declare function Checkbox({ label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
1786
1800
|
declare namespace Checkbox {
|
|
1787
1801
|
var displayName: string;
|
|
1788
1802
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -885,6 +885,7 @@ declare const AvatarImage: _stitches_react_types_styled_component.StyledComponen
|
|
|
885
885
|
|
|
886
886
|
interface AvatarProps extends ComponentProps<typeof AvatarImage> {
|
|
887
887
|
size: 'default' | 'large';
|
|
888
|
+
border: 'none' | 'default' | 'primary' | 'success' | 'danger' | 'warning';
|
|
888
889
|
}
|
|
889
890
|
declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
890
891
|
declare namespace Avatar {
|
|
@@ -1333,6 +1334,10 @@ interface TextInputProps extends Omit<ComponentProps<typeof Input>, 'size'> {
|
|
|
1333
1334
|
hint?: string;
|
|
1334
1335
|
required?: boolean;
|
|
1335
1336
|
size?: 'default' | 'small';
|
|
1337
|
+
labelProps?: Omit<TextProps, 'children'>;
|
|
1338
|
+
errorProps?: Omit<TextProps, 'children'>;
|
|
1339
|
+
hintProps?: Omit<TextProps, 'children'>;
|
|
1340
|
+
requiredAsteriskProps?: Omit<TextProps, 'children'>;
|
|
1336
1341
|
}
|
|
1337
1342
|
declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
1338
1343
|
|
|
@@ -1557,11 +1562,16 @@ interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
|
|
|
1557
1562
|
error?: string;
|
|
1558
1563
|
hint?: string;
|
|
1559
1564
|
required?: boolean;
|
|
1565
|
+
labelProps?: Omit<TextProps, 'children'>;
|
|
1566
|
+
errorProps?: Omit<TextProps, 'children'>;
|
|
1567
|
+
hintProps?: Omit<TextProps, 'children'>;
|
|
1568
|
+
requiredAsteriskProps?: Omit<TextProps, 'children'>;
|
|
1560
1569
|
}
|
|
1561
1570
|
declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
1562
1571
|
|
|
1563
1572
|
declare const CheckboxContainer: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<Checkbox$1.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, {
|
|
1564
1573
|
errored?: boolean | "true" | undefined;
|
|
1574
|
+
radius?: "xs" | "sm" | "md" | "lg" | "px" | "full" | undefined;
|
|
1565
1575
|
}, {}, _stitches_react_types_css_util.CSS<{}, {
|
|
1566
1576
|
colors: {
|
|
1567
1577
|
black: string;
|
|
@@ -1781,8 +1791,12 @@ interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
|
|
|
1781
1791
|
error?: string;
|
|
1782
1792
|
hint?: string;
|
|
1783
1793
|
required?: boolean;
|
|
1794
|
+
labelProps?: Omit<ComponentProps<typeof Text>, 'children'>;
|
|
1795
|
+
errorProps?: Omit<ComponentProps<typeof Text>, 'children'>;
|
|
1796
|
+
hintProps?: Omit<ComponentProps<typeof Text>, 'children'>;
|
|
1797
|
+
requiredAsteriskProps?: Omit<ComponentProps<typeof Text>, 'children'>;
|
|
1784
1798
|
}
|
|
1785
|
-
declare function Checkbox({ label, error, hint, required, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
1799
|
+
declare function Checkbox({ label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
1786
1800
|
declare namespace Checkbox {
|
|
1787
1801
|
var displayName: string;
|
|
1788
1802
|
}
|
package/dist/index.js
CHANGED
|
@@ -358,16 +358,41 @@ var AvatarContainer = styled(Avatar.Root, {
|
|
|
358
358
|
width: "$20",
|
|
359
359
|
height: "$20"
|
|
360
360
|
}
|
|
361
|
+
},
|
|
362
|
+
border: {
|
|
363
|
+
none: {
|
|
364
|
+
border: "0"
|
|
365
|
+
},
|
|
366
|
+
default: {
|
|
367
|
+
border: "2px solid $smokedWhite"
|
|
368
|
+
},
|
|
369
|
+
primary: {
|
|
370
|
+
border: "2px solid $primary"
|
|
371
|
+
},
|
|
372
|
+
primaryLight: {
|
|
373
|
+
border: "2px solid $primaryLight"
|
|
374
|
+
},
|
|
375
|
+
success: {
|
|
376
|
+
border: "2px solid $success"
|
|
377
|
+
},
|
|
378
|
+
danger: {
|
|
379
|
+
border: "2px solid $danger"
|
|
380
|
+
},
|
|
381
|
+
warning: {
|
|
382
|
+
border: "2px solid $warning"
|
|
383
|
+
}
|
|
361
384
|
}
|
|
362
385
|
},
|
|
363
386
|
defaultVariants: {
|
|
364
|
-
size: "default"
|
|
387
|
+
size: "default",
|
|
388
|
+
border: "none"
|
|
365
389
|
}
|
|
366
390
|
});
|
|
367
391
|
var AvatarImage = styled(Avatar.Image, {
|
|
368
392
|
width: "100%",
|
|
369
393
|
height: "100%",
|
|
370
|
-
|
|
394
|
+
objectFit: "cover",
|
|
395
|
+
objectPosition: "center",
|
|
371
396
|
borderRadius: "inherit"
|
|
372
397
|
});
|
|
373
398
|
var AvatarFallback = styled(Avatar.Fallback, {
|
|
@@ -388,7 +413,7 @@ var AvatarFallback = styled(Avatar.Fallback, {
|
|
|
388
413
|
var import_phosphor_react = require("phosphor-react");
|
|
389
414
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
390
415
|
function Avatar2(props) {
|
|
391
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { size: props.size, children: [
|
|
416
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarContainer, { size: props.size, border: props.border, children: [
|
|
392
417
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarImage, __spreadValues({}, props)),
|
|
393
418
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.User, {}) })
|
|
394
419
|
] });
|
|
@@ -558,17 +583,21 @@ function InputBox({
|
|
|
558
583
|
error,
|
|
559
584
|
hint,
|
|
560
585
|
required,
|
|
561
|
-
children
|
|
586
|
+
children,
|
|
587
|
+
labelProps,
|
|
588
|
+
errorProps,
|
|
589
|
+
hintProps,
|
|
590
|
+
requiredAsteriskProps
|
|
562
591
|
}) {
|
|
563
592
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(InputContainer, { children: [
|
|
564
593
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
|
|
565
|
-
!!label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { as: "span", size: "sm", children: label }),
|
|
566
|
-
required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { as: "span", size: "sm", variant: "danger", children: "\xA0*" })
|
|
594
|
+
!!label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadProps(__spreadValues({ as: "span", size: "sm" }, labelProps), { children: label })),
|
|
595
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadProps(__spreadValues({ as: "span", size: "sm", variant: "danger" }, requiredAsteriskProps), { children: "\xA0*" }))
|
|
567
596
|
] }),
|
|
568
597
|
children,
|
|
569
598
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(TextBox, { children: [
|
|
570
|
-
!!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "danger", children: error }),
|
|
571
|
-
!error && hint && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, { size: "xs", variant: "gray200", children: hint })
|
|
599
|
+
!!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadProps(__spreadValues({ size: "xs", variant: "danger" }, errorProps), { children: error })),
|
|
600
|
+
!error && hint && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Text, __spreadProps(__spreadValues({ size: "xs", variant: "gray200" }, hintProps), { children: hint }))
|
|
572
601
|
] })
|
|
573
602
|
] });
|
|
574
603
|
}
|
|
@@ -578,8 +607,8 @@ InputBox.displayName = "InputBox";
|
|
|
578
607
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
579
608
|
var TextInput = (0, import_react2.forwardRef)(
|
|
580
609
|
(_a, ref) => {
|
|
581
|
-
var _b = _a, { label, prefix, error, hint, required, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size"]);
|
|
582
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputBox, { label, error, hint, required, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TextInputContainer, { errored: !!error, size, children: [
|
|
610
|
+
var _b = _a, { label, prefix, error, hint, required, size, labelProps, errorProps, hintProps, requiredAsteriskProps } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size", "labelProps", "errorProps", "hintProps", "requiredAsteriskProps"]);
|
|
611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputBox, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TextInputContainer, { errored: !!error, size, children: [
|
|
583
612
|
!!prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Prefix, { children: prefix }),
|
|
584
613
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadValues({ ref }, props))
|
|
585
614
|
] }) });
|
|
@@ -629,8 +658,8 @@ var TextAreaInput = styled("textarea", {
|
|
|
629
658
|
// src/components/TextArea/index.tsx
|
|
630
659
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
631
660
|
var TextArea = (0, import_react3.forwardRef)((_a, ref) => {
|
|
632
|
-
var _b = _a, { label, error, hint, required } = _b, props = __objRest(_b, ["label", "error", "hint", "required"]);
|
|
633
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputBox, { label, error, hint, required, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
|
|
661
|
+
var _b = _a, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps } = _b, props = __objRest(_b, ["label", "error", "hint", "required", "labelProps", "errorProps", "hintProps", "requiredAsteriskProps"]);
|
|
662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputBox, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
|
|
634
663
|
});
|
|
635
664
|
TextArea.displayName = "TextArea";
|
|
636
665
|
|
|
@@ -647,12 +676,38 @@ var CheckboxBox = styled("div", {
|
|
|
647
676
|
opacity: 0.5
|
|
648
677
|
}
|
|
649
678
|
});
|
|
679
|
+
var slideIn = keyframes({
|
|
680
|
+
from: {
|
|
681
|
+
transform: "translateX(-100%)"
|
|
682
|
+
},
|
|
683
|
+
to: {
|
|
684
|
+
transform: "translateX(0)"
|
|
685
|
+
}
|
|
686
|
+
});
|
|
687
|
+
var slideOut = keyframes({
|
|
688
|
+
from: {
|
|
689
|
+
transform: "translateX(0)"
|
|
690
|
+
},
|
|
691
|
+
to: {
|
|
692
|
+
transform: "translateX(100%)"
|
|
693
|
+
}
|
|
694
|
+
});
|
|
695
|
+
var CheckboxIndicator = styled(Checkbox.Indicator, {
|
|
696
|
+
color: "$smokedWhite",
|
|
697
|
+
width: "$4",
|
|
698
|
+
height: "$4",
|
|
699
|
+
'&[data-state="checked"]': {
|
|
700
|
+
animation: `${slideIn} 100ms ease-out`
|
|
701
|
+
},
|
|
702
|
+
'&[data-state="unchecked"]': {
|
|
703
|
+
animation: `${slideOut} 100ms ease-out`
|
|
704
|
+
}
|
|
705
|
+
});
|
|
650
706
|
var CheckboxContainer = styled(Checkbox.Root, {
|
|
651
707
|
all: "unset",
|
|
652
708
|
width: "$6",
|
|
653
709
|
height: "$6",
|
|
654
710
|
backgroundColor: "$gray900",
|
|
655
|
-
borderRadius: "$xs",
|
|
656
711
|
lineHeight: 0,
|
|
657
712
|
cursor: "pointer",
|
|
658
713
|
overflow: "hidden",
|
|
@@ -676,37 +731,28 @@ var CheckboxContainer = styled(Checkbox.Root, {
|
|
|
676
731
|
true: {
|
|
677
732
|
borderColor: "$danger"
|
|
678
733
|
}
|
|
734
|
+
},
|
|
735
|
+
radius: {
|
|
736
|
+
px: { borderRadius: "$px" },
|
|
737
|
+
xs: { borderRadius: "$xs" },
|
|
738
|
+
sm: { borderRadius: "$sm" },
|
|
739
|
+
md: {
|
|
740
|
+
borderRadius: "$md",
|
|
741
|
+
[`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
|
|
742
|
+
},
|
|
743
|
+
lg: {
|
|
744
|
+
borderRadius: "$lg",
|
|
745
|
+
[`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
|
|
746
|
+
},
|
|
747
|
+
full: {
|
|
748
|
+
borderRadius: "$full",
|
|
749
|
+
[`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
|
|
750
|
+
}
|
|
679
751
|
}
|
|
680
752
|
},
|
|
681
753
|
defaultVariants: {
|
|
682
|
-
errored: false
|
|
683
|
-
|
|
684
|
-
});
|
|
685
|
-
var slideIn = keyframes({
|
|
686
|
-
from: {
|
|
687
|
-
transform: "translateX(-100%)"
|
|
688
|
-
},
|
|
689
|
-
to: {
|
|
690
|
-
transform: "translateX(0)"
|
|
691
|
-
}
|
|
692
|
-
});
|
|
693
|
-
var slideOut = keyframes({
|
|
694
|
-
from: {
|
|
695
|
-
transform: "translateX(0)"
|
|
696
|
-
},
|
|
697
|
-
to: {
|
|
698
|
-
transform: "translateX(100%)"
|
|
699
|
-
}
|
|
700
|
-
});
|
|
701
|
-
var CheckboxIndicator = styled(Checkbox.Indicator, {
|
|
702
|
-
color: "$smokedWhite",
|
|
703
|
-
width: "$4",
|
|
704
|
-
height: "$4",
|
|
705
|
-
'&[data-state="checked"]': {
|
|
706
|
-
animation: `${slideIn} 100ms ease-out`
|
|
707
|
-
},
|
|
708
|
-
'&[data-state="unchecked"]': {
|
|
709
|
-
animation: `${slideOut} 100ms ease-out`
|
|
754
|
+
errored: false,
|
|
755
|
+
radius: "md"
|
|
710
756
|
}
|
|
711
757
|
});
|
|
712
758
|
|
|
@@ -717,18 +763,26 @@ function Checkbox2(_a) {
|
|
|
717
763
|
label,
|
|
718
764
|
error,
|
|
719
765
|
hint,
|
|
720
|
-
required
|
|
766
|
+
required,
|
|
767
|
+
labelProps,
|
|
768
|
+
errorProps,
|
|
769
|
+
hintProps,
|
|
770
|
+
requiredAsteriskProps
|
|
721
771
|
} = _b, props = __objRest(_b, [
|
|
722
772
|
"label",
|
|
723
773
|
"error",
|
|
724
774
|
"hint",
|
|
725
|
-
"required"
|
|
775
|
+
"required",
|
|
776
|
+
"labelProps",
|
|
777
|
+
"errorProps",
|
|
778
|
+
"hintProps",
|
|
779
|
+
"requiredAsteriskProps"
|
|
726
780
|
]);
|
|
727
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputBox, { error, hint, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxBox, { children: [
|
|
781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputBox, { error, hint, errorProps, hintProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(CheckboxBox, { children: [
|
|
728
782
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxContainer, __spreadProps(__spreadValues({}, props), { errored: !!error, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_phosphor_react2.Check, { weight: "bold" }) }) })),
|
|
729
783
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
|
|
730
|
-
!!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { as: "span", size: "sm", children: label }),
|
|
731
|
-
required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, { as: "span", size: "sm", variant: "danger", children: "*" })
|
|
784
|
+
!!label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, __spreadProps(__spreadValues({ as: "span", size: "sm" }, labelProps), { children: label })),
|
|
785
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text, __spreadProps(__spreadValues({ as: "span", size: "sm", variant: "danger" }, requiredAsteriskProps), { children: "*" }))
|
|
732
786
|
] })
|
|
733
787
|
] }) });
|
|
734
788
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -329,16 +329,41 @@ var AvatarContainer = styled(Avatar.Root, {
|
|
|
329
329
|
width: "$20",
|
|
330
330
|
height: "$20"
|
|
331
331
|
}
|
|
332
|
+
},
|
|
333
|
+
border: {
|
|
334
|
+
none: {
|
|
335
|
+
border: "0"
|
|
336
|
+
},
|
|
337
|
+
default: {
|
|
338
|
+
border: "2px solid $smokedWhite"
|
|
339
|
+
},
|
|
340
|
+
primary: {
|
|
341
|
+
border: "2px solid $primary"
|
|
342
|
+
},
|
|
343
|
+
primaryLight: {
|
|
344
|
+
border: "2px solid $primaryLight"
|
|
345
|
+
},
|
|
346
|
+
success: {
|
|
347
|
+
border: "2px solid $success"
|
|
348
|
+
},
|
|
349
|
+
danger: {
|
|
350
|
+
border: "2px solid $danger"
|
|
351
|
+
},
|
|
352
|
+
warning: {
|
|
353
|
+
border: "2px solid $warning"
|
|
354
|
+
}
|
|
332
355
|
}
|
|
333
356
|
},
|
|
334
357
|
defaultVariants: {
|
|
335
|
-
size: "default"
|
|
358
|
+
size: "default",
|
|
359
|
+
border: "none"
|
|
336
360
|
}
|
|
337
361
|
});
|
|
338
362
|
var AvatarImage = styled(Avatar.Image, {
|
|
339
363
|
width: "100%",
|
|
340
364
|
height: "100%",
|
|
341
|
-
|
|
365
|
+
objectFit: "cover",
|
|
366
|
+
objectPosition: "center",
|
|
342
367
|
borderRadius: "inherit"
|
|
343
368
|
});
|
|
344
369
|
var AvatarFallback = styled(Avatar.Fallback, {
|
|
@@ -359,7 +384,7 @@ var AvatarFallback = styled(Avatar.Fallback, {
|
|
|
359
384
|
import { User } from "phosphor-react";
|
|
360
385
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
361
386
|
function Avatar2(props) {
|
|
362
|
-
return /* @__PURE__ */ jsxs(AvatarContainer, { size: props.size, children: [
|
|
387
|
+
return /* @__PURE__ */ jsxs(AvatarContainer, { size: props.size, border: props.border, children: [
|
|
363
388
|
/* @__PURE__ */ jsx(AvatarImage, __spreadValues({}, props)),
|
|
364
389
|
/* @__PURE__ */ jsx(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ jsx(User, {}) })
|
|
365
390
|
] });
|
|
@@ -529,17 +554,21 @@ function InputBox({
|
|
|
529
554
|
error,
|
|
530
555
|
hint,
|
|
531
556
|
required,
|
|
532
|
-
children
|
|
557
|
+
children,
|
|
558
|
+
labelProps,
|
|
559
|
+
errorProps,
|
|
560
|
+
hintProps,
|
|
561
|
+
requiredAsteriskProps
|
|
533
562
|
}) {
|
|
534
563
|
return /* @__PURE__ */ jsxs2(InputContainer, { children: [
|
|
535
564
|
/* @__PURE__ */ jsxs2("div", { children: [
|
|
536
|
-
!!label && /* @__PURE__ */ jsx2(Text, { as: "span", size: "sm", children: label }),
|
|
537
|
-
required && /* @__PURE__ */ jsx2(Text, { as: "span", size: "sm", variant: "danger", children: "\xA0*" })
|
|
565
|
+
!!label && /* @__PURE__ */ jsx2(Text, __spreadProps(__spreadValues({ as: "span", size: "sm" }, labelProps), { children: label })),
|
|
566
|
+
required && /* @__PURE__ */ jsx2(Text, __spreadProps(__spreadValues({ as: "span", size: "sm", variant: "danger" }, requiredAsteriskProps), { children: "\xA0*" }))
|
|
538
567
|
] }),
|
|
539
568
|
children,
|
|
540
569
|
/* @__PURE__ */ jsxs2(TextBox, { children: [
|
|
541
|
-
!!error && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "danger", children: error }),
|
|
542
|
-
!error && hint && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "gray200", children: hint })
|
|
570
|
+
!!error && /* @__PURE__ */ jsx2(Text, __spreadProps(__spreadValues({ size: "xs", variant: "danger" }, errorProps), { children: error })),
|
|
571
|
+
!error && hint && /* @__PURE__ */ jsx2(Text, __spreadProps(__spreadValues({ size: "xs", variant: "gray200" }, hintProps), { children: hint }))
|
|
543
572
|
] })
|
|
544
573
|
] });
|
|
545
574
|
}
|
|
@@ -549,8 +578,8 @@ InputBox.displayName = "InputBox";
|
|
|
549
578
|
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
550
579
|
var TextInput = forwardRef(
|
|
551
580
|
(_a, ref) => {
|
|
552
|
-
var _b = _a, { label, prefix, error, hint, required, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size"]);
|
|
553
|
-
return /* @__PURE__ */ jsx3(InputBox, { label, error, hint, required, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, size, children: [
|
|
581
|
+
var _b = _a, { label, prefix, error, hint, required, size, labelProps, errorProps, hintProps, requiredAsteriskProps } = _b, props = __objRest(_b, ["label", "prefix", "error", "hint", "required", "size", "labelProps", "errorProps", "hintProps", "requiredAsteriskProps"]);
|
|
582
|
+
return /* @__PURE__ */ jsx3(InputBox, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, size, children: [
|
|
554
583
|
!!prefix && /* @__PURE__ */ jsx3(Prefix, { children: prefix }),
|
|
555
584
|
/* @__PURE__ */ jsx3(Input, __spreadValues({ ref }, props))
|
|
556
585
|
] }) });
|
|
@@ -600,8 +629,8 @@ var TextAreaInput = styled("textarea", {
|
|
|
600
629
|
// src/components/TextArea/index.tsx
|
|
601
630
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
602
631
|
var TextArea = forwardRef2((_a, ref) => {
|
|
603
|
-
var _b = _a, { label, error, hint, required } = _b, props = __objRest(_b, ["label", "error", "hint", "required"]);
|
|
604
|
-
return /* @__PURE__ */ jsx4(InputBox, { label, error, hint, required, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
|
|
632
|
+
var _b = _a, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps } = _b, props = __objRest(_b, ["label", "error", "hint", "required", "labelProps", "errorProps", "hintProps", "requiredAsteriskProps"]);
|
|
633
|
+
return /* @__PURE__ */ jsx4(InputBox, { label, error, hint, required, labelProps, errorProps, hintProps, requiredAsteriskProps, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
|
|
605
634
|
});
|
|
606
635
|
TextArea.displayName = "TextArea";
|
|
607
636
|
|
|
@@ -618,12 +647,38 @@ var CheckboxBox = styled("div", {
|
|
|
618
647
|
opacity: 0.5
|
|
619
648
|
}
|
|
620
649
|
});
|
|
650
|
+
var slideIn = keyframes({
|
|
651
|
+
from: {
|
|
652
|
+
transform: "translateX(-100%)"
|
|
653
|
+
},
|
|
654
|
+
to: {
|
|
655
|
+
transform: "translateX(0)"
|
|
656
|
+
}
|
|
657
|
+
});
|
|
658
|
+
var slideOut = keyframes({
|
|
659
|
+
from: {
|
|
660
|
+
transform: "translateX(0)"
|
|
661
|
+
},
|
|
662
|
+
to: {
|
|
663
|
+
transform: "translateX(100%)"
|
|
664
|
+
}
|
|
665
|
+
});
|
|
666
|
+
var CheckboxIndicator = styled(Checkbox.Indicator, {
|
|
667
|
+
color: "$smokedWhite",
|
|
668
|
+
width: "$4",
|
|
669
|
+
height: "$4",
|
|
670
|
+
'&[data-state="checked"]': {
|
|
671
|
+
animation: `${slideIn} 100ms ease-out`
|
|
672
|
+
},
|
|
673
|
+
'&[data-state="unchecked"]': {
|
|
674
|
+
animation: `${slideOut} 100ms ease-out`
|
|
675
|
+
}
|
|
676
|
+
});
|
|
621
677
|
var CheckboxContainer = styled(Checkbox.Root, {
|
|
622
678
|
all: "unset",
|
|
623
679
|
width: "$6",
|
|
624
680
|
height: "$6",
|
|
625
681
|
backgroundColor: "$gray900",
|
|
626
|
-
borderRadius: "$xs",
|
|
627
682
|
lineHeight: 0,
|
|
628
683
|
cursor: "pointer",
|
|
629
684
|
overflow: "hidden",
|
|
@@ -647,37 +702,28 @@ var CheckboxContainer = styled(Checkbox.Root, {
|
|
|
647
702
|
true: {
|
|
648
703
|
borderColor: "$danger"
|
|
649
704
|
}
|
|
705
|
+
},
|
|
706
|
+
radius: {
|
|
707
|
+
px: { borderRadius: "$px" },
|
|
708
|
+
xs: { borderRadius: "$xs" },
|
|
709
|
+
sm: { borderRadius: "$sm" },
|
|
710
|
+
md: {
|
|
711
|
+
borderRadius: "$md",
|
|
712
|
+
[`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
|
|
713
|
+
},
|
|
714
|
+
lg: {
|
|
715
|
+
borderRadius: "$lg",
|
|
716
|
+
[`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
|
|
717
|
+
},
|
|
718
|
+
full: {
|
|
719
|
+
borderRadius: "$full",
|
|
720
|
+
[`& ${CheckboxIndicator}`]: { width: "$3", height: "$3" }
|
|
721
|
+
}
|
|
650
722
|
}
|
|
651
723
|
},
|
|
652
724
|
defaultVariants: {
|
|
653
|
-
errored: false
|
|
654
|
-
|
|
655
|
-
});
|
|
656
|
-
var slideIn = keyframes({
|
|
657
|
-
from: {
|
|
658
|
-
transform: "translateX(-100%)"
|
|
659
|
-
},
|
|
660
|
-
to: {
|
|
661
|
-
transform: "translateX(0)"
|
|
662
|
-
}
|
|
663
|
-
});
|
|
664
|
-
var slideOut = keyframes({
|
|
665
|
-
from: {
|
|
666
|
-
transform: "translateX(0)"
|
|
667
|
-
},
|
|
668
|
-
to: {
|
|
669
|
-
transform: "translateX(100%)"
|
|
670
|
-
}
|
|
671
|
-
});
|
|
672
|
-
var CheckboxIndicator = styled(Checkbox.Indicator, {
|
|
673
|
-
color: "$smokedWhite",
|
|
674
|
-
width: "$4",
|
|
675
|
-
height: "$4",
|
|
676
|
-
'&[data-state="checked"]': {
|
|
677
|
-
animation: `${slideIn} 100ms ease-out`
|
|
678
|
-
},
|
|
679
|
-
'&[data-state="unchecked"]': {
|
|
680
|
-
animation: `${slideOut} 100ms ease-out`
|
|
725
|
+
errored: false,
|
|
726
|
+
radius: "md"
|
|
681
727
|
}
|
|
682
728
|
});
|
|
683
729
|
|
|
@@ -688,18 +734,26 @@ function Checkbox2(_a) {
|
|
|
688
734
|
label,
|
|
689
735
|
error,
|
|
690
736
|
hint,
|
|
691
|
-
required
|
|
737
|
+
required,
|
|
738
|
+
labelProps,
|
|
739
|
+
errorProps,
|
|
740
|
+
hintProps,
|
|
741
|
+
requiredAsteriskProps
|
|
692
742
|
} = _b, props = __objRest(_b, [
|
|
693
743
|
"label",
|
|
694
744
|
"error",
|
|
695
745
|
"hint",
|
|
696
|
-
"required"
|
|
746
|
+
"required",
|
|
747
|
+
"labelProps",
|
|
748
|
+
"errorProps",
|
|
749
|
+
"hintProps",
|
|
750
|
+
"requiredAsteriskProps"
|
|
697
751
|
]);
|
|
698
|
-
return /* @__PURE__ */ jsx5(InputBox, { error, hint, children: /* @__PURE__ */ jsxs4(CheckboxBox, { children: [
|
|
752
|
+
return /* @__PURE__ */ jsx5(InputBox, { error, hint, errorProps, hintProps, children: /* @__PURE__ */ jsxs4(CheckboxBox, { children: [
|
|
699
753
|
/* @__PURE__ */ jsx5(CheckboxContainer, __spreadProps(__spreadValues({}, props), { errored: !!error, children: /* @__PURE__ */ jsx5(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ jsx5(Check, { weight: "bold" }) }) })),
|
|
700
754
|
/* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
701
|
-
!!label && /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", children: label }),
|
|
702
|
-
required && /* @__PURE__ */ jsx5(Text, { as: "span", size: "sm", variant: "danger", children: "*" })
|
|
755
|
+
!!label && /* @__PURE__ */ jsx5(Text, __spreadProps(__spreadValues({ as: "span", size: "sm" }, labelProps), { children: label })),
|
|
756
|
+
required && /* @__PURE__ */ jsx5(Text, __spreadProps(__spreadValues({ as: "span", size: "sm", variant: "danger" }, requiredAsteriskProps), { children: "*" }))
|
|
703
757
|
] })
|
|
704
758
|
] }) });
|
|
705
759
|
}
|