@yamada-ui/alert 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/alert
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/alert
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/alert
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/alert
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/alert.d.ts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps } from '@yamada-ui/core';
+import * as react from 'react';
+import * as _yamada_ui_icon from '@yamada-ui/icon';
+import { LoadingProps } from '@yamada-ui/loading';
+
+declare const statuses: {
+    readonly info: {
+        readonly icon: react.FC<_yamada_ui_icon.IconProps>;
+        readonly colorScheme: "blue";
+    };
+    readonly success: {
+        readonly icon: react.FC<_yamada_ui_icon.IconProps>;
+        readonly colorScheme: "green";
+    };
+    readonly warning: {
+        readonly icon: react.FC<_yamada_ui_icon.IconProps>;
+        readonly colorScheme: "orange";
+    };
+    readonly error: {
+        readonly icon: react.FC<_yamada_ui_icon.IconProps>;
+        readonly colorScheme: "red";
+    };
+    readonly loading: {
+        readonly icon: _yamada_ui_core.Component<"div", LoadingProps>;
+        readonly colorScheme: "blue";
+    };
+};
+type Status = keyof typeof statuses;
+declare const getStatusColorScheme: (status: Status) => "blue" | "green" | "orange" | "red";
+declare const getStatusIcon: (status: Status) => react.FC<_yamada_ui_icon.IconProps> | _yamada_ui_core.Component<"div", LoadingProps>;
+type AlertOptions = {
+    status?: Status;
+};
+type AlertProps = HTMLUIProps<'div'> & ThemeProps<'Alert'> & AlertOptions;
+declare const Alert: _yamada_ui_core.Component<"div", AlertProps>;
+type AlertIconProps = HTMLUIProps<'span'> & {
+    variant?: LoadingProps['variant'];
+};
+declare const AlertIcon: ({ className, children, variant, ...rest }: AlertIconProps) => react_jsx_runtime.JSX.Element;
+type AlertTitleProps = HTMLUIProps<'p'>;
+declare const AlertTitle: _yamada_ui_core.Component<"p", AlertTitleProps>;
+type AlertDescriptionProps = HTMLUIProps<'span'>;
+declare const AlertDescription: _yamada_ui_core.Component<"span", AlertDescriptionProps>;
+
+export { Alert, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertProps, AlertTitle, AlertTitleProps, getStatusColorScheme, getStatusIcon };

package/dist/alert.js

