frosted-ui 0.0.1-canary.82 → 0.0.1-canary.84

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.
Files changed (18) hide show
  1. package/dist/cjs/components/tooltip/tooltip.js +9 -42
  2. package/dist/cjs/components/tooltip/tooltip.js.map +1 -1
  3. package/dist/cjs/components/tooltip/tooltip.props.d.ts +0 -5
  4. package/dist/cjs/components/tooltip/tooltip.props.js +0 -6
  5. package/dist/cjs/components/tooltip/tooltip.props.js.map +1 -1
  6. package/dist/cjs/components/tooltip/tooltip.stories.d.ts +1 -4
  7. package/dist/cjs/components/tooltip/tooltip.stories.js +2 -23
  8. package/dist/cjs/components/tooltip/tooltip.stories.js.map +1 -1
  9. package/dist/esm/components/tooltip/tooltip.js +9 -42
  10. package/dist/esm/components/tooltip/tooltip.js.map +1 -1
  11. package/dist/esm/components/tooltip/tooltip.props.d.ts +0 -5
  12. package/dist/esm/components/tooltip/tooltip.props.js +0 -6
  13. package/dist/esm/components/tooltip/tooltip.props.js.map +1 -1
  14. package/dist/esm/components/tooltip/tooltip.stories.d.ts +1 -4
  15. package/dist/esm/components/tooltip/tooltip.stories.js +2 -23
  16. package/dist/esm/components/tooltip/tooltip.stories.js.map +1 -1
  17. package/package.json +1 -1
  18. package/styles.css +10 -52
package/dist/cjs/components/tooltip/tooltip.js CHANGED
@@ -8,55 +8,22 @@ const radix_ui_1 = require("radix-ui");
8
8
  const React = tslib_1.__importStar(require("react"));
9
9
  const theme_1 = require("../../theme");
10
10
  const text_1 = require("../text");
11
- const tooltip_props_1 = require("./tooltip.props");
12
11
  const Tooltip = (props) => {
13
- const { children, className, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, content, container, forceMount, type = tooltip_props_1.tooltipPropDefs.type.default, ...tooltipContentProps } = props;
14
- const [isOverflowing, setIsOverflowing] = React.useState(false);
15
- const [triggerElement, setTriggerElement] = React.useState(null);
16
- React.useLayoutEffect(() => {
17
- if (type === 'overflow' && triggerElement) {
18
- const updateTriggerOverflow = () => {
19
- const isOverflowing = triggerElement.offsetWidth < triggerElement.scrollWidth ||
20
- triggerElement.offsetHeight < triggerElement.scrollHeight;
21
- setIsOverflowing(isOverflowing);
22
- };
23
- updateTriggerOverflow();
24
- const resizeObserver = new ResizeObserver(() => {
25
- updateTriggerOverflow();
26
- });
27
- resizeObserver.observe(triggerElement);
28
- const mutationObserver = new MutationObserver(() => {
29
- updateTriggerOverflow();
30
- });
31
- mutationObserver.observe(triggerElement, {
32
- attributes: true,
33
- childList: true,
34
- subtree: true,
35
- });
36
- return () => {
37
- resizeObserver.disconnect();
38
- mutationObserver.disconnect();
39
- };
40
- }
41
- else {
42
- setIsOverflowing(false);
43
- }
44
- }, [triggerElement, type]);
12
+ const { children, className, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, content, container, forceMount, ...tooltipContentProps } = props;
45
13
  const rootProps = {
46
- open: open !== undefined ? (type === 'overflow' ? open && isOverflowing : open) : open,
47
- defaultOpen: defaultOpen !== undefined ? (type === 'overflow' ? defaultOpen && isOverflowing : defaultOpen) : defaultOpen,
14
+ open,
15
+ defaultOpen,
48
16
  onOpenChange,
49
17
  delayDuration,
50
18
  disableHoverableContent,
51
19
  };
52
20
  return (React.createElement(radix_ui_1.Tooltip.Root, { ...rootProps },
53
- React.createElement(radix_ui_1.Tooltip.Trigger, { asChild: true, ref: (e) => {
54
- setTriggerElement(e);
55
- } }, children),
56
- React.createElement(radix_ui_1.Tooltip.Portal, { container: container, forceMount: forceMount }, (type === 'overflow' ? isOverflowing : true) ? (React.createElement(theme_1.Theme, { asChild: true },
57
- React.createElement(radix_ui_1.Tooltip.Content, { sideOffset: 4, collisionPadding: 10, ...tooltipContentProps, className: (0, classnames_1.default)('fui-TooltipContent', className) },
58
- React.createElement(text_1.Text, { as: "p", className: "fui-TooltipText", size: "1" }, content),
59
- React.createElement(radix_ui_1.Tooltip.Arrow, { className: "fui-TooltipArrow" })))) : null)));
21
+ React.createElement(radix_ui_1.Tooltip.Trigger, { asChild: true }, children),
22
+ React.createElement(radix_ui_1.Tooltip.Portal, { container: container, forceMount: forceMount },
23
+ React.createElement(theme_1.Theme, { asChild: true },
24
+ React.createElement(radix_ui_1.Tooltip.Content, { sideOffset: 4, collisionPadding: 10, ...tooltipContentProps, className: (0, classnames_1.default)('fui-TooltipContent', className) },
25
+ React.createElement(text_1.Text, { as: "p", className: "fui-TooltipText", size: "1" }, content),
26
+ React.createElement(radix_ui_1.Tooltip.Arrow, { className: "fui-TooltipArrow" }))))));
60
27
  };
