From 08e9a1e76bcadaa7a6cdcad2fd957894d5633be0 Mon Sep 17 00:00:00 2001 From: Branko Conjic Date: Fri, 23 Aug 2024 19:10:35 +0200 Subject: [PATCH] feat: add Select component (#79) * chore: update dependencies * fix: add rehypePrettyCode theme name * refactor(DropdownMenu): move CheckIcon in own file * feat: add `surface.overlay` and `surface.overlay-foreground` colors * chore: update dependencies * fix: lint errors and warnings * refactor: update styles * feat: add `surface` `overlay` colors * refactor: add default value for `content` * feat: add Select component --- .changeset/blue-ladybugs-fry.md | 5 + .changeset/few-nails-hug.md | 5 + .changeset/nine-turtles-work.md | 5 + apps/docs/package.json | 24 +- apps/docs/public/docs/components/select.mdx | 337 ++ apps/docs/src/actions/webflow.ts | 8 +- apps/docs/src/components/CustomMDX.tsx | 3 +- apps/docs/src/components/PreloadResources.tsx | 3 +- apps/docs/src/components/PreviewComponent.tsx | 6 +- apps/docs/src/components/PropsTable.tsx | 2 +- apps/docs/src/config/sidebarConfig.ts | 10 +- apps/docs/src/examples/index.ts | 179 + apps/docs/src/examples/select/example-1.tsx | 73 + apps/docs/src/examples/select/example-2.tsx | 58 + apps/docs/src/examples/select/preview.tsx | 36 + apps/docs/src/lib/mdx/unist.ts | 2 +- package.json | 30 +- packages/eslint-config/package.json | 16 +- packages/wedges/package.json | 33 +- .../src/components/Checkbox/Checkbox.tsx | 2 +- .../CheckboxGroup/CheckboxGroup.tsx | 4 +- .../components/DropdownMenu/DropdownMenu.tsx | 36 +- .../wedges/src/components/Input/Input.tsx | 4 +- .../src/components/Progress/ProgressBar.tsx | 4 +- .../src/components/RadioGroup/RadioGroup.tsx | 2 +- .../wedges/src/components/Select/Select.tsx | 257 + .../wedges/src/components/Select/index.ts | 1 + .../wedges/src/components/Switch/Switch.tsx | 2 +- .../components/SwitchGroup/SwitchGroup.tsx | 4 +- .../src/components/Tooltip/TooltipTrigger.tsx | 6 +- .../wedges/src/components/icons/CheckIcon.tsx | 23 + packages/wedges/src/components/index.ts | 1 + .../foundation/colors/themableColors.ts | 12 +- packages/wedges/src/tw-plugin/plugin.ts | 3 +- packages/wedges/src/tw-plugin/utils/types.ts | 2 +- pnpm-lock.yaml | 4487 ++++++++--------- 36 files changed, 3245 insertions(+), 2440 deletions(-) create mode 100644 .changeset/blue-ladybugs-fry.md create mode 100644 .changeset/few-nails-hug.md create mode 100644 .changeset/nine-turtles-work.md create mode 100644 apps/docs/public/docs/components/select.mdx create mode 100644 apps/docs/src/examples/select/example-1.tsx create mode 100644 apps/docs/src/examples/select/example-2.tsx create mode 100644 apps/docs/src/examples/select/preview.tsx create mode 100644 packages/wedges/src/components/Select/Select.tsx create mode 100644 packages/wedges/src/components/Select/index.ts create mode 100644 packages/wedges/src/components/icons/CheckIcon.tsx diff --git a/.changeset/blue-ladybugs-fry.md b/.changeset/blue-ladybugs-fry.md new file mode 100644 index 0000000..9ad2046 --- /dev/null +++ b/.changeset/blue-ladybugs-fry.md @@ -0,0 +1,5 @@ +--- +"@lemonsqueezy/wedges": minor +--- + +added `overlay`, `overlay-foreground` and `overlay-focus` scales to the `surface` themeable color diff --git a/.changeset/few-nails-hug.md b/.changeset/few-nails-hug.md new file mode 100644 index 0000000..2978619 --- /dev/null +++ b/.changeset/few-nails-hug.md @@ -0,0 +1,5 @@ +--- +"@lemonsqueezy/wedges": minor +--- + +add Select component diff --git a/.changeset/nine-turtles-work.md b/.changeset/nine-turtles-work.md new file mode 100644 index 0000000..902361c --- /dev/null +++ b/.changeset/nine-turtles-work.md @@ -0,0 +1,5 @@ +--- +"@lemonsqueezy/wedges": patch +--- + +update dependencies diff --git a/apps/docs/package.json b/apps/docs/package.json index 402cef0..fe92277 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -14,22 +14,22 @@ "typecheck": "tsc --pretty --noEmit" }, "dependencies": { - "@headlessui/react": "^2.0.4", + "@headlessui/react": "^2.1.2", "@iconicicons/react": "^1.5.1", - "@radix-ui/react-navigation-menu": "^1.1.4", - "@radix-ui/react-scroll-area": "^1.0.5", - "fathom-client": "^3.7.0", - "next": "14.2.4", - "sass": "^1.77.6" + "@radix-ui/react-navigation-menu": "^1.2.0", + "@radix-ui/react-scroll-area": "^1.1.0", + "fathom-client": "^3.7.2", + "next": "14.2.6", + "sass": "^1.77.8" }, "devDependencies": { - "@docsearch/react": "^3.6.0", + "@docsearch/react": "^3.6.1", "@lemonsqueezy/wedges": "workspace:*", - "@shikijs/transformers": "^1.7.0", - "@tailwindcss/typography": "^0.5.13", + "@shikijs/transformers": "^1.14.1", + "@tailwindcss/typography": "^0.5.14", "@types/hast": "^3.0.4", - "@types/unist": "^3.0.2", - "autoprefixer": "^10.4.19", + "@types/unist": "^3.0.3", + "autoprefixer": "^10.4.20", "hast-util-from-html-isomorphic": "^2.0.0", "mdast-util-toc": "^7.1.0", "next-mdx-remote": "^5.0.0", @@ -39,7 +39,7 @@ "rehype-slug": "^6.0.0", "remark": "^15.0.1", "remark-gfm": "^4.0.0", - "remark-smartypants": "^3.0.1", + "remark-smartypants": "^3.0.2", "unist-builder": "^4.0.0", "unist-util-visit": "^5.0.0" } diff --git a/apps/docs/public/docs/components/select.mdx b/apps/docs/public/docs/components/select.mdx new file mode 100644 index 0000000..2f39301 --- /dev/null +++ b/apps/docs/public/docs/components/select.mdx @@ -0,0 +1,337 @@ +--- +title: Select +description: A dropdown component that presents a list of selectable options when triggered by a button. +links: + source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/src/components/Select/Select.tsx + radix: https://www.radix-ui.com/docs/primitives/components/select +--- + + + +### Usage + +```tsx +import { + Select, + SelectContent, + SelectGroup, + SelectIcon, + SelectItem, + SelectPortal, + SelectTrigger, + SelectValue, +} from "@lemonsqueezy/wedges"; +``` + +```tsx showLineNumbers + +``` + +You can use `SelectPortal` to render the content in a different location in the DOM. See API Reference for details. + +```tsx {3, 11} showLineNumbers + +``` + +For more advanced usage, the additional components are available to customize the content and appearance of the `Select` component. See [API Reference](#api-reference) for details. + +### API Reference + +#### Select + +Contains all the parts of a select. A styled wrapper around Radix [Select.Root](https://www.radix-ui.com/primitives/docs/components/select#root) primitive with additional features. + + void" }, + {}, + ], + [ + { + value: "defaultOpen", + description: + "The open state of the select when it is initially rendered. Use when you do not need to control its open state.", + }, + { value: "boolean" }, + {}, + ], + [ + { + value: "open", + description: + "The controlled open state of the select. Must be used in conjunction with `onOpenChange`.", + }, + { value: "boolean" }, + {}, + ], + [ + { + value: "onOpenChange", + description: "Event handler called when the `open` state of the select changes.", + }, + { value: "function", description: "(open: boolean) => void" }, + {}, + ], + [ + { + value: "dir", + description: "The reading direction of the select when applicable. If omitted, inherits globally from Radix `DirectionProvider` or assumes LTR (left-to-right) reading mode.", + }, + { value: "enum", description: '"ltr" | "rtl"' }, + {}, + ], + [ + { + value: "name", + description: "The name of the select. Submitted with its owning form as part of a name/value pair.", + }, + { value: "string" }, + {}, + ], + [ + { + value: "disabled", + description: "When `true`, prevents the user from interacting with select.", + }, + { value: "boolean" }, + {}, + ], + [ + { + value: "reqiured", + description: "When true, indicates that the user must select a value before the owning form can be submitted.", + }, + { value: "boolean" }, + {}, + ], + ]} +/> + +#### SelectTrigger + +The button that toggles the select. The `SelectContent` component is rendered when the trigger is clicked. + + + + + +#### SelectValue + +The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own `children`. It should not be styled to ensure correct positioning. An optional `placeholder` prop is also available for when the select has no value. + + + +#### SelectIcon + +A small icon often displayed next to the value as a visual affordance for the fact it can be open. By default renders a chevron icon pointed down or up depending on the `open` state, but you can use your own icon via `asChild` or use `children`. + + + +#### SelectPortal + +When used, portals the content part into the `body`. By default it appends content to the `body`, but you can specify a custom `container`. + + + +#### SelectContent + +The component that pops out when the select is open. A styled wrapper around Radix [Select.Content](https://www.radix-ui.com/primitives/docs/components/select#content) primitive with additional features. + + void'}, {}], + [{ value: "onEscapeKeyDown", description: "Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`."}, { value: "function", description: '(event: KeyboardEvent) => void'}, {}], + [{ value: "onPointerDownOutside", description: "Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling `event.preventDefault`."}, { value: "function", description: '(event: PointerDownOutsideEvent) => void'}, {}], + [{ value: "position", description: "The positioning mode to use, `item-aligned` behaves similarly to a native MacOS menu by positioning content relative to the active item. `popper` is the default and positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`."}, { value: "enum", description: '"item-aligned" | "popper"'}, {value: 'popper'}], + [{ value: "side", description: "The preferred side of the anchor to render against when open. Will be reversed when collisions occur and `avoidCollisions` is enabled. Only available when position is set to `popper`."}, { value: "enum", description: '"top" | "right" | "bottom" | "left"'}, {value: '"bottom"'}], + [{ value: "sideOffset", description: "The distance in pixels from the anchor. Only available when `position` is set to `popper`."}, { value: "number"}, {value: '8'}], + [{ value: "align", description: "The preferred alignment against the anchor. May change when collisions occur. Only available when `position` is set to `popper`."}, { value: "enum", description: '"start" | "center" | "end"'}, {value: '"start"'}], + [{ value: "alignOffset", description: "An offset in pixels from the `start` or `end` alignment options. Only available when `position` is set to `popper`."}, { value: "number"}, {value: '0'}], + [{ value: "avoidCollisions", description: "When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges. Only available when `position` is set to `popper`."}, { value: "boolean"}, {value: 'true'}], + [{ value: "collisionBoundary", description: "The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. Only available when `position` is set to `popper`."}, { value: "Boundary", description: 'Element | null | Array'}, {value: '[]'}], + [{ value: "collisionPadding", description: "The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. Only available when `position` is set to `popper`."}, { value: "number | Padding", description: 'number | Partial>'}, {value: '10'}], + [{ value: "sticky", description: "The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `always` will keep the content in the boundary regardless. Only available when `position` is set to `popper`."}, { value: "enum", description: '"partial" | "always"'}, {value: '"partial"'}], + [{ value: "hideWhenDetached", description: "Whether to hide the content when the trigger becomes fully occluded. Only available when `position` is set to `popper`."}, { value: "boolean" }, {value: 'false'}], + [{ value: "showScrollButtons", description: "Whether to hide the `Select.ScrollUpButton` and `Select.ScrollDownButton` components."}, { value: "boolean" }, {value: 'false'}], + ]} + includeCommonDocs={{ + asChild: true, + }} +/> + + + +CSS variables are available for this component. See Radix Select for more details. + +#### SelectItem + +The component that contains the select items. + +By default `SelectItemText` and `SelectItemIndicator` are rendered inside the `SelectItem` component. You can use your own components if you need to customize it via `children`. + + + + + +#### SelectItemText + +The textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning. + + + +#### SelectItemIndicator + +Renders when the item is selected. You can style this element directly, or you can use it as a wrapper to put an icon into, or both. By default it renders a checkmark icon. + + + +#### SelectGroup + + + +#### SelectLabel + +Used to render the label of a group. It won't be focusable using arrow keys. + + + +#### SelectSeparator + +Used to visually separate items in the select. + + + +### Accessibility + +The `Select` component supports all accessibility features of the Radix Select primitive. + +### Examples + +The following example shows how to add icons to the `SelectItem` and style them with Tailwind CSS. Icons are added using a custom `DotIcon` component, which is placed inside each `SelectItem` alongside the text. Tailwind classes like `flex` and `gap-1` are used to align and space the icons and text properly. + +Each icon is styled with custom colors to represent different statuses. + + + +Next example demonstrates how to structure your items, with groups separators, and labels. The `SelectContent` component in this example uses a different content `position` - `item-aligned`. + + \ No newline at end of file diff --git a/apps/docs/src/actions/webflow.ts b/apps/docs/src/actions/webflow.ts index 0c8d978..b708314 100644 --- a/apps/docs/src/actions/webflow.ts +++ b/apps/docs/src/actions/webflow.ts @@ -65,15 +65,15 @@ export async function getWebflowData() { // Assuming there's at least one published item, get the first featured const blogPostData = sortedPublishedBlogPosts.length > 0 - ? sortedPublishedBlogPosts.find((item) => item.fieldData.featured) ?? - sortedPublishedBlogPosts[0] + ? (sortedPublishedBlogPosts.find((item) => item.fieldData.featured) ?? + sortedPublishedBlogPosts[0]) : null; // Assuming there's at least one published item, get the first featured const caseStudyData = sortedPublishedCaseStudies.length > 0 - ? sortedPublishedCaseStudies.find((item) => item.fieldData.featured) ?? - sortedPublishedCaseStudies[0] + ? (sortedPublishedCaseStudies.find((item) => item.fieldData.featured) ?? + sortedPublishedCaseStudies[0]) : null; return { diff --git a/apps/docs/src/components/CustomMDX.tsx b/apps/docs/src/components/CustomMDX.tsx index 434e69c..154f9cd 100644 --- a/apps/docs/src/components/CustomMDX.tsx +++ b/apps/docs/src/components/CustomMDX.tsx @@ -31,6 +31,7 @@ const prettyCodeOptions: Options = { grid: true, keepBackground: false, transformers: [transformerNotationDiff()], + theme: "github-dark-dimmed", }; /* -------------------------------------------------------------------------- */ @@ -75,7 +76,7 @@ function CustomPre(props: HTMLAttributes & { raw?: string }) { return ( 
 {
diff --git a/apps/docs/src/components/PropsTable.tsx b/apps/docs/src/components/PropsTable.tsx
index 2f5394d..87d52bc 100644
--- a/apps/docs/src/components/PropsTable.tsx
+++ b/apps/docs/src/components/PropsTable.tsx
@@ -32,7 +32,7 @@ export const PropsTable = React.forwardRef<
 >(
   (
     {
-      content,
+      content = [],
       isData = false,
       isOptions = false,
       isUtility = false,
diff --git a/apps/docs/src/config/sidebarConfig.ts b/apps/docs/src/config/sidebarConfig.ts
index aaca0d6..21b1187 100644
--- a/apps/docs/src/config/sidebarConfig.ts
+++ b/apps/docs/src/config/sidebarConfig.ts
@@ -127,7 +127,6 @@ export const sidebarConfig: DocsConfig = {
         {
           label: "Kbd",
           href: "/components/kbd",
-          new: true,
         },
         {
           label: "Label",
@@ -136,7 +135,6 @@ export const sidebarConfig: DocsConfig = {
         {
           label: "Loading",
           href: "/components/loading",
-          new: true,
         },
         {
           label: "Popover",
@@ -145,21 +143,23 @@ export const sidebarConfig: DocsConfig = {
         {
           label: "Progress Bar",
           href: "/components/progress-bar",
-          new: true,
         },
         {
           label: "Progress Circle",
           href: "/components/progress-circle",
-          new: true,
         },
         {
           label: "Radio Group",
           href: "/components/radio-group",
         },
+        {
+          label: "Select",
+          href: "/components/select",
+          new: true,
+        },
         {
           label: "Slider",
           href: "/components/slider",
-          new: true,
         },
         {
           label: "Switch",
diff --git a/apps/docs/src/examples/index.ts b/apps/docs/src/examples/index.ts
index a326200..ab08633 100644
--- a/apps/docs/src/examples/index.ts
+++ b/apps/docs/src/examples/index.ts
@@ -2161,6 +2161,185 @@ export function Example() {
     
   );
 }
+`,
+  },
+  "select/example-1": {
+    component: lazy(() => import("@/examples/select/example-1.tsx")),
+    code: `import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectPortal,
+  SelectTrigger,
+  SelectValue,
+} from "@lemonsqueezy/wedges";
+
+export function Example() {
+  const wrapper = React.useRef(null);
+
+  const DotIcon = ({ className }: { className?: string }) => (
+    
+      
+    
+  );
+
+  return (
+    

+      
+    

+  );
+}
+`,
+  },
+  "select/example-2": {
+    component: lazy(() => import("@/examples/select/example-2.tsx")),
+    code: `import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectPortal,
+  SelectSeparator,
+  SelectTrigger,
+} from "@lemonsqueezy/wedges";
+
+export function Example() {
+  const wrapper = React.useRef(null);
+
+  return (
+    

+      
+    

+  );
+}
+`,
+  },
+  "select/preview": {
+    component: lazy(() => import("@/examples/select/preview.tsx")),
+    code: `import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectPortal,
+  SelectTrigger,
+  SelectValue,
+} from "@lemonsqueezy/wedges";
+
+export function Example() {
+  const wrapper = React.useRef(null);
+
+  return (
+    

+      
+    

+  );
+}
 `,
   },
   "slider/example-1": {
diff --git a/apps/docs/src/examples/select/example-1.tsx b/apps/docs/src/examples/select/example-1.tsx
new file mode 100644
index 0000000..6c46a25
--- /dev/null
+++ b/apps/docs/src/examples/select/example-1.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectPortal,
+  SelectTrigger,
+  SelectValue,
+} from "@lemonsqueezy/wedges";
+
+export default function Example() {
+  const wrapper = React.useRef(null);
+
+  const DotIcon = ({ className }: { className?: string }) => (
+    
+      
+    
+  );
+
+  return (
+    

+      
+    

+  );
+}
diff --git a/apps/docs/src/examples/select/example-2.tsx b/apps/docs/src/examples/select/example-2.tsx
new file mode 100644
index 0000000..066ba7d
--- /dev/null
+++ b/apps/docs/src/examples/select/example-2.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectPortal,
+  SelectSeparator,
+  SelectTrigger,
+} from "@lemonsqueezy/wedges";
+
+export default function Example() {
+  const wrapper = React.useRef(null);
+
+  return (
+    

+      
+    

+  );
+}
diff --git a/apps/docs/src/examples/select/preview.tsx b/apps/docs/src/examples/select/preview.tsx
new file mode 100644
index 0000000..53e984e
--- /dev/null
+++ b/apps/docs/src/examples/select/preview.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectPortal,
+  SelectTrigger,
+  SelectValue,
+} from "@lemonsqueezy/wedges";
+
+export default function Example() {
+  const wrapper = React.useRef(null);
+
+  return (
+    

+      
+    

+  );
+}
diff --git a/apps/docs/src/lib/mdx/unist.ts b/apps/docs/src/lib/mdx/unist.ts
index c8cd953..f6911da 100644
--- a/apps/docs/src/lib/mdx/unist.ts
+++ b/apps/docs/src/lib/mdx/unist.ts
@@ -49,7 +49,7 @@ export const rehypeAddPreviewCode = () => (tree: UnistTree) => {
       const nameAttribute = getNodeAttributeByName(node, "name");
 
       const code = nameAttribute
-        ? Demos[nameAttribute?.value as keyof typeof Demos]?.code ?? ""
+        ? (Demos[nameAttribute?.value as keyof typeof Demos]?.code ?? "")
         : "";
 
       node.children?.push(
diff --git a/package.json b/package.json
index cc35e21..fe94f69 100644
--- a/package.json
+++ b/package.json
@@ -23,31 +23,31 @@
     "release:dev": "pnpm build && changeset publish --snapshot --no-git-tag --tag dev"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.5",
-    "@commitlint/cli": "^19.3.0",
+    "@changesets/cli": "^2.27.7",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.5",
-    "@types/react": "^18.3.3",
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@wedges/eslint-config": "workspace:*",
     "clsx": "^2.1.1",
-    "husky": "^9.0.11",
+    "husky": "^9.1.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "react": "^18.3.1",
     "react-dom": "18.3.1",
-    "rimraf": "^5.0.7",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "3.4.4",
-    "ts-jest": "^29.1.5",
-    "turbo": "^2.0.4",
-    "typescript": "^5.4.5",
+    "rimraf": "^6.0.1",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "3.4.10",
+    "ts-jest": "^29.2.4",
+    "turbo": "^2.0.14",
+    "typescript": "^5.5.4",
     "@changesets/changelog-github": "^0.5.0"
   },
   "packageManager": "pnpm@9.4.0"
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
index b2d5a87..7402eaa 100644
--- a/packages/eslint-config/package.json
+++ b/packages/eslint-config/package.json
@@ -8,16 +8,16 @@
     "eslint-wedges.cjs"
   ],
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.4",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@next/eslint-plugin-next": "^14.2.6",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "eslint": "^8",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-turbo": "^2.0.4",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-config-turbo": "^2.0.14",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-only-warn": "^1.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-tailwindcss": "^3.17.3"
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-tailwindcss": "^3.17.4"
   }
 }
diff --git a/packages/wedges/package.json b/packages/wedges/package.json
index 8e24529..1c5aac9 100644
--- a/packages/wedges/package.json
+++ b/packages/wedges/package.json
@@ -68,19 +68,20 @@
   },
   "dependencies": {
     "@iconicicons/react": "latest",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "clsx": "^2.1.1",
     "color": "^4.2.3",
     "color2k": "^2.0.3",
@@ -88,15 +89,15 @@
     "deepmerge": "^4.3.1",
     "flat": "^6.0.1",
     "lodash.omit": "^4.5.0",
-    "tailwind-merge": "^2.3.0"
+    "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
-    "@swc/core": "^1.5.27",
+    "@swc/core": "^1.7.14",
     "@types/color": "^3.0.6",
     "@types/lodash.omit": "^4.5.9",
     "@wedges/eslint-config": "workspace:*",
     "concurrently": "^8.2.2",
-    "tsup": "^8.1.0"
+    "tsup": "^8.2.4"
   },
   "peerDependencies": {
     "@types/react": "*",
diff --git a/packages/wedges/src/components/Checkbox/Checkbox.tsx b/packages/wedges/src/components/Checkbox/Checkbox.tsx
index faebbc1..b368b0b 100644
--- a/packages/wedges/src/components/Checkbox/Checkbox.tsx
+++ b/packages/wedges/src/components/Checkbox/Checkbox.tsx
@@ -119,7 +119,7 @@ const CheckboxWedges = React.forwardRef(
     );
 
     const renderLabel =
-      label ?? description ?? tooltip ?? helperText ? (
+      (label ?? description ?? tooltip ?? helperText) ? (