@@ -0,0 +1,104 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/alert.tsx
+var alert_exports = {};
+__export(alert_exports, {
+  Alert: () => Alert,
+  AlertDescription: () => AlertDescription,
+  AlertIcon: () => AlertIcon,
+  AlertTitle: () => AlertTitle,
+  getStatusColorScheme: () => getStatusColorScheme,
+  getStatusIcon: () => getStatusIcon
+});
+module.exports = __toCommonJS(alert_exports);
+var import_core = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_loading = require("@yamada-ui/loading");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var statuses = {
+  info: { icon: import_icon.InfoIcon, colorScheme: "blue" },
+  success: { icon: import_icon.CheckIcon, colorScheme: "green" },
+  warning: { icon: import_icon.WarningIcon, colorScheme: "orange" },
+  error: { icon: import_icon.WarningIcon, colorScheme: "red" },
+  loading: { icon: import_loading.Loading, colorScheme: "blue" }
+};
+var [AlertProvider, useAlert] = (0, import_utils.createContext)({
+  name: `AlertStylesContext`,
+  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in "<Alert />" `
+});
+var getStatusColorScheme = (status) => statuses[status].colorScheme;
+var getStatusIcon = (status) => statuses[status].icon;
+var Alert = (0, import_core.forwardRef)(
+  ({ status = "info", colorScheme, ...props }, ref) => {
+    colorScheme = colorScheme != null ? colorScheme : getStatusColorScheme(status);
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Alert", { ...props, colorScheme });
+    const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+    const css = {
+      w: "100%",
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      overflow: "hidden",
+      ...styles.container
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-alert", className), __css: css, ...rest, children }) });
+  }
+);
+var AlertIcon = ({ className, children, variant = "oval", ...rest }) => {
+  const { status, styles } = useAlert();
+  const Icon = getStatusIcon(status);
+  const css = {
+    ...status === "loading" ? styles.loading : styles.icon
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { display: "inherit", className: (0, import_utils.cx)("ui-alert-icon", className), __css: css, ...rest, children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Icon,
+    {
+      boxSize: "100%",
+      ...status === "loading" ? { variant, color: "currentcolor" } : {}
+    }
+  ) });
+};
+var AlertTitle = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useAlert();
+  const css = {
+    display: "block",
+    ...styles.title
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.p, { ref, className: (0, import_utils.cx)("ui-alert-title", className), __css: css, ...rest });
+});
+var AlertDescription = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useAlert();
+    const css = {
+      ...styles.description
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { ref, className: (0, import_utils.cx)("ui-alert-desc", className), __css: css, ...rest });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  getStatusColorScheme,
+  getStatusIcon
+});

package/dist/alert.mjs

@@ -0,0 +1,16 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  getStatusColorScheme,
+  getStatusIcon
+} from "./chunk-2AJTREQZ.mjs";
+export {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  getStatusColorScheme,
+  getStatusIcon
+};

package/dist/chunk-2AJTREQZ.mjs

@@ -0,0 +1,80 @@
+// src/alert.tsx
+import {
+  ui,
+  forwardRef,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import { InfoIcon, WarningIcon, CheckIcon } from "@yamada-ui/icon";
+import { Loading } from "@yamada-ui/loading";
+import { createContext, cx } from "@yamada-ui/utils";
+import { jsx } from "react/jsx-runtime";
+var statuses = {
+  info: { icon: InfoIcon, colorScheme: "blue" },
+  success: { icon: CheckIcon, colorScheme: "green" },
+  warning: { icon: WarningIcon, colorScheme: "orange" },
+  error: { icon: WarningIcon, colorScheme: "red" },
+  loading: { icon: Loading, colorScheme: "blue" }
+};
+var [AlertProvider, useAlert] = createContext({
+  name: `AlertStylesContext`,
+  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in "<Alert />" `
+});
+var getStatusColorScheme = (status) => statuses[status].colorScheme;
+var getStatusIcon = (status) => statuses[status].icon;
+var Alert = forwardRef(
+  ({ status = "info", colorScheme, ...props }, ref) => {
+    colorScheme = colorScheme != null ? colorScheme : getStatusColorScheme(status);
+    const [styles, mergedProps] = useMultiComponentStyle("Alert", { ...props, colorScheme });
+    const { className, children, ...rest } = omitThemeProps(mergedProps);
+    const css = {
+      w: "100%",
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      overflow: "hidden",
+      ...styles.container
+    };
+    return /* @__PURE__ */ jsx(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ jsx(ui.div, { ref, className: cx("ui-alert", className), __css: css, ...rest, children }) });
+  }
+);
+var AlertIcon = ({ className, children, variant = "oval", ...rest }) => {
+  const { status, styles } = useAlert();
+  const Icon = getStatusIcon(status);
+  const css = {
+    ...status === "loading" ? styles.loading : styles.icon
+  };
+  return /* @__PURE__ */ jsx(ui.span, { display: "inherit", className: cx("ui-alert-icon", className), __css: css, ...rest, children: children || /* @__PURE__ */ jsx(
+    Icon,
+    {
+      boxSize: "100%",
+      ...status === "loading" ? { variant, color: "currentcolor" } : {}
+    }
+  ) });
+};
+var AlertTitle = forwardRef(({ className, ...rest }, ref) => {
+  const { styles } = useAlert();
+  const css = {
+    display: "block",
+    ...styles.title
+  };
+  return /* @__PURE__ */ jsx(ui.p, { ref, className: cx("ui-alert-title", className), __css: css, ...rest });
+});
+var AlertDescription = forwardRef(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useAlert();
+    const css = {
+      ...styles.description
+    };
+    return /* @__PURE__ */ jsx(ui.span, { ref, className: cx("ui-alert-desc", className), __css: css, ...rest });
+  }
+);
+
+export {
+  getStatusColorScheme,
+  getStatusIcon,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Alert, AlertDescription, AlertDescriptionProps, AlertIcon, AlertIconProps, AlertProps, AlertTitle, AlertTitleProps, getStatusColorScheme, getStatusIcon } from './alert.js';
+import 'react/jsx-runtime';
+import '@yamada-ui/core';
+import 'react';
+import '@yamada-ui/icon';
+import '@yamada-ui/loading';