61
28
  exports.Tooltip = Tooltip;
62
29
  Tooltip.displayName = 'Tooltip';
package/dist/cjs/components/tooltip/tooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,oEAAoC;AACpC,uCAAuD;AACvD,qDAA+B;AAC/B,uCAAoC;AACpC,kCAA+B;AAe/B,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,uBAAuB,EACvB,OAAO,EACP,SAAS,EACT,UAAU,EACV,GAAG,mBAAmB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG;QAChB,IAAI;QACJ,WAAW;QACX,YAAY;QACZ,aAAa;QACb,uBAAuB;KACxB,CAAC;IACF,OAAO,CACL,oBAAC,kBAAgB,CAAC,IAAI,OAAK,SAAS;QAClC,oBAAC,kBAAgB,CAAC,OAAO,IAAC,OAAO,UAAE,QAAQ,CAA4B;QACvE,oBAAC,kBAAgB,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU;YACnE,oBAAC,aAAK,IAAC,OAAO;gBACZ,oBAAC,kBAAgB,CAAC,OAAO,IACvB,UAAU,EAAE,CAAC,EACb,gBAAgB,EAAE,EAAE,KAChB,mBAAmB,EACvB,SAAS,EAAE,IAAA,oBAAU,EAAC,oBAAoB,EAAE,SAAS,CAAC;oBAEtD,oBAAC,WAAI,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAC,GAAG,IAC9C,OAAO,CACH;oBACP,oBAAC,kBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,kBAAkB,GAAG,CAC9B,CACrB,CACgB,CACJ,CACzB,CAAC;AACJ,CAAC,CAAC;AAGO,0BAAO;AAFhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
package/dist/cjs/components/tooltip/tooltip.props.d.ts CHANGED
@@ -4,10 +4,5 @@ declare const tooltipPropDefs: {
4
4
  default: undefined;
5
5
  required: true;
6
6
  };
7
- type: {
8
- type: "enum";
9
- values: readonly ["always", "overflow"];
10
- default: "always";
11
- };
12
7
  };
13
8
  export { tooltipPropDefs };
