@astral/ui 0.11.0 → 0.12.0

package/Placeholder/Placeholder.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PlaceholderProps } from './types';
+export declare const Placeholder: ({ title, imgSrc, imgAlt, description, Actions, }: PlaceholderProps) => JSX.Element;

package/Placeholder/Placeholder.js

@@ -0,0 +1,21 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = require("./styled");
+var Placeholder = function (_a) {
+    var title = _a.title, imgSrc = _a.imgSrc, imgAlt = _a.imgAlt, description = _a.description, Actions = _a.Actions;
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.StyledInnerContainer, { children: [imgSrc && (0, jsx_runtime_1.jsx)(styled_1.StyledImage, { src: imgSrc, alt: imgAlt }, void 0), title && (0, jsx_runtime_1.jsx)(styled_1.StyledTitle, __assign({ variant: "h4" }, { children: title }), void 0), description && ((0, jsx_runtime_1.jsx)(styled_1.StyledDescription, __assign({ variant: "ui" }, { children: description }), void 0))] }, void 0), Actions && (0, jsx_runtime_1.jsx)(styled_1.StyledActions, { children: Actions }, void 0)] }, void 0));
+};
+exports.Placeholder = Placeholder;

package/Placeholder/index.d.ts

@@ -0,0 +1 @@
+export * from './Placeholder';

package/Placeholder/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Placeholder"), exports);

package/Placeholder/styled.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInnerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyProps<"span", {}>, "variant"> & {
+    variant?: "small" | import("@mui/material").TypographyVariant | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledDescription: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyProps<"span", {}>, "variant"> & {
+    variant?: "small" | import("@mui/material").TypographyVariant | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/Placeholder/styled.js

@@ -0,0 +1,34 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledActions = exports.StyledDescription = exports.StyledTitle = exports.StyledImage = exports.StyledInnerContainer = exports.StyledContainer = void 0;
+var styles_1 = require("../styles");
+var Typography_1 = require("../Typography");
+exports.StyledContainer = styles_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.background.paper;
+});
+exports.StyledInnerContainer = styles_1.styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 384px;\n"], ["\n  width: 384px;\n"])));
+exports.StyledImage = styles_1.styled.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"], ["\n  display: block;\n  width: auto;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(8);
+});
+exports.StyledTitle = (0, styles_1.styled)(Typography_1.Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: ", ";\n\n  text-align: center;\n"], ["\n  margin-bottom: ", ";\n\n  text-align: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+});
+exports.StyledDescription = (0, styles_1.styled)(Typography_1.Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n\n  text-align: center;\n"], ["\n  display: block;\n\n  text-align: center;\n"])));
+exports.StyledActions = styles_1.styled.footer(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: ", ";\n\n  > * {\n    margin: ", ";\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: ", ";\n\n  > * {\n    margin: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(5);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Placeholder/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type PlaceholderProps = {
+    imgSrc: string;
+    imgAlt: string;
+    title: string;
+    description?: string | ReactNode;
+    Actions?: ReactNode;
+};

package/Placeholder/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/esm/Placeholder/Placeholder.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PlaceholderProps } from './types';
+export declare const Placeholder: ({ title, imgSrc, imgAlt, description, Actions, }: PlaceholderProps) => JSX.Element;

package/esm/Placeholder/Placeholder.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledActions, StyledContainer, StyledDescription, StyledImage, StyledInnerContainer, StyledTitle, } from './styled';
+export var Placeholder = function (_a) {
+    var title = _a.title, imgSrc = _a.imgSrc, imgAlt = _a.imgAlt, description = _a.description, Actions = _a.Actions;
+    return (_jsxs(StyledContainer, { children: [_jsxs(StyledInnerContainer, { children: [imgSrc && _jsx(StyledImage, { src: imgSrc, alt: imgAlt }, void 0), title && _jsx(StyledTitle, __assign({ variant: "h4" }, { children: title }), void 0), description && (_jsx(StyledDescription, __assign({ variant: "ui" }, { children: description }), void 0))] }, void 0), Actions && _jsx(StyledActions, { children: Actions }, void 0)] }, void 0));
+};

package/esm/Placeholder/index.d.ts

@@ -0,0 +1 @@
+export * from './Placeholder';

package/esm/Placeholder/index.js

@@ -0,0 +1 @@
+export * from './Placeholder';

package/esm/Placeholder/styled.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInnerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyProps<"span", {}>, "variant"> & {
+    variant?: "small" | import("@mui/material").TypographyVariant | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledDescription: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyProps<"span", {}>, "variant"> & {
+    variant?: "small" | import("@mui/material").TypographyVariant | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/esm/Placeholder/styled.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../styles';
+import { Typography } from '../Typography';
+export var StyledContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.background.paper;
+});
+export var StyledInnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 384px;\n"], ["\n  width: 384px;\n"])));
+export var StyledImage = styled.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"], ["\n  display: block;\n  width: auto;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(8);
+});
+export var StyledTitle = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: ", ";\n\n  text-align: center;\n"], ["\n  margin-bottom: ", ";\n\n  text-align: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+});
+export var StyledDescription = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n\n  text-align: center;\n"], ["\n  display: block;\n\n  text-align: center;\n"])));
+export var StyledActions = styled.footer(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: ", ";\n\n  > * {\n    margin: ", ";\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: ", ";\n\n  > * {\n    margin: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(5);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/esm/Placeholder/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type PlaceholderProps = {
+    imgSrc: string;
+    imgAlt: string;
+    title: string;
+    description?: string | ReactNode;
+    Actions?: ReactNode;
+};

package/esm/Placeholder/types.js

@@ -0,0 +1 @@
+export {};

package/esm/index.d.ts

@@ -35,3 +35,4 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './Placeholder';

package/esm/index.js

@@ -35,3 +35,4 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './Placeholder';

package/index.d.ts

@@ -35,3 +35,4 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './Placeholder';

package/index.js

@@ -47,3 +47,4 @@ __exportStar(require("./ListItemButton"), exports);
 __exportStar(require("./ListItemIcon"), exports);
 __exportStar(require("./ListItemSecondaryAction"), exports);
 __exportStar(require("./ListItemText"), exports);
+__exportStar(require("./Placeholder"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^0.11.0",
+    "@astral/icons": "^0.12.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.8.1",
     "@emotion/server": "11.4.0",