@crystallize/design-system 1.23.1 → 1.23.3

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-VYFBR7S4.mjs";
+} from "./chunk-NT4RM5NK.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -368,7 +368,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-PXZQZRPK.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-7QQ3AZED.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx12(Suspense, {
     fallback: null,
@@ -455,12 +455,24 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
 toast.dismiss = sonnerToast.dismiss;
 
 // src/switch/switch.tsx
+import { cva as cva7 } from "class-variance-authority";
 import * as RadixSwitch from "@radix-ui/react-switch";
 import { jsx as jsx14 } from "react/jsx-runtime";
-function Switch(props) {
+var switchStyles = cva7(["c-switch-root"], {
+  variants: {
+    size: {
+      xs: "c-switch-root-xs",
+      sm: "c-switch-root-sm"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+function Switch({ size, ...props }) {
   return /* @__PURE__ */ jsx14(RadixSwitch.Root, {
     ...props,
-    className: "c-switch-root",
+    className: switchStyles({ size }),
     children: /* @__PURE__ */ jsx14(RadixSwitch.Thumb, {
       className: "c-switch-thumb"
     })

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

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-VYFBR7S4.mjs";
+} from "./chunk-NT4RM5NK.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.1",
+  "version": "1.23.3",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/iconography/battery.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, SVGProps } from 'react';
+
+type BatteryProps = SVGProps<SVGSVGElement>;
+
+type BatteryRef = SVGSVGElement;
+
+export const Battery = forwardRef<BatteryRef, BatteryProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
+      <path
+        fill="#BFF6F8"
+        d="M10.064 2.638a1.426 1.426 0 0 1 1.948-.522l6.176 3.565c.682.394.916 1.266.522 1.948l-6.774 11.733a1.426 1.426 0 0 1-1.948.522L3.812 16.32a1.426 1.426 0 0 1-.522-1.948l6.774-11.733Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="m17.831 6.299-6.175-3.566a.713.713 0 0 0-.974.261L3.908 14.727a.713.713 0 0 0 .26.974l6.176 3.566c.341.197.777.08.974-.261l6.774-11.733a.713.713 0 0 0-.26-.974Zm-5.819-4.183a1.426 1.426 0 0 0-1.948.522L3.29 14.37a1.426 1.426 0 0 0 .522 1.948l6.176 3.565c.682.394 1.554.16 1.948-.522L18.71 7.63a1.426 1.426 0 0 0-.522-1.948l-6.175-3.565Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="m13.95 8.997-1.882-1.086a.143.143 0 0 0-.155.008L9.326 9.801a.143.143 0 0 0 .012.24l.9.518a.143.143 0 0 1 .038.215L8.007 13.53c-.095.116.03.282.168.221l5.264-2.316a.143.143 0 0 0 .014-.254l-1.1-.635a.143.143 0 0 1-.007-.243l1.61-1.063a.143.143 0 0 0-.007-.243Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M11.702 7.63a.5.5 0 0 1 .543-.028l1.882 1.086a.5.5 0 0 1 .025.85l-1.322.872.8.462a.5.5 0 0 1-.048.89l-5.264 2.315-.144-.326.144.326c-.482.212-.92-.368-.587-.774l2.109-2.561-.68-.393a.5.5 0 0 1-.045-.836l2.587-1.882Zm.307.66L9.801 9.895l.614.354a.5.5 0 0 1 .136.75l-1.698 2.063 4.056-1.785-.735-.424a.5.5 0 0 1-.025-.848l.196.297-.196-.297 1.322-.873-1.462-.844Z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#fff"
+        d="M13.605 2.212a.713.713 0 0 1 .974-.261l2.47 1.426a.713.713 0 0 1 .26.974l-.712 1.235-3.705-2.14.713-1.234Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="m16.692 3.994-2.47-1.426-.356.618 2.47 1.426.356-.618ZM14.58 1.951a.713.713 0 0 0-.974.26l-.713 1.236 3.705 2.139.713-1.235a.713.713 0 0 0-.261-.974l-2.47-1.426Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+Battery.displayName = 'BatteryIcon';

package/src/iconography/index.ts

@@ -3,6 +3,7 @@ import { App } from './app';
 import { Archive } from './archive';
 import { Arrow } from './arrow';
 import { Atom } from './atom';
+import { Battery } from './battery';
 import { Bell } from './bell';
 import { BillingPayments } from './billing-payments';
 import { Bin } from './bin';
@@ -104,6 +105,7 @@ export const Icon = {
   Add,
   Archive,
   App,
+  Battery,
   BillingPayments,
   Bin,
   Bell,

package/src/switch/switch.css

@@ -1,13 +1,34 @@
 .c-switch-root {
-  /* @apply radix-state-checked:border-[#528693] radix-state-checked:bg-neptune h-4 w-7 rounded-full border border-solid border-[#52869399] bg-[#9095a84d] p-0 focus:outline-none focus:ring-1 focus:ring-[#528693] focus:ring-offset-1 disabled:opacity-40; */
   @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;
+
+  &-sm {
+    @apply h-6 w-11;
+
+    .c-switch-thumb {
+      @apply h-4 w-4;
+
+      &[data-state='checked']  {
+        transform: translateX(20px);
+      }
+    }
+  }
+
+  &-xs {
+    @apply h-5 w-9;
+
+    .c-switch-thumb {
+      @apply h-3.5 w-3.5;
+
+      &[data-state='checked']  {
+        transform: translateX(16px);
+      }
+    }
+  }
 }
 
 .c-switch-thumb {
-  /* @apply block h-4 w-4 translate-x-[1px] transform-gpu rounded-full bg-purple-200-700 transition-all data-[state=checked]:translate-x-12 data-[state=checked]:bg-green-400-500; */
-  @apply block h-4 w-4 origin-center translate-x-1 rounded-full bg-purple-400-500 transition-all;
+  @apply block origin-center translate-x-1 rounded-full bg-purple-400-500 transition-all;
   &[data-state='checked']  {
-    transform: translateX(20px);
     @apply bg-green-500-400;
   }
 }

package/src/switch/switch.tsx

@@ -1,11 +1,25 @@
 import type { ComponentProps } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
 import * as RadixSwitch from '@radix-ui/react-switch';
 
-export type SwitchProps = ComponentProps<typeof RadixSwitch.Root>;
+type SwitchStylesProps = VariantProps<typeof switchStyles>;
+const switchStyles = cva(['c-switch-root'], {
+  variants: {
+    size: {
+      xs: 'c-switch-root-xs',
+      sm: 'c-switch-root-sm',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
 
-export function Switch(props: SwitchProps) {
+export type SwitchProps = ComponentProps<typeof RadixSwitch.Root> & SwitchStylesProps;
+
+export function Switch({ size, ...props }: SwitchProps) {
   return (
-    <RadixSwitch.Root {...props} className="c-switch-root">
+    <RadixSwitch.Root {...props} className={switchStyles({ size })}>
       <RadixSwitch.Thumb className="c-switch-thumb" />
     </RadixSwitch.Root>
   );