package/dist/cjs/components/tooltip/tooltip.props.js CHANGED
@@ -1,14 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.tooltipPropDefs = void 0;
4
- const typeValues = ['always', 'overflow'];
5
4
  const tooltipPropDefs = {
6
5
  content: { type: 'ReactNode', default: undefined, required: true },
7
- type: {
8
- type: 'enum',
9
- values: typeValues,
10
- default: 'always',
11
- },
12
6
  };
13
7
  exports.tooltipPropDefs = tooltipPropDefs;
14
8
  //# sourceMappingURL=tooltip.props.js.map
package/dist/cjs/components/tooltip/tooltip.props.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.props.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.props.ts"],"names":[],"mappings":";;;AAEA,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,UAAU,CAAU,CAAC;AAEnD,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;IAClE,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,QAAQ;KAClB;CAIF,CAAC;AAEO,0CAAe"}
1
+ {"version":3,"file":"tooltip.props.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.props.ts"],"names":[],"mappings":";;;AAEA,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;CAGnE,CAAC;AAEO,0CAAe"}
package/dist/cjs/components/tooltip/tooltip.stories.d.ts CHANGED
@@ -6,9 +6,7 @@ declare const meta: {
6
6
  (props: import("./tooltip").TooltipProps): React.JSX.Element;
7
7
  displayName: string;
8
8
  };
9
- args: {
10
- type: "always";
11
- };
9
+ args: {};
12
10
  parameters: {
13
11
  layout: string;
14
12
  };
