Merge pull request #141 from linked-planet/dev

Update package dependencies and enhance component styles. Bump versio…

Author: marcus-wishes

library/src/components/Button.tsx

@@ -23,7 +23,7 @@ export type ButtonAppearance =
 
 type ButtonVariantProps = VariantProps<typeof buttonVariants>
 const buttonVariants = cva(
-	"focus-visible:outline-selected-bold relative box-border flex shrink-0 cursor-pointer items-center justify-center gap-1 rounded-sm border-2 border-transparent px-3 py-1 outline-none outline-2 outline-offset-4 focus-visible:outline-solid",
+	"focus-visible:outline-selected-bold relative box-border flex shrink-0 cursor-pointer items-center justify-center gap-1 rounded-sm border-2 border-transparent px-2 py-1 outline-none outline-2 outline-offset-4 focus-visible:outline-solid",
 	{
 		variants: {
 			appearance: {

library/src/components/DropdownMenu.tsx

@@ -479,24 +479,24 @@ const Trigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(
 				{...rest}
 			>
 				{children}
-				<IconSizeHelper
-					className={`hidden h-4 w-4 items-center justify-center ${
+				<ChevronUpIcon
+					size="16"
+					strokeWidth="3"
+					className={`hidden text-text-subtlest hover:text-text disabled:text-text-disabled ${
 						hideChevron
 							? ""
 							: "group-data-[state=open]:flex group-data-[state=open]:visible"
 					}`}
-				>
-					<ChevronUpIcon size="12" strokeWidth="4" />
-				</IconSizeHelper>
-				<IconSizeHelper
-					className={`hidden h-4 w-4 items-center justify-center ${
+				/>
+				<ChevronDownIcon
+					size="16"
+					strokeWidth="3"
+					className={`hidden text-text-subtlest hover:text-text disabled:text-text-disabled ${
 						hideChevron
 							? ""
 							: "group-data-[state=closed]:flex group-data-[state=closed]:visible"
 					}`}
-				>
-					<ChevronDownIcon size="12" strokeWidth="4" />
-				</IconSizeHelper>
+				/>
 			</Button>
 		)
 	},

library/src/components/Popover.tsx

@@ -4,7 +4,6 @@ import { twMerge } from "tailwind-merge"
 import { getPortal } from "../utils"
 import { Button, type ButtonProps } from "./Button"
 import { overlayBaseStyle } from "./styleHelper"
-import { IconSizeHelper } from "./IconSizeHelper"
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 const portalDivId = "uikts-popover" as const
@@ -13,6 +12,8 @@ type TriggerProps = RPo.PopoverTriggerProps &
 	ButtonProps & {
 		"data-state"?: "open" | "closed" // coming from RDd, do not use, only for typechecking
 		hideChevron?: boolean
+		chevronClassName?: string
+		chevronStyle?: React.CSSProperties
 	}
 
 // this is basically a copy of the dropdown trigger
@@ -22,7 +23,10 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
 			children,
 			style,
 			className,
+			chevronClassName,
+			chevronStyle,
 			hideChevron = false,
+			disabled,
 			...rest
 		} = props
 		return (
@@ -36,22 +40,30 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
 					...style,
 				}}
 				{...rest}
+				disabled={disabled}
 			>
 				{children}
-				<IconSizeHelper
-					className={`hidden h-full w-6 items-center justify-center ${
-						hideChevron ? "" : "group-data-[state=open]:flex"
-					}`}
-				>
-					<ChevronUpIcon size="12" />
-				</IconSizeHelper>
-				<IconSizeHelper
-					className={`hidden h-full w-6 items-center justify-center ${
-						hideChevron ? "" : "group-data-[state=closed]:flex"
-					}`}
-				>
-					<ChevronDownIcon size="12" />
-				</IconSizeHelper>
+				<ChevronUpIcon
+					size="16"
+					strokeWidth={3}
+					className={twMerge(
+						"hidden text-text-subtlest hover:text-text disabled:text-text-disabled",
+						hideChevron ? "" : "group-data-[state=open]:flex",
+						chevronClassName,
+					)}
+					style={chevronStyle}
+				/>
+
+				<ChevronDownIcon
+					size="16"
+					strokeWidth={3}
+					className={twMerge(
+						"hidden text-text-subtlest hover:text-text disabled:text-text-disabled",
+						hideChevron ? "" : "group-data-[state=closed]:flex",
+						chevronClassName,
+					)}
+					style={chevronStyle}
+				/>
 			</Button>
 		)
 	},

library/src/components/inputs/Select.tsx

@@ -25,6 +25,17 @@ import {
 } from "react-select"
 import ReactSelectAsync from "react-select/async"
 
+import { getPortal } from "../../utils/getPortal"
+
+import ReactSelectCreatable, {
+	type CreatableProps,
+} from "react-select/creatable"
+import { twJoin, twMerge } from "tailwind-merge"
+import { SlidingErrorMessage } from "./ErrorHelpWrapper"
+import { IconSizeHelper } from "../IconSizeHelper"
+import { inputBaseStyles } from "../styleHelper"
+import { ChevronDownIcon, ChevronUpIcon, XIcon } from "lucide-react"
+
 // usage aria stuff:
 // https://react-select.com/advanced
 
@@ -40,17 +51,6 @@ export type SelectAriaOnChange<V, isMulti extends boolean> = AriaOnChange<
 export type SelectAriaOnFilter = AriaOnFilter
 export type SelectAriaOnFocus<V> = AriaOnFocus<OptionType<V>>
 
-import { getPortal } from "../../utils/getPortal"
-
-import ReactSelectCreatable, {
-	type CreatableProps,
-} from "react-select/creatable"
-import { twJoin, twMerge } from "tailwind-merge"
-import { SlidingErrorMessage } from "./ErrorHelpWrapper"
-import { IconSizeHelper } from "../IconSizeHelper"
-import { inputBaseStyles } from "../styleHelper"
-import { ChevronDownIcon, ChevronUpIcon, XIcon } from "lucide-react"
-
 const menuStyles =
 	"bg-surface min-w-min shadow-overlay rounded-xs overflow-hidden" // some styles like zIndex are overwritten by react-select, use the custom-styles below for those
 
@@ -508,9 +508,9 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
 					>
 						<IconSizeHelper>
 							{_props.selectProps.menuIsOpen ? (
-								<ChevronUpIcon size="12" />
+								<ChevronUpIcon size="16" strokeWidth={3} />
 							) : (
-								<ChevronDownIcon size="12" />
+								<ChevronDownIcon size="16" strokeWidth={3} />
 							)}
 						</IconSizeHelper>
 					</div>