athameui 0.0.11 → 0.0.12
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/components/Button/Button.tsx +0 -1
- package/components/Carousel/Carousel.tsx +6 -2
- package/components/FormField/FormField.tsx +1 -0
- package/dist/athameui.cjs +6 -4
- package/dist/athameui.cjs.map +1 -1
- package/dist/athameui.mjs +6 -4
- package/dist/athameui.mjs.map +1 -1
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Carousel/Carousel.d.ts.map +1 -1
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/styles/components/carousel.css +9 -2
- package/dist/styles/components/form-input.css +27 -7
- package/dist/styles/tokens.css +0 -3
- package/package.json +1 -1
- package/styles/components/carousel.css +9 -2
- package/styles/components/form-input.css +27 -7
- package/styles/tokens.css +0 -3
|
@@ -19,7 +19,7 @@ export type CarouselProps = {
|
|
|
19
19
|
export const Carousel = ({
|
|
20
20
|
children,
|
|
21
21
|
className,
|
|
22
|
-
emptyMessage,
|
|
22
|
+
emptyMessage = "Nothing here yet",
|
|
23
23
|
sx,
|
|
24
24
|
}: CarouselProps) => {
|
|
25
25
|
const [isHovered, setIsHovered] = useState(false);
|
|
@@ -70,7 +70,11 @@ export const Carousel = ({
|
|
|
70
70
|
onMouseLeave={handleMouseLeave}
|
|
71
71
|
icon={<HugeiconsIcon icon={ArrowLeftIcon} size={36} />}
|
|
72
72
|
/>
|
|
73
|
-
{hasItems ?
|
|
73
|
+
{hasItems ? (
|
|
74
|
+
children
|
|
75
|
+
) : (
|
|
76
|
+
<div className="ath-carousel-empty">{emptyMessage}</div>
|
|
77
|
+
)}
|
|
74
78
|
<Button
|
|
75
79
|
className={{ button: "ath-carousel-arrow ath-carousel-right-arrow" }}
|
|
76
80
|
onClick={handleRightArrowClick}
|
|
@@ -92,6 +92,7 @@ export const FormField: React.FC<FormFieldProps> = ({
|
|
|
92
92
|
|
|
93
93
|
const containerClasses = cx(
|
|
94
94
|
"ath-form-input-container",
|
|
95
|
+
readOnly && "ath-form-input-container-readonly",
|
|
95
96
|
(labelPosition === "left" || labelPosition === "right") &&
|
|
96
97
|
"ath-form-input-container-horizontal",
|
|
97
98
|
className?.container ? className.container : "",
|
package/dist/athameui.cjs
CHANGED
|
@@ -2205,7 +2205,6 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
2205
2205
|
onMouseLeave,
|
|
2206
2206
|
...other
|
|
2207
2207
|
}, ref) => {
|
|
2208
|
-
console.log(sx);
|
|
2209
2208
|
const isIconOnly = icon && !children;
|
|
2210
2209
|
const sharedClasses = cx("ath-button", buttonVariants.size[size], buttonVariants.variant[variant], isIconOnly ? "ath-button-icon-only" : "", dark ? buttonVariants.dark : "", wrap ? buttonVariants.wrap : "");
|
|
2211
2210
|
const buttonClasses = cx(sharedClasses, buttonVariants.textPosition[textPosition], typeof className === "object" && className !== null ? className.button : className);
|
|
@@ -2586,7 +2585,7 @@ const ButtonGroup = ({
|
|
|
2586
2585
|
const Carousel = ({
|
|
2587
2586
|
children,
|
|
2588
2587
|
className,
|
|
2589
|
-
emptyMessage,
|
|
2588
|
+
emptyMessage = "Nothing here yet",
|
|
2590
2589
|
sx
|
|
2591
2590
|
}) => {
|
|
2592
2591
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
@@ -2632,7 +2631,10 @@ const Carousel = ({
|
|
|
2632
2631
|
icon: Qt,
|
|
2633
2632
|
size: 36
|
|
2634
2633
|
})
|
|
2635
|
-
}), hasItems ? children :
|
|
2634
|
+
}), hasItems ? children : jsx("div", {
|
|
2635
|
+
className: "ath-carousel-empty",
|
|
2636
|
+
children: emptyMessage
|
|
2637
|
+
}), jsx(Button, {
|
|
2636
2638
|
className: {
|
|
2637
2639
|
button: "ath-carousel-arrow ath-carousel-right-arrow"
|
|
2638
2640
|
},
|
|
@@ -2772,7 +2774,7 @@ const FormField = ({
|
|
|
2772
2774
|
...other
|
|
2773
2775
|
}) => {
|
|
2774
2776
|
const textAreaRef = React.useRef(null);
|
|
2775
|
-
const containerClasses = cx("ath-form-input-container", (labelPosition === "left" || labelPosition === "right") && "ath-form-input-container-horizontal", className?.container ? className.container : "");
|
|
2777
|
+
const containerClasses = cx("ath-form-input-container", readOnly && "ath-form-input-container-readonly", (labelPosition === "left" || labelPosition === "right") && "ath-form-input-container-horizontal", className?.container ? className.container : "");
|
|
2776
2778
|
const inputSharedClasses = cx(`ath-form-input-${size}`, disabled && "ath-form-input-shared-disabled", readOnly && "ath-form-input-shared-readonly", dark && "ath-form-input-shared-dark", className?.input ? className.input : "");
|
|
2777
2779
|
const inputClasses = cx("ath-form-input", inputSharedClasses, error && "ath-form-input-error");
|
|
2778
2780
|
const textAreaClasses = cx("ath-form-textarea", inputSharedClasses, autoResize && "ath-form-textarea-auto-resize", error && "ath-form-textarea-error");
|