@@ -17,4 +15,3 @@ declare const meta: {
17
15
  export default meta;
18
16
  type Story = StoryObj<typeof meta>;
19
17
  export declare const Default: Story;
20
- export declare const ShowOnOverflow: Story;
package/dist/cjs/components/tooltip/tooltip.stories.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ShowOnOverflow = exports.Default = void 0;
3
+ exports.Default = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
6
  const __1 = require("..");
@@ -10,9 +10,7 @@ const ExampleIcon = ({ size }) => (react_1.default.createElement("svg", { width:
10
10
  const meta = {
11
11
  title: 'Components/Tooltip',
12
12
  component: __1.Tooltip,
13
- args: {
14
- type: __1.tooltipPropDefs.type.default,
15
- },
13
+ args: {},
16
14
  parameters: {
17
15
  // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
18
16
  layout: 'centered',
@@ -30,23 +28,4 @@ exports.Default = {
30
28
  react_1.default.createElement(__1.IconButton, null,
31
29
  react_1.default.createElement(ExampleIcon, { size: 16 })))),
32
30
  };
33
- exports.ShowOnOverflow = {
34
- name: 'Show on overflow',
35
- args: {
36
- content: 'This is a really long text',
37
- type: 'overflow',
38
- },
39
- render: ({ content, type }) => {
40
- return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' } },
41
- react_1.default.createElement(__1.Tooltip, { content: content, type: type, defaultOpen: true },
42
- react_1.default.createElement(__1.Text, null, content)),
43
- react_1.default.createElement(__1.Tooltip, { content: content, type: type, defaultOpen: true },
44
- react_1.default.createElement(__1.Text, { style: {
45
- width: 100,
46
- overflow: 'hidden',
47
- textOverflow: 'ellipsis',
48
- whiteSpace: 'nowrap',
49
- } }, content))));
50
- },
51
- };
52
31
  //# sourceMappingURL=tooltip.stories.js.map
package/dist/cjs/components/tooltip/tooltip.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":";;;;AAEA,0DAA0B;AAC1B,0BAAgE;AAEhE,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE,CAAC,CAClD,uCAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAChG,wCACE,CAAC,EAAC,oWAAoW,EACtW,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACZ,CACJ,CACP,CAAC;AACF,oHAAoH;AACpH,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,WAAO;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,mBAAe,CAAC,IAAI,CAAC,OAAO;KACnC;IACD,UAAU,EAAE;QACV,kIAAkI;QAClI,MAAM,EAAE,UAAU;KACnB;IACD,gIAAgI;IAChI,IAAI,EAAE,CAAC,UAAU,CAAC;CACY,CAAC;AAEjC,kBAAe,IAAI,CAAC;AAGpB,8FAA8F;AACjF,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,8BAAC,WAAO,OAAK,IAAI;QACf,8BAAC,cAAU;YACT,8BAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,CACd,CACL,CACX;CACF,CAAC;AAEW,QAAA,cAAc,GAAU;IACnC,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE;QACJ,OAAO,EAAE,4BAA4B;QACrC,IAAI,EAAE,UAAU;KACjB;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;QAC5B,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,EAAE;YAC7E,8BAAC,WAAO,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW;gBAChD,8BAAC,QAAI,QAAE,OAAO,CAAQ,CACd;YACV,8BAAC,WAAO,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW;gBAChD,8BAAC,QAAI,IACH,KAAK,EAAE;wBACL,KAAK,EAAE,GAAG;wBACV,QAAQ,EAAE,QAAQ;wBAClB,YAAY,EAAE,UAAU;wBACxB,UAAU,EAAE,QAAQ;qBACrB,IAEA,OAAO,CACH,CACC,CACN,CACP,CAAC;IACJ,CAAC;CACF,CAAC"}
1
+ {"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":";;;;AAEA,0DAA0B;AAC1B,0BAAyC;AAEzC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE,CAAC,CAClD,uCAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAChG,wCACE,CAAC,EAAC,oWAAoW,EACtW,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACZ,CACJ,CACP,CAAC;AACF,oHAAoH;AACpH,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,WAAO;IAClB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,kIAAkI;QAClI,MAAM,EAAE,UAAU;KACnB;IACD,gIAAgI;IAChI,IAAI,EAAE,CAAC,UAAU,CAAC;CACY,CAAC;AAEjC,kBAAe,IAAI,CAAC;AAGpB,8FAA8F;AACjF,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,8BAAC,WAAO,OAAK,IAAI;QACf,8BAAC,cAAU;YACT,8BAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,CACd,CACL,CACX;CACF,CAAC"}
package/dist/esm/components/tooltip/tooltip.js CHANGED
@@ -4,55 +4,22 @@ import { Tooltip as TooltipPrimitive } from 'radix-ui';
4
4
  import * as React from 'react';
5
5
  import { Theme } from '../../theme';
6
6
  import { Text } from '../text';
7
- import { tooltipPropDefs } from './tooltip.props';
8
7
  const Tooltip = (props) => {
9
- const { children, className, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, content, container, forceMount, type = tooltipPropDefs.type.default, ...tooltipContentProps } = props;
10
- const [isOverflowing, setIsOverflowing] = React.useState(false);
11
- const [triggerElement, setTriggerElement] = React.useState(null);
12
- React.useLayoutEffect(() => {
13
- if (type === 'overflow' && triggerElement) {
14
- const updateTriggerOverflow = () => {
15
- const isOverflowing = triggerElement.offsetWidth < triggerElement.scrollWidth ||
16
- triggerElement.offsetHeight < triggerElement.scrollHeight;
17
- setIsOverflowing(isOverflowing);
18
- };
19
- updateTriggerOverflow();
20
- const resizeObserver = new ResizeObserver(() => {
21
- updateTriggerOverflow();
22
- });
23
- resizeObserver.observe(triggerElement);
24
- const mutationObserver = new MutationObserver(() => {
25
- updateTriggerOverflow();
26
- });
27
- mutationObserver.observe(triggerElement, {
28
- attributes: true,
29
- childList: true,
30
- subtree: true,
31
- });
32
- return () => {
33
- resizeObserver.disconnect();
34
- mutationObserver.disconnect();
35
- };
36
- }
37
- else {
38
- setIsOverflowing(false);
39
- }
40
- }, [triggerElement, type]);
8
+ const { children, className, open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent, content, container, forceMount, ...tooltipContentProps } = props;
41
9
  const rootProps = {
42
- open: open !== undefined ? (type === 'overflow' ? open && isOverflowing : open) : open,
43
- defaultOpen: defaultOpen !== undefined ? (type === 'overflow' ? defaultOpen && isOverflowing : defaultOpen) : defaultOpen,
10
+ open,
11
+ defaultOpen,
44
12
  onOpenChange,
45
13
  delayDuration,
46
14
  disableHoverableContent,
47
15
  };
48
16
  return (React.createElement(TooltipPrimitive.Root, { ...rootProps },
49
- React.createElement(TooltipPrimitive.Trigger, { asChild: true, ref: (e) => {
50
- setTriggerElement(e);
51
- } }, children),
52
- React.createElement(TooltipPrimitive.Portal, { container: container, forceMount: forceMount }, (type === 'overflow' ? isOverflowing : true) ? (React.createElement(Theme, { asChild: true },
53
- React.createElement(TooltipPrimitive.Content, { sideOffset: 4, collisionPadding: 10, ...tooltipContentProps, className: classNames('fui-TooltipContent', className) },
54
- React.createElement(Text, { as: "p", className: "fui-TooltipText", size: "1" }, content),
55
- React.createElement(TooltipPrimitive.Arrow, { className: "fui-TooltipArrow" })))) : null)));
17
+ React.createElement(TooltipPrimitive.Trigger, { asChild: true }, children),
18
+ React.createElement(TooltipPrimitive.Portal, { container: container, forceMount: forceMount },
19
+ React.createElement(Theme, { asChild: true },
20
+ React.createElement(TooltipPrimitive.Content, { sideOffset: 4, collisionPadding: 10, ...tooltipContentProps, className: classNames('fui-TooltipContent', className) },
21
+ React.createElement(Text, { as: "p", className: "fui-TooltipText", size: "1" }, content),
22
+ React.createElement(TooltipPrimitive.Arrow, { className: "fui-TooltipArrow" }))))));
56
23
  };
