@crystallize/design-system 1.23.3 → 1.23.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.23.4
+
+### Patch Changes
+
+- c7278f8: Add a new prop to Tag component to show remove button on hover.
+
 ## 1.23.3
 
 ### Patch Changes

package/dist/{chunk-NT4RM5NK.mjs → chunk-XAHDYFIZ.mjs}

@@ -712,13 +712,11 @@ var Caret = forwardRef13((delegated, ref) => {
     ref,
     width: "8",
     height: "8",
-    viewBox: "0 0 17 15",
+    viewBox: "0 0 8 8",
     fill: "none",
     ...delegated,
     children: /* @__PURE__ */ jsx19("path", {
-      d: "M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z",
-      stroke: "#5B5178",
-      strokeWidth: 2.4
+      d: "M4.36763 6.81306C4.21367 7.07973 3.82877 7.07973 3.67481 6.81306L0.921902 2.04489C0.767942 1.77822 0.960391 1.44489 1.26831 1.44489L6.77412 1.44489C7.08204 1.44489 7.27449 1.77822 7.12053 2.04489L4.36763 6.81306Z"
     })
   });
 });

package/dist/index.css

@@ -1763,6 +1763,26 @@
   white-space: nowrap;
   border-width: 0;
 }
+.c-tag__remove-button--hover {
+  opacity: 0;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    text-decoration-color,
+    fill,
+    stroke,
+    opacity,
+    box-shadow,
+    transform,
+    filter,
+    backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.c-tag:hover .c-tag__remove-button--hover {
+  opacity: 1;
+}
 .c-tag-default {
   --tw-border-opacity: 1;
   border-color: rgb(var(--c-color-gray-200-700) / var(--tw-border-opacity));
@@ -3421,8 +3441,6 @@
 /* src/switch/switch.css */
 .c-switch-root {
   position: relative;
-  height: 1.5rem;
-  width: 2.75rem;
   border-radius: 9999px;
   border-width: 1px;
   border-style: solid;

package/dist/index.d.ts

@@ -322,8 +322,9 @@ declare const tagStyles: (props?: ({
 type TagProps = React.ComponentProps<'div'> & TagStylesProps & {
     prepend?: React.ReactNode;
     onRemove?: () => void;
+    showRemoveOnHover?: boolean;
 };
-declare function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }: TagProps): JSX.Element;
+declare function Tag({ children, className, variant, size, prepend, onRemove, showRemoveOnHover, ...delegated }: TagProps): JSX.Element;
 
 declare const CODE_ALL_NAME_OPTIONS: {
     readonly javascript: "js";

package/dist/index.js

@@ -910,13 +910,11 @@ var init_caret = __esm({
         ref,
         width: "8",
         height: "8",
-        viewBox: "0 0 17 15",
+        viewBox: "0 0 8 8",
         fill: "none",
         ...delegated,
         children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", {
-          d: "M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z",
-          stroke: "#5B5178",
-          strokeWidth: 2.4
+          d: "M4.36763 6.81306C4.21367 7.07973 3.82877 7.07973 3.67481 6.81306L0.921902 2.04489C0.767942 1.77822 0.960391 1.44489 1.26831 1.44489L6.77412 1.44489C7.08204 1.44489 7.27449 1.77822 7.12053 2.04489L4.36763 6.81306Z"
         })
       });
     });
@@ -39705,7 +39703,16 @@ var tagStyles = (0, import_class_variance_authority19.cva)("c-tag", {
     size: "xs"
   }
 });
