@usefui/components 1.7.0 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefui/components",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Open Source React components library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -31,9 +31,9 @@
     "react-dom": "^19.2.4",
     "styled-components": "^5.3.11",
     "typescript": "^5.9.3",
+    "@usefui/core": "^1.4.0",
     "@usefui/tokens": "^1.7.0",
-    "@usefui/hooks": "^1.4.0",
-    "@usefui/core": "^1.4.0"
+    "@usefui/hooks": "^1.4.0"
   },
   "scripts": {
     "test": "vitest run --coverage --logHeapUsage",

package/src/badge/Badge.stories.tsx

@@ -80,3 +80,35 @@ export const Variants: Story = {
     );
   },
 };
+export const Emphasis: Story = {
+  render: ({ ...args }) => {
+    return (
+      <div className="flex g-medium-30">
+        <Badge emphasis variant="primary">
+          Primary
+        </Badge>
+        <Badge emphasis variant="secondary">
+          Secondary
+        </Badge>
+        <Badge emphasis variant="border">
+          Border
+        </Badge>
+        <Badge emphasis variant="meta">
+          Meta
+        </Badge>
+        <Badge emphasis variant="hint">
+          Hint
+        </Badge>
+        <Badge emphasis variant="success">
+          Success
+        </Badge>
+        <Badge emphasis variant="warning">
+          Warning
+        </Badge>
+        <Badge emphasis variant="danger">
+          Error
+        </Badge>
+      </div>
+    );
+  },
+};

package/src/badge/index.tsx