57
24
  Tooltip.displayName = 'Tooltip';
58
25
  export { Tooltip };
package/dist/esm/components/tooltip/tooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAe/B,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,uBAAuB,EACvB,OAAO,EACP,SAAS,EACT,UAAU,EACV,GAAG,mBAAmB,EACvB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG;QAChB,IAAI;QACJ,WAAW;QACX,YAAY;QACZ,aAAa;QACb,uBAAuB;KACxB,CAAC;IACF,OAAO,CACL,oBAAC,gBAAgB,CAAC,IAAI,OAAK,SAAS;QAClC,oBAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,UAAE,QAAQ,CAA4B;QACvE,oBAAC,gBAAgB,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU;YACnE,oBAAC,KAAK,IAAC,OAAO;gBACZ,oBAAC,gBAAgB,CAAC,OAAO,IACvB,UAAU,EAAE,CAAC,EACb,gBAAgB,EAAE,EAAE,KAChB,mBAAmB,EACvB,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC;oBAEtD,oBAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAC,GAAG,IAC9C,OAAO,CACH;oBACP,oBAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,kBAAkB,GAAG,CAC9B,CACrB,CACgB,CACJ,CACzB,CAAC;AACJ,CAAC,CAAC;AACF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,CAAC"}
package/dist/esm/components/tooltip/tooltip.props.d.ts CHANGED
@@ -4,10 +4,5 @@ declare const tooltipPropDefs: {
4
4
  default: undefined;
5
5
  required: true;
6
6
  };
7
- type: {
8
- type: "enum";
9
- values: readonly ["always", "overflow"];
10
- default: "always";
11
- };
12
7
  };
13
8
  export { tooltipPropDefs };
package/dist/esm/components/tooltip/tooltip.props.js CHANGED
@@ -1,11 +1,5 @@
1
- const typeValues = ['always', 'overflow'];
2
1
  const tooltipPropDefs = {
3
2
  content: { type: 'ReactNode', default: undefined, required: true },
4
- type: {
5
- type: 'enum',
6
- values: typeValues,
7
- default: 'always',
8
- },
9
3
  };
