@ttoss/ui 1.31.13 → 1.31.15

package/dist/esm/index.js

@@ -185,7 +185,31 @@ var Input = /*#__PURE__*/React4.forwardRef(({
 Input.displayName = "Input";
 
 // src/components/Label.tsx
-import { Label } from "theme-ui";
+import { Label as LabelUi } from "theme-ui";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var TOOLTIP_LABEL = "tooltip";
+var Label = ({
+  children,
+  onTooltipClick,
+  tooltip,
+  ...props
+}) => {
+  return /* @__PURE__ */jsxs5(LabelUi, {
+    ...props,
+    children: [children, tooltip && /* @__PURE__ */jsx6(Text, {
+      sx: {
+        color: "currentcolor",
+        cursor: onTooltipClick ? "pointer" : void 0
+      },
+      onClick: onTooltipClick,
+      "aria-label": TOOLTIP_LABEL,
+      children: /* @__PURE__ */jsx6(Icon, {
+        inline: true,
+        icon: "info"
+      })
+    })]
+  });
+};
 
 // src/components/Link.tsx
 import { Link } from "theme-ui";
@@ -199,14 +223,14 @@ import { Text } from "theme-ui";
 // src/components/Select.tsx
 import { Select as SelectUi } from "theme-ui";
 import React5 from "react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var Select = /*#__PURE__*/React5.forwardRef(({
   arrow,
   ...props
 }, ref) => {
-  return /* @__PURE__ */jsx6(SelectUi, {
-    arrow: /* @__PURE__ */jsxs5(Fragment2, {
-      children: [arrow ?? /* @__PURE__ */jsx6(Text, {
+  return /* @__PURE__ */jsx7(SelectUi, {
+    arrow: /* @__PURE__ */jsxs6(Fragment2, {
+      children: [arrow ?? /* @__PURE__ */jsx7(Text, {
         sx: {
           marginLeft: ({
             space
@@ -217,10 +241,10 @@ var Select = /*#__PURE__*/React5.forwardRef(({
           pointerEvents: "none",
           lineHeight: 0
         },
-        children: /* @__PURE__ */jsx6(Icon, {
+        children: /* @__PURE__ */jsx7(Icon, {
           icon: "picker-down"
         })
-      }), props["aria-invalid"] === "true" && /* @__PURE__ */jsx6(Text, {
+      }), props["aria-invalid"] === "true" && /* @__PURE__ */jsx7(Text, {
         className: "error-icon",
         sx: {
           marginLeft: ({
@@ -232,7 +256,7 @@ var Select = /*#__PURE__*/React5.forwardRef(({
           pointerEvents: "none",
           lineHeight: 0
         },
-        children: /* @__PURE__ */jsx6(Icon, {
+        children: /* @__PURE__ */jsx7(Icon, {
           icon: "error"
         })
       })]
@@ -260,7 +284,7 @@ import { Checkbox } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
 import * as React6 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
   const [progress, setProgress] = React6.useState(0);
@@ -285,7 +309,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */jsx7(Progress, {
+  return /* @__PURE__ */jsx8(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -299,14 +323,14 @@ import { Textarea } from "theme-ui";
 import { Container } from "theme-ui";
 
 // src/components/HelpText.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var HelpText = ({
   disabled,
   negative,
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx8(Text, {
+  return /* @__PURE__ */jsx9(Text, {
     variant,
     "aria-disabled": disabled ? "true" : void 0,
     ...props

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, SelectProps as SelectProps$1, TextProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
+import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, SelectProps as SelectProps$1, TextProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
 import React__default from 'react';
@@ -40,6 +40,12 @@ type InputProps = InputProps$1 & {
 };
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
+type LabelProps = LabelProps$1 & {
+    tooltip?: boolean;
+    onTooltipClick?: () => void;
+};
+declare const Label: ({ children, onTooltipClick, tooltip, ...props }: LabelProps) => JSX.Element;
+
 type SelectProps = SelectProps$1;
 declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectProps$1, "ref"> & React__default.RefAttributes<HTMLSelectElement>>;
 
@@ -51,4 +57,4 @@ type HelpTextProps = Omit<TextProps, 'variant'> & {
 };
 declare const HelpText: ({ disabled, negative, ...props }: HelpTextProps) => JSX.Element;
 
-export { Badge, BadgeProps, Button, ButtonProps, HelpText, HelpTextProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, Select, SelectProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { Badge, BadgeProps, Button, ButtonProps, HelpText, HelpTextProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, Label, LabelProps, Select, SelectProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -55,7 +55,7 @@ __export(src_exports, {
   Image: () => import_theme_ui11.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => Input,
-  Label: () => import_theme_ui13.Label,
+  Label: () => Label,
   LinearProgress: () => import_theme_ui15.Progress,
   Link: () => import_theme_ui14.Link,
   Radio: () => import_theme_ui19.Radio,
@@ -255,6 +255,30 @@ Input.displayName = "Input";
 
 // src/components/Label.tsx
 var import_theme_ui13 = require("theme-ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var TOOLTIP_LABEL = "tooltip";
+var Label = ({
+  children,
+  onTooltipClick,
+  tooltip,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_theme_ui13.Label, {
+    ...props,
+    children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui16.Text, {
+      sx: {
+        color: "currentcolor",
+        cursor: onTooltipClick ? "pointer" : void 0
+      },
+      onClick: onTooltipClick,
+      "aria-label": TOOLTIP_LABEL,
+      children: /* @__PURE__ */(0, import_jsx_runtime6.jsx)(Icon, {
+        inline: true,
+        icon: "info"
+      })
+    })]
+  });
+};
 
 // src/components/Link.tsx
 var import_theme_ui14 = require("theme-ui");
@@ -268,14 +292,14 @@ var import_theme_ui16 = require("theme-ui");
 // src/components/Select.tsx
 var import_theme_ui17 = require("theme-ui");
 var import_react4 = __toESM(require("react"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Select = import_react4.default.forwardRef(({
   arrow,
   ...props
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui17.Select, {
-    arrow: /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, {
-      children: [arrow ?? /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui17.Select, {
+    arrow: /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
+      children: [arrow ?? /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
         sx: {
           marginLeft: ({
             space
@@ -286,10 +310,10 @@ var Select = import_react4.default.forwardRef(({
           pointerEvents: "none",
           lineHeight: 0
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime6.jsx)(Icon, {
+        children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(Icon, {
           icon: "picker-down"
         })
-      }), props["aria-invalid"] === "true" && /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui16.Text, {
+      }), props["aria-invalid"] === "true" && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
         className: "error-icon",
         sx: {
           marginLeft: ({
@@ -301,7 +325,7 @@ var Select = import_react4.default.forwardRef(({
           pointerEvents: "none",
           lineHeight: 0
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime6.jsx)(Icon, {
+        children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(Icon, {
           icon: "error"
         })
       })]
@@ -329,7 +353,7 @@ var import_theme_ui22 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
 var React6 = __toESM(require("react"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
   const [progress, setProgress] = React6.useState(0);
@@ -354,7 +378,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui15.Progress, {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui15.Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -368,14 +392,14 @@ var import_theme_ui23 = require("theme-ui");
 var import_theme_ui24 = require("theme-ui");
 
 // src/components/HelpText.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var HelpText = ({
   disabled,
   negative,
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui16.Text, {
     variant,
     "aria-disabled": disabled ? "true" : void 0,
     ...props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.31.13",
+  "version": "1.31.15",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -24,7 +24,7 @@
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.5",
-    "@ttoss/theme": "^1.4.12",
+    "@ttoss/theme": "^1.4.13",
     "theme-ui": "^0.15.5"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2fda7636a4a10c1085a17df991fb3fc0ac28f816"
+  "gitHead": "93e161a8af481b0a74c48331c5d193566f3878dc"
 }

package/src/components/Label.tsx

@@ -1 +1,35 @@
-export { Label, type LabelProps } from 'theme-ui';
+import { Icon, Text } from '..';
+import { type LabelProps as LabelPropsUi, Label as LabelUi } from 'theme-ui';
+
+const TOOLTIP_LABEL = 'tooltip';
+
+export type LabelProps = LabelPropsUi & {
+  tooltip?: boolean;
+  onTooltipClick?: () => void;
+};
+
+export const Label = ({
+  children,
+  onTooltipClick,
+  tooltip,
+  ...props
+}: LabelProps) => {
+  return (
+    <LabelUi {...props}>
+      {children}
+
+      {tooltip && (
+        <Text
+          sx={{
+            color: 'currentcolor',
+            cursor: onTooltipClick ? 'pointer' : undefined,
+          }}
+          onClick={onTooltipClick}
+          aria-label={TOOLTIP_LABEL}
+        >
+          <Icon inline icon="info" />
+        </Text>
+      )}
+    </LabelUi>
+  );
+};