@telia/teddy 0.6.1 → 0.6.2

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 (41) hide show
  1. package/dist/components/{subscription-card/subscription-card-avatar.cjs → dashboard-card/dashboard-card-avatar.cjs} +3 -3
  2. package/dist/components/{subscription-card/subscription-card-avatar.js → dashboard-card/dashboard-card-avatar.js} +1 -1
  3. package/dist/components/{subscription-card/subscription-card-content.cjs → dashboard-card/dashboard-card-content.cjs} +2 -2
  4. package/dist/components/{subscription-card/subscription-card-content.js → dashboard-card/dashboard-card-content.js} +1 -1
  5. package/dist/components/{subscription-card/subscription-card-heading.cjs → dashboard-card/dashboard-card-heading.cjs} +2 -2
  6. package/dist/components/{subscription-card/subscription-card-heading.js → dashboard-card/dashboard-card-heading.js} +1 -1
  7. package/dist/components/dashboard-card/dashboard-card-illustration.cjs +14 -0
  8. package/dist/components/dashboard-card/dashboard-card-illustration.d.ts +4 -0
  9. package/dist/components/dashboard-card/dashboard-card-illustration.js +14 -0
  10. package/dist/components/{subscription-card/subscription-card-root.cjs → dashboard-card/dashboard-card-root.cjs} +15 -14
  11. package/dist/components/{subscription-card/subscription-card-root.d.ts → dashboard-card/dashboard-card-root.d.ts} +1 -1
  12. package/dist/components/{subscription-card/subscription-card-root.js → dashboard-card/dashboard-card-root.js} +15 -14
  13. package/dist/components/{subscription-card/subscription-card-subtitle.cjs → dashboard-card/dashboard-card-subtitle.cjs} +2 -2
  14. package/dist/components/{subscription-card/subscription-card-subtitle.js → dashboard-card/dashboard-card-subtitle.js} +1 -1
  15. package/dist/components/dashboard-card/index.cjs +21 -0
  16. package/dist/components/dashboard-card/index.d.ts +85 -0
  17. package/dist/components/dashboard-card/index.js +21 -0
  18. package/dist/components/index.cjs +2 -2
  19. package/dist/components/index.d.ts +1 -1
  20. package/dist/components/index.js +2 -2
  21. package/dist/components/modal/modal-close.cjs +1 -1
  22. package/dist/components/modal/modal-close.js +1 -1
  23. package/dist/components/navigation-menu/navigation-menu.cjs +1 -1
  24. package/dist/components/navigation-menu/navigation-menu.js +1 -1
  25. package/dist/components/radio-card-group/radio-card-group-content.cjs +1 -1
  26. package/dist/components/radio-card-group/radio-card-group-content.js +1 -1
  27. package/dist/components/radio-card-group/radio-card-group-item-title.cjs +1 -1
  28. package/dist/components/radio-card-group/radio-card-group-item-title.js +1 -1
  29. package/dist/components/radio-card-group/radio-card-group-item.cjs +1 -1
  30. package/dist/components/radio-card-group/radio-card-group-item.js +1 -1
  31. package/dist/main.cjs +2 -2
  32. package/dist/main.js +2 -2
  33. package/dist/style.css +52 -34
  34. package/package.json +1 -1
  35. package/dist/components/subscription-card/index.cjs +0 -18
  36. package/dist/components/subscription-card/index.d.ts +0 -74
  37. package/dist/components/subscription-card/index.js +0 -18
  38. /package/dist/components/{subscription-card/subscription-card-avatar.d.ts → dashboard-card/dashboard-card-avatar.d.ts} +0 -0
  39. /package/dist/components/{subscription-card/subscription-card-content.d.ts → dashboard-card/dashboard-card-content.d.ts} +0 -0
  40. /package/dist/components/{subscription-card/subscription-card-heading.d.ts → dashboard-card/dashboard-card-heading.d.ts} +0 -0
  41. /package/dist/components/{subscription-card/subscription-card-subtitle.d.ts → dashboard-card/dashboard-card-subtitle.d.ts} +0 -0
@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const clsx = require("clsx");
6
6
  const components_avatar_index = require("../avatar/index.cjs");
7
- const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
7
+ const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
8
8
  const getDefaultVariant = (variant) => {
9
9
  switch (variant) {
10
10
  case "white":
@@ -15,8 +15,8 @@ const getDefaultVariant = (variant) => {
15
15
  };
16
16
  const Avatar = React.forwardRef(
17
17
  ({ className, ...props }, forwardRef) => {
18
- const classes = clsx([components_subscriptionCard_subscriptionCardRoot.styles[`${components_subscriptionCard_subscriptionCardRoot.rootClassName}__avatar`]], className);
19
- const rootContext = React.useContext(components_subscriptionCard_subscriptionCardRoot.RootContext);
18
+ const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__avatar`]], className);
19
+ const rootContext = React.useContext(components_dashboardCard_dashboardCardRoot.RootContext);
20
20
  const cardVariant = rootContext == null ? void 0 : rootContext.variant;
21
21
  const variant = props.variant ?? getDefaultVariant(cardVariant);
22
22
  return /* @__PURE__ */ jsxRuntime.jsx(components_avatar_index.Avatar, { ...props, variant, ref: forwardRef, className: classes });
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import React__default from "react";
3
3
  import clsx from "clsx";
4
4
  import { Avatar as Avatar$1 } from "../avatar/index.js";
5
- import { s as styles, rootClassName, RootContext } from "./subscription-card-root.js";
5
+ import { s as styles, rootClassName, RootContext } from "./dashboard-card-root.js";
6
6
  const getDefaultVariant = (variant) => {
7
7
  switch (variant) {
8
8
  case "white":
@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const clsx = require("clsx");
6
- const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
6
+ const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
7
7
  const Content = React.forwardRef(
8
8
  ({ className, ...props }, forwardRef) => {
9
- const classes = clsx([components_subscriptionCard_subscriptionCardRoot.styles[`${components_subscriptionCard_subscriptionCardRoot.rootClassName}__content`]], className);
9
+ const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__content`]], className);
10
10
  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: forwardRef, className: classes });
