@ttoss/ui 5.1.6 → 5.2.0

package/dist/esm/index.js

@@ -126,7 +126,7 @@ var Badge = ({
 import { Box } from "theme-ui";
 
 // src/components/Card.tsx
-import { Card as CardUi } from "theme-ui";
+import { Box as Box2, Card as CardUi } from "theme-ui";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var Card = props => {
   return /* @__PURE__ */jsx4(CardUi, {
@@ -145,6 +145,57 @@ var Card = props => {
     }
   });
 };
+var CardTitle = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx4(Box2, {
+    ...props,
+    sx: {
+      paddingY: "4",
+      paddingX: "8",
+      width: "full",
+      borderBottom: "md",
+      borderBottomColor: "display.border.muted.default",
+      ...props.sx
+    },
+    children
+  });
+};
+var CardBody = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx4(Box2, {
+    ...props,
+    sx: {
+      paddingY: "4",
+      paddingX: "8",
+      width: "full",
+      backgroundColor: "display.background.muted.default",
+      ...props.sx
+    },
+    children
+  });
+};
+var CardFooter = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx4(Box2, {
+    ...props,
+    sx: {
+      paddingY: "2",
+      paddingX: "8",
+      width: "full",
+      ...props.sx
+    },
+    children
+  });
+};
+Card.Title = CardTitle;
+Card.Body = CardBody;
+Card.Footer = CardFooter;
 
 // src/components/Checkbox.tsx
 import * as React2 from "react";
@@ -179,51 +230,51 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/CloseButton.tsx
 import { Icon as Icon3 } from "@ttoss/react-icons";
