@crystallize/design-system 1.24.16 → 1.24.18

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.24.18
+
+### Patch Changes
+
+- 1e62463: Adjust switch component types
+
+## 1.24.17
+
+### Patch Changes
+
+- c1a9ffd: Close the richtext link popup when cliking outside. It was found that when we have just a link the editor is never closed because we keep the focus always on the link. This does not happen when we have more than just a link, because the moment we are not focusing the link but some other part of the editor the popup is closed. Now we check if we click outside the editor then we fource close ir.
+
 ## 1.24.16
 
 ### Patch Changes

package/dist/{chunk-J5RWIXT3.mjs → chunk-GAFUHKHL.mjs}

@@ -6427,7 +6427,7 @@ function withConfirm(delegated) {
     open: true,
     displayOk: true,
     displayCancel: true,
-    type: "info",
+    type: "warning",
     ...delegated,
     onInteractOutside: dumbFn,
     onPointerDownOutside: dumbFn

package/dist/index.css

@@ -1268,16 +1268,10 @@
 /* src/inline-radio/inline-radio.css */
 .c-inline-radio-group {
   display: inline-flex;
-}
-.c-inline-radio-group > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
-}
-.c-inline-radio-group {
+  gap: 0.25rem;
   border-radius: 0.25rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
+  background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
   padding: 3px;
 }
 .c-inline-radio-group-xs {
@@ -1304,20 +1298,29 @@
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  border-radius: 3px;
-  border-style: none;
+  border-radius: 0.375rem;
   background-color: transparent;
+  padding-left: 1rem;
+  padding-right: 1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 500;
   line-height: 1 !important;
   color: rgb(var(--c-color-gray));
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+}
+.c-inline-radio:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
 }
 .c-inline-radio[aria-checked=true] {
+  border-color: transparent;
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-elevate) / var(--tw-bg-opacity));
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  --tw-shadow: 0 2px 4px rgba(130,138,144,0.15);
+  --tw-shadow-colored: 0 2px 4px var(--tw-shadow-color);
   box-shadow:
     var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000),

package/dist/index.d.ts