-function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }) {
+function Tag({
+  children,
+  className,
+  variant,
+  size,
+  prepend,
+  onRemove,
+  showRemoveOnHover,
+  ...delegated
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", {
     className: tagStyles({ className, variant, size }),
     ...delegated,
@@ -39717,7 +39724,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
       children,
       onRemove && /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("button", {
         type: "button",
-        className: "c-tag__remove-button",
+        className: (0, import_class_variance_authority19.cx)("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-NT4RM5NK.mjs";
+} from "./chunk-XAHDYFIZ.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -312,7 +312,7 @@ function StackIcon({ type, children, size = 18 }) {
 }
 
 // src/tag/tag.tsx
-import { cva as cva5 } from "class-variance-authority";
+import { cva as cva5, cx as cx4 } from "class-variance-authority";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var tagStyles = cva5("c-tag", {
   variants: {
@@ -333,7 +333,16 @@ var tagStyles = cva5("c-tag", {
     size: "xs"
   }
 });
-function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }) {
+function Tag({
+  children,
+  className,
+  variant,
+  size,
+  prepend,
+  onRemove,
+  showRemoveOnHover,
+  ...delegated
+}) {
   return /* @__PURE__ */ jsxs6("div", {
     className: tagStyles({ className, variant, size }),
     ...delegated,
@@ -345,7 +354,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
       children,
       onRemove && /* @__PURE__ */ jsxs6("button", {
         type: "button",
-        className: "c-tag__remove-button",
+        className: cx4("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();
@@ -368,7 +377,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-7QQ3AZED.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-3M2LH5IE.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx12(Suspense, {
     fallback: null,
@@ -382,7 +391,7 @@ var RichTextEditor = (props) => {
 import { Toaster } from "sonner";
 
 // src/toast/toast.tsx
-import { cva as cva6, cx as cx4 } from "class-variance-authority";
+import { cva as cva6, cx as cx5 } from "class-variance-authority";
 import { toast as sonnerToast } from "sonner";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var toastStyles = cva6("c-toast", {
@@ -411,7 +420,7 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   sonnerToast.custom(
     (id) => /* @__PURE__ */ jsxs7("div", {
       "data-testid": `toast-${type}`,
-      className: cx4(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+      className: cx5(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
         /* @__PURE__ */ jsx13("div", {
           children: /* @__PURE__ */ jsx13(ToastIcon, {

package/dist/{rich-text-editor-7QQ3AZED.mjs → rich-text-editor-3M2LH5IE.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-NT4RM5NK.mjs";
+} from "./chunk-XAHDYFIZ.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx

package/package.json

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

package/src/iconography/caret.tsx

@@ -6,8 +6,8 @@ type CaretRef = SVGSVGElement;
 
 export const Caret = forwardRef<CaretRef, CaretProps>((delegated, ref) => {
   return (
-    <svg ref={ref} width="8" height="8" viewBox="0 0 17 15" fill="none" {...delegated}>
-      <path d="M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z" stroke="#5B5178" strokeWidth={2.4} />
+    <svg ref={ref} width="8" height="8" viewBox="0 0 8 8" fill="none" {...delegated}>
+      <path d="M4.36763 6.81306C4.21367 7.07973 3.82877 7.07973 3.67481 6.81306L0.921902 2.04489C0.767942 1.77822 0.960391 1.44489 1.26831 1.44489L6.77412 1.44489C7.08204 1.44489 7.27449 1.77822 7.12053 2.04489L4.36763 6.81306Z" />
     </svg>
   );
 });

package/src/switch/switch.css

@@ -1,5 +1,5 @@
 .c-switch-root {
-  @apply relative h-6 w-11 rounded-full border border-solid border-purple-200-700 bg-purple-50-900 pl-0.5 transition-all hover:border-purple-300-600 focus:outline-none enabled:cursor-pointer disabled:opacity-40 data-[state=checked]:border-green-400-500 data-[state=checked]:bg-cyan-100-800;
+  @apply relative rounded-full border border-solid border-purple-200-700 bg-purple-50-900 pl-0.5 transition-all hover:border-purple-300-600 focus:outline-none enabled:cursor-pointer disabled:opacity-40 data-[state=checked]:border-green-400-500 data-[state=checked]:bg-cyan-100-800;
 
   &-sm {
     @apply h-6 w-11;

package/src/tag/tag.css

@@ -14,6 +14,16 @@
   &__remove-button-text {
     @apply sr-only;
   }
+
+  &__remove-button--hover {
+    @apply opacity-0 transition;
+  }
+
+  &:hover {
+    .c-tag__remove-button--hover {
+      @apply opacity-100;
+    }
+  }
 }
 
 .c-tag-default {

package/src/tag/tag.tsx

@@ -1,4 +1,4 @@
-import { cva, VariantProps } from 'class-variance-authority';
+import { cva, VariantProps, cx } from 'class-variance-authority';
 
 import { Icon } from '../iconography';
 import './tag.css';
@@ -28,9 +28,19 @@ export type TagProps = React.ComponentProps<'div'> &
   TagStylesProps & {
     prepend?: React.ReactNode;
     onRemove?: () => void;
+    showRemoveOnHover?: boolean;
   };
 
-export function Tag({ children, className, variant, size, prepend, onRemove, ...delegated }: TagProps) {
+export function Tag({
+  children,
+  className,
+  variant,
+  size,
+  prepend,
+  onRemove,
+  showRemoveOnHover,
+  ...delegated
+}: TagProps) {
   return (
     <div className={tagStyles({ className, variant, size })} {...delegated}>
       {!prepend ? null : <span className="c-tag__prepend">{prepend}</span>}
@@ -38,7 +48,7 @@ export function Tag({ children, className, variant, size, prepend, onRemove, ...
       {onRemove && (
         <button
           type="button"
-          className="c-tag__remove-button"
+          className={cx('c-tag__remove-button', showRemoveOnHover ? 'c-tag__remove-button--hover' : '')}
           onClick={e => {
             e.stopPropagation();
             onRemove();