@dmitriikapustin/ui 0.3.0 → 0.3.3

package/dist/index.cjs

@@ -272,27 +272,75 @@ function Button(props) {
     iconRight
   ] });
   if (props.href !== void 0) {
-    const _a = props, { href, target, rel, onClick } = _a, rest = __objRest(_a, ["href", "target", "rel", "onClick"]);
+    const _a = props, {
+      variant: _v2,
+      size: _s2,
+      loading: _l2,
+      icon: _i2,
+      iconRight: _ir2,
+      children: _c2,
+      disabled: _d2,
+      className: _cn2,
+      href: href,
+      target,
+      rel,
+      onClick
+    } = _a, domRest2 = __objRest(_a, [
+      // strip internal/non-DOM props
+      "variant",
+      "size",
+      "loading",
+      "icon",
+      "iconRight",
+      "children",
+      "disabled",
+      "className",
+      // pull out anchor-specific that we set explicitly below
+      "href",
+      "target",
+      "rel",
+      "onClick"
+    ]);
     const safeRel = target === "_blank" ? rel != null ? rel : "noopener noreferrer" : rel;
     const handleClick = disabled || loading ? (e) => e.preventDefault() : onClick;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "a",
-      __spreadProps(__spreadValues({}, rest), {
+      __spreadProps(__spreadValues({}, domRest2), {
         href,
         target,
         rel: safeRel,
         className: rootClass,
         "aria-disabled": disabled || loading || void 0,
-        tabIndex: disabled || loading ? -1 : rest.tabIndex,
+        tabIndex: disabled || loading ? -1 : domRest2.tabIndex,
         onClick: handleClick,
         children: content
       })
     );
   }
-  const _b = props, { href: _href } = _b, buttonRest = __objRest(_b, ["href"]);
+  const _b = props, {
+    variant: _v,
+    size: _s,
+    loading: _l,
+    icon: _i,
+    iconRight: _ir,
+    children: _c,
+    disabled: _d,
+    className: _cn,
+    href: _href
+  } = _b, domRest = __objRest(_b, [
+    "variant",
+    "size",
+    "loading",
+    "icon",
+    "iconRight",
+    "children",
+    "disabled",
+    "className",
+    "href"
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
-    __spreadProps(__spreadValues({}, buttonRest), {
+    __spreadProps(__spreadValues({}, domRest), {
       className: rootClass,
       disabled: disabled || loading,
       children: content
@@ -941,27 +989,57 @@ function IconButton(props) {
   const isDisabled = variant === "disabled" || disabled;
   const rootClass = `${__default10.root} ${__default10[variant]}${isDisabled ? ` ${__default10.isDisabled}` : ""}${className ? ` ${className}` : ""}`;
   if (props.href !== void 0) {
-    const _a = props, { href, target, rel, onClick } = _a, rest = __objRest(_a, ["href", "target", "rel", "onClick"]);
+    const _a = props, {
+      icon: _i2,
+      variant: _v2,
+      className: _cn2,
+      disabled: _d2,
+      href,
+      target,
+      rel,
+      onClick
+    } = _a, domRest2 = __objRest(_a, [
+      "icon",
+      "variant",
+      "className",
+      "disabled",
+      "href",
+      "target",
+      "rel",
+      "onClick"
+    ]);
     const safeRel = target === "_blank" ? rel != null ? rel : "noopener noreferrer" : rel;
     const handleClick = isDisabled ? (e) => e.preventDefault() : onClick;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "a",
-      __spreadProps(__spreadValues({}, rest), {
+      __spreadProps(__spreadValues({}, domRest2), {
         href,
         target,
         rel: safeRel,
         className: rootClass,
         "aria-disabled": isDisabled || void 0,
-        tabIndex: isDisabled ? -1 : rest.tabIndex,
+        tabIndex: isDisabled ? -1 : domRest2.tabIndex,
         onClick: handleClick,
         children: icon
       })
     );
   }
-  const _b = props, { href: _href } = _b, buttonRest = __objRest(_b, ["href"]);
+  const _b = props, {
+    icon: _i,
+    variant: _v,
+    className: _cn,
+    disabled: _d,
+    href: _href
+  } = _b, domRest = __objRest(_b, [
+    "icon",
+    "variant",
+    "className",
+    "disabled",
+    "href"
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
-    __spreadProps(__spreadValues({}, buttonRest), {
+    __spreadProps(__spreadValues({}, domRest), {
       className: rootClass,
       disabled: isDisabled,
       children: icon
@@ -3327,19 +3405,35 @@ __styleInject(`@charset "UTF-8";
 .DropdownMenu-module_trigger {
   cursor: pointer;
   display: inline-flex;
+  /* div \u043F\u043E\u043B\u0443\u0447\u0430\u0435\u0442 focus \u043A\u0430\u043A role="button" \u2014 \u0432\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u0438\u0439 Button \u0443\u0436\u0435 \u0434\u0430\u0451\u0442 focus indicator. */
+}
+.DropdownMenu-module_trigger:focus, .DropdownMenu-module_trigger:focus-visible {
+  outline: none;
 }
 
+@keyframes DropdownMenu-module_dropdownEnter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 .DropdownMenu-module_menu {
   position: absolute;
   top: 100%;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
   z-index: 50;
-  border-radius: var(--radius-lg);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  border-radius: var(--radius-xl);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
   border: 1px solid var(--border-color);
   background: var(--bg);
-  min-width: 180px;
-  padding: 0.25rem 0;
+  min-width: 200px;
+  padding: 0.375rem;
+  animation: DropdownMenu-module_dropdownEnter 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top center;
 }
 
 .DropdownMenu-module_alignLeft {
@@ -3364,11 +3458,16 @@ __styleInject(`@charset "UTF-8";
   text-align: left;
   background: none;
   border: none;
+  border-radius: var(--radius-md);
 }
-.DropdownMenu-module_item:hover {
+.DropdownMenu-module_item:hover, .DropdownMenu-module_item:focus-visible {
+  outline: none;
   background: var(--bg-secondary);
   color: var(--fg);
 }
+.DropdownMenu-module_item:active {
+  background: var(--border-color);
+}
 
 .DropdownMenu-module_itemIcon {
   flex-shrink: 0;
@@ -3376,7 +3475,7 @@ __styleInject(`@charset "UTF-8";
 }
 
 .DropdownMenu-module_divider {
-  margin: 0.25rem 0;
+  margin: 0.375rem -0.375rem;
   border: none;
   border-top: 1px solid var(--border-color);
 }`);
@@ -4092,6 +4191,18 @@ __styleInject(`@charset "UTF-8";
   margin-bottom: 1.5rem;
 }
 
+/* Compact layout \u2014 logo \u0438 nav \u0432\u043F\u043B\u043E\u0442\u043D\u0443\u044E \u0441\u0432\u0435\u0440\u0445\u0443, footer \u043F\u0440\u0438\u0436\u0430\u0442 \u043A \u043D\u0438\u0437\u0443 */
+.Sidebar-module_compact {
+  justify-content: flex-start;
+  gap: 1rem;
+}
+.Sidebar-module_compact .Sidebar-module_logo {
+  margin-bottom: 0;
+}
+.Sidebar-module_compact .Sidebar-module_footer {
+  margin-top: auto;
+}
+
 .Sidebar-module_nav {
   display: flex;
   flex-direction: column;
@@ -4150,7 +4261,7 @@ __styleInject(`@charset "UTF-8";
     display: block;
   }
 }`);
-var __default47 = { "root": "Sidebar-module_root", "menu": "Sidebar-module_menu", "courseSubmenu": "Sidebar-module_courseSubmenu", "logo": "Sidebar-module_logo", "nav": "Sidebar-module_nav", "footer": "Sidebar-module_footer", "legal": "Sidebar-module_legal", "overlay": "Sidebar-module_overlay", "collapsed": "Sidebar-module_collapsed", "open": "Sidebar-module_open", "overlayVisible": "Sidebar-module_overlayVisible" };
+var __default47 = { "root": "Sidebar-module_root", "menu": "Sidebar-module_menu", "courseSubmenu": "Sidebar-module_courseSubmenu", "logo": "Sidebar-module_logo", "compact": "Sidebar-module_compact", "footer": "Sidebar-module_footer", "nav": "Sidebar-module_nav", "legal": "Sidebar-module_legal", "overlay": "Sidebar-module_overlay", "collapsed": "Sidebar-module_collapsed", "open": "Sidebar-module_open", "overlayVisible": "Sidebar-module_overlayVisible" };
 var defaultMenuItems = [
   "\u0413\u043B\u0430\u0432\u043D\u0430\u044F",
   "\u041C\u043E\u0438 \u043A\u0443\u0440\u0441\u044B",
@@ -4187,7 +4298,8 @@ function Sidebar({
   logo,
   legalText,
   collapsed,
-  onToggle
+  onToggle,
+  layout = "space-between"
 }) {
   const rawItems = menuItems || (type === "courseSubmenu" ? courseMenuItems : defaultMenuItems);
   const items = normaliseItems(rawItems);
@@ -4213,7 +4325,7 @@ function Sidebar({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
       {
-        className: `${__default47.root} ${widthClass}${collapseClasses ? ` ${collapseClasses}` : ""}${className ? ` ${className}` : ""}`,
+        className: `${__default47.root} ${widthClass}${layout === "compact" ? ` ${__default47.compact}` : ""}${collapseClasses ? ` ${collapseClasses}` : ""}${className ? ` ${className}` : ""}`,
         children: [
           logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: __default47.logo, children: logo }),
           /* @__PURE__ */ jsxRuntime.jsx("nav", { className: __default47.nav, children: items.map((item, i) => {

package/dist/index.d.cts

@@ -586,8 +586,14 @@ interface SidebarProps {
     collapsed?: boolean;
     /** Called when the user requests toggling the sidebar (e.g. clicking the overlay backdrop). */
     onToggle?: () => void;
+    /**
+     * Вертикальная раскладка детей.
+     * - `'space-between'` (default, BC) — logo / nav / footer распределены через `justify-content: space-between`.
+     * - `'compact'` — logo и nav сверху без зазора, footer прижимается к низу через `margin-top: auto`. Логотип теряет авто-`margin-bottom: 1.5rem`. Use-case: Select / site-switcher над nav.
+     */
+    layout?: 'space-between' | 'compact';
 }
-declare function Sidebar({ type, menuItems, footer, className, activeId, onItemClick, logo, legalText, collapsed, onToggle, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ type, menuItems, footer, className, activeId, onItemClick, logo, legalText, collapsed, onToggle, layout, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 type AppCardVariant = 'default' | 'stamp' | 'stamp-padded';
 interface AppCardProps {

package/dist/index.d.ts

@@ -586,8 +586,14 @@ interface SidebarProps {
     collapsed?: boolean;
     /** Called when the user requests toggling the sidebar (e.g. clicking the overlay backdrop). */
     onToggle?: () => void;
+    /**
+     * Вертикальная раскладка детей.
+     * - `'space-between'` (default, BC) — logo / nav / footer распределены через `justify-content: space-between`.
+     * - `'compact'` — logo и nav сверху без зазора, footer прижимается к низу через `margin-top: auto`. Логотип теряет авто-`margin-bottom: 1.5rem`. Use-case: Select / site-switcher над nav.
+     */
+    layout?: 'space-between' | 'compact';
 }
-declare function Sidebar({ type, menuItems, footer, className, activeId, onItemClick, logo, legalText, collapsed, onToggle, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ type, menuItems, footer, className, activeId, onItemClick, logo, legalText, collapsed, onToggle, layout, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 type AppCardVariant = 'default' | 'stamp' | 'stamp-padded';
 interface AppCardProps {

package/dist/index.js

@@ -266,27 +266,75 @@ function Button(props) {
     iconRight
   ] });
   if (props.href !== void 0) {
-    const _a = props, { href, target, rel, onClick } = _a, rest = __objRest(_a, ["href", "target", "rel", "onClick"]);
+    const _a = props, {
+      variant: _v2,
+      size: _s2,
+      loading: _l2,
+      icon: _i2,
+      iconRight: _ir2,
+      children: _c2,
+      disabled: _d2,
+      className: _cn2,
+      href: href,
+      target,
+      rel,
+      onClick
+    } = _a, domRest2 = __objRest(_a, [
+      // strip internal/non-DOM props
+      "variant",
+      "size",
+      "loading",
+      "icon",
+      "iconRight",
+      "children",
+      "disabled",
+      "className",
+      // pull out anchor-specific that we set explicitly below
+      "href",
+      "target",
+      "rel",
+      "onClick"
+    ]);
     const safeRel = target === "_blank" ? rel != null ? rel : "noopener noreferrer" : rel;
     const handleClick = disabled || loading ? (e) => e.preventDefault() : onClick;
     return /* @__PURE__ */ jsx(
       "a",
-      __spreadProps(__spreadValues({}, rest), {
+      __spreadProps(__spreadValues({}, domRest2), {
         href,
         target,
         rel: safeRel,
         className: rootClass,
         "aria-disabled": disabled || loading || void 0,
-        tabIndex: disabled || loading ? -1 : rest.tabIndex,
+        tabIndex: disabled || loading ? -1 : domRest2.tabIndex,
         onClick: handleClick,
         children: content
       })
     );
   }
-  const _b = props, { href: _href } = _b, buttonRest = __objRest(_b, ["href"]);
+  const _b = props, {
+    variant: _v,
+    size: _s,
+    loading: _l,
+    icon: _i,
+    iconRight: _ir,
+    children: _c,
+    disabled: _d,
+    className: _cn,
+    href: _href
+  } = _b, domRest = __objRest(_b, [
+    "variant",
+    "size",
+    "loading",
+    "icon",
+    "iconRight",
+    "children",
+    "disabled",
+    "className",
+    "href"
+  ]);
   return /* @__PURE__ */ jsx(
     "button",
-    __spreadProps(__spreadValues({}, buttonRest), {
+    __spreadProps(__spreadValues({}, domRest), {
       className: rootClass,
       disabled: disabled || loading,
       children: content
@@ -935,27 +983,57 @@ function IconButton(props) {
   const isDisabled = variant === "disabled" || disabled;
   const rootClass = `${__default10.root} ${__default10[variant]}${isDisabled ? ` ${__default10.isDisabled}` : ""}${className ? ` ${className}` : ""}`;
   if (props.href !== void 0) {
-    const _a = props, { href, target, rel, onClick } = _a, rest = __objRest(_a, ["href", "target", "rel", "onClick"]);
+    const _a = props, {
+      icon: _i2,
+      variant: _v2,
+      className: _cn2,
+      disabled: _d2,
+      href,
+      target,
+      rel,
+      onClick
+    } = _a, domRest2 = __objRest(_a, [
+      "icon",
+      "variant",
+      "className",
+      "disabled",
+      "href",
+      "target",
+      "rel",
+      "onClick"
+    ]);
     const safeRel = target === "_blank" ? rel != null ? rel : "noopener noreferrer" : rel;
     const handleClick = isDisabled ? (e) => e.preventDefault() : onClick;
     return /* @__PURE__ */ jsx(
       "a",
-      __spreadProps(__spreadValues({}, rest), {
+      __spreadProps(__spreadValues({}, domRest2), {
         href,
         target,
         rel: safeRel,
         className: rootClass,
         "aria-disabled": isDisabled || void 0,
-        tabIndex: isDisabled ? -1 : rest.tabIndex,
+        tabIndex: isDisabled ? -1 : domRest2.tabIndex,
         onClick: handleClick,
         children: icon
       })
     );
   }
-  const _b = props, { href: _href } = _b, buttonRest = __objRest(_b, ["href"]);
+  const _b = props, {
+    icon: _i,
+    variant: _v,
+    className: _cn,
+    disabled: _d,
+    href: _href
+  } = _b, domRest = __objRest(_b, [
+    "icon",
+    "variant",
+    "className",
+    "disabled",
+    "href"
+  ]);
   return /* @__PURE__ */ jsx(
     "button",
-    __spreadProps(__spreadValues({}, buttonRest), {
+    __spreadProps(__spreadValues({}, domRest), {
       className: rootClass,
       disabled: isDisabled,
       children: icon
@@ -3321,19 +3399,35 @@ __styleInject(`@charset "UTF-8";
 .DropdownMenu-module_trigger {
   cursor: pointer;
   display: inline-flex;
+  /* div \u043F\u043E\u043B\u0443\u0447\u0430\u0435\u0442 focus \u043A\u0430\u043A role="button" \u2014 \u0432\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u0438\u0439 Button \u0443\u0436\u0435 \u0434\u0430\u0451\u0442 focus indicator. */
+}
+.DropdownMenu-module_trigger:focus, .DropdownMenu-module_trigger:focus-visible {
+  outline: none;
 }
 
+@keyframes DropdownMenu-module_dropdownEnter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 .DropdownMenu-module_menu {
   position: absolute;
   top: 100%;
-  margin-top: 0.25rem;
+  margin-top: 0.5rem;
   z-index: 50;
-  border-radius: var(--radius-lg);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  border-radius: var(--radius-xl);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
   border: 1px solid var(--border-color);
   background: var(--bg);
-  min-width: 180px;
-  padding: 0.25rem 0;
+  min-width: 200px;
+  padding: 0.375rem;
+  animation: DropdownMenu-module_dropdownEnter 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top center;
 }
 
 .DropdownMenu-module_alignLeft {
@@ -3358,11 +3452,16 @@ __styleInject(`@charset "UTF-8";
   text-align: left;
   background: none;
   border: none;
+  border-radius: var(--radius-md);
 }
-.DropdownMenu-module_item:hover {
+.DropdownMenu-module_item:hover, .DropdownMenu-module_item:focus-visible {
+  outline: none;
   background: var(--bg-secondary);
   color: var(--fg);
 }
+.DropdownMenu-module_item:active {
+  background: var(--border-color);
+}
 
 .DropdownMenu-module_itemIcon {
   flex-shrink: 0;
@@ -3370,7 +3469,7 @@ __styleInject(`@charset "UTF-8";
 }
 
 .DropdownMenu-module_divider {
-  margin: 0.25rem 0;
+  margin: 0.375rem -0.375rem;
   border: none;
   border-top: 1px solid var(--border-color);
 }`);
@@ -4086,6 +4185,18 @@ __styleInject(`@charset "UTF-8";
   margin-bottom: 1.5rem;
 }
 
+/* Compact layout \u2014 logo \u0438 nav \u0432\u043F\u043B\u043E\u0442\u043D\u0443\u044E \u0441\u0432\u0435\u0440\u0445\u0443, footer \u043F\u0440\u0438\u0436\u0430\u0442 \u043A \u043D\u0438\u0437\u0443 */
+.Sidebar-module_compact {
+  justify-content: flex-start;
+  gap: 1rem;
+}
+.Sidebar-module_compact .Sidebar-module_logo {
+  margin-bottom: 0;
+}
+.Sidebar-module_compact .Sidebar-module_footer {
+  margin-top: auto;
+}
+
 .Sidebar-module_nav {
   display: flex;
   flex-direction: column;
@@ -4144,7 +4255,7 @@ __styleInject(`@charset "UTF-8";
     display: block;
   }
 }`);
-var __default47 = { "root": "Sidebar-module_root", "menu": "Sidebar-module_menu", "courseSubmenu": "Sidebar-module_courseSubmenu", "logo": "Sidebar-module_logo", "nav": "Sidebar-module_nav", "footer": "Sidebar-module_footer", "legal": "Sidebar-module_legal", "overlay": "Sidebar-module_overlay", "collapsed": "Sidebar-module_collapsed", "open": "Sidebar-module_open", "overlayVisible": "Sidebar-module_overlayVisible" };
+var __default47 = { "root": "Sidebar-module_root", "menu": "Sidebar-module_menu", "courseSubmenu": "Sidebar-module_courseSubmenu", "logo": "Sidebar-module_logo", "compact": "Sidebar-module_compact", "footer": "Sidebar-module_footer", "nav": "Sidebar-module_nav", "legal": "Sidebar-module_legal", "overlay": "Sidebar-module_overlay", "collapsed": "Sidebar-module_collapsed", "open": "Sidebar-module_open", "overlayVisible": "Sidebar-module_overlayVisible" };
 var defaultMenuItems = [
   "\u0413\u043B\u0430\u0432\u043D\u0430\u044F",
   "\u041C\u043E\u0438 \u043A\u0443\u0440\u0441\u044B",
@@ -4181,7 +4292,8 @@ function Sidebar({
   logo,
   legalText,
   collapsed,
-  onToggle
+  onToggle,
+  layout = "space-between"
 }) {
   const rawItems = menuItems || (type === "courseSubmenu" ? courseMenuItems : defaultMenuItems);
   const items = normaliseItems(rawItems);
@@ -4207,7 +4319,7 @@ function Sidebar({
     /* @__PURE__ */ jsxs(
       "aside",
       {
-        className: `${__default47.root} ${widthClass}${collapseClasses ? ` ${collapseClasses}` : ""}${className ? ` ${className}` : ""}`,
+        className: `${__default47.root} ${widthClass}${layout === "compact" ? ` ${__default47.compact}` : ""}${collapseClasses ? ` ${collapseClasses}` : ""}${className ? ` ${className}` : ""}`,
         children: [
           logo && /* @__PURE__ */ jsx("div", { className: __default47.logo, children: logo }),
           /* @__PURE__ */ jsx("nav", { className: __default47.nav, children: items.map((item, i) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmitriikapustin/ui",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Universal UI/UX Kit — React 19 component library with Atomic Design, CSS custom properties, and SCSS modules",
   "author": "Kapustin Team",
   "license": "MIT",