-import * as React3 from "react";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var CloseButton = React3.forwardRef(({
-  label,
-  sx,
-  onlyText,
-  ...props
-}, ref) => {
-  if (onlyText && !label) {
-    return null;
-  }
+var CloseButton = props => {
   return /* @__PURE__ */jsxs3(Button, {
-    variant: "buttons.closeButton",
     type: "button",
-    "aria-label": label,
     sx: {
       fontFamily: "body",
-      fontSize: "xs",
-      display: "inline-flex",
+      display: "flex",
       alignItems: "center",
       cursor: "pointer",
       lineHeight: "normal",
-      gap: "2",
       padding: "2",
-      width: "fit-content",
-      transition: "all 0.2s",
-      "& > iconify-icon": {
-        fontSize: "md"
+      backgroundColor: "action.background.primary.active",
+      color: "action.text.primary.default",
+      border: "sm",
+      borderColor: "action.border.primary.default",
+      borderRadius: "sm",
+      gap: 2,
+      ":disabled": {
+        border: "sm",
+        backgroundColor: "action.background.muted.default",
+        borderColor: "action.border.muted.default",
+        color: "action.text.muted.default",
+        cursor: "not-allowed"
       },
-      ...sx
+      ":is(:focus-within, :hover):not(:disabled)": {
+        color: "action.text.secondary.active",
+        backgroundColor: "action.background.secondary.active",
+        borderColor: "action.border.secondary.active"
+      },
+      ...props.sx
     },
     ...props,
-    ref,
-    children: [label, !onlyText && /* @__PURE__ */jsx6(Icon3, {
+    children: [props.label && /* @__PURE__ */jsx6("span", {
+      children: props.label
+    }), /* @__PURE__ */jsx6(Icon3, {
       icon: "close"
     })]
   });
-});
-CloseButton.displayName = "CloseButton";
+};
 
 // src/components/Container.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 import { Container as ContainerUi } from "theme-ui";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var Container = React4.forwardRef((props, ref) => {
+var Container = React3.forwardRef((props, ref) => {
   return /* @__PURE__ */jsx7(ContainerUi, {
     ref,
     ...props
@@ -266,10 +317,10 @@ var HelpText = ({
 };
 
 // src/components/IconButton.tsx
-import * as React5 from "react";
+import * as React4 from "react";
 import { IconButton as IconButtonUi } from "theme-ui";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var IconButton = React5.forwardRef((props, ref) => {
+var IconButton = React4.forwardRef((props, ref) => {
   return /* @__PURE__ */jsx9(IconButtonUi, {
     type: "button",
     ...props,
@@ -282,7 +333,7 @@ IconButton.displayName = "IconButton";
 import { Image } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 
 // src/components/LinearProgress.tsx
 import { Progress } from "theme-ui";
@@ -291,8 +342,8 @@ import { Progress } from "theme-ui";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React6.useState(0);
-  React6.useEffect(() => {
+  const [progress, setProgress] = React5.useState(0);
+  React5.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -322,10 +373,10 @@ var InfiniteLinearProgress = () => {
 
 // src/components/Input.tsx
 import { Icon as Icon4 } from "@ttoss/react-icons";
-import * as React7 from "react";
+import * as React6 from "react";
 import { Input as InputUI } from "theme-ui";
 import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var Input = React7.forwardRef(({
+var Input = React6.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
   onLeadingIconClick,
@@ -389,10 +440,10 @@ Input.displayName = "Input";
 
 // src/components/InputNumber.tsx
 import { Icon as Icon5 } from "@ttoss/react-icons";
-import * as React8 from "react";
+import * as React7 from "react";
 import { Input as Input2 } from "theme-ui";
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-var InputNumber = React8.forwardRef(({
+var InputNumber = React7.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -400,7 +451,7 @@ var InputNumber = React8.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React8.useMemo(() => {
+  const sxProps = React7.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -514,16 +565,16 @@ var InputNumber = React8.forwardRef(({
 InputNumber.displayName = "InputNumber";
 
 // src/components/InputPassword/InputPassword.tsx
-import * as React10 from "react";
+import * as React9 from "react";
 
 // src/components/InputPassword/useHidePassInput.ts
-import * as React9 from "react";
+import * as React8 from "react";
 var useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React9.useState(Boolean(defaultValue));
+  const [hidePass, setHidePass] = React8.useState(Boolean(defaultValue));
   const {
     icon,
     inputType
-  } = React9.useMemo(() => {
+  } = React8.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
@@ -543,7 +594,7 @@ var useHidePassInput = (defaultValue = true) => {
 
 // src/components/InputPassword/InputPassword.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
-var InputPassword = React10.forwardRef(({
+var InputPassword = React9.forwardRef(({
   showPasswordByDefault,
   ...inputPasswordProps
 }, ref) => {
@@ -598,10 +649,10 @@ var Label = ({
 };
 
 // src/components/Link.tsx
-import * as React11 from "react";
+import * as React10 from "react";
 import { Link as LinkUi } from "theme-ui";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var Link = React11.forwardRef(({
+var Link = React10.forwardRef(({
   quiet,
   className,
   ...props
@@ -622,7 +673,7 @@ import { Radio } from "theme-ui";
 
 // src/components/Select.tsx
 import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React12 from "react";
+import * as React11 from "react";
 import ReactSelect, { components } from "react-select";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var Control = props => {
@@ -780,7 +831,7 @@ var ValueContainer = ({
     })]
   });
 };
-var Select = React12.forwardRef(({
+var Select = React11.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -867,10 +918,10 @@ var Switch = props => {
 
 // src/components/Textarea.tsx
 import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React13 from "react";
+import * as React12 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
 import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
-var Textarea = React13.forwardRef(({
+var Textarea = React12.forwardRef(({
   trailingIcon,
   className,
   sx,

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconType } from '@ttoss/react-icons';
 import * as React from 'react';
 import * as theme_ui from 'theme-ui';
-import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, CheckboxProps as CheckboxProps$1, TextProps, IconButtonProps, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, FlexProps, SwitchProps, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
+import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, TextProps, IconButtonProps, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, FlexProps, SwitchProps, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
 export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SwitchProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
 import { Props } from 'react-select';
 export { Keyframes, keyframes } from '@emotion/react';
@@ -28,7 +28,12 @@ type BadgeProps = BadgeProps$1 & {
 };
 declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
-declare const Card: (props: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: {
+    (props: CardProps): react_jsx_runtime.JSX.Element;
+    Title: ({ children, ...props }: React.PropsWithChildren<BoxProps>) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, ...props }: React.PropsWithChildren<BoxProps>) => react_jsx_runtime.JSX.Element;
+    Footer: ({ children, ...props }: React.PropsWithChildren<BoxProps>) => react_jsx_runtime.JSX.Element;
+};
 
 interface CheckboxProps extends CheckboxProps$1 {
     indeterminate?: boolean;
@@ -37,9 +42,8 @@ declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref
 
 type CloseButtonProps = ButtonProps & {
     label?: string;
-    onlyText?: boolean;
 };
-declare const CloseButton: React.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CloseButton: (props: CloseButtonProps) => react_jsx_runtime.JSX.Element;
 
 declare const Container: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLDivElement>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.1.6",
+  "version": "5.2.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -27,7 +27,7 @@
     "@theme-ui/match-media": "^0.17.1",
     "react-select": "^5.9.0",
     "theme-ui": "^0.17.1",
-    "@ttoss/theme": "^2.1.1"
+    "@ttoss/theme": "^2.2.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",