@crystallize/design-system 1.2.2 → 1.2.3

package/package.json

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

package/src/action-menu/action-menu.css

@@ -1,5 +1,5 @@
 .c-action-menu {
-  @apply flex h-8 w-8 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent p-1 -outline-offset-1 transition;
+  @apply flex h-8 w-8 shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent p-1 -outline-offset-1 transition;
   &-dot {
     @apply h-[4px] w-[4px] rounded-full bg-gray;
   }

package/src/icon-button/IconButton.stories.tsx

@@ -36,3 +36,10 @@ export const Default: Story = {
     children: <Icon.Cancel width={16} height={16} />,
   },
 };
+
+export const Elevate: Story = {
+  args: {
+    children: <Icon.Add width={16} height={16} />,
+    variant: 'elevate',
+  },
+};

package/src/icon-button/icon-button.css

@@ -18,6 +18,14 @@
     @apply outline outline-1 outline-offset-1 outline-inherit;
   }
 
+  &-elevate {
+    @apply bg-elevate shadow;
+  }
+
+  &:not(:disabled):hover {
+    @apply outline outline-1 outline-purple-200-700;
+  }
+
   &-xxs {
     @apply h-5 w-5;
   }

package/src/icon-button/icon-button.tsx

@@ -6,6 +6,10 @@ import './icon-button.css';
 type IconButtonStylesProps = VariantProps<typeof buttonStyles>;
 const buttonStyles = cva(['c-icon-button'], {
   variants: {
+    variant: {
+      default: '',
+      elevate: 'c-icon-button-elevate',
+    },
     size: {
       xxs: 'c-icon-button-xxs',
       xs: 'c-icon-button-xs',
@@ -16,15 +20,16 @@ const buttonStyles = cva(['c-icon-button'], {
   },
   defaultVariants: {
     size: 'sm',
+    variant: 'default',
   },
 });
 
 export type IconButtonProps = ComponentPropsWithRef<'button'> & IconButtonStylesProps;
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ children, className, type = 'button', size, ...delegated }, ref) => {
+  ({ children, className, type = 'button', size, variant, ...delegated }, ref) => {
     return (
-      <button ref={ref} type={type} className={buttonStyles({ size, className })} {...delegated}>
+      <button ref={ref} type={type} className={buttonStyles({ size, variant, className })} {...delegated}>
         {children}
       </button>
     );

package/src/iconography/add.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, SVGProps } from 'react';
+
+type AddProps = SVGProps<SVGSVGElement>;
+
+type AddRef = SVGSVGElement;
+
+export const Add = forwardRef<AddRef, AddProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="currentColor"
+      {...delegated}
+    >
+      <path
+        fill="#528693"
+        d="M13.258 19.467c.005-.095-.045-3.832-.045-3.832v-2.157l-.05-.096.141-.13 5.963.028a.647.647 0 0 0 .407-.15.587.587 0 0 0 .202-.376l.005-.188.055-3.064a.576.576 0 0 0-.174-.521.6.6 0 0 0-.266-.155 1.606 1.606 0 0 0-.366-.028c-.055.01-.114.004-.194.01h-.646l-4.962.031a.188.188 0 0 1-.133-.032l-.055-.091v-.348l.05-5.612a.61.61 0 0 0-.16-.434.625.625 0 0 0-.316-.16c-.109-.009-.258-.004-.38-.004-.058-.005-2.166-.092-2.974-.12a.517.517 0 0 0-.42.165.567.567 0 0 0-.156.44l.004 2.336-.045 2.57.022 1.222a.151.151 0 0 1-.04.086.105.105 0 0 1-.079.033l-5.894-.05a.57.57 0 0 0-.517.25c-.095.202-.13.427-.101.648L2.06 12.59a.598.598 0 0 0 .178.453l.054.055a.573.573 0 0 0 .247.11c.086.016.172.022.26.018l2.68.037 3.287-.014a16.393 16.393 0 0 0-.046 2.005l.02.22c-.02.017-.02.274 0 3.384.006.077.007.155.004.232-.01.136.006.273.045.403.024.083.07.157.133.215.053.059.12.104.194.133.146.037.297.052.448.046.06-.005.119 0 .174 0l2.748.077c.2.022.4-.016.577-.11a.452.452 0 0 0 .194-.388Zm-.873-.278h-.12a52.435 52.435 0 0 0-1.019-.05l-1.527-.066-.092-.046a.18.18 0 0 1-.04-.168l.044-3.357.015-2.401a.678.678 0 0 0-.188-.535.651.651 0 0 0-.457-.194l-5.185.017-.695-.009-.114.05-.12-.118.005-2.474a.248.248 0 0 1 .037-.202l.073-.054 5.163.022H9.3a.194.194 0 0 0 .156-.064.189.189 0 0 0 .06-.151l.004-1.706.014-2.62.013-1.45.018-.582-.004-.088.055-.054a.239.239 0 0 1 .165-.055l2.487.055.092.01.065.064.022.077-.091 5.333-.002.797a.452.452 0 0 0 .457.457l5.479-.018h.165c.165-.008.33-.002.493.018.046.006.09.02.13.041.05.05.036.156.036.238l-.004.078-.032 1.898s-.005.178-.01.22a.567.567 0 0 0 .005.123.5.5 0 0 1 .005.114c-.028.11-.12.119-.28.114l-5.583-.013a.905.905 0 0 0-.59.114.6.6 0 0 0-.234.499l.02 2.743.113 3.023c0 .068-.007.135-.018.201a.165.165 0 0 1-.12.17v-.002Z"
+      />
+      <path
+        fill="#BFF6F8"
+        d="M12.384 19.19h-.119a52.478 52.478 0 0 0-1.02-.05l-1.527-.065-.092-.046a.18.18 0 0 1-.04-.169l.045-3.357.014-2.401a.678.678 0 0 0-.188-.535.651.651 0 0 0-.457-.194l-5.184.016-.695-.009-.114.05-.12-.118.005-2.474a.248.248 0 0 1 .037-.202l.073-.054 5.163.022H9.3a.194.194 0 0 0 .156-.064.189.189 0 0 0 .06-.151l.004-1.706.014-2.62.013-1.45.018-.582-.004-.088.055-.054a.239.239 0 0 1 .165-.055l2.487.055.092.01.065.064.022.077-.091 5.333-.002.797a.452.452 0 0 0 .457.457l5.479-.018h.165c.165-.008.33-.002.493.018.046.006.09.02.13.041.05.05.036.156.036.238l-.004.078-.032 1.898s-.005.178-.01.22a.567.567 0 0 0 .005.123.5.5 0 0 1 .005.114c-.028.11-.12.119-.28.114l-5.583-.013a.906.906 0 0 0-.59.114.6.6 0 0 0-.234.499l.02 2.743.113 3.023c0 .068-.007.135-.018.201a.166.166 0 0 1-.12.17Z"
+      />
+    </svg>
+  );
+});
+
+Add.displayName = 'AddIcon';