@@ -477,7 +477,7 @@ type SwitchStylesProps = VariantProps<typeof switchStyles>;
 declare const switchStyles: (props?: ({
     size?: "xs" | "sm" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-type CustomSwitchProps = SwitchStylesProps & Exclude<SwitchProps, 'checked'> & {
+type CustomSwitchProps = SwitchStylesProps & Omit<SwitchProps, 'checked'> & {
     checked?: boolean | null;
 };
 declare function Switch({ size, checked, ...props }: CustomSwitchProps): JSX.Element;

package/dist/index.js

@@ -7339,7 +7339,7 @@ function withConfirm(delegated) {
     open: true,
     displayOk: true,
     displayCancel: true,
-    type: "info",
+    type: "warning",
     ...delegated,
     onInteractOutside: dumbFn,
     onPointerDownOutside: dumbFn
@@ -37936,6 +37936,19 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
       import_lexical8.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
+  (0, import_react126.useEffect)(() => {
+    if (!isLink) {
+      return;
+    }
+    const onClick = (e) => {
+      const rootElement = activeEditor.getRootElement()?.parentElement;
+      const target = e.target;
+      const isClickOutside = !!rootElement && target?.checkVisibility() && !rootElement.contains(target);
+      isClickOutside && setIsLink(false);
+    };
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, [isLink, activeEditor]);
   return isLink ? (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(FloatingLinkEditor, {
       editor: activeEditor,
@@ -40557,7 +40570,7 @@ var switchStyles = (0, import_class_variance_authority24.cva)(["c-switch-root"],
 function Switch2({ size, checked, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(RadixSwitch.Root, {
     ...props,
-    checked,
+    checked: checked === null ? false : checked,
     className: switchStyles({ size }),
     children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(RadixSwitch.Thumb, {
       className: (0, import_class_variance_authority24.cx)("c-switch-thumb", checked === null ? "middle-position" : "")

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-J5RWIXT3.mjs";
+} from "./chunk-GAFUHKHL.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -480,7 +480,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-N3CKGEBD.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-REO7ES7Q.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,
@@ -584,7 +584,7 @@ var switchStyles = cva7(["c-switch-root"], {
 function Switch({ size, checked, ...props }) {
   return /* @__PURE__ */ jsx17(RadixSwitch.Root, {
     ...props,
-    checked,
+    checked: checked === null ? false : checked,
     className: switchStyles({ size }),
     children: /* @__PURE__ */ jsx17(RadixSwitch.Thumb, {
       className: cx9("c-switch-thumb", checked === null ? "middle-position" : "")

package/dist/{rich-text-editor-N3CKGEBD.mjs → rich-text-editor-REO7ES7Q.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-J5RWIXT3.mjs";
+} from "./chunk-GAFUHKHL.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx
@@ -1362,6 +1362,19 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
+  useEffect4(() => {
+    if (!isLink) {
+      return;
+    }
+    const onClick = (e) => {
+      const rootElement = activeEditor.getRootElement()?.parentElement;
+      const target = e.target;
+      const isClickOutside = !!rootElement && target?.checkVisibility() && !rootElement.contains(target);
+      isClickOutside && setIsLink(false);
+    };
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, [isLink, activeEditor]);
   return isLink ? createPortal2(
     /* @__PURE__ */ jsx8(FloatingLinkEditor, {
       editor: activeEditor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.16",
+  "version": "1.24.18",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -94,7 +94,7 @@
     "tailwindcss": "^3.3.5",
     "tsup": "^6.5.0",
     "typescript": "4.9.4",
-    "vite": "5.2.8",
+    "vite": "5.3.5",
     "vitest": "0.30.1",
     "tsconfig": "0.0.0"
   },

package/src/dialog/config.tsx

@@ -125,7 +125,7 @@ export function withConfirm(delegated: DialogFuncProps): DialogFuncProps {
     open: true,
     displayOk: true,
     displayCancel: true,
-    type: 'info',
+    type: 'warning',
     ...delegated,
     onInteractOutside: dumbFn,
     onPointerDownOutside: dumbFn,

package/src/inline-radio/inline-radio.css

@@ -1,5 +1,5 @@
 .c-inline-radio-group {
-  @apply inline-flex space-x-1 rounded bg-gray-100-800 p-[3px];
+  @apply inline-flex gap-1 rounded bg-purple-100-800 p-[3px];
 }
 
 .c-inline-radio-group-xs {
@@ -19,10 +19,11 @@
 }
 
 .c-inline-radio {
-  @apply m-0 flex cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm font-medium !leading-none text-gray;
+  @apply m-0 flex cursor-pointer items-center justify-center rounded-md bg-transparent px-4 text-sm font-medium !leading-none text-gray;
+  @apply border border-solid border-transparent hover:border-purple-200-700;
 
   &[aria-checked='true'] {
-    @apply bg-elevate shadow-sm;
+    @apply border-transparent bg-elevate shadow;
   }
 
   &:focus-visible {

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -301,6 +301,23 @@ function useFloatingLinkEditorToolbar(editor: LexicalEditor, anchorElem: HTMLEle
     );
   }, [editor, updateToolbar]);
 
+  useEffect(() => {
+    if (!isLink) {
+      return;
+    }
+    // Close popup when clicking outside the editor
+    const onClick = (e: MouseEvent) => {
+      const rootElement = activeEditor.getRootElement()?.parentElement;
+      const target = e.target as Element | null;
+      const isClickOutside = !!rootElement && target?.checkVisibility() && !rootElement.contains(target);
+
+      isClickOutside && setIsLink(false);
+    };
+
+    document.addEventListener('click', onClick);
+    return () => document.removeEventListener('click', onClick);
+  }, [isLink, activeEditor]);
+
   return isLink
     ? createPortal(
         <FloatingLinkEditor editor={activeEditor} isLink={isLink} anchorElem={anchorElem} setIsLink={setIsLink} />,

package/src/switch/switch.tsx

@@ -16,13 +16,13 @@ const switchStyles = cva(['c-switch-root'], {
 });
 
 export type CustomSwitchProps = SwitchStylesProps &
-  Exclude<SwitchProps, 'checked'> & {
+  Omit<SwitchProps, 'checked'> & {
     checked?: boolean | null;
   };
 
 export function Switch({ size, checked, ...props }: CustomSwitchProps) {
   return (
-    <RadixSwitch.Root {...props} checked={checked} className={switchStyles({ size })}>
+    <RadixSwitch.Root {...props} checked={checked === null ? false : checked} className={switchStyles({ size })}>
       <RadixSwitch.Thumb className={cx('c-switch-thumb', checked === null ? 'middle-position' : '')} />
     </RadixSwitch.Root>
   );