@nattstack/ui 0.0.55 → 0.0.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -392,13 +392,14 @@ declare const TEXTAREA_CLASS_NAME: {
392
392
  //#region src/components/tooltip/tooltip.d.ts
393
393
  interface TooltipProps extends Omit<Tooltip$1.Root.Props, "disabled"> {
394
394
  isDisabled?: Tooltip$1.Root.Props["disabled"];
395
+ isDisableHoverablePopup?: Tooltip$1.Root.Props["disableHoverablePopup"];
395
396
  }
396
397
  declare function Tooltip(props: TooltipProps): JSX.Element;
397
398
  //#endregion
398
- //#region src/components/tooltip/tooltip-content.d.ts
399
- interface TooltipContentProps extends Pick<Tooltip$1.Positioner.Props, "side" | "sideOffset">, Tooltip$1.Popup.Props {}
400
- declare function TooltipContent(props: TooltipContentProps): JSX.Element;
401
- declare const TOOLTIP_CONTENT_CLASS_NAME: {
399
+ //#region src/components/tooltip/tooltip-popup.d.ts
400
+ interface TooltipPopupProps extends Pick<Tooltip$1.Positioner.Props, "side" | "sideOffset">, Tooltip$1.Popup.Props {}
401
+ declare function TooltipPopup(props: TooltipPopupProps): JSX.Element;
402
+ declare const TOOLTIP_POPUP_CLASS_NAME: {
402
403
  readonly BASE: string;
403
404
  };
404
405
  //#endregion
@@ -410,4 +411,4 @@ declare function TooltipProvider(props: TooltipProviderProps): JSX.Element;
410
411
  interface TooltipTriggerProps extends Tooltip$1.Trigger.Props {}
411
412
  declare function TooltipTrigger(props: TooltipTriggerProps): JSX.Element;
412
413
  //#endregion
413
- export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, COLUMN_CLASS_NAME, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, MenuViewport, MenuViewportProps, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, SpacerProps, Switch, SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipContent, TooltipContentProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, createMenuHandle };
414
+ export { BUTTON_CLASS_NAME, Button, ButtonIconProps, ButtonLink, ButtonLinkProps, ButtonProps, COLUMN_CLASS_NAME, Column, ColumnProps, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsivePopupProps, DialogResponsiveProps, DialogResponsiveTrigger, DialogResponsiveTriggerProps, INPUT_CLASS_NAME, Input, InputProps, LABEL_CLASS_NAME, Label, LabelProps, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLinkItem, MenuLinkItemProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, MenuViewport, MenuViewportProps, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, RowProps, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, SpacerProps, Switch, SwitchProps, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_POPUP_CLASS_NAME, Tabs, TabsPanel, TabsPanelProps, TabsPillList, TabsPillListProps, TabsPillTab, TabsPillTabProps, TabsProps, TabsSegmentedList, TabsSegmentedListProps, TabsSegmentedTab, TabsSegmentedTabProps, TabsUnderlineList, TabsUnderlineListProps, TabsUnderlineTab, TabsUnderlineTabProps, Textarea, TextareaProps, Tooltip, TooltipPopup, TooltipPopupProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, createMenuHandle };
@@ -22,8 +22,7 @@ var button_spinner_module_default = {
22
22
  //#endregion
23
23
  //#region src/components/button/button-spinner.tsx
24
24
  function ButtonSpinner(props) {
25
- const DEFAULT_SIZE = 20;
26
- const { size = DEFAULT_SIZE } = props;
25
+ const { size = 20 } = props;
27
26
  return /* @__PURE__ */ jsx("div", {
28
27
  className: button_spinner_module_default.button_spinner,
29
28
  style: { "--size": `${size}px` },
@@ -51,8 +50,7 @@ var button_module_default = {
51
50
  //#endregion
52
51
  //#region src/components/button/button.tsx
53
52
  function Button(props) {
54
- const DEFAULT_SIZE = 40;
55
- const { children = "", className: customClassName = "", iconEnd = "", iconStart = "", isActive = false, isDisabled = false, isFullWidth = false, isIconOnly = false, isLoading = false, isRounded = false, size = DEFAULT_SIZE, type = "button", variant = "primary", ...rest } = props;
53
+ const { children = "", className: customClassName = "", iconEnd = "", iconStart = "", isActive = false, isDisabled = false, isFullWidth = false, isIconOnly = false, isLoading = false, isRounded = false, size = 40, type = "button", variant = "primary", ...rest } = props;
56
54
  return /* @__PURE__ */ jsxs("button", {
57
55
  "aria-pressed": isActive,
58
56
  className: normalizeWhitespace(`
@@ -102,8 +100,7 @@ const BUTTON_CLASS_NAME = {
102
100
  //#endregion
103
101
  //#region src/components/button-link/button-link.tsx
104
102
  function ButtonLink(props) {
105
- const DEFAULT_SIZE = 40;
106
- const { as = "a", className: customClassName = "", isFullWidth = false, isIconOnly = false, isRounded = false, size = DEFAULT_SIZE, variant = "primary", ...rest } = props;
103
+ const { as = "a", className: customClassName = "", isFullWidth = false, isIconOnly = false, isRounded = false, size = 40, variant = "primary", ...rest } = props;
107
104
  return createElement(as, {
108
105
  className: normalizeWhitespace(`
109
106
  ${BUTTON_CLASS_NAME.BASE}
@@ -268,8 +265,7 @@ var input_module_default = {
268
265
  //#endregion
269
266
  //#region src/components/input/input.tsx
270
267
  function Input(props) {
271
- const DEFAULT_SIZE = 48;
272
- const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, size = DEFAULT_SIZE, type = "text", ...rest } = props;
268
+ const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, size = 48, type = "text", ...rest } = props;
273
269
  return /* @__PURE__ */ jsx("input", {
274
270
  className: normalizeWhitespace(`
275
271
  ${INPUT_CLASS_NAME.BASE}
@@ -426,8 +422,7 @@ function MenuCheckboxItem(props) {
426
422
  //#endregion
427
423
  //#region src/components/menu/menu-content.tsx
428
424
  function MenuContent(props) {
429
- const DEFAULT_SIDE_OFFSET = 8;
430
- const { align = "start", alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className: customClassName = "", collisionAvoidance = void 0, collisionBoundary = void 0, collisionPadding = void 0, container = void 0, disableAnchorTracking = void 0, keepMounted = void 0, positionMethod = void 0, side = "bottom", sideOffset = DEFAULT_SIDE_OFFSET, sticky = void 0, ...rest } = props;
425
+ const { align = "start", alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className: customClassName = "", collisionAvoidance = void 0, collisionBoundary = void 0, collisionPadding = void 0, container = void 0, disableAnchorTracking = void 0, keepMounted = void 0, positionMethod = void 0, side = "bottom", sideOffset = 8, sticky = void 0, ...rest } = props;
431
426
  const combinedClassName = getMenuClassName(MENU_CLASS_NAME.CONTENT, customClassName);
432
427
  return /* @__PURE__ */ jsx(Menu$1.Portal, {
433
428
  container,
@@ -705,8 +700,7 @@ var switch_module_default = {
705
700
  //#endregion
706
701
  //#region src/components/switch/switch.tsx
707
702
  function Switch(props) {
708
- const DEFAULT_SIZE = 24;
709
- const { className: customClassName = "", isChecked = void 0, isDefaultChecked = false, isDisabled = false, isReadOnly = false, isRequired = false, size = DEFAULT_SIZE, ...rest } = props;
703
+ const { className: customClassName = "", isChecked = void 0, isDefaultChecked = false, isDisabled = false, isReadOnly = false, isRequired = false, size = 24, ...rest } = props;
710
704
  const combinedClassName = normalizeWhitespace(`
711
705
  ${SWITCH_CLASS_NAME.BASE}
712
706
  ${SWITCH_CLASS_NAME.SIZE[size]}
@@ -954,8 +948,7 @@ var textarea_module_default = { "textarea": "textarea-module_textarea_JqpxFq" };
954
948
  //#endregion
955
949
  //#region src/components/textarea/textarea.tsx
956
950
  function Textarea(props) {
957
- const DEFAULT_ROWS = 2;
958
- const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, rows = DEFAULT_ROWS, ...rest } = props;
951
+ const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, rows = 2, ...rest } = props;
959
952
  return /* @__PURE__ */ jsx("textarea", {
960
953
  className: normalizeWhitespace(`
961
954
  ${TEXTAREA_CLASS_NAME.INPUT}
@@ -984,42 +977,43 @@ const TEXTAREA_CLASS_NAME = {
984
977
  //#endregion
985
978
  //#region src/components/tooltip/tooltip.tsx
986
979
  function Tooltip(props) {
987
- const { isDisabled = false, ...rest } = props;
980
+ const { isDisabled = false, isDisableHoverablePopup = true, ...rest } = props;
988
981
  return /* @__PURE__ */ jsx(Tooltip$1.Root, {
989
982
  "data-slot": "tooltip",
990
983
  disabled: isDisabled,
991
- disableHoverablePopup: true,
984
+ disableHoverablePopup: isDisableHoverablePopup,
992
985
  ...rest
993
986
  });
994
987
  }
995
988
  //#endregion
996
- //#region src/components/tooltip/tooltip-content.module.css
997
- var tooltip_content_module_default = {
998
- "tooltip_content": "tooltip-content-module_tooltip_content_j-Z8kW",
999
- "tooltip_content_positioner": "tooltip-content-module_tooltip_content_positioner_j-Z8kW"
989
+ //#region src/components/tooltip/tooltip-popup.module.css
990
+ var tooltip_popup_module_default = {
991
+ "tooltip_popup": "tooltip-popup-module_tooltip_popup_Yvko7q",
992
+ "tooltip_popup_portal": "tooltip-popup-module_tooltip_popup_portal_Yvko7q"
1000
993
  };
1001
994
  //#endregion
1002
- //#region src/components/tooltip/tooltip-content.tsx
1003
- function TooltipContent(props) {
1004
- const DEFAULT_SIDE_OFFSET = 4;
1005
- const { children, className: customClassName = "", side = "top", sideOffset = DEFAULT_SIDE_OFFSET, ...rest } = props;
995
+ //#region src/components/tooltip/tooltip-popup.tsx
996
+ function TooltipPopup(props) {
997
+ const { children = "", className: customClassName = "", side = "top", sideOffset = 4, ...rest } = props;
1006
998
  const combinedClassName = normalizeWhitespace(`
1007
- ${TOOLTIP_CONTENT_CLASS_NAME.BASE}
999
+ ${TOOLTIP_POPUP_CLASS_NAME.BASE}
1008
1000
  ${customClassName}
1009
1001
  `);
1010
- return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(Tooltip$1.Positioner, {
1011
- className: tooltip_content_module_default.tooltip_content_positioner,
1012
- side,
1013
- sideOffset,
1014
- children: [/* @__PURE__ */ jsx(Tooltip$1.Popup, {
1015
- className: combinedClassName,
1016
- "data-slot": "tooltip-content",
1017
- ...rest,
1018
- children
1019
- }), /* @__PURE__ */ jsx(Tooltip$1.Arrow, {})]
1020
- }) });
1002
+ return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
1003
+ className: tooltip_popup_module_default.tooltip_popup_portal,
1004
+ children: /* @__PURE__ */ jsxs(Tooltip$1.Positioner, {
1005
+ side,
1006
+ sideOffset,
1007
+ children: [/* @__PURE__ */ jsx(Tooltip$1.Popup, {
1008
+ className: combinedClassName,
1009
+ "data-slot": "tooltip-popup",
1010
+ ...rest,
1011
+ children
1012
+ }), /* @__PURE__ */ jsx(Tooltip$1.Arrow, {})]
1013
+ })
1014
+ });
1021
1015
  }
1022
- const TOOLTIP_CONTENT_CLASS_NAME = { BASE: tooltip_content_module_default.tooltip_content };
1016
+ const TOOLTIP_POPUP_CLASS_NAME = { BASE: tooltip_popup_module_default.tooltip_popup };
1023
1017
  //#endregion
1024
1018
  //#region src/components/tooltip/tooltip-provider.tsx
1025
1019
  function TooltipProvider(props) {
@@ -1039,4 +1033,4 @@ function TooltipTrigger(props) {
1039
1033
  });
1040
1034
  }
1041
1035
  //#endregion
1042
- export { BUTTON_CLASS_NAME, Button, ButtonLink, COLUMN_CLASS_NAME, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MenuViewport, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, Switch, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, createMenuHandle };
1036
+ export { BUTTON_CLASS_NAME, Button, ButtonLink, COLUMN_CLASS_NAME, Column, DIALOG_RESPONSIVE_POPUP_CLASS_NAME, DialogResponsive, DialogResponsivePopup, DialogResponsiveTrigger, INPUT_CLASS_NAME, Input, LABEL_CLASS_NAME, Label, MENU_CLASS_NAME, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MenuViewport, OTPField, OTPFieldInput, OTP_FIELD_CLASS_NAME, OTP_FIELD_INPUT_CLASS_NAME, ROW_CLASS_NAME, Row, SPACER_CLASS_NAME, SWITCH_CLASS_NAME, Spacer, Switch, TABS_CLASS_NAME, TABS_PANEL_CLASS_NAME, TABS_PILL_LIST_CLASS_NAME, TABS_PILL_TAB_CLASS_NAME, TABS_SEGMENTED_LIST_CLASS_NAME, TABS_SEGMENTED_TAB_CLASS_NAME, TABS_UNDERLINE_LIST_CLASS_NAME, TABS_UNDERLINE_TAB_CLASS_NAME, TEXTAREA_CLASS_NAME, TOOLTIP_POPUP_CLASS_NAME, Tabs, TabsPanel, TabsPillList, TabsPillTab, TabsSegmentedList, TabsSegmentedTab, TabsUnderlineList, TabsUnderlineTab, Textarea, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, createMenuHandle };
@@ -955,21 +955,30 @@
955
955
  max-height: none;
956
956
  padding: 12px !important;
957
957
  }
958
- .tooltip-content-module_tooltip_content_j-Z8kW {
958
+ .tooltip-popup-module_tooltip_popup_Yvko7q {
959
+ --scale: .975;
959
960
  background-color: var(--color-gray-dark-1);
960
961
  color: var(--color-gray-dark-12);
962
+ transform-origin: var(--transform-origin);
961
963
  border-radius: 8px;
962
964
  padding: 4px 8px;
963
965
  font-size: 13px;
964
966
  font-weight: 500;
967
+ transition-property: opacity, scale;
968
+ transition-duration: .15s;
969
+ box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
965
970
  }
966
971
 
967
- .tooltip-content-module_tooltip_content_positioner_j-Z8kW {
968
- isolation: isolate;
972
+ .tooltip-popup-module_tooltip_popup_portal_Yvko7q {
969
973
  z-index: 50;
970
974
  }
971
975
 
972
- .dark .tooltip-content-module_tooltip_content_j-Z8kW {
976
+ .tooltip-popup-module_tooltip_popup_Yvko7q[data-ending-style], .tooltip-popup-module_tooltip_popup_Yvko7q[data-starting-style] {
977
+ opacity: 0;
978
+ scale: var(--scale);
979
+ }
980
+
981
+ .dark .tooltip-popup-module_tooltip_popup_Yvko7q {
973
982
  background-color: var(--color-gray-light-1);
974
983
  color: var(--color-gray-light-12);
975
984
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.55",
3
+ "version": "0.0.57",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",