@unoff/ui 1.21.2 → 1.21.3

package/README.md

@@ -1,5 +1,5 @@
-![GitHub package.json version](https://img.shields.io/github/package-json/v/a-ng-d/unoff-ui?color=informational) ![GitHub last commit](https://img.shields.io/github/last-commit/a-ng-d/unoff-ui?color=informational) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/a-ng-d/unoff-ui/npm.yml?label=npm) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/a-ng-d/unoff-ui/chromatic.yml?label=Chromatic) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/a-ng-d/unoff-ui/deploy.yml?label=Deployment)
-![GitHub](https://img.shields.io/github/license/a-ng-d/unoff-ui?color=informational)
+![GitHub package.json version](https://img.shields.io/github/package-json/v/yelbolt/unoff-ui?color=informational) ![GitHub last commit](https://img.shields.io/github/last-commit/yelbolt/unoff-ui?color=informational) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/yelbolt/unoff-ui/npm.yml?label=npm) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/yelbolt/unoff-ui/chromatic.yml?label=Chromatic) ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/yelbolt/unoff-ui/deploy.yml?label=Deployment)
+![GitHub](https://img.shields.io/github/license/yelbolt/unoff-ui?color=informational)
 
 # Unoff UI
 

package/dist/assets/Bar.css

@@ -1 +1 @@
-@charset "UTF-8";:root[data-theme=penpot]{--bar-background-color: transparent;--bar-border-color: transparent;--bar-border-width: var(--size-null);--bar-gap: var(--size-pos-xxsmall);--bar-height-compact: var(--size-pos-medium);--bar-min-height: var(--size-pos-large);--bar-padding-default-bottom: var(--size-null);--bar-padding-default-left: var(--size-pos-xsmall);--bar-padding-default-right: var(--size-pos-xsmall);--bar-padding-default-top: var(--size-null);--bar-padding-mobile-bottom: var(--size-pos-xxxsmall);--bar-padding-mobile-left: var(--size-pos-xsmall);--bar-padding-mobile-right: var(--size-pos-xsmall);--bar-padding-mobile-top: var(--size-pos-xxxsmall)}:root[data-theme=sketch]{--bar-background-color: transparent;--bar-border-color: var(--sketch-color-border-primary);--bar-border-width: var(--size-pos-unit);--bar-gap: var(--size-pos-xxsmall);--bar-height-compact: var(--size-pos-medium);--bar-min-height: var(--size-pos-large);--bar-padding-default-bottom: var(--size-null);--bar-padding-default-left: var(--size-pos-xsmall);--bar-padding-default-right: var(--size-pos-xsmall);--bar-padding-default-top: var(--size-null);--bar-padding-mobile-bottom: var(--size-pos-xxxsmall);--bar-padding-mobile-left: var(--size-pos-xsmall);--bar-padding-mobile-right: var(--size-pos-xsmall);--bar-padding-mobile-top: var(--size-pos-xxxsmall)}:root[data-theme=figma]{--bar-background-color: transparent;--bar-border-color: var(--figma-color-border);--bar-border-width: var(--size-pos-unit);--bar-gap: var(--size-pos-xxsmall);--bar-height-compact: var(--size-pos-medium);--bar-min-height: var(--size-pos-large);--bar-padding-default-bottom: var(--size-null);--bar-padding-default-left: var(--size-pos-xsmall);--bar-padding-default-right: var(--size-pos-xsmall);--bar-padding-default-top: var(--size-null);--bar-padding-mobile-bottom: var(--size-pos-xxxsmall);--bar-padding-mobile-left: var(--size-pos-xsmall);--bar-padding-mobile-right: var(--size-pos-xsmall);--bar-padding-mobile-top: var(--size-pos-xxxsmall)}:root[data-theme=framer]{--bar-background-color: transparent;--bar-border-color: var(--framer-color-divider);--bar-border-width: var(--size-pos-unit);--bar-gap: var(--size-pos-xxsmall);--bar-height-compact: var(--size-pos-medium);--bar-min-height: var(--size-pos-xlarge);--bar-padding-default-bottom: var(--size-null);--bar-padding-default-left: var(--size-pos-xsmall);--bar-padding-default-right: var(--size-pos-xsmall);--bar-padding-default-top: var(--size-null);--bar-padding-mobile-bottom: var(--size-pos-xxxsmall);--bar-padding-mobile-left: var(--size-pos-xsmall);--bar-padding-mobile-right: var(--size-pos-xsmall);--bar-padding-mobile-top: var(--size-pos-xxxsmall)}.bar{display:flex;position:relative;justify-content:space-between;align-items:center;gap:var(--bar-gap);box-sizing:border-box;background-color:var(--bar-background-color);padding:var(--bar-padding);min-height:var(--bar-min-height)}.bar{--bar-padding: var(--bar-padding-default-top) var(--bar-padding-default-right) var(--bar-padding-default-bottom) var(--bar-padding-default-left)}.bar.bar--compact{height:var(--bar-height-compact)}.bar.bar--text-only{align-items:baseline}.bar.bar--centered .bar__left,.bar.bar--centered .bar__solo,.bar.bar--centered.bar--inverted .bar__right,.bar.bar--centered.bar--inverted .bar__solo{display:flex;justify-content:center}.bar__left{flex:1}.bar__right{flex:none}.bar__solo{flex:1}.bar.bar--inverted .bar__left{flex:none}.bar.bar--inverted .bar__right{flex:1}.bar.bar--clip-left .bar__left,.bar.bar--clip-right .bar__right,.bar.bar--clip-solo .bar__solo{overflow:hidden}@media(max-width:460px){.bar--reflow{flex-direction:column;--bar-padding: var(--bar-padding-mobile-top) var(--bar-padding-mobile-right) var(--bar-padding-mobile-bottom) var(--bar-padding-mobile-left)}}
+@charset "UTF-8";:root[data-theme=penpot]{--bar-background-color: transparent;--bar-border-color: transparent;--bar-border-width: var(--size-null);--bar-gap: var(--size-pos-xxsmall);--bar-height-compact: var(--size-pos-medium);--bar-min-height: var(--size-pos-large);--bar-padding-default-bottom: var(--size-null);--bar-padding-default-left: var(--size-pos-xsmall);--bar-padding-default-right: var(--size-pos-xsmall);--bar-padding-default-top: var(--size-null);--bar-padding-mobile-bottom: var(--size-pos-xxxsmall);--bar-padding-mobile-left: var(--size-pos-xsmall);--bar-padding-mobile-right: var(--size-pos-xsmall);--bar-padding-mobile-top: var(--size-pos-xxxsmall)}:root[data-theme=sketch]{--bar-background-color: transparent;--bar-border-color: var(--sketch-color-border-primary);--bar-border-width: var(--size-pos-unit);--bar-gap: var(--size-pos-xxsmall);--bar-height-compact: var(--size-pos-medium);--bar-min-height: var(--size-pos-large);--bar-padding-default-bottom: var(--size-null);--bar-padding-default-left: var(--size-pos-xsmall);--bar-padding-default-right: var(--size-pos-xsmall);--bar-padding-default-top: var(--size-null);--bar-padding-mobile-bottom: var(--size-pos-xxxsmall);--bar-padding-mobile-left: var(--size-pos-xsmall);--bar-padding-mobile-right: var(--size-pos-xsmall);--bar-padding-mobile-top: var(--size-pos-xxxsmall)}:root[data-theme=figma]{--bar-background-color: transparent;--bar-border-color: var(--figma-color-border);--bar-border-width: var(--size-pos-unit);--bar-gap: var(--size-pos-xxsmall);--bar-height-compact: var(--size-pos-medium);--bar-min-height: var(--size-pos-large);--bar-padding-default-bottom: var(--size-null);--bar-padding-default-left: var(--size-pos-xsmall);--bar-padding-default-right: var(--size-pos-xsmall);--bar-padding-default-top: var(--size-null);--bar-padding-mobile-bottom: var(--size-pos-xxxsmall);--bar-padding-mobile-left: var(--size-pos-xsmall);--bar-padding-mobile-right: var(--size-pos-xsmall);--bar-padding-mobile-top: var(--size-pos-xxxsmall)}:root[data-theme=framer]{--bar-background-color: transparent;--bar-border-color: var(--framer-color-divider);--bar-border-width: var(--size-pos-unit);--bar-gap: var(--size-pos-xxsmall);--bar-height-compact: var(--size-pos-medium);--bar-min-height: var(--size-pos-xlarge);--bar-padding-default-bottom: var(--size-null);--bar-padding-default-left: var(--size-pos-xsmall);--bar-padding-default-right: var(--size-pos-xsmall);--bar-padding-default-top: var(--size-null);--bar-padding-mobile-bottom: var(--size-pos-xxxsmall);--bar-padding-mobile-left: var(--size-pos-xsmall);--bar-padding-mobile-right: var(--size-pos-xsmall);--bar-padding-mobile-top: var(--size-pos-xxxsmall)}.bar{display:flex;position:relative;justify-content:space-between;align-items:center;gap:var(--bar-gap);box-sizing:border-box;background-color:var(--bar-background-color);padding:var(--bar-padding);min-height:var(--bar-min-height)}.bar{--bar-padding: var(--bar-padding-default-top) var(--bar-padding-default-right) var(--bar-padding-default-bottom) var(--bar-padding-default-left)}.bar.bar--compact{height:var(--bar-height-compact)}.bar.bar--text-only{align-items:baseline}.bar.bar--centered .bar__left,.bar.bar--centered .bar__solo,.bar.bar--centered.bar--inverted .bar__right,.bar.bar--centered.bar--inverted .bar__solo{display:flex;justify-content:center}.bar__left{flex:1}.bar__right{flex:none}.bar__solo{flex:1}.bar.bar--inverted .bar__left{flex:none}.bar.bar--inverted .bar__right{flex:1}.bar.bar--clip-left .bar__left,.bar.bar--clip-right .bar__right,.bar.bar--clip-solo .bar__solo{overflow:hidden}.bar.bar--vertical{flex-direction:column;align-items:stretch;min-height:unset;min-width:var(--bar-min-height)}.bar.bar--vertical{--bar-padding: var(--bar-padding-default-left) var(--bar-padding-default-top) var(--bar-padding-default-right) var(--bar-padding-default-bottom)}.bar.bar--vertical .bar__left{flex:1}.bar.bar--vertical .bar__right{flex:none}.bar.bar--vertical .bar__solo{flex:1}.bar.bar--vertical.bar--inverted .bar__left{flex:none}.bar.bar--vertical.bar--inverted .bar__right{flex:1}.bar.bar--vertical.bar--centered .bar__left,.bar.bar--vertical.bar--centered .bar__solo,.bar.bar--vertical.bar--centered.bar--inverted .bar__right,.bar.bar--vertical.bar--centered.bar--inverted .bar__solo{display:flex;align-items:center}@media(max-width:460px){.bar--reflow{flex-direction:column;--bar-padding: var(--bar-padding-mobile-top) var(--bar-padding-mobile-right) var(--bar-padding-mobile-bottom) var(--bar-padding-mobile-left)}.bar--reflow.bar--vertical{--bar-padding: var(--bar-padding-mobile-left) var(--bar-padding-mobile-top) var(--bar-padding-mobile-right) var(--bar-padding-mobile-bottom)}}

package/dist/components/slots/bar/Bar.d.ts

@@ -53,6 +53,11 @@ export interface BarProps {
      * @default false
      */
     shouldReflow?: boolean;
+    /**
+     * Whether to use a vertical (column) layout
+     * @default false
+     */
+    isVertical?: boolean;
 }
 export default class Bar extends React.Component<BarProps> {
     static defaultProps: Partial<BarProps>;

package/dist/components/slots/bar/Bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAMrC;IAED,SAAS,GACP,aAAa,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,SAAS;;MAcpE;IAED,MAAM;CA+EP"}
+{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAOrC;IAED,SAAS,GACP,aAAa,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,SAAS;;MAcpE;IAED,MAAM;CAiFP"}

package/dist/components/slots/bar/Bar.js

@@ -1,19 +1,20 @@
 import '../../../assets/Bar.css';
-import { jsx as t, jsxs as v } from "react/jsx-runtime";
-import T from "react";
-import { t as g } from "../../../do-classnames-DSDFCvzy.js";
-class C extends T.Component {
+import { jsx as t, jsxs as T } from "react/jsx-runtime";
+import g from "react";
+import { t as x } from "../../../do-classnames-DSDFCvzy.js";
+class N extends g.Component {
   static defaultProps = {
     isCompact: !1,
     isOnlyText: !1,
     isInverted: !1,
     isCentered: !1,
-    shouldReflow: !1
+    shouldReflow: !1,
+    isVertical: !1
   };
   setBorder = (s) => {
     const e = "var(--bar-border-width) solid var(--bar-border-color)", r = {};
-    return s && s.forEach((o) => {
-      o === "TOP" && (r.borderTop = e), o === "LEFT" && (r.borderLeft = e), o === "BOTTOM" && (r.borderBottom = e), o === "RIGHT" && (r.borderRight = e);
+    return s && s.forEach((l) => {
+      l === "TOP" && (r.borderTop = e), l === "LEFT" && (r.borderLeft = e), l === "BOTTOM" && (r.borderBottom = e), l === "RIGHT" && (r.borderRight = e);
     }), r;
   };
   render() {
@@ -21,27 +22,29 @@ class C extends T.Component {
       id: s,
       isCompact: e,
       isOnlyText: r,
-      isInverted: o,
+      isInverted: l,
       isCentered: p,
       shouldReflow: h,
+      isVertical: u,
       border: c,
       padding: n,
-      clip: l,
+      clip: o,
       leftPartSlot: a,
       soloPartSlot: i,
       rightPartSlot: d
-    } = this.props, f = i != null, u = a != null, m = d != null;
-    if (!f && !u && !m) return null;
-    const b = g([
+    } = this.props, f = i != null, m = a != null, v = d != null;
+    if (!f && !m && !v) return null;
+    const b = x([
       "bar",
       e && "bar--compact",
       r && "bar--text-only",
-      o && "bar--inverted",
+      l && "bar--inverted",
       p && "bar--centered",
       h && "bar--reflow",
-      l && l.includes("LEFT") && "bar--clip-left",
-      l && l.includes("RIGHT") && "bar--clip-right",
-      l && l.includes("SOLO") && "bar--clip-solo"
+      u && "bar--vertical",
+      o && o.includes("LEFT") && "bar--clip-left",
+      o && o.includes("RIGHT") && "bar--clip-right",
+      o && o.includes("SOLO") && "bar--clip-solo"
     ]);
     return f ? /* @__PURE__ */ t(
       "div",
@@ -62,7 +65,7 @@ class C extends T.Component {
           }
         )
       }
-    ) : /* @__PURE__ */ v(
+    ) : /* @__PURE__ */ T(
       "div",
       {
         id: s,
@@ -95,6 +98,6 @@ class C extends T.Component {
   }
 }
 export {
-  C as default
+  N as default
 };
 //# sourceMappingURL=Bar.js.map

package/dist/components/slots/bar/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","sources":["../../../../src/components/slots/bar/Bar.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport './bar.scss'\n\nexport interface BarProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Content for the left section\n   */\n  leftPartSlot?: React.ReactElement | null\n  /**\n   * Content for the center section (when used alone)\n   */\n  soloPartSlot?: React.ReactElement | null\n  /**\n   * Content for the right section\n   */\n  rightPartSlot?: React.ReactElement | null\n  /**\n   * Array of border positions\n   */\n  border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>\n  /**\n   * Array of clip positions (for visual effects)\n   */\n  clip?: Array<'LEFT' | 'RIGHT' | 'SOLO'>\n  /**\n   * Custom padding value\n   */\n  padding?: string\n  /**\n   * Whether to use compact spacing\n   * @default false\n   */\n  isCompact?: boolean\n  /**\n   * Whether the bar contains only text\n   * @default false\n   */\n  isOnlyText?: boolean\n  /**\n   * Whether to use inverted color scheme\n   * @default false\n   */\n  isInverted?: boolean\n  /**\n   * Whether to center the content\n   * @default false\n   */\n  isCentered?: boolean\n  /**\n   * Whether to reflow on small screens\n   * @default false\n   */\n  shouldReflow?: boolean\n}\n\nexport default class Bar extends React.Component<BarProps> {\n  static defaultProps: Partial<BarProps> = {\n    isCompact: false,\n    isOnlyText: false,\n    isInverted: false,\n    isCentered: false,\n    shouldReflow: false,\n  }\n\n  setBorder = (\n    orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined\n  ) => {\n    const property =\n      'var(--bar-border-width) solid var(--bar-border-color)' as React.CSSProperties\n    const styles: { [key: string]: React.CSSProperties } = {}\n\n    if (!orientation) return styles\n    orientation.forEach((entry) => {\n      if (entry === 'TOP') styles.borderTop = property\n      if (entry === 'LEFT') styles.borderLeft = property\n      if (entry === 'BOTTOM') styles.borderBottom = property\n      if (entry === 'RIGHT') styles.borderRight = property\n    })\n    return styles\n  }\n\n  render() {\n    const {\n      id,\n      isCompact,\n      isOnlyText,\n      isInverted,\n      isCentered,\n      shouldReflow,\n      border,\n      padding,\n      clip,\n      leftPartSlot,\n      soloPartSlot,\n      rightPartSlot,\n    } = this.props\n\n    const hasValidSolo = soloPartSlot !== undefined && soloPartSlot !== null\n    const hasValidLeft = leftPartSlot !== undefined && leftPartSlot !== null\n    const hasValidRight = rightPartSlot !== undefined && rightPartSlot !== null\n\n    if (!hasValidSolo && !hasValidLeft && !hasValidRight) return null\n\n    const barClassName = doClassnames([\n      'bar',\n      isCompact && 'bar--compact',\n      isOnlyText && 'bar--text-only',\n      isInverted && 'bar--inverted',\n      isCentered && 'bar--centered',\n      shouldReflow && 'bar--reflow',\n      clip && clip.includes('LEFT') && 'bar--clip-left',\n      clip && clip.includes('RIGHT') && 'bar--clip-right',\n      clip && clip.includes('SOLO') && 'bar--clip-solo',\n    ])\n\n    if (hasValidSolo)\n      return (\n        <div\n          id={id}\n          className={barClassName}\n          style={{\n            ...this.setBorder(border),\n            padding: padding,\n          }}\n          role=\"toolbar\"\n        >\n          <div\n            className=\"bar__solo\"\n            role=\"group\"\n          >\n            {soloPartSlot}\n          </div>\n        </div>\n      )\n\n    return (\n      <div\n        id={id}\n        className={barClassName}\n        style={{\n          ...this.setBorder(border),\n          padding: padding,\n        }}\n        role=\"toolbar\"\n      >\n        <div\n          className=\"bar__left\"\n          role=\"group\"\n        >\n          {leftPartSlot}\n        </div>\n        <div\n          className=\"bar__right\"\n          role=\"group\"\n        >\n          {rightPartSlot}\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["Bar","React","orientation","property","styles","entry","id","isCompact","isOnlyText","isInverted","isCentered","shouldReflow","border","padding","clip","leftPartSlot","soloPartSlot","rightPartSlot","hasValidSolo","hasValidLeft","hasValidRight","barClassName","doClassnames","jsx","jsxs"],"mappings":";;;AA4DA,MAAqBA,UAAYC,EAAM,UAAoB;AAAA,EACzD,OAAO,eAAkC;AAAA,IACvC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAAA;AAAA,EAGhB,YAAY,CACVC,MACG;AACH,UAAMC,IACJ,yDACIC,IAAiD,CAAA;AAEvD,WAAKF,KACLA,EAAY,QAAQ,CAACG,MAAU;AAC7B,MAAIA,MAAU,UAAOD,EAAO,YAAYD,IACpCE,MAAU,WAAQD,EAAO,aAAaD,IACtCE,MAAU,aAAUD,EAAO,eAAeD,IAC1CE,MAAU,YAASD,EAAO,cAAcD;AAAA,IAC9C,CAAC,GACMC;AAAA,EACT;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,IAAAE;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,IAAA,IACE,KAAK,OAEHC,IAA6CF,KAAiB,MAC9DG,IAA6CJ,KAAiB,MAC9DK,IAA+CH,KAAkB;AAEvE,QAAI,CAACC,KAAgB,CAACC,KAAgB,CAACC,EAAe,QAAO;AAE7D,UAAMC,IAAeC,EAAa;AAAA,MAChC;AAAA,MACAf,KAAa;AAAA,MACbC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAgB;AAAA,MAChBG,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,MACjCA,KAAQA,EAAK,SAAS,OAAO,KAAK;AAAA,MAClCA,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,IAAA,CAClC;AAED,WAAII,IAEA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAjB;AAAA,QACA,WAAWe;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,IAKJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAlB;AAAA,QACA,WAAWe;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"Bar.js","sources":["../../../../src/components/slots/bar/Bar.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport './bar.scss'\n\nexport interface BarProps {\n  /**\n   * HTML id attribute\n   */\n  id?: string\n  /**\n   * Content for the left section\n   */\n  leftPartSlot?: React.ReactElement | null\n  /**\n   * Content for the center section (when used alone)\n   */\n  soloPartSlot?: React.ReactElement | null\n  /**\n   * Content for the right section\n   */\n  rightPartSlot?: React.ReactElement | null\n  /**\n   * Array of border positions\n   */\n  border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>\n  /**\n   * Array of clip positions (for visual effects)\n   */\n  clip?: Array<'LEFT' | 'RIGHT' | 'SOLO'>\n  /**\n   * Custom padding value\n   */\n  padding?: string\n  /**\n   * Whether to use compact spacing\n   * @default false\n   */\n  isCompact?: boolean\n  /**\n   * Whether the bar contains only text\n   * @default false\n   */\n  isOnlyText?: boolean\n  /**\n   * Whether to use inverted color scheme\n   * @default false\n   */\n  isInverted?: boolean\n  /**\n   * Whether to center the content\n   * @default false\n   */\n  isCentered?: boolean\n  /**\n   * Whether to reflow on small screens\n   * @default false\n   */\n  shouldReflow?: boolean\n  /**\n   * Whether to use a vertical (column) layout\n   * @default false\n   */\n  isVertical?: boolean\n}\n\nexport default class Bar extends React.Component<BarProps> {\n  static defaultProps: Partial<BarProps> = {\n    isCompact: false,\n    isOnlyText: false,\n    isInverted: false,\n    isCentered: false,\n    shouldReflow: false,\n    isVertical: false,\n  }\n\n  setBorder = (\n    orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined\n  ) => {\n    const property =\n      'var(--bar-border-width) solid var(--bar-border-color)' as React.CSSProperties\n    const styles: { [key: string]: React.CSSProperties } = {}\n\n    if (!orientation) return styles\n    orientation.forEach((entry) => {\n      if (entry === 'TOP') styles.borderTop = property\n      if (entry === 'LEFT') styles.borderLeft = property\n      if (entry === 'BOTTOM') styles.borderBottom = property\n      if (entry === 'RIGHT') styles.borderRight = property\n    })\n    return styles\n  }\n\n  render() {\n    const {\n      id,\n      isCompact,\n      isOnlyText,\n      isInverted,\n      isCentered,\n      shouldReflow,\n      isVertical,\n      border,\n      padding,\n      clip,\n      leftPartSlot,\n      soloPartSlot,\n      rightPartSlot,\n    } = this.props\n\n    const hasValidSolo = soloPartSlot !== undefined && soloPartSlot !== null\n    const hasValidLeft = leftPartSlot !== undefined && leftPartSlot !== null\n    const hasValidRight = rightPartSlot !== undefined && rightPartSlot !== null\n\n    if (!hasValidSolo && !hasValidLeft && !hasValidRight) return null\n\n    const barClassName = doClassnames([\n      'bar',\n      isCompact && 'bar--compact',\n      isOnlyText && 'bar--text-only',\n      isInverted && 'bar--inverted',\n      isCentered && 'bar--centered',\n      shouldReflow && 'bar--reflow',\n      isVertical && 'bar--vertical',\n      clip && clip.includes('LEFT') && 'bar--clip-left',\n      clip && clip.includes('RIGHT') && 'bar--clip-right',\n      clip && clip.includes('SOLO') && 'bar--clip-solo',\n    ])\n\n    if (hasValidSolo)\n      return (\n        <div\n          id={id}\n          className={barClassName}\n          style={{\n            ...this.setBorder(border),\n            padding: padding,\n          }}\n          role=\"toolbar\"\n        >\n          <div\n            className=\"bar__solo\"\n            role=\"group\"\n          >\n            {soloPartSlot}\n          </div>\n        </div>\n      )\n\n    return (\n      <div\n        id={id}\n        className={barClassName}\n        style={{\n          ...this.setBorder(border),\n          padding: padding,\n        }}\n        role=\"toolbar\"\n      >\n        <div\n          className=\"bar__left\"\n          role=\"group\"\n        >\n          {leftPartSlot}\n        </div>\n        <div\n          className=\"bar__right\"\n          role=\"group\"\n        >\n          {rightPartSlot}\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["Bar","React","orientation","property","styles","entry","id","isCompact","isOnlyText","isInverted","isCentered","shouldReflow","isVertical","border","padding","clip","leftPartSlot","soloPartSlot","rightPartSlot","hasValidSolo","hasValidLeft","hasValidRight","barClassName","doClassnames","jsx","jsxs"],"mappings":";;;AAiEA,MAAqBA,UAAYC,EAAM,UAAoB;AAAA,EACzD,OAAO,eAAkC;AAAA,IACvC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,YAAY;AAAA,EAAA;AAAA,EAGd,YAAY,CACVC,MACG;AACH,UAAMC,IACJ,yDACIC,IAAiD,CAAA;AAEvD,WAAKF,KACLA,EAAY,QAAQ,CAACG,MAAU;AAC7B,MAAIA,MAAU,UAAOD,EAAO,YAAYD,IACpCE,MAAU,WAAQD,EAAO,aAAaD,IACtCE,MAAU,aAAUD,EAAO,eAAeD,IAC1CE,MAAU,YAASD,EAAO,cAAcD;AAAA,IAC9C,CAAC,GACMC;AAAA,EACT;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,IAAAE;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,MACA,YAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,IAAA,IACE,KAAK,OAEHC,IAA6CF,KAAiB,MAC9DG,IAA6CJ,KAAiB,MAC9DK,IAA+CH,KAAkB;AAEvE,QAAI,CAACC,KAAgB,CAACC,KAAgB,CAACC,EAAe,QAAO;AAE7D,UAAMC,IAAeC,EAAa;AAAA,MAChC;AAAA,MACAhB,KAAa;AAAA,MACbC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAgB;AAAA,MAChBC,KAAc;AAAA,MACdG,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,MACjCA,KAAQA,EAAK,SAAS,OAAO,KAAK;AAAA,MAClCA,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,IAAA,CAClC;AAED,WAAII,IAEA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAlB;AAAA,QACA,WAAWgB;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,IAKJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAnB;AAAA,QACA,WAAWgB;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@unoff/ui",
-  "version": "1.21.2",
+  "version": "1.21.3",
   "type": "module",
   "description": "Unoff UI is a comprehensive library of UI components designed specifically for building Figma and Penpot plugins. It leverages modern tools and frameworks to ensure a seamless development experience.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/a-ng-d/unoff-ui.git"
+    "url": "git+https://github.com/yelbolt/unoff-ui.git"
   },
   "keywords": [
     "library",
@@ -15,9 +15,9 @@
   "author": "Aurélien Grimaud",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/a-ng-d/unoff-ui/issues"
+    "url": "https://github.com/yelbolt/unoff-ui/issues"
   },
-  "homepage": "https://github.com/a-ng-d/unoff-ui#readme",
+  "homepage": "https://github.com/yelbolt/unoff-ui#readme",
   "overrides": {
     "storybook": "$storybook",
     "vite": "$vite",