10
4
  export { tooltipPropDefs };
11
5
  //# sourceMappingURL=tooltip.props.js.map
package/dist/esm/components/tooltip/tooltip.props.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.props.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.props.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,UAAU,CAAU,CAAC;AAEnD,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;IAClE,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,UAAU;QAClB,OAAO,EAAE,QAAQ;KAClB;CAIF,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"tooltip.props.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.props.ts"],"names":[],"mappings":"AAEA,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;CAGnE,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
package/dist/esm/components/tooltip/tooltip.stories.d.ts CHANGED
@@ -6,9 +6,7 @@ declare const meta: {
6
6
  (props: import("./tooltip").TooltipProps): React.JSX.Element;
7
7
  displayName: string;
8
8
  };
9
- args: {
10
- type: "always";
11
- };
9
+ args: {};
12
10
  parameters: {
13
11
  layout: string;
14
12
  };
@@ -17,4 +15,3 @@ declare const meta: {
17
15
  export default meta;
18
16
  type Story = StoryObj<typeof meta>;
19
17
  export declare const Default: Story;
20
- export declare const ShowOnOverflow: Story;
package/dist/esm/components/tooltip/tooltip.stories.js CHANGED
@@ -1,14 +1,12 @@
1
1
  import React from 'react';
2
- import { IconButton, Text, Tooltip, tooltipPropDefs } from '..';
2
+ import { IconButton, Tooltip } from '..';
3
3
  const ExampleIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
4
4
  React.createElement("path", { d: "M3 2.5C3 2.22386 3.22386 2 3.5 2H11.5C11.7761 2 12 2.22386 12 2.5V13.5C12 13.6818 11.9014 13.8492 11.7424 13.9373C11.5834 14.0254 11.3891 14.0203 11.235 13.924L7.5 11.5896L3.765 13.924C3.61087 14.0203 3.41659 14.0254 3.25762 13.9373C3.09864 13.8492 3 13.6818 3 13.5V2.5ZM4 3V12.5979L6.97 10.7416C7.29427 10.539 7.70573 10.539 8.03 10.7416L11 12.5979V3H4Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" })));
5
5
  // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
6
6
  const meta = {
7
7
  title: 'Components/Tooltip',
8
8
  component: Tooltip,
9
- args: {
10
- type: tooltipPropDefs.type.default,
11
- },
9
+ args: {},
12
10
  parameters: {
13
11
  // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
14
12
  layout: 'centered',
@@ -26,23 +24,4 @@ export const Default = {
26
24
  React.createElement(IconButton, null,
27
25
  React.createElement(ExampleIcon, { size: 16 })))),
28
26
  };
29
- export const ShowOnOverflow = {
30
- name: 'Show on overflow',
31
- args: {
32
- content: 'This is a really long text',
33
- type: 'overflow',
34
- },
35
- render: ({ content, type }) => {
36
- return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' } },
37
- React.createElement(Tooltip, { content: content, type: type, defaultOpen: true },
38
- React.createElement(Text, null, content)),
39
- React.createElement(Tooltip, { content: content, type: type, defaultOpen: true },
40
- React.createElement(Text, { style: {
41
- width: 100,
42
- overflow: 'hidden',
43
- textOverflow: 'ellipsis',
44
- whiteSpace: 'nowrap',
45
- } }, content))));
46
- },
47
- };
48
27
  //# sourceMappingURL=tooltip.stories.js.map
