@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.
- package/dist/components/{subscription-card/subscription-card-avatar.cjs → dashboard-card/dashboard-card-avatar.cjs} +3 -3
- package/dist/components/{subscription-card/subscription-card-avatar.js → dashboard-card/dashboard-card-avatar.js} +1 -1
- package/dist/components/{subscription-card/subscription-card-content.cjs → dashboard-card/dashboard-card-content.cjs} +2 -2
- package/dist/components/{subscription-card/subscription-card-content.js → dashboard-card/dashboard-card-content.js} +1 -1
- package/dist/components/{subscription-card/subscription-card-heading.cjs → dashboard-card/dashboard-card-heading.cjs} +2 -2
- package/dist/components/{subscription-card/subscription-card-heading.js → dashboard-card/dashboard-card-heading.js} +1 -1
- package/dist/components/dashboard-card/dashboard-card-illustration.cjs +14 -0
- package/dist/components/dashboard-card/dashboard-card-illustration.d.ts +4 -0
- package/dist/components/dashboard-card/dashboard-card-illustration.js +14 -0
- package/dist/components/{subscription-card/subscription-card-root.cjs → dashboard-card/dashboard-card-root.cjs} +15 -14
- package/dist/components/{subscription-card/subscription-card-root.d.ts → dashboard-card/dashboard-card-root.d.ts} +1 -1
- package/dist/components/{subscription-card/subscription-card-root.js → dashboard-card/dashboard-card-root.js} +15 -14
- package/dist/components/{subscription-card/subscription-card-subtitle.cjs → dashboard-card/dashboard-card-subtitle.cjs} +2 -2
- package/dist/components/{subscription-card/subscription-card-subtitle.js → dashboard-card/dashboard-card-subtitle.js} +1 -1
- package/dist/components/dashboard-card/index.cjs +21 -0
- package/dist/components/dashboard-card/index.d.ts +85 -0
- package/dist/components/dashboard-card/index.js +21 -0
- package/dist/components/index.cjs +2 -2
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +2 -2
- package/dist/components/modal/modal-close.cjs +1 -1
- package/dist/components/modal/modal-close.js +1 -1
- package/dist/components/navigation-menu/navigation-menu.cjs +1 -1
- package/dist/components/navigation-menu/navigation-menu.js +1 -1
- package/dist/components/radio-card-group/radio-card-group-content.cjs +1 -1
- package/dist/components/radio-card-group/radio-card-group-content.js +1 -1
- package/dist/components/radio-card-group/radio-card-group-item-title.cjs +1 -1
- package/dist/components/radio-card-group/radio-card-group-item-title.js +1 -1
- package/dist/components/radio-card-group/radio-card-group-item.cjs +1 -1
- package/dist/components/radio-card-group/radio-card-group-item.js +1 -1
- package/dist/main.cjs +2 -2
- package/dist/main.js +2 -2
- package/dist/style.css +52 -34
- package/package.json +1 -1
- package/dist/components/subscription-card/index.cjs +0 -18
- package/dist/components/subscription-card/index.d.ts +0 -74
- package/dist/components/subscription-card/index.js +0 -18
- /package/dist/components/{subscription-card/subscription-card-avatar.d.ts → dashboard-card/dashboard-card-avatar.d.ts} +0 -0
- /package/dist/components/{subscription-card/subscription-card-content.d.ts → dashboard-card/dashboard-card-content.d.ts} +0 -0
- /package/dist/components/{subscription-card/subscription-card-heading.d.ts → dashboard-card/dashboard-card-heading.d.ts} +0 -0
- /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
|
|
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([
|
|
19
|
-
const rootContext = React.useContext(
|
|
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 "./
|
|
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
|
|
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([
|
|
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 "./
|
|
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
|
|
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([
|
|
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 "./
|
|
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-
|
|
11
|
-
"teddy-
|
|
12
|
-
"teddy-
|
|
13
|
-
"teddy-
|
|
14
|
-
"teddy-
|
|
15
|
-
"teddy-
|
|
16
|
-
"teddy-
|
|
17
|
-
"teddy-
|
|
18
|
-
"teddy-
|
|
19
|
-
"teddy-
|
|
20
|
-
"teddy-
|
|
21
|
-
"teddy-
|
|
22
|
-
"teddy-
|
|
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-
|
|
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-
|
|
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-
|
|
9
|
-
"teddy-
|
|
10
|
-
"teddy-
|
|
11
|
-
"teddy-
|
|
12
|
-
"teddy-
|
|
13
|
-
"teddy-
|
|
14
|
-
"teddy-
|
|
15
|
-
"teddy-
|
|
16
|
-
"teddy-
|
|
17
|
-
"teddy-
|
|
18
|
-
"teddy-
|
|
19
|
-
"teddy-
|
|
20
|
-
"teddy-
|
|
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-
|
|
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
|
|
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([
|
|
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 "./
|
|
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
|
|
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.
|
|
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;
|
package/dist/components/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Avatar } from "./avatar/index.js";
|
|
2
|
-
import {
|
|
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("../
|
|
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 "../
|
|
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("../
|
|
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 "../
|
|
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("../
|
|
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 "../
|
|
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("../
|
|
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 "../
|
|
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("../
|
|
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 "../
|
|
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
|
|
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.
|
|
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 {
|
|
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,
|
|
152
|
-
@layer
|
|
153
|
-
._teddy-
|
|
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-
|
|
168
|
+
._teddy-dashboard-card_hkvyi_3 ._teddy-dashboard-card__content_hkvyi_18 {
|
|
169
169
|
margin-top: var(--teddy-spacing-150);
|
|
170
170
|
}
|
|
171
|
-
._teddy-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
196
|
+
._teddy-dashboard-card--grey_hkvyi_46 {
|
|
197
197
|
background-color: #f5f5fa;
|
|
198
198
|
color: var(--teddy-color-text-default);
|
|
199
199
|
}
|
|
200
|
-
._teddy-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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: "
|
|
243
|
+
grid-template-areas: "media heading chevron" "media subtitle chevron" "content content content";
|
|
243
244
|
}
|
|
244
|
-
._teddy-
|
|
245
|
-
grid-area:
|
|
245
|
+
._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__avatar_hkvyi_95 {
|
|
246
|
+
grid-area: media;
|
|
246
247
|
}
|
|
247
|
-
._teddy-
|
|
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-
|
|
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-
|
|
259
|
+
._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__chevron_hkvyi_109 {
|
|
254
260
|
grid-area: chevron;
|
|
255
261
|
}
|
|
256
|
-
._teddy-
|
|
262
|
+
._teddy-dashboard-card__layout_hkvyi_85 ._teddy-dashboard-card__content_hkvyi_18 {
|
|
257
263
|
grid-area: content;
|
|
258
264
|
}
|
|
259
|
-
._teddy-
|
|
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-
|
|
281
|
+
._teddy-dashboard-card--disabled_hkvyi_25 {
|
|
264
282
|
pointer-events: none;
|
|
265
283
|
}
|
|
266
284
|
}@layer heading {
|
package/package.json
CHANGED
|
@@ -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
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|