@@ -21,6 +21,7 @@ export interface IBadgeProperties
     IComponentSize,
     React.ComponentProps<"div"> {
   variant?: TComponentVariant | TComponentVariantExtended;
+  emphasis?: boolean;
 }
 
 /**
@@ -36,12 +37,14 @@ export interface IBadgeProperties
  * @param {TComponentShape} props.shape - The shape of the component. Defaults to `smooth`.
  * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "small".
  * @param {string} props.variant - The style definition used by the component.
+ * @param {boolean} props.emphasis - Emphasis change the style definition used by the component.
  * @param {ReactNode} props.children - The content to be rendered inside the Badge.
  * @returns {ReactElement} The Badge component.
  */
 export const Badge = (props: IBadgeProperties) => {
   const {
     raw = false,
+    emphasis = false,
     sizing = ComponentSizeEnum.Small,
     variant = ComponentVariantEnum.Primary,
     shape = ComponentShapeEnum.Smooth,
@@ -55,6 +58,7 @@ export const Badge = (props: IBadgeProperties) => {
       data-variant={variant}
       data-shape={shape}
       data-size={sizing}
+      data-emphasis={emphasis}
       {...restProps}
     >
       {children}

package/src/badge/styles/index.ts

@@ -96,6 +96,28 @@ const BadgeVariantStyles = css`
     }
   }
 `;
+const BadgeEmphasisVariantStyles = css`
+  &[data-variant="danger"] {
+    background-color: var(--color-red) !important;
+    color: var(--color-mono-white) !important;
+  }
+  &[data-variant="warning"] {
+    background-color: var(--color-orange) !important;
+    color: var(--color-mono-dark) !important;
+  }
+  &[data-variant="success"] {
+    background-color: var(--color-green) !important;
+    color: var(--color-mono-white) !important;
+  }
+  &[data-variant="meta"] {
+    background-color: var(--color-blue) !important;
+    color: var(--color-mono-white) !important;
+  }
+  &[data-variant="hint"] {
+    background-color: var(--color-purple) !important;
+    color: var(--color-mono-white) !important;
+  }
+`;
 const BadgeShapeStyles = css`
   &[data-shape="square"] {
     border-radius: 0;
@@ -134,5 +156,9 @@ export const BadgeWrapper = styled.div<any>`
     ${BadgeVariantStyles}
     ${BadgeShapeStyles}
     ${BadgeSizeStyles}
+
+    &[data-emphasis="true"] {
+      ${BadgeEmphasisVariantStyles}
+    }
   }
 `;

package/src/button/Button.stories.tsx

@@ -18,6 +18,29 @@ const meta = {
 } satisfies Meta<typeof Button>;
 export default meta;
 
+const Icon = (props: React.ComponentProps<"svg">) => {
+  return (
+    <svg
+      focusable="false"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fill="none"
+        d="M20 6L9.71429 17L4 10.8889"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
 type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: ({ ...args }) => <Button {...args} />,
@@ -77,6 +100,76 @@ export const Variants: Story = {
     );
   },
 };
+export const VariantsWithIcon: Story = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="accent">
+              <span className="color-mono-white">With Icon</span>
+              <Icon stroke="white" />
+            </Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="primary">
+              With Icon
+              <Icon stroke="var(--color-red)" />
+            </Button>
+            <Button variant="secondary">
+              With Icon
+              <Icon />
+            </Button>
+            <Button variant="tertiary">
+              With Icon
+              <Icon />
+            </Button>
+            <Button variant="mono">
+              With Icon
+              <Icon />
+            </Button>
+            <Button variant="border">
+              With Icon
+              <Icon />
+            </Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="hint">
+              With Icon
+              <Icon stroke="white" />
+            </Button>
+            <Button variant="meta">
+              With Icon
+              <Icon stroke="white" />
+            </Button>
+            <Button variant="success">
+              With Icon
+              <Icon stroke="white" />
+            </Button>
+            <Button variant="danger">
+              With Icon
+              <Icon stroke="white" />
+            </Button>
+            <Button variant="warning">
+              With Icon
+              <Icon stroke="black" />
+            </Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="link">
+              With Icon
+              <Icon />
+            </Button>
+            <Button variant="ghost">
+              With Icon
+              <Icon />
+            </Button>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};
 export const Animations: Story = {
   render: ({ ...args }) => {
     return (

package/src/button/styles/index.ts

@@ -58,25 +58,6 @@ const ButtonIconStyles = css`
   svg {
     width: var(--fontsize-medium-20);
     height: var(--fontsize-medium-20);
-    fill: currentColor;
-  }
-
-  svg {
-    opacity: 0.6;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    svg {
-      opacity: 1;
-    }
-  }
-
-  &[data-variant="primary"] {
-    svg {
-      fill: var(--body-color);
-    }
   }
 `;
 const ButtonSizeStyles = css`
@@ -132,7 +113,6 @@ const ButtonBeforeDefaultStyles = css`
 `;
 const ButtonVariantsStyles = css`
   &[data-variant="primary"] {
-    color: var(--body-color-alpha-80);
     background-color: var(--font-color);
     background: linear-gradient(
       180deg,
@@ -142,6 +122,11 @@ const ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--body-color-alpha-80) !important;
+    svg * {
+      stroke: var(--body-color-alpha-80) !important;
+    }
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--body-color-alpha-20);
@@ -160,7 +145,6 @@ const ButtonVariantsStyles = css`
     }
   }
   &[data-variant="secondary"] {
-    color: var(--font-color-alpha-60);
     border-color: var(--font-color-alpha-10);
 
     background-color: var(--body-color);
@@ -172,6 +156,8 @@ const ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--font-color-alpha-60) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--font-color-alpha-10);
@@ -188,8 +174,6 @@ const ButtonVariantsStyles = css`
     }
   }
   &[data-variant="tertiary"] {
-    color: var(--font-color-alpha-60);
-
     background-color: transparent;
     background: linear-gradient(
       -180deg,
@@ -199,6 +183,8 @@ const ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 10%;
 
+    color: var(--font-color-alpha-60) !important;
+
     &:hover,
     &:focus,
     &:active {
@@ -214,8 +200,8 @@ const ButtonVariantsStyles = css`
     }
   }
   &[data-variant="mono"] {
-    color: var(--font-color-alpha-80);
     background-color: var(--contrast-color);
+    color: var(--font-color-alpha-80) !important;
 
     ::before {
       ${ButtonBeforeDefaultStyles}
@@ -234,9 +220,9 @@ const ButtonVariantsStyles = css`
     }
   }
   &[data-variant="border"] {
-    color: var(--font-color-alpha-60);
     background-color: transparent;
     border-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-60) !important;
 
     &:hover,
     &:focus,
@@ -278,7 +264,6 @@ const ButtonVariantsStyles = css`
   }
 
   &[data-variant="meta"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-blue);
     background: linear-gradient(
       180deg,
@@ -288,6 +273,8 @@ const ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-blue-30);
@@ -308,7 +295,6 @@ const ButtonVariantsStyles = css`
     }
   }
   &[data-variant="hint"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-purple);
     background: linear-gradient(
       180deg,
@@ -318,6 +304,8 @@ const ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--shade-purple-20);
@@ -334,7 +322,6 @@ const ButtonVariantsStyles = css`
     }
   }
   &[data-variant="success"] {
-    color: var(--alpha-mono-white-90);
     background-color: var(--shade-green-30);
     background: linear-gradient(
       180deg,
@@ -344,6 +331,8 @@ const ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--shade-green-20);
@@ -360,7 +349,6 @@ const ButtonVariantsStyles = css`
     }
   }
   &[data-variant="danger"] {
-    color: var(--alpha-mono-white-80);
     background-color: var(--color-red);
     background: linear-gradient(
       180deg,
@@ -370,6 +358,8 @@ const ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-white-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-red-60);
@@ -389,7 +379,6 @@ const ButtonVariantsStyles = css`
     }
   }
   &[data-variant="warning"] {
-    color: var(--alpha-mono-dark-80);
     background-color: var(--color-orange);
     background: linear-gradient(
       180deg,
@@ -399,6 +388,8 @@ const ButtonVariantsStyles = css`
     background-size: 100% 200%;
     background-position: 0% 50%;
 
+    color: var(--alpha-mono-dark-80) !important;
+
     ::before {
       ${ButtonBeforeDefaultStyles}
       border-color: var(--tint-orange-30);
@@ -476,7 +467,8 @@ export const ButtonWrapper = styled.button`
     ${ButtonSizeStyles}
     ${ButtonShapeStyles}
     ${ButtonVariantsStyles}
-      &[data-rawIcon="false"] {
+
+    &[data-rawIcon="false"] {
       ${ButtonIconStyles}
     }
   }

package/src/dialog/index.tsx

@@ -20,7 +20,8 @@ import {
 } from "../../../../types";
 
 export interface IDialogItemProperties
-  extends IComponentStyling,
+  extends
+    IComponentStyling,
     IComponentSize,
     IScrollAreaProperties,
     React.ComponentProps<"dialog"> {
@@ -64,26 +65,22 @@ const Dialog = (props: IDialogItemProperties) => {
   }, []);
 
   if (lock) useDisabledScroll(Boolean(states.open));
-
+  if (!states.open) return null;
   return (
-    <>
-      {states.open && (
-        <ScrollArea
-          as={DialogWrapper}
-          role="dialog"
-          tabIndex={-1}
-          id={String(contentId)}
-          open={Boolean(states.open)}
-          aria-labelledby={String(triggerId)}
-          data-state={applyDataState(Boolean(states.open))}
-          data-size={sizing}
-          data-raw={Boolean(raw)}
-          {...restProps}
-        >
-          {children}
-        </ScrollArea>
-      )}
-    </>
+    <ScrollArea
+      as={DialogWrapper}
+      role="dialog"
+      tabIndex={-1}
+      id={String(contentId)}
+      open={Boolean(states.open)}
+      aria-labelledby={String(triggerId)}
+      data-state={applyDataState(Boolean(states.open))}
+      data-size={sizing}
+      data-raw={Boolean(raw)}
+      {...restProps}
+    >
+      {children}
+    </ScrollArea>
   );
 };
 Dialog.displayName = "Dialog";

package/src/dialog/styles/index.ts

@@ -4,8 +4,6 @@ const DialogDefaultStyles = css`
   position: fixed;
   top: 15dvh;
   bottom: auto;
-  left: auto;
-  right: auto;
 
   padding: var(--measurement-medium-30);
   width: 100%;

package/src/dropdown/Dropdown.stories.tsx

@@ -136,3 +136,90 @@ export const RadioItem: Story = {
     </DropdownMenu.Root>
   ),
 };
+export const Variants: Story = {
+  render: ({ ...args }) => (
+    <>
+      <DropdownMenu.Root>
+        <DropdownMenu>
+          <DropdownMenu.Trigger variant="secondary">
+            Actions
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content className="flex flex-column g-small-60">
+            <DropdownMenu.Item
+              className="flex justify-between align-center"
+              radio
+            >
+              Cut
+              <Badge variant="border">
+                <span className="fs-small-50">⌘X</span>
+              </Badge>
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Item
+              className="flex justify-between align-center"
+              radio
+            >
+              Copy
+              <Badge variant="border">
+                <span className="fs-small-50">⌘C</span>
+              </Badge>
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Item
+              className="flex justify-between align-center"
+              radio
+            >
+              Paste
+              <Badge variant="border">
+                <span className="fs-small-50">⌘V</span>
+              </Badge>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </DropdownMenu.Root>
+      <DropdownMenu.Root>
+        <DropdownMenu>
+          <DropdownMenu.Trigger variant="secondary">
+            Actions
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Content
+            className="flex flex-column g-small-60"
+            variant="contrast"
+          >
+            <DropdownMenu.Item
+              className="flex justify-between align-center"
+              radio
+            >
+              Cut
+              <Badge variant="border">
+                <span className="fs-small-50">⌘X</span>
+              </Badge>
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Item
+              className="flex justify-between align-center"
+              radio
+            >
+              Copy
+              <Badge variant="border">
+                <span className="fs-small-50">⌘C</span>
+              </Badge>
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Item
+              className="flex justify-between align-center"
+              radio
+            >
+              Paste
+              <Badge variant="border">
+                <span className="fs-small-50">⌘V</span>
+              </Badge>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </DropdownMenu.Root>
+    </>
+  ),
+};

package/src/dropdown/index.tsx

@@ -11,11 +11,14 @@ import {
   IComponentStyling,
   IComponentSize,
   ComponentSideEnum,
+  ComponentSizeEnum,
 } from "../../../../types";
 
+type DropdownContentVariant = "body" | "contrast";
 export interface IDropdownContentProperties
   extends IComponentStyling, IComponentSize, React.ComponentPropsWithRef<"ul"> {
   defaultOpen?: boolean;
+  variant?: DropdownContentVariant;
 }
 export interface IDropdownItemProperties
   extends IComponentStyling, React.ComponentProps<"li"> {
@@ -133,6 +136,7 @@ DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
  * @param {IDropdownContentProperties} props - The props for the DropdownMenu.Content component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
  * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "medium".
+ * @param {DropdownContentVariant} props.variant - The variant of the component. Defaults to "body".
  * @param {boolean} props.defaultOpen - The initial open state of the dropdown menu. Defaults to false.
  * @param {ReactNode} props.children - The content to be rendered inside the dropdown menu.
  * @returns {ReactElement} The DropdownMenu.Content component.
@@ -141,7 +145,14 @@ const DropdownMenuContent = React.forwardRef<
   HTMLUListElement,
   IDropdownContentProperties
 >((props, _) => {
-  const { raw, sizing = "medium", defaultOpen, children, ...restProps } = props;
+  const {
+    raw,
+    sizing = ComponentSizeEnum.Medium,
+    variant = "body",
+    defaultOpen,
+    children,
+    ...restProps
+  } = props;
   const { id, states, methods } = useDropdownMenu();
   const { toggleOpen, setContentProps } = methods;
 
@@ -227,6 +238,7 @@ const DropdownMenuContent = React.forwardRef<
       aria-labelledby={id.split("|").at(0)}
       data-state={applyDataState(Boolean(states.open))}
       data-sizing={sizing}
+      data-variant={variant}
       data-side={
         hasEnoughHorizontalSpace
           ? ComponentSideEnum.Left

package/src/dropdown/styles/index.ts

@@ -22,7 +22,15 @@ const ContentWrapperSizes = css`
     max-width: var(--large);
   }
 `;
+const ContentWrapperVariants = css`
+  &[data-variant="body"] {
+    background-color: var(--body-color);
+  }
 