package/dist/esm/components/tooltip/tooltip.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,IAAI,CAAC;AAEhE,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE,CAAC,CAClD,6BAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAChG,8BACE,CAAC,EAAC,oWAAoW,EACtW,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACZ,CACJ,CACP,CAAC;AACF,oHAAoH;AACpH,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO;KACnC;IACD,UAAU,EAAE;QACV,kIAAkI;QAClI,MAAM,EAAE,UAAU;KACnB;IACD,gIAAgI;IAChI,IAAI,EAAE,CAAC,UAAU,CAAC;CACY,CAAC;AAEjC,eAAe,IAAI,CAAC;AAGpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,oBAAC,OAAO,OAAK,IAAI;QACf,oBAAC,UAAU;YACT,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,CACd,CACL,CACX;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE;QACJ,OAAO,EAAE,4BAA4B;QACrC,IAAI,EAAE,UAAU;KACjB;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;QAC5B,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,EAAE;YAC7E,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW;gBAChD,oBAAC,IAAI,QAAE,OAAO,CAAQ,CACd;YACV,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW;gBAChD,oBAAC,IAAI,IACH,KAAK,EAAE;wBACL,KAAK,EAAE,GAAG;wBACV,QAAQ,EAAE,QAAQ;wBAClB,YAAY,EAAE,UAAU;wBACxB,UAAU,EAAE,QAAQ;qBACrB,IAEA,OAAO,CACH,CACC,CACN,CACP,CAAC;IACJ,CAAC;CACF,CAAC"}
1
+ {"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAEzC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE,CAAC,CAClD,6BAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;IAChG,8BACE,CAAC,EAAC,oWAAoW,EACtW,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,GACZ,CACJ,CACP,CAAC;AACF,oHAAoH;AACpH,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE,EAAE;IACR,UAAU,EAAE;QACV,kIAAkI;QAClI,MAAM,EAAE,UAAU;KACnB;IACD,gIAAgI;IAChI,IAAI,EAAE,CAAC,UAAU,CAAC;CACY,CAAC;AAEjC,eAAe,IAAI,CAAC;AAGpB,8FAA8F;AAC9F,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,oBAAC,OAAO,OAAK,IAAI;QACf,oBAAC,UAAU;YACT,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,CACd,CACL,CACX;CACF,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frosted-ui",
3
- "version": "0.0.1-canary.82",
3
+ "version": "0.0.1-canary.84",
4
4
  "private": false,
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/styles.css CHANGED
@@ -6152,12 +6152,10 @@ video {
6152
6152
  }
6153
6153
  .fui-DrawerContent:where([data-state='open']) {
6154
6154
  animation: fui-drawer-content-show 400ms cubic-bezier(0.32, 0.72, 0, 1);
6155
- animation: fui-drawer-content-show 400ms cubic-bezier(0.16, 1, 0.3, 1);
6156
6155
  }
6157
6156
 
6158
6157
  .fui-DrawerContent:where([data-state='closed']) {
6159
6158
  animation: fui-drawer-content-hide 400ms cubic-bezier(0.32, 0.72, 0, 1);
6160
- animation: fui-drawer-content-hide 300ms cubic-bezier(0.16, 1, 0.3, 1);
6161
6159
  }
6162
6160
  }
6163
6161
 
@@ -9768,22 +9766,13 @@ video {
9768
9766
  height: var(--skeleton-avatar-size);
9769
9767
  flex-shrink: 0;
9770
9768
 
9771
- background-size: 400% 100%;
9772
- background-image: linear-gradient(
9773
- 270deg,
9774
- var(--skeleton-background-color),
9775
- var(--skeleton-background-shimmer-color),
9776
- var(--skeleton-background-shimmer-color),
9777
- var(--skeleton-background-color)
9778
- );
9769
+ background: var(--skeleton-background-color);
9779
9770
 
9780
- --skeleton-background-color: var(--accent-a2);
9781
- --skeleton-background-shimmer-color: var(--accent-a3);
9771
+ --skeleton-background-color: var(--accent-a3);
9782
9772
  }
9783
9773
 
9784
9774
  .fui-SkeletonAvatar:where(.fui-high-contrast) {
9785
9775
  --skeleton-background-color: var(--accent-a4);
9786
- --skeleton-background-shimmer-color: var(--accent-a6);
9787
9776
  }
