@snack-uikit/status 0.5.3 → 0.5.4-preview-d96c83e8.0

package/dist/cjs/components/Status/Status.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Status = Status;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const StatusIndicator_1 = require("../StatusIndicator");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault({});
+function Status(_a) {
+  var {
+      label,
+      size = constants_2.SIZE.Xs,
+      appearance = constants_1.APPEARANCE.Primary,
+      hasBackground,
+      className
+    } = _a,
+    rest = __rest(_a, ["label", "size", "appearance", "hasBackground", "className"]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-size": size,
+    "data-has-background": hasBackground || undefined,
+    children: [(0, jsx_runtime_1.jsx)(StatusIndicator_1.StatusIndicator, {
+      appearance: appearance,
+      size: constants_2.STATUS_INDICATOR_SIZE_MAP[size]
+    }), (0, jsx_runtime_1.jsx)("span", {
+      className: styles_module_scss_1.default.label,
+      children: label
+    })]
+  }));
+}

package/dist/cjs/components/Status/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STATUS_INDICATOR_SIZE_MAP = exports.SIZE = void 0;
+const constants_1 = require("../StatusIndicator/constants");
+exports.SIZE = {
+  Xs: 'xs',
+  S: 's'
+};
+exports.STATUS_INDICATOR_SIZE_MAP = {
+  [exports.SIZE.Xs]: constants_1.SIZE.Xs,
+  [exports.SIZE.S]: constants_1.SIZE.S
+};

package/dist/cjs/components/Status/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__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("./Status"), exports);

package/dist/cjs/components/Status/types.js

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

package/dist/cjs/components/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusIndicator = StatusIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault({});
+function StatusIndicator(_a) {
+  var {
+      size = constants_2.SIZE.M,
+      appearance = constants_1.APPEARANCE.Primary,
+      className
+    } = _a,
+    rest = __rest(_a, ["size", "appearance", "className"]);
+  return (0, jsx_runtime_1.jsx)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    "data-size": size,
+    children: (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.indicator,
+      "data-appearance": appearance
+    })
+  }));
+}

package/dist/cjs/components/StatusIndicator/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE = void 0;
+exports.SIZE = {
+  Xxs: 'xxs',
+  Xs: 'xs',
+  S: 's',
+  M: 'm',
+  L: 'l'
+};

package/dist/cjs/components/StatusIndicator/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__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("./StatusIndicator"), exports);

package/dist/cjs/components/StatusIndicator/types.js

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

package/dist/cjs/components/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__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("./Status"), exports);
+__exportStar(require("./StatusIndicator"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.APPEARANCE = void 0;
+exports.APPEARANCE = {
+  Primary: 'primary',
+  Neutral: 'neutral',
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink'
+};

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__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("./components"), exports);

package/dist/cjs/types.js

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

package/dist/esm/components/Status/Status.d.ts

@@ -0,0 +1,15 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Appearance } from '../../types';
+import { Size } from './types';
+export type StatusProps = WithSupportProps<{
+    /** Текст */
+    label: string;
+    /** Размер */
+    size?: Size;
+    /** Внешний вид */
+    appearance?: Appearance;
+    /** Наличие фона */
+    hasBackground?: boolean;
+    className?: string;
+}>;
+export declare function Status({ label, size, appearance, hasBackground, className, ...rest }: StatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Status/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const SIZE: {
+    readonly Xs: "xs";
+    readonly S: "s";
+};
+export declare const STATUS_INDICATOR_SIZE_MAP: {
+    xs: "xs";
+    s: "s";
+};

package/dist/esm/components/Status/index.js

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

package/dist/esm/components/Status/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;

package/dist/esm/components/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,11 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Appearance } from '../../types';
+import { Size } from './types';
+export type StatusIndicatorProps = WithSupportProps<{
+    /** Размер */
+    size?: Size;
+    /** Внешний вид */
+    appearance?: Appearance;
+    className?: string;
+}>;
+export declare function StatusIndicator({ size, appearance, className, ...rest }: StatusIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/StatusIndicator/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SIZE: {
+    readonly Xxs: "xxs";
+    readonly Xs: "xs";
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};

package/dist/esm/components/StatusIndicator/index.js

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

package/dist/esm/components/StatusIndicator/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './Status';
+export * from './StatusIndicator';

package/dist/esm/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const APPEARANCE: {
+    readonly Primary: "primary";
+    readonly Neutral: "neutral";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+};

package/dist/esm/index.js

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

package/dist/esm/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Status",
-  "version": "0.5.3",
+  "version": "0.5.4-preview-d96c83e8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "Индикация статуса (точка или точка с текстом)",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/status",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Anna Kozlova <apkozlova@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,8 +34,8 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/utils": "3.4.1-preview-d96c83e8.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
+  "gitHead": "7ad2685e79ccef7528ade40fe4e2a5d4e609a22f"
 }

package/dist/components/Status/styles.module.css

