@crystallize/design-system 1.24.0 → 1.24.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.24.1
+
+### Patch Changes
+
+- bbf1dba: Fix select item classname passing
+
 ## 1.24.0
 
 ### Minor Changes

package/dist/index.js

@@ -39957,12 +39957,13 @@ var Radio = {
 
 // src/select/select-item.tsx
 var import_react113 = require("react");
+var import_class_variance_authority18 = require("class-variance-authority");
 var SelectPrimitives = __toESM(require("@radix-ui/react-select"));
 var import_jsx_runtime128 = require("react/jsx-runtime");
 var SelectItem = (0, import_react113.forwardRef)((props, ref) => {
-  const { children, ...delegated } = props;
+  const { children, className, ...delegated } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(SelectPrimitives.Item, {
-    className: "c-select-item",
+    className: (0, import_class_variance_authority18.cx)("c-select-item", className),
     ref,
     ...delegated,
     children: [
@@ -39977,11 +39978,11 @@ SelectItem.displayName = "SelectItem";
 
 // src/select/select-root.tsx
 var import_react114 = require("react");
-var import_class_variance_authority18 = require("class-variance-authority");
+var import_class_variance_authority19 = require("class-variance-authority");
 var SelectPrimitives2 = __toESM(require("@radix-ui/react-select"));
 init_iconography();
 var import_jsx_runtime129 = require("react/jsx-runtime");
-var selectTriggerStyles = (0, import_class_variance_authority18.cva)("c-select-trigger", {
+var selectTriggerStyles = (0, import_class_variance_authority19.cva)("c-select-trigger", {
   variants: {
     size: {
       xs: "c-select-trigger-xs",
@@ -40041,12 +40042,12 @@ var Select = {
 
 // src/slider/slider.tsx
 var import_react115 = require("react");
-var import_class_variance_authority19 = require("class-variance-authority");
+var import_class_variance_authority20 = require("class-variance-authority");
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
 var import_jsx_runtime130 = require("react/jsx-runtime");
 var Slider = (0, import_react115.forwardRef)(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(SliderPrimitive.Root, {
-    className: (0, import_class_variance_authority19.cx)("c-slider-root", className),
+    className: (0, import_class_variance_authority20.cx)("c-slider-root", className),
     ref,
     ...delegated,
     children: [
@@ -40087,10 +40088,10 @@ function StackIcon({ type, children, size = 18 }) {
 }
 
 // src/tag/tag.tsx
-var import_class_variance_authority20 = require("class-variance-authority");
+var import_class_variance_authority21 = require("class-variance-authority");
 init_iconography();
 var import_jsx_runtime132 = require("react/jsx-runtime");
-var tagStyles = (0, import_class_variance_authority20.cva)("c-tag", {
+var tagStyles = (0, import_class_variance_authority21.cva)("c-tag", {
   variants: {
     variant: {
       default: "c-tag-default",
@@ -40130,7 +40131,7 @@ function Tag({
       children,
       onRemove && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("button", {
         type: "button",
-        className: (0, import_class_variance_authority20.cx)("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
+        className: (0, import_class_variance_authority21.cx)("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();
@@ -40167,12 +40168,12 @@ var RichTextEditor2 = (props) => {
 var import_sonner2 = require("sonner");
 
 // src/toast/toast.tsx
-var import_class_variance_authority21 = require("class-variance-authority");
+var import_class_variance_authority22 = require("class-variance-authority");
 var import_sonner = require("sonner");
 init_icon_button2();
 init_iconography();
 var import_jsx_runtime149 = require("react/jsx-runtime");
-var toastStyles = (0, import_class_variance_authority21.cva)("c-toast", {
+var toastStyles = (0, import_class_variance_authority22.cva)("c-toast", {
   variants: {
     type: {
       info: "c-toast-info",
@@ -40198,7 +40199,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   import_sonner.toast.custom(
     (id) => /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", {
       "data-testid": `toast-${type}`,
-      className: (0, import_class_variance_authority21.cx)(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+      className: (0, import_class_variance_authority22.cx)(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", {
           children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(ToastIcon, {
@@ -40245,10 +40246,10 @@ toast.dismiss = import_sonner.toast.dismiss;
 init_tooltip2();
 
 // src/switch/switch.tsx
-var import_class_variance_authority22 = require("class-variance-authority");
+var import_class_variance_authority23 = require("class-variance-authority");
 var RadixSwitch = __toESM(require("@radix-ui/react-switch"));
 var import_jsx_runtime150 = require("react/jsx-runtime");
-var switchStyles = (0, import_class_variance_authority22.cva)(["c-switch-root"], {
+var switchStyles = (0, import_class_variance_authority23.cva)(["c-switch-root"], {
   variants: {
     size: {
       xs: "c-switch-root-xs",

package/dist/index.mjs

@@ -226,12 +226,13 @@ var Radio = {
 
 // src/select/select-item.tsx
 import { forwardRef as forwardRef3 } from "react";
+import { cx as cx4 } from "class-variance-authority";
 import * as SelectPrimitives from "@radix-ui/react-select";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var SelectItem = forwardRef3((props, ref) => {
-  const { children, ...delegated } = props;
+  const { children, className, ...delegated } = props;
   return /* @__PURE__ */ jsxs3(SelectPrimitives.Item, {
-    className: "c-select-item",
+    className: cx4("c-select-item", className),
     ref,
     ...delegated,
     children: [
@@ -309,12 +310,12 @@ var Select = {
 
 // src/slider/slider.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { cx as cx4 } from "class-variance-authority";
+import { cx as cx5 } from "class-variance-authority";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var Slider = forwardRef5(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ jsxs5(SliderPrimitive.Root, {
-    className: cx4("c-slider-root", className),
+    className: cx5("c-slider-root", className),
     ref,
     ...delegated,
     children: [
@@ -351,7 +352,7 @@ function StackIcon({ type, children, size = 18 }) {
 }
 
 // src/tag/tag.tsx
-import { cva as cva5, cx as cx5 } from "class-variance-authority";
+import { cva as cva5, cx as cx6 } from "class-variance-authority";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var tagStyles = cva5("c-tag", {
   variants: {
@@ -393,7 +394,7 @@ function Tag({
       children,
       onRemove && /* @__PURE__ */ jsxs7("button", {
         type: "button",
-        className: cx5("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
+        className: cx6("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();
@@ -430,7 +431,7 @@ var RichTextEditor = (props) => {
 import { Toaster } from "sonner";
 
 // src/toast/toast.tsx
-import { cva as cva6, cx as cx6 } from "class-variance-authority";
+import { cva as cva6, cx as cx7 } from "class-variance-authority";
 import { toast as sonnerToast } from "sonner";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var toastStyles = cva6("c-toast", {
@@ -459,7 +460,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   sonnerToast.custom(
     (id) => /* @__PURE__ */ jsxs8("div", {
       "data-testid": `toast-${type}`,
-      className: cx6(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+      className: cx7(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ jsx14("div", {
           children: /* @__PURE__ */ jsx14(ToastIcon, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/collapsible/collapsible.tsx

@@ -4,7 +4,6 @@ import * as CollapsiblePrimitives from '@radix-ui/react-collapsible';
 import type { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 
 import './collapsible.css';
-
 import { Icon } from '../iconography';
 
 type CollapsibleContentProps = ComponentProps<typeof CollapsiblePrimitives.Content>;

package/src/select/select-item.tsx

@@ -1,14 +1,15 @@
 import { ComponentProps, forwardRef } from 'react';
+import { cx } from 'class-variance-authority';
 import * as SelectPrimitives from '@radix-ui/react-select';
 
 export type SelectItemRef = HTMLDivElement;
 export type SelectItemProps = ComponentProps<typeof SelectPrimitives.Item>;
 
 export const SelectItem = forwardRef<SelectItemRef, SelectItemProps>((props, ref) => {
-  const { children, ...delegated } = props;
+  const { children, className, ...delegated } = props;
 
   return (
-    <SelectPrimitives.Item className="c-select-item" ref={ref} {...delegated}>
+    <SelectPrimitives.Item className={cx('c-select-item', className)} ref={ref} {...delegated}>
       <SelectPrimitives.ItemText>{children}</SelectPrimitives.ItemText>
       <SelectPrimitives.ItemIndicator />
     </SelectPrimitives.Item>