11
11
  }
12
12
  );
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import React__default from "react";
3
3
  import clsx from "clsx";
4
- import { s as styles, rootClassName } from "./subscription-card-root.js";
4
+ import { s as styles, rootClassName } from "./dashboard-card-root.js";
5
5
  const Content = React__default.forwardRef(
6
6
  ({ className, ...props }, forwardRef) => {
7
7
  const classes = clsx([styles[`${rootClassName}__content`]], className);
@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const clsx = require("clsx");
6
6
  const components_heading_heading = require("../heading/heading.cjs");
7
- const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
7
+ const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
8
8
  const Heading = React.forwardRef(
9
9
  ({ className, as = "h2", ...props }, forwardRef) => {
10
- const classes = clsx([components_subscriptionCard_subscriptionCardRoot.styles[`${components_subscriptionCard_subscriptionCardRoot.rootClassName}__heading`]], className);
10
+ const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__heading`]], className);
11
11
  const variant = props.variant ?? "subsection-100";
12
12
  return /* @__PURE__ */ jsxRuntime.jsx(
13
13
  components_heading_heading.Heading,
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import React__default from "react";
3
3
  import clsx from "clsx";
4
4
  import { Heading as Heading$1 } from "../heading/heading.js";
5
- import { s as styles, rootClassName } from "./subscription-card-root.js";
5
+ import { s as styles, rootClassName } from "./dashboard-card-root.js";
6
6
  const Heading = React__default.forwardRef(
7
7
  ({ className, as = "h2", ...props }, forwardRef) => {
8
8
  const classes = clsx([styles[`${rootClassName}__heading`]], className);
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const React = require("react");
5
+ const clsx = require("clsx");
6
+ const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
7
+ const Illustration = React.forwardRef(
8
+ ({ className, ...props }, forwardRef) => {
9
+ const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__illustration`]], className);
10
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: forwardRef, className: classes });
11
+ }
12
+ );
13
+ Illustration.displayName = "Illustration";
14
+ exports.Illustration = Illustration;
@@ -0,0 +1,4 @@
1
+ import { default as React } from 'react';
2
+
3
+ export type IllustrationProps = React.ComponentPropsWithoutRef<'div'>;
4
+ export declare const Illustration: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,14 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import React__default from "react";
3
+ import clsx from "clsx";
4
+ import { s as styles, rootClassName } from "./dashboard-card-root.js";
5
+ const Illustration = React__default.forwardRef(
6
+ ({ className, ...props }, forwardRef) => {
7
+ const classes = clsx([styles[`${rootClassName}__illustration`]], className);
8
+ return /* @__PURE__ */ jsx("div", { ...props, ref: forwardRef, className: classes });
9
+ }
10
+ );
11
+ Illustration.displayName = "Illustration";
12
+ export {
13
+ Illustration
14
+ };
@@ -7,21 +7,22 @@ const reactSlot = require("@radix-ui/react-slot");
7
7
  require("../../assets/sprite.c3af21af-teddy.svg");
8
8
  const components_icon_icon = require("../icon/icon.cjs");
9
9
  const styles = {
10
- "teddy-subscription-card": "_teddy-subscription-card_77suf_3",
11
- "teddy-subscription-card__content": "_teddy-subscription-card__content_77suf_18",
12
- "teddy-subscription-card--white": "_teddy-subscription-card--white_77suf_21",
13
- "teddy-subscription-card--disabled": "_teddy-subscription-card--disabled_77suf_25",
14
- "teddy-subscription-card--border": "_teddy-subscription-card--border_77suf_34",
15
- "teddy-subscription-card--grey": "_teddy-subscription-card--grey_77suf_46",
16
- "teddy-subscription-card--purple-light": "_teddy-subscription-card--purple-light_77suf_59",
17
- "teddy-subscription-card--beige-light": "_teddy-subscription-card--beige-light_77suf_72",
18
- "teddy-subscription-card__layout": "_teddy-subscription-card__layout_77suf_85",
19
- "teddy-subscription-card__avatar": "_teddy-subscription-card__avatar_77suf_94",
20
- "teddy-subscription-card__heading": "_teddy-subscription-card__heading_77suf_97",
21
- "teddy-subscription-card__subtitle": "_teddy-subscription-card__subtitle_77suf_100",
22
- "teddy-subscription-card__chevron": "_teddy-subscription-card__chevron_77suf_103"
10
+ "teddy-dashboard-card": "_teddy-dashboard-card_hkvyi_3",
11
+ "teddy-dashboard-card__content": "_teddy-dashboard-card__content_hkvyi_18",
12
+ "teddy-dashboard-card--white": "_teddy-dashboard-card--white_hkvyi_21",
13
+ "teddy-dashboard-card--disabled": "_teddy-dashboard-card--disabled_hkvyi_25",
14
+ "teddy-dashboard-card--border": "_teddy-dashboard-card--border_hkvyi_34",
15
+ "teddy-dashboard-card--grey": "_teddy-dashboard-card--grey_hkvyi_46",
16
+ "teddy-dashboard-card--purple-light": "_teddy-dashboard-card--purple-light_hkvyi_59",
17
+ "teddy-dashboard-card--beige-light": "_teddy-dashboard-card--beige-light_hkvyi_72",
18
+ "teddy-dashboard-card__layout": "_teddy-dashboard-card__layout_hkvyi_85",
19
+ "teddy-dashboard-card__avatar": "_teddy-dashboard-card__avatar_hkvyi_95",
20
+ "teddy-dashboard-card__illustration": "_teddy-dashboard-card__illustration_hkvyi_98",
21
+ "teddy-dashboard-card__heading": "_teddy-dashboard-card__heading_hkvyi_101",
22
+ "teddy-dashboard-card__subtitle": "_teddy-dashboard-card__subtitle_hkvyi_105",
23
+ "teddy-dashboard-card__chevron": "_teddy-dashboard-card__chevron_hkvyi_109"
23
24
  };