9788
9777
 
9789
9778
  .fui-SkeletonAvatar:where(.fui-shape-circle) {
@@ -9839,16 +9828,13 @@ video {
9839
9828
  align-items: center;
9840
9829
  justify-content: center;
9841
9830
  margin: 0;
9842
-
9843
9831
  height: var(--skeleton-text-line-height);
9844
9832
 
9845
- --skeleton-background-color: var(--accent-a2);
9846
- --skeleton-background-shimmer-color: var(--accent-a3);
9833
+ --skeleton-background-color: var(--accent-a3);
9847
9834
  }
9848
9835
 
9849
9836
  .fui-SkeletonText:where(.fui-high-contrast) {
9850
9837
  --skeleton-background-color: var(--accent-a4);
9851
- --skeleton-background-shimmer-color: var(--accent-a6);
9852
9838
  }
9853
9839
 
9854
9840
  .fui-SkeletonText::after {
@@ -9856,15 +9842,7 @@ video {
9856
9842
  width: 100%;
9857
9843
  height: var(--skeleton-text-size);
9858
9844
 
9859
- background-size: 400% 100%;
9860
- background-image: linear-gradient(
9861
- 270deg,
9862
- var(--skeleton-background-color),
9863
- var(--skeleton-background-shimmer-color),
9864
- var(--skeleton-background-shimmer-color),
9865
- var(--skeleton-background-color)
9866
- );
9867
-
9845
+ background: var(--skeleton-background-color);
9868
9846
  border-radius: var(--skeleton-text-border-radius);
9869
9847
  }
9870
9848
 
@@ -9935,47 +9913,27 @@ video {
9935
9913
  user-select: none;
9936
9914
  flex-shrink: 0;
9937
9915
 
9938
- background-size: 400% 100%;
9939
- background-image: linear-gradient(
9940
- 270deg,
9941
- var(--skeleton-background-color),
9942
- var(--skeleton-background-shimmer-color),
9943
- var(--skeleton-background-shimmer-color),
9944
- var(--skeleton-background-color)
9945
- );
9916
+ background: var(--skeleton-background-color);
9946
9917
 
9947
- --skeleton-background-color: var(--accent-a2);
9948
- --skeleton-background-shimmer-color: var(--accent-a3);
9918
+ --skeleton-background-color: var(--accent-a3);
9949
9919
  }
9950
9920
 
9951
9921
  .fui-SkeletonRect:where(.fui-high-contrast) {
9952
9922
  --skeleton-background-color: var(--accent-a4);
9953
- --skeleton-background-shimmer-color: var(--accent-a6);
9954
9923
  }
9955
9924
 
9956
9925
  @media (prefers-reduced-motion: no-preference) {
9957
- @keyframes fui-skeleton-shimmer {
9958
- from {
9959
- background-position: 200% 0;
9960
- }
9961
- to {
9962
- background-position: -200% 0;
9926
+ @keyframes fui-skeleton-pulse {
9927
+ 50% {
9928
+ opacity: 0.5;
9963
9929
  }
9964
9930
  }
9965
9931
 
9966
9932
  .fui-SkeletonAvatar,
9967
9933
  .fui-SkeletonText::after,
9968
9934
  .fui-SkeletonRect {
9969
- animation: fui-skeleton-shimmer 8s ease-in-out infinite;
9935
+ animation: fui-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
9970
9936
  }
9971
-
9972
- .fui-DrawerContent:where([data-state='open'])::before {
9973
- animation: fui-drawer-backdrop-show 400ms cubic-bezier(0.16, 1, 0.3, 1);
9974
- }
9975
-
9976
- .fui-DrawerContent:where([data-state='closed'])::before {
9977
- animation: fui-drawer-backdrop-hide 300ms cubic-bezier(0.16, 1, 0.3, 1);
9978
- }
9979
9937
  }
9980
9938
 
9981
9939
  .fui-SliderRoot {