@postxl/ui-components 1.6.4 → 1.7.0

package/dist/index.js

@@ -1380,9 +1380,9 @@ function ComboboxDemo() {
 
 //#endregion
 //#region src/spinner/spinner.tsx
-function Spinner({ classNames }) {
+function Spinner({ className }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex justify-center items-center w-full h-full", classNames),
+		className: cn("flex justify-center items-center w-full h-full", className),
 		children: /* @__PURE__ */ jsxs("svg", {
 			className: "w-auto text-[inherit] h-full animate-spin",
 			xmlns: "http://www.w3.org/2000/svg",
@@ -1409,7 +1409,7 @@ function Loader({ label, disabled }) {
 		className: "flex absolute z-1 left-0 top-0 bottom-0 right-0 bg-secondary/50",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-center flex-1 flex-col",
-			children: [/* @__PURE__ */ jsx(Spinner, { classNames: "w-[24px] h-[25px]" }), label && /* @__PURE__ */ jsx("h3", {
+			children: [/* @__PURE__ */ jsx(Spinner, { className: "w-[24px] h-[25px]" }), label && /* @__PURE__ */ jsx("h3", {
 				className: "pb-0 pt-3 font-medium text-xl mb-2 text-muted-foreground",
 				children: label
 			})]
@@ -1466,7 +1466,7 @@ const CommandInput = React.forwardRef(({ className, wrapperClassName, loading, r
 			variant,
 			inputSize
 		}), wrapperClassName),
-		children: [loading ? /* @__PURE__ */ jsx(Spinner, { classNames: "size-4" }) : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
+		children: [loading ? /* @__PURE__ */ jsx(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
 			ref,
 			"data-slot": "command-input",
 			className: cn("placeholder:text-muted-foreground flex w-full rounded bg-transparent text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
@@ -9164,10 +9164,11 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 //#endregion
 //#region src/progress/progress.tsx
-const Progress = ({ value, size = "100%" }) => {
+const Progress = ({ value, size = "100%", className }) => {
 	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "progress-bar",
 		style: { "--parent-width": size },
-		className: "w-(--parent-width) flex justify-center relative rounded-md overflow-hidden h-2 mt-8",
+		className: cn("w-(--parent-width) flex justify-center relative rounded-md overflow-hidden h-2 mt-8", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "w-full absolute top-0 left-0 h-2.5 bg-(--discreet-border)",
 			"data-testid": "progress-bg"
@@ -11427,11 +11428,12 @@ function Tabs({ className,...props }) {
 		...props
 	});
 }
-const tabsListVariants = cva("w-fit text-muted-foreground inline-flex items-center justify-center rounded-lg", {
+const tabsListVariants = cva("w-fit text-muted-foreground inline-flex items-center justify-center", {
 	variants: {
 		variant: {
-			default: "bg-muted p-[3px]",
-			protocol: "bg-transparent"
+			default: "rounded-lg bg-muted p-[3px]",
+			protocol: "rounded-lg bg-transparent",
+			underline: "border-b border-border bg-transparent p-0 rounded-none"
 		},
 		size: {
 			default: "h-9",
@@ -11458,7 +11460,8 @@ function TabsList({ className, variant, size, asChild = false,...props }) {
 }
 const tabsTriggerVariants = cva("h-[100%] text-lg inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 text-foreground", { variants: { variant: {
 	default: "h-[calc(100%-1px)] flex-1 rounded-md border border-transparent px-2 py-1 transition-[color,box-shadow] dark:text-muted-foreground data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:shadow-sm",
-	protocol: "bg-transparent border-b-2 border-b-transparent hover:text-primary hover:border-b-primary data-[state=active]:border-b-primary data-[state=active]:text-primary"
+	protocol: "bg-transparent border-b-2 border-b-transparent hover:text-primary hover:border-b-primary data-[state=active]:border-b-primary data-[state=active]:text-primary",
+	underline: "rounded-none border-b-2 border-transparent px-4 py-2 hover:border-primary/50 hover:text-foreground data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
 } } });
 function TabsTrigger({ className, variant, asChild = false,...props }) {
 	const Comp = asChild ? Slot : TabsPrimitive.Trigger;