package/dist/index.js

@@ -0,0 +1,106 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Alert: () => Alert,
+  AlertDescription: () => AlertDescription,
+  AlertIcon: () => AlertIcon,
+  AlertTitle: () => AlertTitle,
+  getStatusColorScheme: () => getStatusColorScheme,
+  getStatusIcon: () => getStatusIcon
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/alert.tsx
+var import_core = require("@yamada-ui/core");
+var import_icon = require("@yamada-ui/icon");
+var import_loading = require("@yamada-ui/loading");
+var import_utils = require("@yamada-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var statuses = {
+  info: { icon: import_icon.InfoIcon, colorScheme: "blue" },
+  success: { icon: import_icon.CheckIcon, colorScheme: "green" },
+  warning: { icon: import_icon.WarningIcon, colorScheme: "orange" },
+  error: { icon: import_icon.WarningIcon, colorScheme: "red" },
+  loading: { icon: import_loading.Loading, colorScheme: "blue" }
+};
+var [AlertProvider, useAlert] = (0, import_utils.createContext)({
+  name: `AlertStylesContext`,
+  errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in "<Alert />" `
+});
+var getStatusColorScheme = (status) => statuses[status].colorScheme;
+var getStatusIcon = (status) => statuses[status].icon;
+var Alert = (0, import_core.forwardRef)(
+  ({ status = "info", colorScheme, ...props }, ref) => {
+    colorScheme = colorScheme != null ? colorScheme : getStatusColorScheme(status);
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Alert", { ...props, colorScheme });
+    const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
+    const css = {
+      w: "100%",
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      overflow: "hidden",
+      ...styles.container
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { ref, className: (0, import_utils.cx)("ui-alert", className), __css: css, ...rest, children }) });
+  }
+);
+var AlertIcon = ({ className, children, variant = "oval", ...rest }) => {
+  const { status, styles } = useAlert();
+  const Icon = getStatusIcon(status);
+  const css = {
+    ...status === "loading" ? styles.loading : styles.icon
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { display: "inherit", className: (0, import_utils.cx)("ui-alert-icon", className), __css: css, ...rest, children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Icon,
+    {
+      boxSize: "100%",
+      ...status === "loading" ? { variant, color: "currentcolor" } : {}
+    }
+  ) });
+};
+var AlertTitle = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
+  const { styles } = useAlert();
+  const css = {
+    display: "block",
+    ...styles.title
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.p, { ref, className: (0, import_utils.cx)("ui-alert-title", className), __css: css, ...rest });
+});
+var AlertDescription = (0, import_core.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useAlert();
+    const css = {
+      ...styles.description
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { ref, className: (0, import_utils.cx)("ui-alert-desc", className), __css: css, ...rest });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  getStatusColorScheme,
+  getStatusIcon
+});

package/dist/index.mjs

@@ -0,0 +1,16 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  getStatusColorScheme,
+  getStatusIcon
+} from "./chunk-2AJTREQZ.mjs";
+export {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  getStatusColorScheme,
+  getStatusIcon
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@yamada-ui/alert",
+  "version": "0.1.0",
+  "description": "Yamada UI alert component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "alert",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/alert"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/icon": "0.1.0",
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/loading": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}