@@ -1,47 +0,0 @@
-.container{
-  display:inline-flex;
-  align-items:center;
-}
-.container[data-has-background]{
-  background-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.container[data-has-background][data-size=xs]{
-  height:var(--size-status-background-container-xs, 16px);
-  padding-right:var(--spacing-status-background-container-padding-right-xs, 4px);
-  padding-left:var(--spacing-status-background-container-padding-left-xs, 4px);
-  gap:var(--spacing-status-container-gap-single, 2px);
-  border-radius:var(--radius-status-xs, 6px);
-}
-.container[data-has-background][data-size=s]{
-  height:var(--size-status-background-container-s, 24px);
-  padding-right:var(--spacing-status-background-container-padding-right-s, 8px);
-  padding-left:var(--spacing-status-background-container-padding-left-s, 4px);
-  gap:var(--spacing-status-container-gap-single, 2px);
-  border-radius:var(--radius-status-s, 8px);
-}
-.container[data-size=xs]{
-  gap:var(--spacing-status-container-gap-single, 2px);
-}
-.container[data-size=xs] .label{
-  font-family:var(--sans-label-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-s-font-weight, Semibold);
-  line-height:var(--sans-label-s-line-height, 14px);
-  font-size:var(--sans-label-s-font-size, 11px);
-  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
-}
-.container[data-size=s]{
-  gap:var(--spacing-status-container-gap-single, 2px);
-}
-.container[data-size=s] .label{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-
-.label{
-  color:var(--sys-neutral-text-support, #6d707f);
-}

package/dist/components/StatusIndicator/styles.module.css

@@ -1,87 +0,0 @@
-.container{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-}
-.container[data-size=xxs]{
-  width:var(--size-status-indicator-container-xxs, 4px);
-  height:var(--size-status-indicator-container-xxs, 4px);
-}
-.container[data-size=xxs] .indicator{
-  border-radius:var(--radius-status-indicator-xxs, 2px);
-  border-width:var(--border-width-general-xxs, 0.5px);
-  width:var(--size-status-indicator-xxs, 4px);
-  height:var(--size-status-indicator-xxs, 4px);
-}
-.container[data-size=xs]{
-  width:var(--size-status-indicator-container-xs, 8px);
-  height:var(--size-status-indicator-container-xs, 8px);
-}
-.container[data-size=xs] .indicator{
-  border-radius:var(--radius-status-indicator-xs, 4px);
-  border-width:var(--border-width-general-s, 1.5px);
-  width:var(--size-status-indicator-xs, 8px);
-  height:var(--size-status-indicator-xs, 8px);
-}
-.container[data-size=s]{
-  width:var(--size-status-indicator-container-s, 16px);
-  height:var(--size-status-indicator-container-s, 16px);
-}
-.container[data-size=s] .indicator{
-  border-radius:var(--radius-status-indicator-s, 8px);
-  border-width:var(--border-width-general-m, 2px);
-  width:var(--size-status-indicator-s, 12px);
-  height:var(--size-status-indicator-s, 12px);
-}
-.container[data-size=m]{
-  width:var(--size-status-indicator-container-m, 16px);
-  height:var(--size-status-indicator-container-m, 16px);
-}
-.container[data-size=m] .indicator{
-  border-radius:var(--radius-status-indicator-m, 8px);
-  border-width:var(--border-width-general-l, 3px);
-  width:var(--size-status-indicator-m, 16px);
-  height:var(--size-status-indicator-m, 16px);
-}
-.container[data-size=l]{
-  width:var(--size-status-indicator-container-l, 24px);
-  height:var(--size-status-indicator-container-l, 24px);
-}
-.container[data-size=l] .indicator{
-  border-radius:var(--radius-status-indicator-l, 16px);
-  border-width:var(--border-width-general-xl, 4px);
-  width:var(--size-status-indicator-l, 24px);
-  height:var(--size-status-indicator-l, 24px);
-}
-
-.indicator{
-  box-sizing:border-box;
-  border:0 solid var(--sys-neutral-background1-level, #fdfdfd);
-}
-.indicator[data-appearance=primary]{
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.indicator[data-appearance=neutral]{
-  background-color:var(--sys-neutral-accent-default, #787b8a);
-}
-.indicator[data-appearance=red]{
-  background-color:var(--sys-red-accent-default, #cb3f3e);
-}
-.indicator[data-appearance=orange]{
-  background-color:var(--sys-orange-accent-default, #fb8e42);
-}
-.indicator[data-appearance=yellow]{
-  background-color:var(--sys-yellow-accent-default, #e2b134);
-}
-.indicator[data-appearance=green]{
-  background-color:var(--sys-green-accent-default, #57b762);
-}
-.indicator[data-appearance=blue]{
-  background-color:var(--sys-blue-accent-default, #5388d1);
-}
-.indicator[data-appearance=violet]{
-  background-color:var(--sys-violet-accent-default, #aa6cc1);
-}
-.indicator[data-appearance=pink]{
-  background-color:var(--sys-pink-accent-default, #d1668e);
-}