@granto-umbrella/umbrella-components 2.3.19 → 2.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.3.19",
+  "version": "2.3.21",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

package/src/components/atoms/Button/Button.styles.ts

@@ -94,6 +94,23 @@ const buttonVariants = {
       background: ${semanticColors.global.surface.disabled};
     }
   `,
+  outline_danger: css`
+    border: 1px solid ${semanticColors.danger.surface.enabled};
+    color: ${semanticColors.danger.text.enabled};
+    background: transparent;
+    &:hover {
+      border: 1px solid ${semanticColors.danger.surface.hover};
+      color: ${semanticColors.danger.text.hover};
+    }
+    &:active {
+      border: 1px solid ${semanticColors.danger.surface.pressed};
+      color: ${semanticColors.danger.text.pressed};
+    }
+    &:disabled {
+      border: 1px solid ${semanticColors.danger.surface.disabled};
+      color: ${semanticColors.danger.text.disabled};
+    }
+  `,
   ghost: css`
     background: transparent;
     color: ${semanticColors.branding.text.accent.enabled};

package/src/components/atoms/Button/Button.types.ts

@@ -6,6 +6,7 @@ export interface ButtonProps
     | "outline"
     | "outline_ghost"
     | "outline_ghost_disabled"
+    | "outline_danger"
     | "danger"
     | "ghost"
     | "ghost_alert"

package/src/components/atoms/Pill/Pill.styles.ts

@@ -0,0 +1,46 @@
+import styled, { css } from "styled-components";
+import {
+  semanticColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+} from "../../../styles/tokens";
+
+const pillVariants = {
+  tradicional: css`
+    background: ${semanticColors.info.surface.pills.tradicional};
+    color: ${semanticColors.info.text.pills.tradicional};
+  `,
+  supply: css`
+    background: ${semanticColors.warning.surface.pills.supply};
+    color: ${semanticColors.warning.text.pills.supply};
+  `,
+};
+
+const pillSizes = {
+  sm: css`
+   padding: ${semanticSizes.global.padding.xs} ${semanticSizes.global
+        .padding.sm};
+    font-size: ${typographyTokens.fontSizes.captionM};
+  `,
+  md: css`
+    padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global
+        .padding.md};
+    font-size: ${typographyTokens.fontSizes.labelM};
+  `,
+};
+
+export const StyledPill = styled.span<{
+  $size?: keyof typeof pillSizes;
+  $variant?: keyof typeof pillVariants;
+  $radius: keyof typeof semanticRadius.global.radius;
+}>`
+  display: inline-flex;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.xs};
+  font-weight: 500;
+  border-radius: ${semanticRadius.global.radius.full};
+
+  ${({ $size = "md" }) => pillSizes[$size]}
+  ${({ $variant = "tradicional" }) => pillVariants[$variant]}
+`;

package/src/components/atoms/Pill/Pill.tsx

@@ -0,0 +1,36 @@
+// Pill.tsx
+
+import React from "react";
+import { StyledPill } from "./Pill.styles";
+import { PillProps } from "./Pill.types";
+import * as Icons from "@phosphor-icons/react";
+
+const Pill: React.FC<PillProps> = ({
+  children,
+  size,
+  variant = "supply",
+  icon,
+  onClose,
+}) => {
+  // CORREÇÃO: Removemos o 'as keyof typeof Icons' pois o tipo já está correto.
+  const IconComponent =
+    icon && (Icons[icon] as React.ElementType);
+
+  return (
+    <StyledPill $size={size} $variant={variant} $radius="full">
+      {IconComponent && (
+        <span className="icon">
+          <IconComponent size={16} />
+        </span>
+      )}
+      {children}
+      {onClose && (
+        <span className="close-icon" onClick={onClose}>
+          <Icons.X size={16} />
+        </span>
+      )}
+    </StyledPill>
+  );
+};
+
+export default Pill;

package/src/components/atoms/Pill/Pill.types.ts

@@ -0,0 +1,18 @@
+
+
+
+import * as Icons from "@phosphor-icons/react";
+
+export type IconName = keyof typeof Icons;
+
+export interface PillProps {
+  children: React.ReactNode;
+  
+
+  icon?: IconName;
+  
+  hasIcon?: boolean;
+  size?: "sm" | "md";
+  variant?: "tradicional" | "supply";
+  onClose?: () => void;
+}

package/src/styles/tokens/colors.ts

@@ -188,30 +188,46 @@ export const semanticColors = {
   warning: {
     surface: {
       feedback: primitiveColors.yellow[100],
+      pills: {
+        supply: primitiveColors.orange[200],
+      },
     },
     text: {
       feedback: {
         strong: primitiveColors.yellow[1100],
       },
+      pills: {
+        supply: primitiveColors.orange[1000],
+      },
     },
-    border: {
-      feedback: primitiveColors.yellow[900],
-    },
+  },
+  border: {
+    feedback: primitiveColors.yellow[900],
   },
   info: {
     surface: {
       feedback: primitiveColors.blue[100],
+      pills: {
+        tradicional: primitiveColors.blue[100],
+      },
     },
     text: {
       feedback: {
         strong: primitiveColors.blue[1100],
       },
+      pills: {
+        tradicional: primitiveColors.blue[1000],
+      },
     },
     border: {
       feedback: primitiveColors.blue[900],
     },
   },
   global: {
+    foreground: {
+      default: primitiveColors.gray[100],
+    },
+
     surface: {
       default: primitiveColors.base.white,
       overlay: "rgba(0, 0, 0, 0.5)",
@@ -223,6 +239,12 @@ export const semanticColors = {
         disabled: primitiveColors.red[100],
       },
     },
+
+    status: {
+      online: primitiveColors.green[600],
+      notification: primitiveColors.red[600],
+      offline: primitiveColors.gray[600],
+    },
     text: {
       default: {
         enabled: primitiveColors.base.black,