@snack-uikit/card 0.12.13 → 0.12.14-preview-bfae2d03.0

package/dist/components/Card/Card.js

@@ -26,7 +26,7 @@ export function Card(_a) {
     const onKeyDown = useCallback((e) => {
         var _a, _b;
         if (e.target === localDivRef.current) {
-            if (TRIGGER_CLICK_KEY_CODES.includes(e.code)) {
+            if (TRIGGER_CLICK_KEY_CODES.includes(e.code) || e.key === ' ') {
                 href ? (_a = localAnchorRef.current) === null || _a === void 0 ? void 0 : _a.click() : (_b = localDivRef.current) === null || _b === void 0 ? void 0 : _b.click();
             }
         }

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

@@ -65,47 +65,18 @@
 .card:focus-within .functionBadgeWrapper{
   display:block;
 }
-.card[data-disabled]{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  cursor:not-allowed;
-  background-color:var(--sys-neutral-background, #f1f2f6);
-  outline-color:var(--sys-neutral-decor-default, #dfe2ec);
-  outline-width:var(--border-width-card-container, 1px);
-}
-.card[data-disabled] .check{
-  color:var(--sys-neutral-on-accent, #ffffff);
-  background-color:var(--sys-neutral-text-disabled, #b3b6bf);
-}
-.card[data-disabled] *{
-  cursor:not-allowed;
-}
-.card[data-pointer] *{
-  cursor:pointer;
-}
-.card[data-pointer][data-outline]:hover{
-  outline-color:var(--sys-neutral-decor-hovered, #cfd2dc);
-  box-shadow:none;
-}
-.card[data-pointer][data-outline]:focus-visible{
-  outline-width:var(--border-state-focus-l-border-width, 4px);
-  outline-style:var(--border-state-focus-l-border-style, solid);
-  outline-color:var(--border-state-focus-l-border-color, );
-  outline-color:var(--sys-primary-accent-default, #794ed3);
-}
-.card[data-pointer][data-checked]{
+.card[data-checked]{
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
   outline-color:var(--sys-primary-decor-activated, #c5b2f1);
   outline-width:var(--border-width-card-container, 1px);
 }
-.card[data-pointer][data-checked]:hover{
+.card[data-checked]:hover{
   outline-color:var(--sys-primary-decor-hovered, #decdfb);
   box-shadow:none;
 }
-.card[data-pointer][data-checked] .contentWrapper::before{
+.card[data-checked] .contentWrapper::before{
   content:"";
   position:absolute;
   top:0;
@@ -115,20 +86,49 @@
   opacity:var(--opacity-a008, 0.08);
   background-color:var(--sys-primary-accent-default, #794ed3);
 }
-.card[data-pointer][data-checked] .check{
+.card[data-checked] .check{
   color:var(--sys-primary-on-accent, #fdfbff);
   background-color:var(--sys-primary-accent-default, #794ed3);
 }
-.card[data-pointer][data-checked]:focus-visible{
+.card[data-checked]:focus-visible{
   outline-width:var(--border-state-focus-l-border-width, 4px);
   outline-style:var(--border-state-focus-l-border-style, solid);
   outline-color:var(--border-state-focus-l-border-color, );
   outline-color:var(--sys-primary-accent-default, #794ed3);
 }
-.card[data-pointer][data-checked]:focus-visible .check{
+.card[data-checked]:focus-visible .check{
   color:var(--sys-primary-on-accent, #fdfbff);
   background-color:var(--sys-primary-accent-default, #794ed3);
 }
+.card[data-disabled]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #f1f2f6);
+  outline-color:var(--sys-neutral-decor-default, #dfe2ec);
+  outline-width:var(--border-width-card-container, 1px);
+}
+.card[data-disabled][data-checked] .check{
+  color:var(--sys-neutral-on-accent, #ffffff);
+  background-color:var(--sys-neutral-text-disabled, #b3b6bf);
+}
+.card[data-disabled] *{
+  cursor:not-allowed;
+}
+.card[data-pointer] *{
+  cursor:pointer;
+}
+.card[data-pointer][data-outline]:hover{
+  outline-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+  box-shadow:none;
+}
+.card[data-pointer][data-outline]:focus-visible{
+  outline-width:var(--border-state-focus-l-border-width, 4px);
+  outline-style:var(--border-state-focus-l-border-style, solid);
+  outline-color:var(--border-state-focus-l-border-color, );
+  outline-color:var(--sys-primary-accent-default, #794ed3);
+}
 .card[data-pointer]:hover{
   box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
 }

package/dist/components/Image/Image.d.ts

@@ -1,5 +1,6 @@
+import { WithSupportProps } from '@snack-uikit/utils';
 import { MODE } from './constants';
-export type ImageProps = {
+export type ImageProps = WithSupportProps<{
     /** Путь до картинки */
     src: string;
     /** Описание картинки */
@@ -10,5 +11,5 @@ export type ImageProps = {
 } | {
     mode: typeof MODE.Background;
     hideFading?: boolean;
-});
-export declare function Image({ src, alt, mode, hideFading }: ImageProps): import("react/jsx-runtime").JSX.Element;
+})>;
+export declare function Image({ src, alt, mode, hideFading, ...rest }: ImageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Image/Image.js

@@ -1,6 +1,19 @@
+var __rest = (this && this.__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;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps } from '@snack-uikit/utils';
 import { MODE } from './constants';
 import styles from './styles.module.css';
-export function Image({ src, alt, mode = MODE.Little, hideFading }) {
-    return _jsx("img", { src: src, alt: alt, "data-mode": mode, className: styles.image, "data-fading": !hideFading || undefined });
+export function Image(_a) {
+    var { src, alt, mode = MODE.Little, hideFading } = _a, rest = __rest(_a, ["src", "alt", "mode", "hideFading"]);
+    return (_jsx("img", Object.assign({}, extractSupportProps(rest), { src: src, alt: alt, "data-mode": mode, className: styles.image, "data-fading": !hideFading || undefined })));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.12.13",
+  "version": "0.12.14-preview-bfae2d03.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,5 +43,5 @@
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "d36fe553ce72b92deafee581e70090458827f8ac"
+  "gitHead": "7b2a733a770a8bdd14adb9951c8fc552ad192578"
 }

package/src/components/Card/Card.tsx

@@ -67,7 +67,7 @@ export function Card({
   const onKeyDown = useCallback(
     (e: KeyboardEvent<HTMLDivElement>) => {
       if (e.target === localDivRef.current) {
-        if (TRIGGER_CLICK_KEY_CODES.includes(e.code)) {
+        if (TRIGGER_CLICK_KEY_CODES.includes(e.code) || e.key === ' ') {
           href ? localAnchorRef.current?.click() : localDivRef.current?.click();
         }
       }

package/src/components/Card/styles.module.scss

@@ -87,6 +87,47 @@ $sizes: 's', 'm', 'l';
     }
   }
 
+  &[data-checked] {
+    @include outline-var($container-focused-s);
+
+    outline-color: $sys-primary-decor-activated;
+    outline-width: $border-width-card-container;
+
+    &:hover {
+      outline-color: $sys-primary-decor-hovered;
+      box-shadow: none;
+    }
+
+    .contentWrapper::before {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      opacity: $opacity-a008;
+      background-color: $sys-primary-accent-default;
+    }
+
+    .check {
+      color: $sys-primary-on-accent;
+      background-color: $sys-primary-accent-default;
+    }
+  }
+
+  &[data-checked]:focus-visible {
+    @include outline-var($container-focused-l);
+
+    outline-color: $sys-primary-accent-default;
+
+    .check {
+      color: $sys-primary-on-accent;
+      background-color: $sys-primary-accent-default;
+    }
+  }
+
   &[data-disabled] {
     @include outline-var($container-focused-s);
 
@@ -95,9 +136,11 @@ $sizes: 's', 'm', 'l';
     outline-color: $sys-neutral-decor-default;
     outline-width: $border-width-card-container;
 
-    .check {
-      color: $sys-neutral-on-accent;
-      background-color: $sys-neutral-text-disabled;
+    &[data-checked] {
+      .check {
+        color: $sys-neutral-on-accent;
+        background-color: $sys-neutral-text-disabled;
+      }
     }
 
     * {
@@ -123,47 +166,6 @@ $sizes: 's', 'm', 'l';
       }
     }
 
-    &[data-checked] {
-      @include outline-var($container-focused-s);
-
-      outline-color: $sys-primary-decor-activated;
-      outline-width: $border-width-card-container;
-
-      &:hover {
-        outline-color: $sys-primary-decor-hovered;
-        box-shadow: none;
-      }
-
-      .contentWrapper::before {
-        content: '';
-
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-
-        opacity: $opacity-a008;
-        background-color: $sys-primary-accent-default;
-      }
-
-      .check {
-        color: $sys-primary-on-accent;
-        background-color: $sys-primary-accent-default;
-      }
-    }
-
-    &[data-checked]:focus-visible {
-      @include outline-var($container-focused-l);
-
-      outline-color: $sys-primary-accent-default;
-
-      .check {
-        color: $sys-primary-on-accent;
-        background-color: $sys-primary-accent-default;
-      }
-    }
-
     &:hover {
       box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level2');
     }

package/src/components/Image/Image.tsx

@@ -1,16 +1,29 @@
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
 import { MODE } from './constants';
 import styles from './styles.module.scss';
 
-export type ImageProps = {
-  /** Путь до картинки */
-  src: string;
-  /** Описание картинки */
-  alt: string;
-} /**  Image mode */ & (
-  | { mode?: typeof MODE.Little | typeof MODE.Middle; hideFading?: never }
-  | { mode: typeof MODE.Background; hideFading?: boolean }
-);
+export type ImageProps = WithSupportProps<
+  {
+    /** Путь до картинки */
+    src: string;
+    /** Описание картинки */
+    alt: string;
+  } /**  Image mode */ & (
+    | { mode?: typeof MODE.Little | typeof MODE.Middle; hideFading?: never }
+    | { mode: typeof MODE.Background; hideFading?: boolean }
+  )
+>;
 
-export function Image({ src, alt, mode = MODE.Little, hideFading }: ImageProps) {
-  return <img src={src} alt={alt} data-mode={mode} className={styles.image} data-fading={!hideFading || undefined} />;
+export function Image({ src, alt, mode = MODE.Little, hideFading, ...rest }: ImageProps) {
+  return (
+    <img
+      {...extractSupportProps(rest)}
+      src={src}
+      alt={alt}
+      data-mode={mode}
+      className={styles.image}
+      data-fading={!hideFading || undefined}
+    />
+  );
 }