@telia/teddy 0.0.69 → 0.0.71

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 (17) hide show
  1. package/dist/components/card/card-slot.cjs +4 -3
  2. package/dist/components/card/card-slot.js +4 -3
  3. package/dist/components/card/card.cjs +49 -48
  4. package/dist/components/card/card.js +49 -48
  5. package/dist/components/carousel/carousel-root.cjs +4 -4
  6. package/dist/components/carousel/carousel-root.js +4 -4
  7. package/dist/components/scroll-area/index.d.ts +4 -0
  8. package/dist/components/scroll-area/scroll-area-bar.cjs +44 -25
  9. package/dist/components/scroll-area/scroll-area-bar.js +44 -25
  10. package/dist/components/scroll-area/scroll-area-item.cjs +28 -15
  11. package/dist/components/scroll-area/scroll-area-item.d.ts +6 -0
  12. package/dist/components/scroll-area/scroll-area-item.js +28 -15
  13. package/dist/components/scroll-area/scroll-area-root.d.ts +7 -4
  14. package/dist/components/tabs/index.d.ts +1 -0
  15. package/dist/components/tabs/tabs-scroll.d.ts +1 -0
  16. package/dist/style.css +137 -125
  17. package/package.json +1 -1
package/dist/components/card/card-slot.cjs CHANGED
@@ -9,8 +9,8 @@ const getOffsets = (layout, align) => {
9
9
  switch (layout) {
10
10
  case "product":
11
11
  return {
12
- top: "200",
13
- right: "200"
12
+ top: "100",
13
+ right: "100"
14
14
  };
15
15
  default:
16
16
  return {
@@ -30,7 +30,8 @@ const Slot = React.forwardRef(
30
30
  components_card_card.styles[`${components_card_card.rootClassName}__slot`],
31
31
  {
32
32
  [components_card_card.styles[`${components_card_card.rootClassName}__slot--center`]]: align === "top" || align === "bottom",
33
- [components_card_card.styles[`${components_card_card.rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
33
+ [components_card_card.styles[`${components_card_card.rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom"),
34
+ [components_card_card.styles[`${components_card_card.rootClassName}__slot--no-translate`]]: layout === "product"
34
35
  }
35
36
  ],
36
37
  className
package/dist/components/card/card-slot.js CHANGED
@@ -7,8 +7,8 @@ const getOffsets = (layout, align) => {
7
7
  switch (layout) {
8
8
  case "product":
9
9
  return {
10
- top: "200",
11
- right: "200"
10
+ top: "100",
11
+ right: "100"
12
12
  };
13
13
  default:
14
14
  return {
@@ -28,7 +28,8 @@ const Slot = React__default.forwardRef(
28
28
  styles[`${rootClassName}__slot`],
29
29
  {
30
30
  [styles[`${rootClassName}__slot--center`]]: align === "top" || align === "bottom",
31
- [styles[`${rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
31
+ [styles[`${rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom"),
32
+ [styles[`${rootClassName}__slot--no-translate`]]: layout === "product"
32
33
  }
33
34
  ],
34
35
  className
package/dist/components/card/card.cjs CHANGED
@@ -7,54 +7,55 @@ const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs
7
7
  const components_grid_grid = require("../grid/grid.cjs");
8
8
  const tokens_color_variables = require("../../tokens/color/variables.cjs");
9
9
  const styles = {
10
- "teddy-card": "_teddy-card_13qq5_3",
11
- "teddy-card__slot": "_teddy-card__slot_13qq5_13",
12
- "teddy-card__slot--bottom": "_teddy-card__slot--bottom_13qq5_16",
13
- "teddy-card__slot--center": "_teddy-card__slot--center_13qq5_19",
14
- "teddy-card--shadow": "_teddy-card--shadow_13qq5_41",
15
- "teddy-card__action": "_teddy-card__action_13qq5_45",
16
- "teddy-card__action--disabled": "_teddy-card__action--disabled_13qq5_45",
17
- "teddy-card--border": "_teddy-card--border_13qq5_52",
18
- "teddy-card--layout": "_teddy-card--layout_13qq5_55",
19
- "teddy-card__illustration": "_teddy-card__illustration_13qq5_55",
20
- "teddy-card__carousel": "_teddy-card__carousel_13qq5_58",
21
- "teddy-card__content": "_teddy-card__content_13qq5_61",
22
- "teddy-card__heading": "_teddy-card__heading_13qq5_64",
23
- "teddy-card__action-wrapper": "_teddy-card__action-wrapper_13qq5_67",
24
- "teddy-card__footer": "_teddy-card__footer_13qq5_70",
25
- "teddy-card__overline": "_teddy-card__overline_13qq5_73",
26
- "teddy-card__description": "_teddy-card__description_13qq5_76",
27
- "teddy-card__color-dots": "_teddy-card__color-dots_13qq5_79",
28
- "teddy-card__availability": "_teddy-card__availability_13qq5_82",
29
- "teddy-card__price": "_teddy-card__price_13qq5_85",
30
- "teddy-card--default": "_teddy-card--default_13qq5_88",
31
- "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_13qq5_93",
32
- "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_13qq5_112",
33
- "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_13qq5_124",
34
- "teddy-card--rich-card": "_teddy-card--rich-card_13qq5_136",
35
- "teddy-card__line": "_teddy-card__line_13qq5_154",
36
- "teddy-card--purple-light": "_teddy-card--purple-light_13qq5_158",
37
- "teddy-card--purple-dark": "_teddy-card--purple-dark_13qq5_172",
38
- "teddy-card--white": "_teddy-card--white_13qq5_191",
39
- "teddy-card--gray": "_teddy-card--gray_13qq5_205",
40
- "teddy-card--beige": "_teddy-card--beige_13qq5_219",
41
- "teddy-card--product": "_teddy-card--product_13qq5_233",
42
- "teddy-card__price--big": "_teddy-card__price--big_13qq5_293",
43
- "teddy-card__image--as-background": "_teddy-card__image--as-background_13qq5_296",
44
- "teddy-card--background-image": "_teddy-card--background-image_13qq5_302",
45
- "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_13qq5_307",
46
- "teddy-card__inset": "_teddy-card__inset_13qq5_311",
47
- "teddy-card__inset--top": "_teddy-card__inset--top_13qq5_314",
48
- "teddy-card__inset--left": "_teddy-card__inset--left_13qq5_317",
49
- "teddy-card__inset--right": "_teddy-card__inset--right_13qq5_320",
50
- "teddy-card__inset--bottom": "_teddy-card__inset--bottom_13qq5_323",
51
- "teddy-card__availability--badge": "_teddy-card__availability--badge_13qq5_338",
52
- "teddy-card__availability--success": "_teddy-card__availability--success_13qq5_341",
53
- "teddy-card__availability--warning": "_teddy-card__availability--warning_13qq5_344",
54
- "teddy-card__availability--error": "_teddy-card__availability--error_13qq5_347",
55
- "teddy-card__availability--special": "_teddy-card__availability--special_13qq5_350",
56
- "teddy-card__availability--neutral": "_teddy-card__availability--neutral_13qq5_353",
57
- "teddy-card__availability--information": "_teddy-card__availability--information_13qq5_356"
10
+ "teddy-card": "_teddy-card_1vcct_3",
11
+ "teddy-card__slot": "_teddy-card__slot_1vcct_13",
12
+ "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1vcct_16",
13
+ "teddy-card__slot--center": "_teddy-card__slot--center_1vcct_19",
14
+ "teddy-card__slot--no-translate": "_teddy-card__slot--no-translate_1vcct_25",
15
+ "teddy-card--shadow": "_teddy-card--shadow_1vcct_44",
16
+ "teddy-card__action": "_teddy-card__action_1vcct_48",
17
+ "teddy-card__action--disabled": "_teddy-card__action--disabled_1vcct_48",
18
+ "teddy-card--border": "_teddy-card--border_1vcct_55",
19
+ "teddy-card--layout": "_teddy-card--layout_1vcct_58",
20
+ "teddy-card__illustration": "_teddy-card__illustration_1vcct_58",
21
+ "teddy-card__carousel": "_teddy-card__carousel_1vcct_61",
22
+ "teddy-card__content": "_teddy-card__content_1vcct_64",
23
+ "teddy-card__heading": "_teddy-card__heading_1vcct_67",
24
+ "teddy-card__action-wrapper": "_teddy-card__action-wrapper_1vcct_70",
25
+ "teddy-card__footer": "_teddy-card__footer_1vcct_73",
26
+ "teddy-card__overline": "_teddy-card__overline_1vcct_76",
27
+ "teddy-card__description": "_teddy-card__description_1vcct_79",
28
+ "teddy-card__color-dots": "_teddy-card__color-dots_1vcct_82",
29
+ "teddy-card__availability": "_teddy-card__availability_1vcct_85",
30
+ "teddy-card__price": "_teddy-card__price_1vcct_88",
31
+ "teddy-card--default": "_teddy-card--default_1vcct_91",
32
+ "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_1vcct_96",
33
+ "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_1vcct_115",
34
+ "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_1vcct_127",
35
+ "teddy-card--rich-card": "_teddy-card--rich-card_1vcct_139",
36
+ "teddy-card__line": "_teddy-card__line_1vcct_157",
37
+ "teddy-card--purple-light": "_teddy-card--purple-light_1vcct_161",
38
+ "teddy-card--purple-dark": "_teddy-card--purple-dark_1vcct_175",
39
+ "teddy-card--white": "_teddy-card--white_1vcct_194",
40
+ "teddy-card--gray": "_teddy-card--gray_1vcct_208",
41
+ "teddy-card--beige": "_teddy-card--beige_1vcct_222",
42
+ "teddy-card--product": "_teddy-card--product_1vcct_236",
43
+ "teddy-card__price--big": "_teddy-card__price--big_1vcct_296",
44
+ "teddy-card__image--as-background": "_teddy-card__image--as-background_1vcct_299",
45
+ "teddy-card--background-image": "_teddy-card--background-image_1vcct_305",
46
+ "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_1vcct_310",
47
+ "teddy-card__inset": "_teddy-card__inset_1vcct_314",
48
+ "teddy-card__inset--top": "_teddy-card__inset--top_1vcct_317",
49
+ "teddy-card__inset--left": "_teddy-card__inset--left_1vcct_320",
50
+ "teddy-card__inset--right": "_teddy-card__inset--right_1vcct_323",
51
+ "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1vcct_326",
52
+ "teddy-card__availability--badge": "_teddy-card__availability--badge_1vcct_341",
53
+ "teddy-card__availability--success": "_teddy-card__availability--success_1vcct_344",
54
+ "teddy-card__availability--warning": "_teddy-card__availability--warning_1vcct_347",
55
+ "teddy-card__availability--error": "_teddy-card__availability--error_1vcct_350",
56
+ "teddy-card__availability--special": "_teddy-card__availability--special_1vcct_353",
57
+ "teddy-card__availability--neutral": "_teddy-card__availability--neutral_1vcct_356",
58
+ "teddy-card__availability--information": "_teddy-card__availability--information_1vcct_359"
58
59
  };
59
60
  const rootClassName = "teddy-card";
60
61
  const actionElementIdentifier = `${rootClassName}__action`;
package/dist/components/card/card.js CHANGED
@@ -5,54 +5,55 @@ import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
5
5
  import { Grid } from "../grid/grid.js";
6
6
  import { teddyColorTransparentWhite850, teddyColorTransparentWhite800, teddyColorTransparentWhite100, teddyColorTransparentBlack600, teddyColorTransparentBlack200 } from "../../tokens/color/variables.js";
7
7
  const styles = {
8
- "teddy-card": "_teddy-card_13qq5_3",
9
- "teddy-card__slot": "_teddy-card__slot_13qq5_13",
10
- "teddy-card__slot--bottom": "_teddy-card__slot--bottom_13qq5_16",
11
- "teddy-card__slot--center": "_teddy-card__slot--center_13qq5_19",
12
- "teddy-card--shadow": "_teddy-card--shadow_13qq5_41",
13
- "teddy-card__action": "_teddy-card__action_13qq5_45",
14
- "teddy-card__action--disabled": "_teddy-card__action--disabled_13qq5_45",
15
- "teddy-card--border": "_teddy-card--border_13qq5_52",
16
- "teddy-card--layout": "_teddy-card--layout_13qq5_55",
17
- "teddy-card__illustration": "_teddy-card__illustration_13qq5_55",
18
- "teddy-card__carousel": "_teddy-card__carousel_13qq5_58",
19
- "teddy-card__content": "_teddy-card__content_13qq5_61",
20
- "teddy-card__heading": "_teddy-card__heading_13qq5_64",
21
- "teddy-card__action-wrapper": "_teddy-card__action-wrapper_13qq5_67",
22
- "teddy-card__footer": "_teddy-card__footer_13qq5_70",
23
- "teddy-card__overline": "_teddy-card__overline_13qq5_73",
24
- "teddy-card__description": "_teddy-card__description_13qq5_76",
25
- "teddy-card__color-dots": "_teddy-card__color-dots_13qq5_79",
26
- "teddy-card__availability": "_teddy-card__availability_13qq5_82",
27
- "teddy-card__price": "_teddy-card__price_13qq5_85",
28
- "teddy-card--default": "_teddy-card--default_13qq5_88",
29
- "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_13qq5_93",
30
- "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_13qq5_112",
31
- "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_13qq5_124",
32
- "teddy-card--rich-card": "_teddy-card--rich-card_13qq5_136",
33
- "teddy-card__line": "_teddy-card__line_13qq5_154",
34
- "teddy-card--purple-light": "_teddy-card--purple-light_13qq5_158",
35
- "teddy-card--purple-dark": "_teddy-card--purple-dark_13qq5_172",
36
- "teddy-card--white": "_teddy-card--white_13qq5_191",
37
- "teddy-card--gray": "_teddy-card--gray_13qq5_205",
38
- "teddy-card--beige": "_teddy-card--beige_13qq5_219",
39
- "teddy-card--product": "_teddy-card--product_13qq5_233",
40
- "teddy-card__price--big": "_teddy-card__price--big_13qq5_293",
41
- "teddy-card__image--as-background": "_teddy-card__image--as-background_13qq5_296",
42
- "teddy-card--background-image": "_teddy-card--background-image_13qq5_302",
43
- "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_13qq5_307",
44
- "teddy-card__inset": "_teddy-card__inset_13qq5_311",
45
- "teddy-card__inset--top": "_teddy-card__inset--top_13qq5_314",
46
- "teddy-card__inset--left": "_teddy-card__inset--left_13qq5_317",
47
- "teddy-card__inset--right": "_teddy-card__inset--right_13qq5_320",
48
- "teddy-card__inset--bottom": "_teddy-card__inset--bottom_13qq5_323",
49
- "teddy-card__availability--badge": "_teddy-card__availability--badge_13qq5_338",
50
- "teddy-card__availability--success": "_teddy-card__availability--success_13qq5_341",
51
- "teddy-card__availability--warning": "_teddy-card__availability--warning_13qq5_344",
52
- "teddy-card__availability--error": "_teddy-card__availability--error_13qq5_347",
53
- "teddy-card__availability--special": "_teddy-card__availability--special_13qq5_350",
54
- "teddy-card__availability--neutral": "_teddy-card__availability--neutral_13qq5_353",
55
- "teddy-card__availability--information": "_teddy-card__availability--information_13qq5_356"
8
+ "teddy-card": "_teddy-card_1vcct_3",
9
+ "teddy-card__slot": "_teddy-card__slot_1vcct_13",
10
+ "teddy-card__slot--bottom": "_teddy-card__slot--bottom_1vcct_16",
11
+ "teddy-card__slot--center": "_teddy-card__slot--center_1vcct_19",
12
+ "teddy-card__slot--no-translate": "_teddy-card__slot--no-translate_1vcct_25",
13
+ "teddy-card--shadow": "_teddy-card--shadow_1vcct_44",
14
+ "teddy-card__action": "_teddy-card__action_1vcct_48",
15
+ "teddy-card__action--disabled": "_teddy-card__action--disabled_1vcct_48",
16
+ "teddy-card--border": "_teddy-card--border_1vcct_55",
17
+ "teddy-card--layout": "_teddy-card--layout_1vcct_58",
18
+ "teddy-card__illustration": "_teddy-card__illustration_1vcct_58",
19
+ "teddy-card__carousel": "_teddy-card__carousel_1vcct_61",
20
+ "teddy-card__content": "_teddy-card__content_1vcct_64",
21
+ "teddy-card__heading": "_teddy-card__heading_1vcct_67",
22
+ "teddy-card__action-wrapper": "_teddy-card__action-wrapper_1vcct_70",
23
+ "teddy-card__footer": "_teddy-card__footer_1vcct_73",
24
+ "teddy-card__overline": "_teddy-card__overline_1vcct_76",
25
+ "teddy-card__description": "_teddy-card__description_1vcct_79",
26
+ "teddy-card__color-dots": "_teddy-card__color-dots_1vcct_82",
27
+ "teddy-card__availability": "_teddy-card__availability_1vcct_85",
28
+ "teddy-card__price": "_teddy-card__price_1vcct_88",
29
+ "teddy-card--default": "_teddy-card--default_1vcct_91",
30
+ "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_1vcct_96",
31
+ "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_1vcct_115",
32
+ "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_1vcct_127",
33
+ "teddy-card--rich-card": "_teddy-card--rich-card_1vcct_139",
34
+ "teddy-card__line": "_teddy-card__line_1vcct_157",
35
+ "teddy-card--purple-light": "_teddy-card--purple-light_1vcct_161",
36
+ "teddy-card--purple-dark": "_teddy-card--purple-dark_1vcct_175",
37
+ "teddy-card--white": "_teddy-card--white_1vcct_194",
38
+ "teddy-card--gray": "_teddy-card--gray_1vcct_208",
39
+ "teddy-card--beige": "_teddy-card--beige_1vcct_222",
40
+ "teddy-card--product": "_teddy-card--product_1vcct_236",
41
+ "teddy-card__price--big": "_teddy-card__price--big_1vcct_296",
42
+ "teddy-card__image--as-background": "_teddy-card__image--as-background_1vcct_299",
43
+ "teddy-card--background-image": "_teddy-card--background-image_1vcct_305",
44
+ "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_1vcct_310",
45
+ "teddy-card__inset": "_teddy-card__inset_1vcct_314",
46
+ "teddy-card__inset--top": "_teddy-card__inset--top_1vcct_317",
47
+ "teddy-card__inset--left": "_teddy-card__inset--left_1vcct_320",
48
+ "teddy-card__inset--right": "_teddy-card__inset--right_1vcct_323",
49
+ "teddy-card__inset--bottom": "_teddy-card__inset--bottom_1vcct_326",
50
+ "teddy-card__availability--badge": "_teddy-card__availability--badge_1vcct_341",
51
+ "teddy-card__availability--success": "_teddy-card__availability--success_1vcct_344",
52
+ "teddy-card__availability--warning": "_teddy-card__availability--warning_1vcct_347",
53
+ "teddy-card__availability--error": "_teddy-card__availability--error_1vcct_350",
54
+ "teddy-card__availability--special": "_teddy-card__availability--special_1vcct_353",
55
+ "teddy-card__availability--neutral": "_teddy-card__availability--neutral_1vcct_356",
56
+ "teddy-card__availability--information": "_teddy-card__availability--information_1vcct_359"
56
57
  };
57
58
  const rootClassName = "teddy-card";
58
59
  const actionElementIdentifier = `${rootClassName}__action`;
package/dist/components/carousel/carousel-root.cjs CHANGED
@@ -8,10 +8,10 @@ require("../../assets/sprite.269ba410-teddy.svg");
8
8
  const components_icon_icon = require("../icon/icon.cjs");
9
9
  const tokens_color_variables = require("../../tokens/color/variables.cjs");
10
10
  const styles = {
11
- "teddy-carousel": "_teddy-carousel_8mouq_2",
12
- "teddy-carousel__arrow": "_teddy-carousel__arrow_8mouq_8",
13
- "teddy-carousel__item": "_teddy-carousel__item_8mouq_17",
14
- "teddy-carousel--sm": "_teddy-carousel--sm_8mouq_81"
11
+ "teddy-carousel": "_teddy-carousel_1p2ww_2",
12
+ "teddy-carousel__arrow": "_teddy-carousel__arrow_1p2ww_9",
13
+ "teddy-carousel__item": "_teddy-carousel__item_1p2ww_18",
14
+ "teddy-carousel--sm": "_teddy-carousel--sm_1p2ww_82"
15
15
  };
16
16
  const rootClassName = "teddy-carousel";
17
17
  const CustomArrow = ({
package/dist/components/carousel/carousel-root.js CHANGED
@@ -6,10 +6,10 @@ import "../../assets/sprite.269ba410-teddy.svg";
6
6
  import { Icon } from "../icon/icon.js";
7
7
  import { teddyColorTextInteractivePrimary } from "../../tokens/color/variables.js";
8
8
  const styles = {
9
- "teddy-carousel": "_teddy-carousel_8mouq_2",
10
- "teddy-carousel__arrow": "_teddy-carousel__arrow_8mouq_8",
11
- "teddy-carousel__item": "_teddy-carousel__item_8mouq_17",
12
- "teddy-carousel--sm": "_teddy-carousel--sm_8mouq_81"
9
+ "teddy-carousel": "_teddy-carousel_1p2ww_2",
10
+ "teddy-carousel__arrow": "_teddy-carousel__arrow_1p2ww_9",
11
+ "teddy-carousel__item": "_teddy-carousel__item_1p2ww_18",
12
+ "teddy-carousel--sm": "_teddy-carousel--sm_1p2ww_82"
13
13
  };
14
14
  const rootClassName = "teddy-carousel";
15
15
  const CustomArrow = ({
package/dist/components/scroll-area/index.d.ts CHANGED
@@ -4,9 +4,13 @@ import { ButtonProps } from './scroll-area-button';
4
4
 
5
5
  export declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-scroll-area').ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
6
6
  variant?: ("button" | "scrollbar") | undefined;
7
+ scrollBehavior?: "auto" | "smooth" | undefined;
7
8
  } & import('react').RefAttributes<HTMLDivElement>> & {
8
9
  Item: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
9
10
  asChild?: boolean | undefined;
11
+ isSelected?: boolean | undefined;
12
+ scrollBehavior?: "auto" | "smooth" | undefined;
13
+ scrollBehaviorOnMount?: "auto" | "smooth" | undefined;
10
14
  } & import('react').RefAttributes<HTMLDivElement>>;
11
15
  Button: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
12
16
  display?: import('../../utils/generate-styling').DisplayChildren | undefined;
package/dist/components/scroll-area/scroll-area-bar.cjs CHANGED
@@ -91,10 +91,13 @@ const Button = React.forwardRef(
91
91
  const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
92
92
  const scrollDirection = direction === "up" || direction === "left" ? -1 : 1;
93
93
  const scrollAxis = direction === "up" || direction === "down" ? "top" : "left";
94
- const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) * 0.7;
94
+ const buttonSize = direction === "up" || direction === "down" ? e.currentTarget.offsetHeight : e.currentTarget.offsetWidth;
95
+ const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) - buttonSize * 2;
96
+ const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
97
+ const scrollBehavior = hasReducedMotion ? "auto" : (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
95
98
  (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
96
99
  [scrollAxis]: scrollAmount * scrollDirection,
97
- behavior: "smooth"
100
+ behavior: scrollBehavior
98
101
  });
99
102
  }),
100
103
  ref: forwardRef,
@@ -112,40 +115,56 @@ const Button = React.forwardRef(
112
115
  components_button_button.Button.displayName = "Button";
113
116
  const rootClassName = "teddy-scroll-area";
114
117
  const RootContext = React.createContext(void 0);
118
+ function isScrollable(element) {
119
+ if (!element)
120
+ return null;
121
+ const buffer = 1;
122
+ const scrollLeft = element.scrollLeft;
123
+ const scrollWidth = element.scrollWidth;
124
+ const offsetWidth = element.offsetWidth;
125
+ const maxScrollLeft = scrollWidth - offsetWidth;
126
+ const isRtl = getComputedStyle(element).direction === "rtl";
127
+ let left;
128
+ let right;
129
+ if (isRtl) {
130
+ const normalizedScrollLeft = Math.abs(scrollLeft);
131
+ left = normalizedScrollLeft < maxScrollLeft - buffer;
132
+ right = normalizedScrollLeft > buffer;
133
+ } else {
134
+ left = scrollLeft > buffer;
135
+ right = scrollLeft < maxScrollLeft - buffer;
136
+ }
137
+ const scrollTop = element.scrollTop;
138
+ const maxScrollTop = element.scrollHeight - element.offsetHeight;
139
+ const top = scrollTop > buffer;
140
+ const bottom = scrollTop < maxScrollTop - buffer;
141
+ return {
142
+ left,
143
+ right,
144
+ top,
145
+ bottom
146
+ };
147
+ }
115
148
  const Root = React.forwardRef(
116
- ({ className, variant, children, ...props }, forwardRef) => {
149
+ ({ className, variant, scrollBehavior = "smooth", children, ...props }, forwardRef) => {
117
150
  const [scrollRef, setScrollRef] = React.useState(null);
118
151
  const [hasScroll, setHasScroll] = React.useState(null);
119
- const initialHasScrollLeft = scrollRef ? scrollRef.scrollLeft > 0 : null;
120
- const initialHasScrollRight = scrollRef ? scrollRef.scrollLeft < scrollRef.scrollWidth - scrollRef.clientWidth : null;
121
- const initialHasScrollTop = scrollRef ? scrollRef.scrollTop > 0 : null;
122
- const initialHasScrollBottom = scrollRef ? scrollRef.scrollTop < scrollRef.scrollHeight - scrollRef.clientHeight : null;
123
- const hasScrollLeft = hasScroll ? hasScroll.left : initialHasScrollLeft;
124
- const hasScrollRight = hasScroll ? hasScroll.right : initialHasScrollRight;
125
- const hasScrollTop = hasScroll ? hasScroll.top : initialHasScrollTop;
126
- const hasScrollBottom = hasScroll ? hasScroll.bottom : initialHasScrollBottom;
152
+ const initialScrollable = isScrollable(scrollRef);
153
+ const hasScrollLeft = hasScroll ? hasScroll.left : initialScrollable == null ? void 0 : initialScrollable.left;
154
+ const hasScrollRight = hasScroll ? hasScroll.right : initialScrollable == null ? void 0 : initialScrollable.right;
155
+ const hasScrollTop = hasScroll ? hasScroll.top : initialScrollable == null ? void 0 : initialScrollable.top;
156
+ const hasScrollBottom = hasScroll ? hasScroll.bottom : initialScrollable == null ? void 0 : initialScrollable.bottom;
127
157
  const hasScrollHorizontal = hasScrollLeft || hasScrollRight;
128
158
  const hasScrollVertical = hasScrollTop || hasScrollBottom;
129
- const classes = clsx([styles[`${rootClassName}`]], className);
130
159
  function handleScroll(e) {
131
160
  const target = e.currentTarget;
132
- const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = target;
133
- const buffer = 1;
134
- const hasScrollLeft2 = scrollLeft > 0;
135
- const hasScrollRight2 = scrollLeft < scrollWidth - clientWidth - buffer;
136
- const hasScrollTop2 = scrollTop > 0;
137
- const hasScrollBottom2 = scrollTop < scrollHeight - clientHeight - buffer;
138
- setHasScroll({
139
- left: hasScrollLeft2,
140
- right: hasScrollRight2,
141
- top: hasScrollTop2,
142
- bottom: hasScrollBottom2
143
- });
161
+ setHasScroll(isScrollable(target));
144
162
  }
163
+ const classes = clsx([styles[`${rootClassName}`]], className);
145
164
  return /* @__PURE__ */ jsxRuntime.jsx(
146
165
  RootContext.Provider,
147
166
  {
148
- value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight },
167
+ value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight, scrollBehavior },
149
168
  children: /* @__PURE__ */ jsxRuntime.jsxs(ScrollAreaPrimitive__namespace.Root, { ...props, ref: forwardRef, className: classes, children: [
150
169
  /* @__PURE__ */ jsxRuntime.jsx(
151
170
  ScrollAreaPrimitive__namespace.Viewport,
package/dist/components/scroll-area/scroll-area-bar.js CHANGED
@@ -72,10 +72,13 @@ const Button = React__default.forwardRef(
72
72
  const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
73
73
  const scrollDirection = direction === "up" || direction === "left" ? -1 : 1;
74
74
  const scrollAxis = direction === "up" || direction === "down" ? "top" : "left";
75
- const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) * 0.7;
75
+ const buttonSize = direction === "up" || direction === "down" ? e.currentTarget.offsetHeight : e.currentTarget.offsetWidth;
76
+ const scrollAmount = ((direction === "up" || direction === "down" ? scroll == null ? void 0 : scroll.height : scroll == null ? void 0 : scroll.width) || 0) - buttonSize * 2;
77
+ const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
78
+ const scrollBehavior = hasReducedMotion ? "auto" : (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
76
79
  (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
77
80
  [scrollAxis]: scrollAmount * scrollDirection,
78
- behavior: "smooth"
81
+ behavior: scrollBehavior
79
82
  });
80
83
  }),
81
84
  ref: forwardRef,
@@ -93,40 +96,56 @@ const Button = React__default.forwardRef(
93
96
  Button$1.displayName = "Button";
94
97
  const rootClassName = "teddy-scroll-area";
95
98
  const RootContext = React__default.createContext(void 0);
99
+ function isScrollable(element) {
100
+ if (!element)
101
+ return null;
102
+ const buffer = 1;
103
+ const scrollLeft = element.scrollLeft;
104
+ const scrollWidth = element.scrollWidth;
105
+ const offsetWidth = element.offsetWidth;
106
+ const maxScrollLeft = scrollWidth - offsetWidth;
107
+ const isRtl = getComputedStyle(element).direction === "rtl";
108
+ let left;
109
+ let right;
110
+ if (isRtl) {
111
+ const normalizedScrollLeft = Math.abs(scrollLeft);
112
+ left = normalizedScrollLeft < maxScrollLeft - buffer;
113
+ right = normalizedScrollLeft > buffer;
114
+ } else {
115
+ left = scrollLeft > buffer;
116
+ right = scrollLeft < maxScrollLeft - buffer;
117
+ }
118
+ const scrollTop = element.scrollTop;
119
+ const maxScrollTop = element.scrollHeight - element.offsetHeight;
120
+ const top = scrollTop > buffer;
121
+ const bottom = scrollTop < maxScrollTop - buffer;
122
+ return {
123
+ left,
124
+ right,
125
+ top,
126
+ bottom
127
+ };
128
+ }
96
129
  const Root = React__default.forwardRef(
97
- ({ className, variant, children, ...props }, forwardRef) => {
130
+ ({ className, variant, scrollBehavior = "smooth", children, ...props }, forwardRef) => {
98
131
  const [scrollRef, setScrollRef] = React__default.useState(null);
99
132
  const [hasScroll, setHasScroll] = React__default.useState(null);
100
- const initialHasScrollLeft = scrollRef ? scrollRef.scrollLeft > 0 : null;
101
- const initialHasScrollRight = scrollRef ? scrollRef.scrollLeft < scrollRef.scrollWidth - scrollRef.clientWidth : null;
102
- const initialHasScrollTop = scrollRef ? scrollRef.scrollTop > 0 : null;
103
- const initialHasScrollBottom = scrollRef ? scrollRef.scrollTop < scrollRef.scrollHeight - scrollRef.clientHeight : null;
104
- const hasScrollLeft = hasScroll ? hasScroll.left : initialHasScrollLeft;
105
- const hasScrollRight = hasScroll ? hasScroll.right : initialHasScrollRight;
106
- const hasScrollTop = hasScroll ? hasScroll.top : initialHasScrollTop;
107
- const hasScrollBottom = hasScroll ? hasScroll.bottom : initialHasScrollBottom;
133
+ const initialScrollable = isScrollable(scrollRef);
134
+ const hasScrollLeft = hasScroll ? hasScroll.left : initialScrollable == null ? void 0 : initialScrollable.left;
135
+ const hasScrollRight = hasScroll ? hasScroll.right : initialScrollable == null ? void 0 : initialScrollable.right;
136
+ const hasScrollTop = hasScroll ? hasScroll.top : initialScrollable == null ? void 0 : initialScrollable.top;
137
+ const hasScrollBottom = hasScroll ? hasScroll.bottom : initialScrollable == null ? void 0 : initialScrollable.bottom;
108
138
  const hasScrollHorizontal = hasScrollLeft || hasScrollRight;
109
139
  const hasScrollVertical = hasScrollTop || hasScrollBottom;
110
- const classes = clsx([styles[`${rootClassName}`]], className);
111
140
  function handleScroll(e) {
112
141
  const target = e.currentTarget;
113
- const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = target;
114
- const buffer = 1;
115
- const hasScrollLeft2 = scrollLeft > 0;
116
- const hasScrollRight2 = scrollLeft < scrollWidth - clientWidth - buffer;
117
- const hasScrollTop2 = scrollTop > 0;
118
- const hasScrollBottom2 = scrollTop < scrollHeight - clientHeight - buffer;
119
- setHasScroll({
120
- left: hasScrollLeft2,
121
- right: hasScrollRight2,
122
- top: hasScrollTop2,
123
- bottom: hasScrollBottom2
124
- });
142
+ setHasScroll(isScrollable(target));
125
143
  }
144
+ const classes = clsx([styles[`${rootClassName}`]], className);
126
145
  return /* @__PURE__ */ jsx(
127
146
  RootContext.Provider,
128
147
  {
129
- value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight },
148
+ value: { scrollRef, variant, hasScrollTop, hasScrollBottom, hasScrollLeft, hasScrollRight, scrollBehavior },
130
149
  children: /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ...props, ref: forwardRef, className: classes, children: [
131
150
  /* @__PURE__ */ jsx(
132
151
  ScrollAreaPrimitive.Viewport,
package/dist/components/scroll-area/scroll-area-item.cjs CHANGED
@@ -6,33 +6,46 @@ const clsx = require("clsx");
6
6
  const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
7
7
  const reactSlot = require("@radix-ui/react-slot");
8
8
  const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
9
+ const utils_composeRefs = require("../../utils/composeRefs.cjs");
10
+ function scrollItemToCenter(item, scrollArea, scrollBehavior) {
11
+ const itemRect = item.getBoundingClientRect();
12
+ const scrollAreaRect = scrollArea.getBoundingClientRect();
13
+ const scrollViewVerticalCenter = (scrollAreaRect.top || 0) + (scrollAreaRect.height || 0) / 2;
14
+ const itemVerticalCenter = (itemRect.top || 0) + (itemRect.height || 0) / 2;
15
+ const scrollViewHorizontalCenter = (scrollAreaRect.left || 0) + (scrollAreaRect.width || 0) / 2;
16
+ const itemHorizontalCenter = (itemRect.left || 0) + (itemRect.width || 0) / 2;
17
+ const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
18
+ scrollArea.scrollBy({
19
+ top: itemVerticalCenter - scrollViewVerticalCenter,
20
+ left: itemHorizontalCenter - scrollViewHorizontalCenter,
21
+ behavior: hasReducedMotion ? "auto" : scrollBehavior
22
+ });
23
+ }
9
24
  const Item = React.forwardRef(
10
- ({ className, asChild, ...props }, forwardRef) => {
25
+ ({ className, asChild, isSelected, scrollBehavior, scrollBehaviorOnMount, ...props }, forwardRef) => {
11
26
  const classes = clsx([components_scrollArea_scrollAreaBar.styles[`${components_scrollArea_scrollAreaBar.rootClassName}__item`]], className);
12
27
  const Comp = asChild ? reactSlot.Slot : "div";
28
+ const ref = React.useRef(null);
29
+ const composedRef = utils_composeRefs.useComposedRefs(ref, forwardRef);
13
30
  const context = React.useContext(components_scrollArea_scrollAreaBar.RootContext);
31
+ const internalScrollBehavior = scrollBehavior ?? (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
32
+ React.useEffect(() => {
33
+ if (isSelected && ref.current && (context == null ? void 0 : context.scrollRef)) {
34
+ scrollItemToCenter(ref.current, context == null ? void 0 : context.scrollRef, scrollBehaviorOnMount ?? "smooth");
35
+ }
36
+ }, [isSelected, ref, context == null ? void 0 : context.scrollRef, scrollBehaviorOnMount]);
14
37
  return /* @__PURE__ */ jsxRuntime.jsx(
15
38
  Comp,
16
39
  {
17
40
  ...props,
18
41
  onClick: utils_composeEventHandlers.composeEventHandlers(props.onClick, (e) => {
19
- var _a, _b;
20
42
  if (e.defaultPrevented)
21
43
  return;
22
- const scroll = (_a = context == null ? void 0 : context.scrollRef) == null ? void 0 : _a.getBoundingClientRect();
23
- const item = e.currentTarget.getBoundingClientRect();
24
- const scrollViewVerticalCenter = ((scroll == null ? void 0 : scroll.top) || 0) + ((scroll == null ? void 0 : scroll.height) || 0) / 2;
25
- const itemVerticalCenter = ((item == null ? void 0 : item.top) || 0) + ((item == null ? void 0 : item.height) || 0) / 2;
26
- const scrollViewHorizontalCenter = ((scroll == null ? void 0 : scroll.left) || 0) + ((scroll == null ? void 0 : scroll.width) || 0) / 2;
27
- const itemHorizontalCenter = ((item == null ? void 0 : item.left) || 0) + ((item == null ? void 0 : item.width) || 0) / 2;
28
- const hasReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
29
- (_b = context == null ? void 0 : context.scrollRef) == null ? void 0 : _b.scrollBy({
30
- top: itemVerticalCenter - scrollViewVerticalCenter,
31
- left: itemHorizontalCenter - scrollViewHorizontalCenter,
32
- behavior: hasReducedMotion ? "auto" : "smooth"
33
- });
44
+ if (!ref.current || !(context == null ? void 0 : context.scrollRef))
45
+ return;
46
+ scrollItemToCenter(ref.current, context == null ? void 0 : context.scrollRef, internalScrollBehavior);
34
47
  }),
35
- ref: forwardRef,
48
+ ref: composedRef,
36
49
  className: classes
37
50
  }
38
51
  );
package/dist/components/scroll-area/scroll-area-item.d.ts CHANGED
@@ -2,7 +2,13 @@ import { default as React } from 'react';
2
2
 
3
3
  export type ItemProps = React.ComponentPropsWithoutRef<'div'> & {
4
4
  asChild?: boolean;
5
+ isSelected?: boolean;
6
+ scrollBehavior?: 'smooth' | 'auto';
7
+ scrollBehaviorOnMount?: 'smooth' | 'auto';
5
8
  };
6
9
  export declare const Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
7
10
  asChild?: boolean | undefined;
11
+ isSelected?: boolean | undefined;
12
+ scrollBehavior?: "auto" | "smooth" | undefined;
13
+ scrollBehaviorOnMount?: "auto" | "smooth" | undefined;
8
14
  } & React.RefAttributes<HTMLDivElement>>;