package/src/iconography/index.ts

@@ -1,3 +1,4 @@
+import { Add } from './add';
 import { Arrow } from './arrow';
 import { Atom } from './atom';
 import { Cancel } from './cancel';
@@ -28,6 +29,7 @@ import { Users } from './users';
 import { Warning } from './warning';
 
 export const Icon = {
+  Add,
   Arrow,
   Atom,
   Cancel,

package/src/slider/slider.tsx

@@ -1,4 +1,5 @@
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cx } from 'class-variance-authority';
 import { forwardRef } from 'react';
 
 import './slider.css';
@@ -7,9 +8,9 @@ type SliderProps = SliderPrimitive.SliderProps & {
   transparentRange?: boolean;
 };
 
-export const Slider = forwardRef<HTMLSpanElement, SliderProps>(({ transparentRange, ...delegated }, ref) => {
+export const Slider = forwardRef<HTMLSpanElement, SliderProps>(({ className, transparentRange, ...delegated }, ref) => {
   return (
-    <SliderPrimitive.Root className="c-slider-root" ref={ref} {...delegated}>
+    <SliderPrimitive.Root className={cx('c-slider-root', className)} ref={ref} {...delegated}>
       <SliderPrimitive.Track className="c-slider-track">
         <SliderPrimitive.Range className={`c-slider-range ${transparentRange ? 'c-slider-range-transparent' : ''}`} />
       </SliderPrimitive.Track>