+  &[data-variant="contrast"] {
+    background-color: var(--contrast-color);
+  }
+`;
 export const RootWrapper = styled.div`
   position: relative;
 `;
@@ -49,13 +57,14 @@ export const ContentWrapper = styled.ul<any>`
     padding: var(--measurement-medium-30);
     margin: var(--measurement-medium-10) 0;
 
-    background-color: var(--body-color);
     border: var(--measurement-small-10) solid var(--font-color-alpha-10);
     border-radius: var(--measurement-medium-30);
 
     z-index: var(--depth-default-100);
 
     ${ContentWrapperSizes}
+    ${ContentWrapperVariants}
+
     animation-duration: 0.2s;
     animation-name: slide-in;
     animation-fill-mode: backwards;
@@ -71,14 +80,13 @@ export const ItemWrapper = styled.li<any>`
   &[data-raw="false"] {
     padding: var(--measurement-medium-10) var(--measurement-medium-30);
     border-radius: var(--measurement-medium-20);
+    color: var(--font-color);
 
-    text-align: left;
-    font-weight: 600;
     letter-spacing: calc(
       var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
     );
-    font-size: var(--fontsize-medium-10);
-    color: var(--font-color);
+    font-size: inherit;
+    text-align: left;
 
     outline: none;
     cursor: pointer;
@@ -90,7 +98,7 @@ export const ItemWrapper = styled.li<any>`
     &:active,
     &:focus-within,
     &:has(:active) {
-      background-color: var(--contrast-color);
+      background-color: var(--font-color-alpha-10);
     }
   }