@px-ui/core 2.1.0 → 3.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { n as __reExport, t as __export } from "./chunk-CYeTv9WL.js";
 import * as React$1 from "react";
 import React, { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
-import { Dialog } from "@base-ui-components/react";
+import { Collapsible, Dialog } from "@base-ui-components/react";
 import classnames from "classnames";
 import { extendTailwindMerge } from "tailwind-merge";
 import { cva } from "class-variance-authority";
@@ -133,11 +133,11 @@ var dialog_exports = /* @__PURE__ */ __export({
 	HeaderIcon: () => HeaderIcon,
 	Overlay: () => Overlay,
 	Portal: () => Portal$1,
-	Root: () => Root$10,
+	Root: () => Root$11,
 	Title: () => Title$3,
-	Trigger: () => Trigger$7
+	Trigger: () => Trigger$8
 });
-function Root$10({ ...props }) {
+function Root$11({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		"data-slot": "dialog",
 		...props
@@ -149,7 +149,7 @@ function Portal$1({ ...props }) {
 		...props
 	});
 }
-function Trigger$7({ ...props }) {
+function Trigger$8({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-slot": "dialog-trigger",
 		...props
@@ -242,11 +242,11 @@ var popover_exports = /* @__PURE__ */ __export({
 	Description: () => Description$2,
 	Footer: () => Footer,
 	Header: () => Header$2,
-	Root: () => Root$9,
+	Root: () => Root$10,
 	Title: () => Title$2,
-	Trigger: () => Trigger$6
+	Trigger: () => Trigger$7
 });
-function Root$9(props) {
+function Root$10(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		"data-slot": "popover",
 		...props
@@ -258,7 +258,7 @@ function Portal(props) {
 		...props
 	});
 }
-function Trigger$6(props) {
+function Trigger$7(props) {
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
 		"data-slot": "popover-trigger",
 		...props
@@ -531,7 +531,7 @@ var input_group_exports = /* @__PURE__ */ __export({
 	Addon: () => Addon,
 	Button: () => Button$1,
 	Input: () => Input$1,
-	Root: () => Root$8,
+	Root: () => Root$9,
 	Text: () => Text
 });
 const inputGroupVariants = cva("group/input-group relative flex items-center border border-ppx-neutral-5 bg-ppx-neutral-1 outline-transparent has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:-outline-offset-1 has-[[data-slot=input-group-control]:focus-visible]:bg-ppx-background has-[[data-slot=input-group-control]:focus-visible]:outline-ppx-primary-focus has-[[data-slot][aria-invalid=true]]:outline-ppx-red-4 has-[[data-slot][aria-invalid=true]]:outline has-[[data-slot][aria-invalid=true]]:-outline-offset-1 has-[[data-slot][aria-invalid=true]]:bg-ppx-red-1 has-[[data-slot=input-group-control]:disabled]:*:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-ppx-neutral-3 has-[[data-slot=input-group-control]:disabled]:bg-ppx-neutral-3 has-[[data-slot=input-group-control]:disabled]:text-ppx-neutral-11 has-[>[data-align=inline-start]]:[&>input]:pl-input has-[>[data-align=inline-end]]:[&>input]:pr-input", {
@@ -551,7 +551,7 @@ const inputGroupVariants = cva("group/input-group relative flex items-center bor
 		widthVariant: "full"
 	}
 });
-function Root$8({ className, size, disabled, widthVariant, ...props }) {
+function Root$9({ className, size, disabled, widthVariant, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
@@ -692,18 +692,18 @@ var combobox_exports = /* @__PURE__ */ __export({
 	List: () => List$2,
 	LoadingIndicator: () => LoadingIndicator,
 	MultiItem: () => MultiItem$1,
-	Root: () => Root$7,
+	Root: () => Root$8,
 	Search: () => Search,
 	SearchableTrigger: () => SearchableTrigger,
 	SearchableTriggerDropdownAddon: () => SearchableTriggerDropdownAddon,
-	Trigger: () => Trigger$5,
+	Trigger: () => Trigger$6,
 	Value: () => Value$2,
 	useComboboxContext: () => useComboboxContext
 });
 const SINGLE_TEXT_CONTENT_CN = "px-4 py-2 text-ppx-sm min-h-11 flex items-center justify-center text-ppx-muted-foreground";
 const List$2 = Combobox.List;
 const ComboboxContext = React$1.createContext({});
-function Root$7({ children, ...props }) {
+function Root$8({ children, ...props }) {
 	const chipsTriggerRef = React$1.useRef(null);
 	const searchableTriggerRef = React$1.useRef(null);
 	const [isOpen, setIsOpen] = React$1.useState(false);
@@ -821,7 +821,7 @@ function LoadingIndicator(props) {
 }
 function SearchableTrigger(props) {
 	const { invalid, disabled, searchableTriggerRef } = useComboboxContext();
-	return /* @__PURE__ */ jsxs(Root$8, {
+	return /* @__PURE__ */ jsxs(Root$9, {
 		...props,
 		disabled,
 		ref: searchableTriggerRef,
@@ -860,7 +860,7 @@ function SearchableTriggerDropdownAddon() {
 		]
 	});
 }
-function Trigger$5({ size, widthVariant, children, className, ...props }) {
+function Trigger$6({ size, widthVariant, children, className, ...props }) {
 	const { isLoading, invalid } = useComboboxContext();
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
 		"aria-label": "Open popup",
@@ -970,15 +970,15 @@ var select_exports = /* @__PURE__ */ __export({
 	List: () => List$1,
 	MultiItem: () => MultiItem,
 	MultiSelectedValue: () => MultiSelectedValue,
-	Root: () => Root$6,
-	Trigger: () => Trigger$4,
+	Root: () => Root$7,
+	Trigger: () => Trigger$5,
 	Value: () => Value$1
 });
 const SelectContext = React$1.createContext({});
 function useSelectContext() {
 	return React$1.useContext(SelectContext);
 }
-function Root$6({ children, invalid, ...props }) {
+function Root$7({ children, invalid, ...props }) {
 	const value = React$1.useMemo(() => ({ invalid }), [invalid]);
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {
 		value,
@@ -1028,7 +1028,7 @@ function ItemIndicator(props) {
 		children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 	});
 }
-function Trigger$4({ size, widthVariant, ...props }) {
+function Trigger$5({ size, widthVariant, ...props }) {
 	const { invalid } = useSelectContext();
 	return /* @__PURE__ */ jsxs(Select.Trigger, {
 		"aria-label": "Open popup",
@@ -1086,12 +1086,12 @@ var menu_exports = /* @__PURE__ */ __export({
 	Item: () => Item$5,
 	RadioGroup: () => RadioGroup$1,
 	RadioItem: () => RadioItem,
-	Root: () => Root$5,
+	Root: () => Root$6,
 	Separator: () => Separator$1,
-	Trigger: () => Trigger$3
+	Trigger: () => Trigger$4
 });
-const Root$5 = Menu.Root;
-function Trigger$3({ className, children, size, widthVariant = "fit", ...props }) {
+const Root$6 = Menu.Root;
+function Trigger$4({ className, children, size, widthVariant = "fit", ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Trigger, {
 		className: cn(triggerVariants({
 			size,
@@ -1157,7 +1157,7 @@ var progress_exports = /* @__PURE__ */ __export({
 	BaseProgress: () => BaseProgress,
 	Indicator: () => Indicator$1,
 	Label: () => Label$1,
-	Root: () => Root$4,
+	Root: () => Root$5,
 	Track: () => Track,
 	Value: () => Value
 });
@@ -1169,7 +1169,7 @@ const progressTrackVariants = cva("relative h-2 w-full overflow-hidden rounded-f
 	} },
 	defaultVariants: { size: "default" }
 });
-const Root$4 = Progress.Root;
+const Root$5 = Progress.Root;
 function Track({ className, size, children, ...props }) {
 	return /* @__PURE__ */ jsx(Progress.Track, {
 		className: cn(progressTrackVariants({ size }), className),
@@ -1201,7 +1201,7 @@ const BaseProgress = Progress;
 //#region src/components/segmented-control.tsx
 var segmented_control_exports = /* @__PURE__ */ __export({
 	Item: () => Item$4,
-	Root: () => Root$3
+	Root: () => Root$4
 });
 const segmentedControlItemVariants = cva("relative flex items-center justify-center px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out cursor-pointer rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ppx-primary-5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
 	variants: {
@@ -1217,7 +1217,7 @@ const segmentedControlItemVariants = cva("relative flex items-center justify-cen
 		size: "default"
 	}
 });
-function Root$3({ className, ...props }) {
+function Root$4({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "segmented-control",
 		className: cn("p-1 inline-flex items-center rounded-full bg-ppx-neutral-3", className),
@@ -1242,8 +1242,8 @@ function Item$4({ children, className, variant, size, ...props }) {
 var tabs_exports = /* @__PURE__ */ __export({
 	Content: () => Content$1,
 	List: () => List,
-	Root: () => Root$2,
-	Trigger: () => Trigger$2
+	Root: () => Root$3,
+	Trigger: () => Trigger$3
 });
 const TabsContext = React$1.createContext(null);
 const useTabs = () => {
@@ -1251,7 +1251,7 @@ const useTabs = () => {
 	if (!context) throw new Error("useTabs must be used within a Tabs");
 	return context;
 };
-function Root$2({ variant = "underline", className, ...props }) {
+function Root$3({ variant = "underline", className, ...props }) {
 	return /* @__PURE__ */ jsx(TabsContext.Provider, {
 		value: { variant },
 		children: /* @__PURE__ */ jsx(Tabs.Root, {
@@ -1273,7 +1273,7 @@ function List({ className, children, ...props }) {
 		]
 	});
 }
-function Trigger$2({ className, ...props }) {
+function Trigger$3({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		"data-slot": "tabs-trigger",
 		className: cn("focus-visible:ring-ring/50 [&_svg:not([class*='size-'])] gap-1.5 px-2 py-1 text-sm font-medium z-[1] flex-1 items-center justify-center text-nowrap whitespace-nowrap text-ppx-neutral-18 not-data-selected:hover:text-ppx-neutral-12 focus-visible:ring-[3px] data-selected:text-ppx-primary-b-5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
@@ -1302,8 +1302,8 @@ var tooltip_exports = /* @__PURE__ */ __export({
 	BaseProvider: () => BaseProvider,
 	BaseRoot: () => BaseRoot,
 	Content: () => Content,
-	Root: () => Root$1,
-	Trigger: () => Trigger$1
+	Root: () => Root$2,
+	Trigger: () => Trigger$2
 });
 function TooltipProvider(props) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, {
@@ -1329,7 +1329,7 @@ function TooltipArrow({ ...props }) {
 		...props
 	});
 }
-function Root$1({ ...props }) {
+function Root$2({ ...props }) {
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip.Root, {
 		"data-slot": "tooltip",
 		...props
@@ -1337,7 +1337,7 @@ function Root$1({ ...props }) {
 }
 const BaseRoot = Tooltip.Root;
 const BaseProvider = Tooltip.Provider;
-function Trigger$1({ ...props }) {
+function Trigger$2({ ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
 		"data-slot": "tooltip-trigger",
 		...props
@@ -1644,6 +1644,39 @@ function BreadcrumbSeparator({ children, className, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/components/collapsible.tsx
+var collapsible_exports = /* @__PURE__ */ __export({
+	Panel: () => Panel,
+	Root: () => Root$1,
+	ToggleIcon: () => ToggleIcon,
+	Trigger: () => Trigger$1
+});
+function Root$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function Trigger$1(props) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "collapsible-trigger",
+		...props,
+		className: cn("group flex items-center gap-2", props.className)
+	});
+}
+function Panel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		"data-slot": "collapsible-content",
+		className: cn("flex h-[var(--collapsible-panel-height)] w-full flex-col overflow-hidden transition-all duration-150 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 [&[hidden]:not([hidden='until-found'])]:hidden", className),
+		...props
+	});
+}
+function ToggleIcon() {
+	return /* @__PURE__ */ jsx(ChevronDownIcon, { className: "rotate-270 group-data-[panel-open]:rotate-360 transition-all ease-out" });
+}
+
 //#endregion
 //#region src/components/calendar.tsx
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", formatters, components, ...props }) {
@@ -1869,9 +1902,9 @@ const replaceSizeInUrl = (url, size) => {
 	return url.replace("/SIZE/", `/${newSize}/`);
 };
 function Avatar(props) {
-	return /* @__PURE__ */ jsxs(Root$1, {
+	return /* @__PURE__ */ jsxs(Root$2, {
 		disabled: props.hideTooltip,
-		children: [/* @__PURE__ */ jsx(Trigger$1, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
+		children: [/* @__PURE__ */ jsx(Trigger$2, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
 			...props,
 			avatarRootProps: tooltipProps
 		}) }), /* @__PURE__ */ jsx(Content, { children: props.name })]
@@ -1916,7 +1949,7 @@ function AvatarGroup({ max = 4, avatars, className }) {
 	return /* @__PURE__ */ jsx(BaseProvider, { children: /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center", className),
 		"data-slot": "avatar-group",
-		children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger$1, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
+		children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger$2, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
 			className: "relative",
 			style: {
 				marginLeft: index > 0 ? `-${parseInt(avatar.size ?? "100px") * .25}px` : "0",
@@ -1933,9 +1966,9 @@ function AvatarGroup({ max = 4, avatars, className }) {
 				marginLeft: `-${parseInt(avatars[0].size ?? "100px") * .25}px`,
 				zIndex: 0
 			},
-			children: /* @__PURE__ */ jsxs(Root$9, {
+			children: /* @__PURE__ */ jsxs(Root$10, {
 				openOnHover: true,
-				children: [/* @__PURE__ */ jsx(Trigger$6, { children: /* @__PURE__ */ jsxs("div", {
+				children: [/* @__PURE__ */ jsx(Trigger$7, { children: /* @__PURE__ */ jsxs("div", {
 					className: cn("bg-ppx-neutral-3 text-ppx-neutral-18 hover:bg-ppx-neutral-4 flex cursor-pointer items-center justify-center font-medium transition-colors", avatars[0].variant === "rounded" ? "rounded-full" : "rounded-ppx-s"),
 					style: {
 						width: avatars[0].size ?? "100px",
@@ -2023,11 +2056,11 @@ function DatePicker({ triggerProps, placeholder = "Pick a date", format: format$
 		calendarProps.onSelect(...args);
 		!calendarProps.mode || calendarProps.mode === "single" && setOpen(false);
 	};
-	return /* @__PURE__ */ jsxs(Root$9, {
+	return /* @__PURE__ */ jsxs(Root$10, {
 		open,
 		onOpenChange: setOpen,
 		...popoverRootProps,
-		children: [/* @__PURE__ */ jsxs(Trigger$6, {
+		children: [/* @__PURE__ */ jsxs(Trigger$7, {
 			disabled: triggerProps?.disabled,
 			className: cn(triggerVariants({
 				size: triggerProps?.size,
@@ -2875,6 +2908,7 @@ var src_exports = /* @__PURE__ */ __export({
 	Button: () => Button,
 	Calendar: () => Calendar,
 	Checkbox: () => Checkbox,
+	Collapsible: () => collapsible_exports,
 	Combobox: () => combobox_exports,
 	DatePicker: () => DatePicker,
 	Dialog: () => dialog_exports,
@@ -2906,5 +2940,5 @@ var src_exports = /* @__PURE__ */ __export({
 });
 
 //#endregion
-export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, FileIcon, FileUpload, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, UploadIcon, buttonVariants, cn, defineLoadOptions, formatBytes, useAsyncOptions, useFileUpload, useIntersectionObserver };
+export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, collapsible_exports as Collapsible, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, FileIcon, FileUpload, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, UploadIcon, buttonVariants, cn, defineLoadOptions, formatBytes, useAsyncOptions, useFileUpload, useIntersectionObserver };
 //# sourceMappingURL=index.js.map