24
- const rootClassName = "teddy-subscription-card";
25
+ const rootClassName = "teddy-dashboard-card";
25
26
  const RootContext = React.createContext(void 0);
26
27
  const Root = React.forwardRef(
27
28
  ({ className, asChild, variant = "white", bordered = false, children, ...props }, forwardRef) => {
@@ -1,6 +1,6 @@
1
1
  import { default as React } from 'react';
2
2
 
3
- export declare const rootClassName = "teddy-subscription-card";
3
+ export declare const rootClassName = "teddy-dashboard-card";
4
4
  type Variant = 'white' | 'grey' | 'purple-light' | 'beige-light';
5
5
  export declare const RootContext: React.Context<{
6
6
  variant?: Variant | undefined;
@@ -5,21 +5,22 @@ import { Slottable, Slot } from "@radix-ui/react-slot";
5
5
  import "../../assets/sprite.c3af21af-teddy.svg";
6
6
  import { Icon } from "../icon/icon.js";
7
7
  const styles = {
8
- "teddy-subscription-card": "_teddy-subscription-card_77suf_3",
9
- "teddy-subscription-card__content": "_teddy-subscription-card__content_77suf_18",
10
- "teddy-subscription-card--white": "_teddy-subscription-card--white_77suf_21",
11
- "teddy-subscription-card--disabled": "_teddy-subscription-card--disabled_77suf_25",
12
- "teddy-subscription-card--border": "_teddy-subscription-card--border_77suf_34",
13
- "teddy-subscription-card--grey": "_teddy-subscription-card--grey_77suf_46",
14
- "teddy-subscription-card--purple-light": "_teddy-subscription-card--purple-light_77suf_59",
15
- "teddy-subscription-card--beige-light": "_teddy-subscription-card--beige-light_77suf_72",
16
- "teddy-subscription-card__layout": "_teddy-subscription-card__layout_77suf_85",
17
- "teddy-subscription-card__avatar": "_teddy-subscription-card__avatar_77suf_94",
18
- "teddy-subscription-card__heading": "_teddy-subscription-card__heading_77suf_97",
19
- "teddy-subscription-card__subtitle": "_teddy-subscription-card__subtitle_77suf_100",
20
- "teddy-subscription-card__chevron": "_teddy-subscription-card__chevron_77suf_103"
8
+ "teddy-dashboard-card": "_teddy-dashboard-card_hkvyi_3",
9
+ "teddy-dashboard-card__content": "_teddy-dashboard-card__content_hkvyi_18",
10
+ "teddy-dashboard-card--white": "_teddy-dashboard-card--white_hkvyi_21",
11
+ "teddy-dashboard-card--disabled": "_teddy-dashboard-card--disabled_hkvyi_25",
12
+ "teddy-dashboard-card--border": "_teddy-dashboard-card--border_hkvyi_34",
13
+ "teddy-dashboard-card--grey": "_teddy-dashboard-card--grey_hkvyi_46",
14
+ "teddy-dashboard-card--purple-light": "_teddy-dashboard-card--purple-light_hkvyi_59",
15
+ "teddy-dashboard-card--beige-light": "_teddy-dashboard-card--beige-light_hkvyi_72",
16
+ "teddy-dashboard-card__layout": "_teddy-dashboard-card__layout_hkvyi_85",
17
+ "teddy-dashboard-card__avatar": "_teddy-dashboard-card__avatar_hkvyi_95",
18
+ "teddy-dashboard-card__illustration": "_teddy-dashboard-card__illustration_hkvyi_98",
19
+ "teddy-dashboard-card__heading": "_teddy-dashboard-card__heading_hkvyi_101",
20
+ "teddy-dashboard-card__subtitle": "_teddy-dashboard-card__subtitle_hkvyi_105",
21
+ "teddy-dashboard-card__chevron": "_teddy-dashboard-card__chevron_hkvyi_109"
21
22
  };
22
- const rootClassName = "teddy-subscription-card";
23
+ const rootClassName = "teddy-dashboard-card";
23
24
  const RootContext = React__default.createContext(void 0);
24
25
  const Root = React__default.forwardRef(
25
26
  ({ className, asChild, variant = "white", bordered = false, children, ...props }, forwardRef) => {
@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
4
4
  const React = require("react");
5
5
  const clsx = require("clsx");
6
6
  const components_text_text = require("../text/text.cjs");
7
- const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
7
+ const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
8
8
  const Subtitle = React.forwardRef(
9
9
  ({ className, ...props }, forwardRef) => {
10
- const classes = clsx([components_subscriptionCard_subscriptionCardRoot.styles[`${components_subscriptionCard_subscriptionCardRoot.rootClassName}__subtitle`]], className);
10
+ const classes = clsx([components_dashboardCard_dashboardCardRoot.styles[`${components_dashboardCard_dashboardCardRoot.rootClassName}__subtitle`]], className);
11
11
  const variant = props.variant ?? "additional-100";
12
12
  return /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { faded: true, ...props, variant, ref: forwardRef, className: classes });
13
13
  }
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
2
2
  import React__default from "react";
3
3
  import clsx from "clsx";
4
4
  import { Text } from "../text/text.js";
5
- import { s as styles, rootClassName } from "./subscription-card-root.js";
5
+ import { s as styles, rootClassName } from "./dashboard-card-root.js";
6
6
  const Subtitle = React__default.forwardRef(
7
7
  ({ className, ...props }, forwardRef) => {
8
8
  const classes = clsx([styles[`${rootClassName}__subtitle`]], className);
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const components_dashboardCard_dashboardCardRoot = require("./dashboard-card-root.cjs");
4
+ const components_dashboardCard_dashboardCardHeading = require("./dashboard-card-heading.cjs");
5
+ const components_dashboardCard_dashboardCardSubtitle = require("./dashboard-card-subtitle.cjs");
6
+ const components_dashboardCard_dashboardCardAvatar = require("./dashboard-card-avatar.cjs");
7
+ const components_dashboardCard_dashboardCardContent = require("./dashboard-card-content.cjs");
8
+ const components_dashboardCard_dashboardCardIllustration = require("./dashboard-card-illustration.cjs");
9
+ const DashboardCard = components_dashboardCard_dashboardCardRoot.Root;
10
+ DashboardCard.displayName = "DashboardCard";
11
+ DashboardCard.Avatar = components_dashboardCard_dashboardCardAvatar.Avatar;
12
+ DashboardCard.Avatar.displayName = "DashboardCard.Avatar";
13
+ DashboardCard.Illustration = components_dashboardCard_dashboardCardIllustration.Illustration;
14
+ DashboardCard.Illustration.displayName = "DashboardCard.Illustration";
15
+ DashboardCard.Heading = components_dashboardCard_dashboardCardHeading.Heading;
16
+ DashboardCard.Heading.displayName = "DashboardCard.Heading";
17
+ DashboardCard.Subtitle = components_dashboardCard_dashboardCardSubtitle.Subtitle;
18
+ DashboardCard.Subtitle.displayName = "DashboardCard.Subtitle";
19
+ DashboardCard.Content = components_dashboardCard_dashboardCardContent.Content;
20
+ DashboardCard.Content.displayName = "DashboardCard.Content";
21
+ exports.DashboardCard = DashboardCard;
@@ -0,0 +1,85 @@
1
+ import { RootProps } from './dashboard-card-root';
2
+ import { Heading, HeadingProps } from './dashboard-card-heading';
3
+ import { Subtitle, SubtitleProps } from './dashboard-card-subtitle';
4
+ import { Avatar, AvatarProps } from './dashboard-card-avatar';
5
+ import { Content, ContentProps } from './dashboard-card-content';
6
+ import { Illustration, IllustrationProps } from './dashboard-card-illustration';
7
+
8
+ export type DashboardCardProps = {
9
+ Root: RootProps;
10
+ Avatar: AvatarProps;
11
+ Heading: HeadingProps;
12
+ Subtitle: SubtitleProps;
13
+ Content: ContentProps;
14
+ Illustration: IllustrationProps;
15
+ };
16
+ /**
17
+ * Dashboard card is used as a navigation anchor from MinSide homepage to other pages.
18
+ * The dashboard card by default is an anchor element, but it can be used as a button as well.
19
+ * Use the `asChild` prop to render it as a button. Button onClick event gives you an opportunity
20
+ * to handle your custom logic before the navigation happens. When you need just to navigate,
21
+ * prefer using default - anchor.
22
+ *
23
+ * @component
24
+ *
25
+ * @example
26
+ * <DashboardCard>
27
+ * <DashboardCard.Avatar/>
28
+ * <DashboardCard.Heading/>
29
+ * <DashboardCard.Subtitle/>
30
+ * <DashboardCard.Content/>
31
+ * </DashboardCard>
32
+ */
33
+ declare const DashboardCard: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
34
+ asChild?: boolean | undefined;
35
+ variant?: ("grey" | "white" | "purple-light" | "beige-light") | undefined;
36
+ bordered?: boolean | undefined;
37
+ disabled?: boolean | undefined;
38
+ } & import('react').RefAttributes<HTMLAnchorElement>> & {
39
+ /**
40
+ * Avatar component for the DashboardCard.
41
+ *
42
+ * @component
43
+ *
44
+ * @example
45
+ * <DashboardCard.Avatar/>
46
+ */
47
+ Avatar: typeof Avatar;
48
+ /**
49
+ * Illustration component for the DashboardCard.
50
+ *
51
+ * @component
52
+ *
53
+ * @example
54
+ * <DashboardCard.Illustration/>
55
+ */
56
+ Illustration: typeof Illustration;
57
+ /**
58
+ * Heading component for the DashboardCard.
59
+ *
60
+ * @component
61
+ *
62
+ * @example
63
+ * <DashboardCard.Heading/>
64
+ */
65
+ Heading: typeof Heading;
66
+ /**
67
+ * Subtitle component for the DashboardCard.
68
+ *
69
+ * @component
70
+ *
71
+ * @example
72
+ * <DashboardCard.Subtitle/>
73
+ */
74
+ Subtitle: typeof Subtitle;
75
+ /**
76
+ * Content component for the DashboardCard.
77
+ *
78
+ * @component
79
+ *
80
+ * @example
81
+ * <DashboardCard.Content/>
82
+ */
83
+ Content: typeof Content;
84
+ };
85
+ export { DashboardCard };
@@ -0,0 +1,21 @@
1
+ import { Root } from "./dashboard-card-root.js";
2
+ import { Heading } from "./dashboard-card-heading.js";
3
+ import { Subtitle } from "./dashboard-card-subtitle.js";
4
+ import { Avatar } from "./dashboard-card-avatar.js";
5
+ import { Content } from "./dashboard-card-content.js";
6
+ import { Illustration } from "./dashboard-card-illustration.js";
7
+ const DashboardCard = Root;
8
+ DashboardCard.displayName = "DashboardCard";
9
+ DashboardCard.Avatar = Avatar;
10
+ DashboardCard.Avatar.displayName = "DashboardCard.Avatar";
11
+ DashboardCard.Illustration = Illustration;
12
+ DashboardCard.Illustration.displayName = "DashboardCard.Illustration";
13
+ DashboardCard.Heading = Heading;
14
+ DashboardCard.Heading.displayName = "DashboardCard.Heading";
15
+ DashboardCard.Subtitle = Subtitle;
16
+ DashboardCard.Subtitle.displayName = "DashboardCard.Subtitle";
17
+ DashboardCard.Content = Content;
18
+ DashboardCard.Content.displayName = "DashboardCard.Content";
19
+ export {
20
+ DashboardCard
21
+ };
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const components_avatar_index = require("./avatar/index.cjs");
4
- const components_subscriptionCard_index = require("./subscription-card/index.cjs");
4
+ const components_dashboardCard_index = require("./dashboard-card/index.cjs");
5
5
  const components_table_index = require("./table/index.cjs");
6
6
  const components_flipCard_index = require("./flip-card/index.cjs");
7
7
  const components_channelButton_index = require("./channel-button/index.cjs");
@@ -60,7 +60,7 @@ const components_slider_slider = require("./slider/slider.cjs");
60
60
  const sonner = require("sonner");
61
61
  const components_input_inputGroup = require("./input/input-group.cjs");
62
62
  exports.Avatar = components_avatar_index.Avatar;
63
- exports.SubscriptionCard = components_subscriptionCard_index.SubscriptionCard;
63
+ exports.DashboardCard = components_dashboardCard_index.DashboardCard;
64
64
  exports.Table = components_table_index.Table;
65
65
  exports.FlipCard = components_flipCard_index.FlipCard;
66
66
  exports.ChannelButton = components_channelButton_index.ChannelButton;
@@ -1,5 +1,5 @@
1
1
  export * from './avatar';
2
- export * from './subscription-card';
2
+ export * from './dashboard-card';
3
3
  export * from './table';
4
4
  export * from './flip-card';
5
5
  export * from './channel-button';
@@ -1,5 +1,5 @@
1
1
  import { Avatar } from "./avatar/index.js";
2
- import { SubscriptionCard } from "./subscription-card/index.js";
2
+ import { DashboardCard } from "./dashboard-card/index.js";
3
3
  import { Table } from "./table/index.js";
4
4
  import { FlipCard } from "./flip-card/index.js";
5
5
  import { ChannelButton } from "./channel-button/index.js";
@@ -76,6 +76,7 @@ export {
76
76
  ColorDot,
77
77
  Container,
78
78
  CounterBadge,
79
+ DashboardCard,
79
80
  DatePicker,
80
81
  Drawer,
81
82
  ExpandableCard,
@@ -107,7 +108,6 @@ export {
107
108
  Skeleton,
108
109
  Slider,
109
110
  Spinner,
110
- SubscriptionCard,
111
111
  Table,
112
112
  Tabs,
113
113
  Text,
@@ -4,7 +4,7 @@ require("react/jsx-runtime");
4
4
  require("react");
5
5
  require("@radix-ui/react-dialog");
6
6
  require("../avatar/index.cjs");
7
- require("../subscription-card/index.cjs");
7
+ require("../dashboard-card/index.cjs");
8
8
  require("../table/index.cjs");
9
9
  require("../flip-card/index.cjs");
10
10
  require("../channel-button/index.cjs");
@@ -2,7 +2,7 @@ import "react/jsx-runtime";
2
2
  import "react";
3
3
  import "@radix-ui/react-dialog";
4
4
  import "../avatar/index.js";
5
- import "../subscription-card/index.js";
5
+ import "../dashboard-card/index.js";
6
6
  import "../table/index.js";
7
7
  import "../flip-card/index.js";
8
8
  import "../channel-button/index.js";
@@ -13,7 +13,7 @@ require("@radix-ui/react-use-controllable-state");
13
13
  require("../../utils/generate-styling/index.cjs");
14
14
  require("../../tokens/motion/variables.cjs");
15
15
  require("../avatar/index.cjs");
16
- require("../subscription-card/index.cjs");
16
+ require("../dashboard-card/index.cjs");
17
17
  require("../table/index.cjs");
18
18
  require("../flip-card/index.cjs");
19
19
  require("../channel-button/index.cjs");
@@ -11,7 +11,7 @@ import "@radix-ui/react-use-controllable-state";
11
11
  import "../../utils/generate-styling/index.js";
12
12
  import "../../tokens/motion/variables.js";
13
13
  import "../avatar/index.js";
14
- import "../subscription-card/index.js";
14
+ import "../dashboard-card/index.js";
15
15
  import "../table/index.js";
16
16
  import "../flip-card/index.js";
17
17
  import "../channel-button/index.js";
@@ -5,7 +5,7 @@ require("clsx");
5
5
  require("react");
6
6
  require("./radio-card-group-root.cjs");
7
7
  require("../avatar/index.cjs");
8
- require("../subscription-card/index.cjs");
8
+ require("../dashboard-card/index.cjs");
9
9
  require("../table/index.cjs");
10
10
  require("../flip-card/index.cjs");
11
11
  require("../channel-button/index.cjs");
@@ -3,7 +3,7 @@ import "clsx";
3
3
  import "react";
4
4
  import "./radio-card-group-root.js";
5
5
  import "../avatar/index.js";
6
- import "../subscription-card/index.js";
6
+ import "../dashboard-card/index.js";
7
7
  import "../table/index.js";
8
8
  import "../flip-card/index.js";
9
9
  import "../channel-button/index.js";
@@ -13,7 +13,7 @@ const reactUseControllableState = require("@radix-ui/react-use-controllable-stat
13
13
  const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
14
14
  const tokens_motion_variables = require("../../tokens/motion/variables.cjs");
15
15
  require("../avatar/index.cjs");
16
- require("../subscription-card/index.cjs");
16
+ require("../dashboard-card/index.cjs");
17
17
  require("../table/index.cjs");
18
18
  require("../flip-card/index.cjs");
19
19
  require("../channel-button/index.cjs");
@@ -11,7 +11,7 @@ import { useControllableState } from "@radix-ui/react-use-controllable-state";
11
11
  import { mergeStyles } from "../../utils/generate-styling/index.js";
12
12
  import { teddyMotionDuration300 } from "../../tokens/motion/variables.js";
13
13
  import "../avatar/index.js";
14
- import "../subscription-card/index.js";
14
+ import "../dashboard-card/index.js";
15
15
  import "../table/index.js";
16
16
  import "../flip-card/index.js";
17
17
  import "../channel-button/index.js";
@@ -6,7 +6,7 @@ require("react");
6
6
  require("./radio-card-group-root.cjs");
7
7
  require("@radix-ui/react-radio-group");
8
8
  require("../avatar/index.cjs");
9
- require("../subscription-card/index.cjs");
9
+ require("../dashboard-card/index.cjs");
10
10
  require("../table/index.cjs");
11
11
  require("../flip-card/index.cjs");
12
12
  require("../channel-button/index.cjs");
@@ -4,7 +4,7 @@ import "react";
4
4
  import "./radio-card-group-root.js";
5
5
  import "@radix-ui/react-radio-group";
6
6
  import "../avatar/index.js";
7
- import "../subscription-card/index.js";
7
+ import "../dashboard-card/index.js";
8
8
  import "../table/index.js";
9
9
  import "../flip-card/index.js";
10
10
  import "../channel-button/index.js";
package/dist/main.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const components_avatar_index = require("./components/avatar/index.cjs");
4
- const components_subscriptionCard_index = require("./components/subscription-card/index.cjs");
4
+ const components_dashboardCard_index = require("./components/dashboard-card/index.cjs");
5
5
  const components_table_index = require("./components/table/index.cjs");
6
6
  const components_flipCard_index = require("./components/flip-card/index.cjs");
7
7
  const components_channelButton_index = require("./components/channel-button/index.cjs");
@@ -67,7 +67,7 @@ const tokens_typography_variables = require("./tokens/typography/variables.cjs")
67
67
  const sonner = require("sonner");
68
68
  const components_input_inputGroup = require("./components/input/input-group.cjs");
69
69
  exports.Avatar = components_avatar_index.Avatar;
70
- exports.SubscriptionCard = components_subscriptionCard_index.SubscriptionCard;
70
+ exports.DashboardCard = components_dashboardCard_index.DashboardCard;
71
71
  exports.Table = components_table_index.Table;
72
72
  exports.FlipCard = components_flipCard_index.FlipCard;
73
73
  exports.ChannelButton = components_channelButton_index.ChannelButton;
package/dist/main.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Avatar } from "./components/avatar/index.js";
2
- import { SubscriptionCard } from "./components/subscription-card/index.js";
2
+ import { DashboardCard } from "./components/dashboard-card/index.js";
3
3
  import { Table } from "./components/table/index.js";
4
4
  import { FlipCard } from "./components/flip-card/index.js";
5
5
  import { ChannelButton } from "./components/channel-button/index.js";
@@ -83,6 +83,7 @@ export {
83
83
  ColorDot,
84
84
  Container,
85
85
  CounterBadge,
86
+ DashboardCard,
86
87
  DatePicker,
87
88
  Drawer,
88
89
  ExpandableCard,
@@ -114,7 +115,6 @@ export {
114
115
  Skeleton,
115
116
  Slider,
116
117
  Spinner,
117
- SubscriptionCard,
118
118
  Table,
119
119
  Tabs,
120
120
  Text,
package/dist/style.css CHANGED
@@ -148,9 +148,9 @@
148
148
  }
149
149
  ._teddy-avatar--green_e3370_30 {
150
150
  background-color: var(--teddy-color-green-50);
151
- }@layer heading, badge, flex, grid, subscription-card;
152
- @layer subscription-card {
153
- ._teddy-subscription-card_77suf_3 {
151
+ }@layer heading, badge, flex, grid, dashboard-card;
152
+ @layer dashboard-card {
153
+ ._teddy-dashboard-card_hkvyi_3 {
154
154
  outline: none;
155
155
  background: none;
156
156
  border: none;
@@ -165,102 +165,120 @@
165
165
  border: var(--teddy-border-width-xs) solid transparent;
166
166
  border-radius: var(--teddy-border-radius-md);
167
167
  }
168
- ._teddy-subscription-card_77suf_3 ._teddy-subscription-card__content_77suf_18 {
168
+ ._teddy-dashboard-card_hkvyi_3 ._teddy-dashboard-card__content_hkvyi_18 {
169
169
  margin-top: var(--teddy-spacing-150);
170
170
  }
171
- ._teddy-subscription-card--white_77suf_21 {
171
+ ._teddy-dashboard-card--white_hkvyi_21 {
172
172
  background-color: var(--teddy-color-brand-white);
173
173
  color: var(--teddy-color-text-default);
174
174
  }
175
- ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--disabled_77suf_25 {
175
+ ._teddy-dashboard-card--white_hkvyi_21._teddy-dashboard-card--disabled_hkvyi_25 {
176
176
  background-color: var(--teddy-color-background-interactive-disabled);
177
177
  }
178
- ._teddy-subscription-card--white_77suf_21:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
178
+ ._teddy-dashboard-card--white_hkvyi_21:hover:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
179
179
  background-color: var(--teddy-color-purple-50);
180
180
  }
181
- ._teddy-subscription-card--white_77suf_21:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
181
+ ._teddy-dashboard-card--white_hkvyi_21:active:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
182
182
  background-color: var(--teddy-color-purple-100);
183
183
  }
184
- ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--border_77suf_34 {
184
+ ._teddy-dashboard-card--white_hkvyi_21._teddy-dashboard-card--border_hkvyi_34 {
185
185
  border-color: var(--teddy-color-transparent-black-300);
186
186
  }
187
- ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--border_77suf_34._teddy-subscription-card--disabled_77suf_25 {
187
+ ._teddy-dashboard-card--white_hkvyi_21._teddy-dashboard-card--border_hkvyi_34._teddy-dashboard-card--disabled_hkvyi_25 {
188
188
  border-color: var(--teddy-color-transparent-black-300);
189
189
  }
190
- ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--border_77suf_34:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
190
+ ._teddy-dashboard-card--white_hkvyi_21._teddy-dashboard-card--border_hkvyi_34:hover:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
191
191
  border-color: var(--teddy-color-transparent-black-300);
192
192
  }
193
- ._teddy-subscription-card--white_77suf_21._teddy-subscription-card--border_77suf_34:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
193
+ ._teddy-dashboard-card--white_hkvyi_21._teddy-dashboard-card--border_hkvyi_34:active:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
194
194
  border-color: var(--teddy-color-transparent-black-300);
195
195
  }
196
- ._teddy-subscription-card--grey_77suf_46 {
196
+ ._teddy-dashboard-card--grey_hkvyi_46 {
197
197
  background-color: #f5f5fa;
198
198
  color: var(--teddy-color-text-default);
199
199
  }
200
- ._teddy-subscription-card--grey_77suf_46._teddy-subscription-card--disabled_77suf_25 {
200
+ ._teddy-dashboard-card--grey_hkvyi_46._teddy-dashboard-card--disabled_hkvyi_25 {
201
201
  background-color: var(--teddy-color-background-interactive-disabled);
202
202
  }
203
- ._teddy-subscription-card--grey_77suf_46:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
203
+ ._teddy-dashboard-card--grey_hkvyi_46:hover:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
204
204
  background-color: var(--teddy-color-gray-100);
205
205
  }
206
- ._teddy-subscription-card--grey_77suf_46:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
206
+ ._teddy-dashboard-card--grey_hkvyi_46:active:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
207
207
  background-color: var(--teddy-color-gray-200);
208
208
  }
209
- ._teddy-subscription-card--purple-light_77suf_59 {
209
+ ._teddy-dashboard-card--purple-light_hkvyi_59 {
210
210
  background-color: var(--teddy-color-purple-50);
211
211
  color: var(--teddy-color-text-default);
212
212
  }
213
- ._teddy-subscription-card--purple-light_77suf_59._teddy-subscription-card--disabled_77suf_25 {
213
+ ._teddy-dashboard-card--purple-light_hkvyi_59._teddy-dashboard-card--disabled_hkvyi_25 {
214
214
  background-color: var(--teddy-color-background-interactive-disabled);
215
215
  }
216
- ._teddy-subscription-card--purple-light_77suf_59:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
216
+ ._teddy-dashboard-card--purple-light_hkvyi_59:hover:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
217
217
  background-color: var(--teddy-color-purple-100);
218
218
  }
219
- ._teddy-subscription-card--purple-light_77suf_59:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
219
+ ._teddy-dashboard-card--purple-light_hkvyi_59:active:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
220
220
  background-color: var(--teddy-color-purple-200);
221
221
  }
222
- ._teddy-subscription-card--beige-light_77suf_72 {
222
+ ._teddy-dashboard-card--beige-light_hkvyi_72 {
223
223
  background-color: var(--teddy-color-beige-50);
224
224
  color: var(--teddy-color-text-default);
225
225
  }
226
- ._teddy-subscription-card--beige-light_77suf_72._teddy-subscription-card--disabled_77suf_25 {
226
+ ._teddy-dashboard-card--beige-light_hkvyi_72._teddy-dashboard-card--disabled_hkvyi_25 {
227
227
  background-color: var(--teddy-color-background-interactive-disabled);
228
228
  }
229
- ._teddy-subscription-card--beige-light_77suf_72:hover:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
229
+ ._teddy-dashboard-card--beige-light_hkvyi_72:hover:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
230
230
  background-color: var(--teddy-color-beige-100);
231
231
  }
232
- ._teddy-subscription-card--beige-light_77suf_72:active:not(:has(._teddy-subscription-card--disabled_77suf_25)) {
232
+ ._teddy-dashboard-card--beige-light_hkvyi_72:active:not(:has(._teddy-dashboard-card--disabled_hkvyi_25)) {
233
233
  background-color: var(--teddy-color-beige-200);
234
234
  }
235
- ._teddy-subscription-card__layout_77suf_85 {
235
+ ._teddy-dashboard-card__layout_hkvyi_85 {
236
236
  display: grid;
237
237
  gap: 0 var(--teddy-spacing-150);
238
238
  grid-template-columns: auto 1fr auto;
239
+ grid-template-rows: 1fr 1fr auto;
239
240
  justify-items: start;
240
241
  justify-content: stretch;
241
242
  align-items: center;
242
- grid-template-areas: "avatar heading chevron" "avatar subtitle chevron" "content content content";
243
+ grid-template-areas: "media heading chevron" "media subtitle chevron" "content content content";
243
244
  }
244
- ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__avatar_77suf_94 {
245
- grid-area: avatar;
245
+ ._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__avatar_hkvyi_95 {
246
+ grid-area: media;
246
247
  }
247
- ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__heading_77suf_97 {
248
+ ._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__illustration_hkvyi_98 {
249
+ grid-area: media;
250
+ }
251
+ ._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__heading_hkvyi_101 {
248
252
  grid-area: heading;
253
+ align-self: end;
249
254
  }
250
- ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__subtitle_77suf_100 {
255
+ ._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__subtitle_hkvyi_105 {
251
256
  grid-area: subtitle;
257
+ align-self: start;
252
258
  }
253
- ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__chevron_77suf_103 {
259
+ ._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__chevron_hkvyi_109 {
254
260
  grid-area: chevron;
255
261
  }
256
- ._teddy-subscription-card__layout_77suf_85 ._teddy-subscription-card__content_77suf_18 {
262
+ ._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__content_hkvyi_18 {
257
263
  grid-area: content;
258
264
  }
259
- ._teddy-subscription-card_77suf_3:focus-visible {
265
+ ._teddy-dashboard-card__layout_hkvyi_85:not(:has(._teddy-dashboard-card__subtitle_hkvyi_105)) {
266
+ grid-template-areas: "media heading chevron" "media heading chevron" "content content content";
267
+ }
268
+ ._teddy-dashboard-card__layout_hkvyi_85:not(:has(._teddy-dashboard-card__subtitle_hkvyi_105)) ._teddy-dashboard-card__heading_hkvyi_101 {
269
+ align-self: center;
270
+ }
271
+ ._teddy-dashboard-card__illustration_hkvyi_98 {
272
+ display: flex;
273
+ align-items: center;
274
+ justify-content: center;
275
+ width: 40px;
276
+ }
277
+ ._teddy-dashboard-card_hkvyi_3:focus-visible {
260
278
  outline: solid var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
261
279
  outline-offset: var(--teddy-spacing-25);
262
280
  }
263
- ._teddy-subscription-card--disabled_77suf_25 {
281
+ ._teddy-dashboard-card--disabled_hkvyi_25 {
264
282
  pointer-events: none;
265
283
  }
266
284
  }@layer heading {
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.6.1",
23
+ "version": "0.6.2",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const components_subscriptionCard_subscriptionCardRoot = require("./subscription-card-root.cjs");
4
- const components_subscriptionCard_subscriptionCardHeading = require("./subscription-card-heading.cjs");
5
- const components_subscriptionCard_subscriptionCardSubtitle = require("./subscription-card-subtitle.cjs");
6
- const components_subscriptionCard_subscriptionCardAvatar = require("./subscription-card-avatar.cjs");
7
- const components_subscriptionCard_subscriptionCardContent = require("./subscription-card-content.cjs");
8
- const SubscriptionCard = components_subscriptionCard_subscriptionCardRoot.Root;
9
- SubscriptionCard.displayName = "SubscriptionCard";
10
- SubscriptionCard.Avatar = components_subscriptionCard_subscriptionCardAvatar.Avatar;
11
- SubscriptionCard.Avatar.displayName = "SubscriptionCard.Avatar";
12
- SubscriptionCard.Heading = components_subscriptionCard_subscriptionCardHeading.Heading;
13
- SubscriptionCard.Heading.displayName = "SubscriptionCard.Heading";
14
- SubscriptionCard.Subtitle = components_subscriptionCard_subscriptionCardSubtitle.Subtitle;
15
- SubscriptionCard.Subtitle.displayName = "SubscriptionCard.Subtitle";
16
- SubscriptionCard.Content = components_subscriptionCard_subscriptionCardContent.Content;
17
- SubscriptionCard.Content.displayName = "SubscriptionCard.Content";
18
- exports.SubscriptionCard = SubscriptionCard;
@@ -1,74 +0,0 @@
1
- import { RootProps } from './subscription-card-root';
2
- import { Heading, HeadingProps } from './subscription-card-heading';
3
- import { Subtitle, SubtitleProps } from './subscription-card-subtitle';
4
- import { Avatar, AvatarProps } from './subscription-card-avatar';
5
- import { Content, ContentProps } from './subscription-card-content';
6
-
7
- export type SubscriptionCardProps = {
8
- Root: RootProps;
9
- Avatar: AvatarProps;
10
- Heading: HeadingProps;
11
- Subtitle: SubtitleProps;
12
- Content: ContentProps;
13
- };
14
- /**
15
- * Subscription card is used as a navigation anchor from MinSide homepage to other pages.
16
- * The subscription card by default is an anchor element, but it can be used as a button as well.
17
- * Use the `asChild` prop to render it as a button. Button onClick event gives you an opportunity
18
- * to handle your custom logic before the navigation happens. When you need just to navigate,
19
- * prefer using default - anchor.
20
- *
21
- * @component
22
- *
23
- * @example
24
- * <SubscriptionCard>
25
- * <SubscriptionCard.Avatar/>
26
- * <SubscriptionCard.Heading/>
27
- * <SubscriptionCard.Subtitle/>
28
- * <SubscriptionCard.Content/>
29
- * </SubscriptionCard>
30
- */
31
- declare const SubscriptionCard: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
32
- asChild?: boolean | undefined;
33
- variant?: ("grey" | "white" | "purple-light" | "beige-light") | undefined;
34
- bordered?: boolean | undefined;
35
- disabled?: boolean | undefined;
36
- } & import('react').RefAttributes<HTMLAnchorElement>> & {
37
- /**
38
- * Avatar component for the SubscriptionCard.
39
- *
40
- * @component
41
- *
42
- * @example
43
- * <SubscriptionCard.Avatar/>
44
- */
45
- Avatar: typeof Avatar;
46
- /**
47
- * Heading component for the SubscriptionCard.
48
- *
49
- * @component
50
- *
51
- * @example
52
- * <SubscriptionCard.Heading/>
53
- */
54
- Heading: typeof Heading;
55
- /**
56
- * Subtitle component for the SubscriptionCard.
57
- *
58
- * @component
59
- *
60
- * @example
61
- * <SubscriptionCard.Subtitle/>
62
- */
63
- Subtitle: typeof Subtitle;
64
- /**
65
- * Content component for the SubscriptionCard.
66
- *
67
- * @component
68
- *
69
- * @example
70
- * <SubscriptionCard.Content/>
71
- */
72
- Content: typeof Content;
73
- };
74
- export { SubscriptionCard };
@@ -1,18 +0,0 @@
1
- import { Root } from "./subscription-card-root.js";
2
- import { Heading } from "./subscription-card-heading.js";
3
- import { Subtitle } from "./subscription-card-subtitle.js";
4
- import { Avatar } from "./subscription-card-avatar.js";
5
- import { Content } from "./subscription-card-content.js";
6
- const SubscriptionCard = Root;
7
- SubscriptionCard.displayName = "SubscriptionCard";
8
- SubscriptionCard.Avatar = Avatar;
9
- SubscriptionCard.Avatar.displayName = "SubscriptionCard.Avatar";
10
- SubscriptionCard.Heading = Heading;
11
- SubscriptionCard.Heading.displayName = "SubscriptionCard.Heading";
12
- SubscriptionCard.Subtitle = Subtitle;
13
- SubscriptionCard.Subtitle.displayName = "SubscriptionCard.Subtitle";
14
- SubscriptionCard.Content = Content;
15
- SubscriptionCard.Content.displayName = "SubscriptionCard.Content";
16
- export {
17
- SubscriptionCard
18
- };