@konstructio/ui 0.1.2-alpha.67 → 0.1.2-alpha.69

package/dist/assets/icons/index.js

@@ -4,65 +4,66 @@ import { AlertOutlineIcon as p } from "./components/AlertOutline.js";
 import { AppRepoIcon as f } from "./components/AppRepo.js";
 import { AppsIcon as x } from "./components/Apps.js";
 import { ArchivesIcon as l } from "./components/Archives.js";
-import { ArrowDownIcon as s } from "./components/ArrowDown.js";
+import { ArrowDownIcon as C } from "./components/ArrowDown.js";
 import { ArrowLeftIcon as u } from "./components/ArrowLeft.js";
-import { ArrowRightIcon as h } from "./components/ArrowRight.js";
-import { ArrowUpIcon as d } from "./components/ArrowUp.js";
-import { BarChartIcon as P } from "./components/BarChart.js";
+import { ArrowRightIcon as d } from "./components/ArrowRight.js";
+import { ArrowUpIcon as A } from "./components/ArrowUp.js";
+import { BarChartIcon as O } from "./components/BarChart.js";
 import { BookOpenIcon as k } from "./components/BookOpen.js";
-import { CalendarMonthIcon as v } from "./components/CalendarMonth.js";
-import { CheckCircleIcon as L } from "./components/CheckCircle.js";
+import { CalendarMonthIcon as S } from "./components/CalendarMonth.js";
+import { CheckCircleIcon as E } from "./components/CheckCircle.js";
 import { CheckIcon as b } from "./components/Check.js";
 import { ClockAlertIcon as y } from "./components/ClockAlert.js";
 import { ClockOutlineIcon as G } from "./components/ClockOutline.js";
 import { CloseIcon as N } from "./components/Close.js";
 import { CloudIcon as K } from "./components/Cloud.js";
-import { ClustersIcon as U } from "./components/Clusters.js";
-import { CogOutlineIcon as W } from "./components/CogOutline.js";
-import { CopyIcon as j } from "./components/Copy.js";
-import { CpuIcon as z } from "./components/Cpu.js";
-import { CubeIcon as J } from "./components/Cube.js";
-import { DatacenterIcon as Y } from "./components/Datacenter.js";
-import { DeleteIcon as _ } from "./components/Delete.js";
-import { DollarSignIcon as oo } from "./components/DollarSign.js";
-import { DownloadIcon as eo } from "./components/Download.js";
-import { EditIcon as no } from "./components/Edit.js";
-import { EllipsesIcon as po } from "./components/Ellipses.js";
-import { EnvironmentsIcon as fo } from "./components/Environments.js";
-import { ErrorIcon as xo } from "./components/Error.js";
-import { ErrorOutlineIcon as lo } from "./components/ErrorOutline.js";
-import { ExclamationIcon as so } from "./components/Exclamation.js";
-import { GitIcon as uo } from "./components/Git.js";
-import { GitOpsCatalogIcon as ho } from "./components/GitOpsCatalog.js";
-import { GridViewIcon as go } from "./components/GridView.js";
-import { HelpIcon as Oo } from "./components/Help.js";
-import { HideOutlineIcon as So } from "./components/HideOutline.js";
-import { HomeIcon as Eo } from "./components/Home.js";
-import { IdIcon as Do } from "./components/Id.js";
-import { InformationOutlineIcon as Ro } from "./components/InformationOutline.js";
-import { InvoiceListIcon as Bo } from "./components/InvoiceList.js";
-import { KeyIcon as Ho } from "./components/Key.js";
-import { LightBulbIcon as To } from "./components/LightBulb.js";
-import { LoaderIcon as Mo } from "./components/Loader.js";
-import { NetworkIcon as Vo } from "./components/Network.js";
-import { PagesStackIcon as Xo } from "./components/PagesStack.js";
-import { PageviewIcon as qo } from "./components/Pageview.js";
-import { PeopleIcon as Fo } from "./components/People.js";
-import { PhotoLibraryIcon as Qo } from "./components/PhotoLibrary.js";
-import { PipelineIcon as Zo } from "./components/Pipeline.js";
-import { PlusIcon as $o } from "./components/Plus.js";
-import { PowerSettingsIcon as rr } from "./components/PowerSettings.js";
-import { PreviewIcon as tr } from "./components/Preview.js";
-import { ReceiptLongIcon as cr } from "./components/ReceiptLong.js";
-import { RefreshIcon as mr } from "./components/Refresh.js";
-import { ScatterPlotIcon as Ir } from "./components/ScatterPlot.js";
-import { SearchIcon as ir } from "./components/Search.js";
-import { ServerIcon as ar } from "./components/Server.js";
-import { StartIcon as Cr } from "./components/Start.js";
-import { TabNewIcon as wr } from "./components/TabNew.js";
-import { TeamsIcon as Ar } from "./components/Teams.js";
-import { WarningIcon as gr } from "./components/Warning.js";
-import { XIcon as Or } from "./components/X.js";
+import { CloudLockOutlineIcon as U } from "./components/CloudLockOutline.js";
+import { ClustersIcon as W } from "./components/Clusters.js";
+import { CogOutlineIcon as j } from "./components/CogOutline.js";
+import { CopyIcon as z } from "./components/Copy.js";
+import { CpuIcon as J } from "./components/Cpu.js";
+import { CubeIcon as Y } from "./components/Cube.js";
+import { DatacenterIcon as _ } from "./components/Datacenter.js";
+import { DeleteIcon as oo } from "./components/Delete.js";
+import { DollarSignIcon as eo } from "./components/DollarSign.js";
+import { DownloadIcon as no } from "./components/Download.js";
+import { EditIcon as po } from "./components/Edit.js";
+import { EllipsesIcon as fo } from "./components/Ellipses.js";
+import { EnvironmentsIcon as xo } from "./components/Environments.js";
+import { ErrorIcon as lo } from "./components/Error.js";
+import { ErrorOutlineIcon as Co } from "./components/ErrorOutline.js";
+import { ExclamationIcon as uo } from "./components/Exclamation.js";
+import { GitIcon as ho } from "./components/Git.js";
+import { GitOpsCatalogIcon as go } from "./components/GitOpsCatalog.js";
+import { GridViewIcon as Po } from "./components/GridView.js";
+import { HelpIcon as Lo } from "./components/Help.js";
+import { HideOutlineIcon as vo } from "./components/HideOutline.js";
+import { HomeIcon as Do } from "./components/Home.js";
+import { IdIcon as Ro } from "./components/Id.js";
+import { InformationOutlineIcon as Bo } from "./components/InformationOutline.js";
+import { InvoiceListIcon as Ho } from "./components/InvoiceList.js";
+import { KeyIcon as To } from "./components/Key.js";
+import { LightBulbIcon as Mo } from "./components/LightBulb.js";
+import { LoaderIcon as Vo } from "./components/Loader.js";
+import { NetworkIcon as Xo } from "./components/Network.js";
+import { PagesStackIcon as qo } from "./components/PagesStack.js";
+import { PageviewIcon as Fo } from "./components/Pageview.js";
+import { PeopleIcon as Qo } from "./components/People.js";
+import { PhotoLibraryIcon as Zo } from "./components/PhotoLibrary.js";
+import { PipelineIcon as $o } from "./components/Pipeline.js";
+import { PlusIcon as rr } from "./components/Plus.js";
+import { PowerSettingsIcon as tr } from "./components/PowerSettings.js";
+import { PreviewIcon as cr } from "./components/Preview.js";
+import { ReceiptLongIcon as mr } from "./components/ReceiptLong.js";
+import { RefreshIcon as Ir } from "./components/Refresh.js";
+import { ScatterPlotIcon as ir } from "./components/ScatterPlot.js";
+import { SearchIcon as ar } from "./components/Search.js";
+import { ServerIcon as sr } from "./components/Server.js";
+import { StartIcon as wr } from "./components/Start.js";
+import { TabNewIcon as hr } from "./components/TabNew.js";
+import { TeamsIcon as gr } from "./components/Teams.js";
+import { WarningIcon as Pr } from "./components/Warning.js";
+import { XIcon as Lr } from "./components/X.js";
 export {
   e as AccountsIcon,
   n as AddChartIcon,
@@ -70,63 +71,64 @@ export {
   f as AppRepoIcon,
   x as AppsIcon,
   l as ArchivesIcon,
-  s as ArrowDownIcon,
+  C as ArrowDownIcon,
   u as ArrowLeftIcon,
-  h as ArrowRightIcon,
-  d as ArrowUpIcon,
-  P as BarChartIcon,
+  d as ArrowRightIcon,
+  A as ArrowUpIcon,
+  O as BarChartIcon,
   k as BookOpenIcon,
-  v as CalendarMonthIcon,
-  L as CheckCircleIcon,
+  S as CalendarMonthIcon,
+  E as CheckCircleIcon,
   b as CheckIcon,
   y as ClockAlertIcon,
   G as ClockOutlineIcon,
   N as CloseIcon,
   K as CloudIcon,
-  U as ClustersIcon,
-  W as CogOutlineIcon,
-  j as CopyIcon,
-  z as CpuIcon,
-  J as CubeIcon,
-  Y as DatacenterIcon,
-  _ as DeleteIcon,
-  oo as DollarSignIcon,
-  eo as DownloadIcon,
-  no as EditIcon,
-  po as EllipsesIcon,
-  fo as EnvironmentsIcon,
-  xo as ErrorIcon,
-  lo as ErrorOutlineIcon,
-  so as ExclamationIcon,
-  uo as GitIcon,
-  ho as GitOpsCatalogIcon,
-  go as GridViewIcon,
-  Oo as HelpIcon,
-  So as HideOutlineIcon,
-  Eo as HomeIcon,
-  Do as IdIcon,
-  Ro as InformationOutlineIcon,
-  Bo as InvoiceListIcon,
-  Ho as KeyIcon,
-  To as LightBulbIcon,
-  Mo as LoaderIcon,
-  Vo as NetworkIcon,
-  Xo as PagesStackIcon,
-  qo as PageviewIcon,
-  Fo as PeopleIcon,
-  Qo as PhotoLibraryIcon,
-  Zo as PipelineIcon,
-  $o as PlusIcon,
-  rr as PowerSettingsIcon,
-  tr as PreviewIcon,
-  cr as ReceiptLongIcon,
-  mr as RefreshIcon,
-  Ir as ScatterPlotIcon,
-  ir as SearchIcon,
-  ar as ServerIcon,
-  Cr as StartIcon,
-  wr as TabNewIcon,
-  Ar as TeamsIcon,
-  gr as WarningIcon,
-  Or as XIcon
+  U as CloudLockOutlineIcon,
+  W as ClustersIcon,
+  j as CogOutlineIcon,
+  z as CopyIcon,
+  J as CpuIcon,
+  Y as CubeIcon,
+  _ as DatacenterIcon,
+  oo as DeleteIcon,
+  eo as DollarSignIcon,
+  no as DownloadIcon,
+  po as EditIcon,
+  fo as EllipsesIcon,
+  xo as EnvironmentsIcon,
+  lo as ErrorIcon,
+  Co as ErrorOutlineIcon,
+  uo as ExclamationIcon,
+  ho as GitIcon,
+  go as GitOpsCatalogIcon,
+  Po as GridViewIcon,
+  Lo as HelpIcon,
+  vo as HideOutlineIcon,
+  Do as HomeIcon,
+  Ro as IdIcon,
+  Bo as InformationOutlineIcon,
+  Ho as InvoiceListIcon,
+  To as KeyIcon,
+  Mo as LightBulbIcon,
+  Vo as LoaderIcon,
+  Xo as NetworkIcon,
+  qo as PagesStackIcon,
+  Fo as PageviewIcon,
+  Qo as PeopleIcon,
+  Zo as PhotoLibraryIcon,
+  $o as PipelineIcon,
+  rr as PlusIcon,
+  tr as PowerSettingsIcon,
+  cr as PreviewIcon,
+  mr as ReceiptLongIcon,
+  Ir as RefreshIcon,
+  ir as ScatterPlotIcon,
+  ar as SearchIcon,
+  sr as ServerIcon,
+  wr as StartIcon,
+  hr as TabNewIcon,
+  gr as TeamsIcon,
+  Pr as WarningIcon,
+  Lr as XIcon
 };

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,83 +1,85 @@
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { useMemo as W } from "react";
+import { useMemo as q } from "react";
 import { cn as n } from "../../utils/index.js";
-import { buttonGroupPillVariants as k, buttonGroupVariants as q, buttonGroupWrapperVariants as z } from "./ButtonGroup.variants.js";
-import { useButtonGroup as A } from "./hooks/useButtonGroup.js";
-import { ButtonGroupLabel as E } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
-import { m as H } from "../../proxy-BIRlSMN_.js";
-import { ButtonGroupItem as J } from "./components/ButtonGroupItem/ButtonGroupItem.js";
-import { ButtonGroupMessage as Q } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
-const T = ({
+import { buttonGroupPillVariants as z, buttonGroupVariants as A, buttonGroupWrapperVariants as E } from "./ButtonGroup.variants.js";
+import { useButtonGroup as H } from "./hooks/useButtonGroup.js";
+import { ButtonGroupLabel as J } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
+import { m as Q } from "../../proxy-CngVm5qA.js";
+import { ButtonGroupItem as T } from "./components/ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupMessage as U } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
+const X = ({
   className: p,
   contentClassName: f,
   defaultValue: h,
-  descriptionClassName: v,
+  descriptionAlign: v,
+  descriptionClassName: G,
   disabled: o,
   duration: l,
-  error: G,
-  errorClassName: b,
-  helperText: N,
-  helperTextClassName: y,
-  isRequired: B,
-  itemClassName: D,
-  itemLabelClassName: g,
+  error: b,
+  errorClassName: N,
+  helperText: y,
+  helperTextClassName: B,
+  isRequired: D,
+  itemClassName: g,
+  itemLabelClassName: x,
   label: s,
-  labelClassName: x,
-  name: w,
+  labelAlign: w,
+  labelClassName: I,
+  name: K,
   options: t,
-  pillClassName: I,
-  requiredClassName: K,
-  theme: S,
-  value: V,
-  wrapperClassName: $,
-  onValueChange: j
+  pillClassName: S,
+  requiredClassName: V,
+  theme: $,
+  value: j,
+  wrapperClassName: F,
+  onValueChange: L
 }) => {
   const {
-    animationDirection: F,
-    groupRef: L,
+    animationDirection: M,
+    groupRef: C,
     id: m,
     selected: r,
-    handleKeyDown: M,
-    handleSelect: C
-  } = A({
+    handleKeyDown: O,
+    handleSelect: P
+  } = H({
     defaultValue: h,
     disabled: o ?? void 0,
     options: t,
-    value: V,
-    onValueChange: j
-  }), u = t.length, c = W(
+    value: j,
+    onValueChange: L
+  }), u = t.length, c = q(
     () => t.findIndex((e) => e.value === r),
     [t, r]
   );
   return /* @__PURE__ */ d(
     "div",
     {
-      className: n(z(), $),
-      "data-theme": S,
+      className: n(E(), F),
+      "data-theme": $,
       children: [
         s && /* @__PURE__ */ a(
-          E,
+          J,
           {
-            className: x,
+            className: I,
             htmlFor: m,
-            isRequired: B,
+            isRequired: D,
             label: s,
-            requiredClassName: K
+            requiredClassName: V
           }
         ),
         /* @__PURE__ */ d(
           "div",
           {
-            ref: L,
+            ref: C,
             role: "radiogroup",
             "aria-labelledby": s ? m : void 0,
-            className: n(q({ disabled: o }), p),
+            className: n(A({ disabled: o }), p),
             children: [
               c >= 0 && /* @__PURE__ */ a(
-                H.div,
+                Q.div,
                 {
                   "aria-hidden": "true",
-                  className: n(k(), I),
+                  className: n(z(), S),
                   initial: !1,
                   animate: {
                     left: `calc(${c} * (100% / ${u}) + 8px)`,
@@ -91,26 +93,28 @@ const T = ({
                 }
               ),
               t.map((e, i) => {
-                const O = r === e.value, P = o || e.disabled, R = !!e.description;
+                const R = r === e.value, W = o || e.disabled, k = !!e.description;
                 return /* @__PURE__ */ a(
-                  J,
+                  T,
                   {
-                    animationDirection: F,
-                    className: D,
+                    animationDirection: M,
+                    className: g,
                     contentClassName: f,
-                    descriptionClassName: v,
+                    descriptionAlign: v,
+                    descriptionClassName: G,
                     duration: l,
-                    hasDescription: R,
+                    hasDescription: k,
                     index: i,
-                    isDisabled: !!P,
+                    isDisabled: !!W,
                     isFirst: i === 0,
                     isLast: i === t.length - 1,
-                    isSelected: O,
-                    labelClassName: g,
+                    isSelected: R,
+                    labelAlign: w,
+                    labelClassName: x,
                     option: e,
                     value: e.value,
-                    onKeyDown: M,
-                    onSelect: C
+                    onKeyDown: O,
+                    onSelect: P
                   },
                   e.value
                 );
@@ -118,21 +122,21 @@ const T = ({
             ]
           }
         ),
-        /* @__PURE__ */ a("input", { type: "hidden", name: w, value: r ?? "" }),
+        /* @__PURE__ */ a("input", { type: "hidden", name: K, value: r ?? "" }),
         /* @__PURE__ */ a(
-          Q,
+          U,
           {
-            error: G,
-            errorClassName: b,
-            helperText: N,
-            helperTextClassName: y
+            error: b,
+            errorClassName: N,
+            helperText: y,
+            helperTextClassName: B
           }
         )
       ]
     }
   );
 };
-T.displayName = "KonstructButtonGroup";
+X.displayName = "KonstructButtonGroup";
 export {
-  T as ButtonGroup
+  X as ButtonGroup
 };

package/dist/components/ButtonGroup/ButtonGroup.types.d.ts

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { Theme } from '../../domain/theme';
 import { buttonGroupVariants } from './ButtonGroup.variants';
+/** Horizontal text alignment for label and description */
+export type TextAlign = 'left' | 'center' | 'right';
 /**
  * Configuration for a single button option in the ButtonGroup.
  */
@@ -53,6 +55,8 @@ export type Props = VariantProps<typeof buttonGroupVariants> & {
     contentClassName?: string;
     /** Initially selected value (uncontrolled mode) */
     defaultValue?: string;
+    /** Horizontal alignment of the description text (default: 'left') */
+    descriptionAlign?: TextAlign;
     /** CSS classes for description text */
     descriptionClassName?: string;
     /** Animation duration in seconds (default: 0.3) */
@@ -71,6 +75,8 @@ export type Props = VariantProps<typeof buttonGroupVariants> & {
     itemClassName?: string;
     /** CSS classes for the label text inside items */
     itemLabelClassName?: string;
+    /** Horizontal alignment of the label text (default: 'left') */
+    labelAlign?: TextAlign;
     /** Label displayed above the button group */
     label?: string | ReactNode;
     /** CSS classes for the label */

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.js

@@ -1,26 +1,28 @@
 import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import { memo as x } from "react";
+import { memo as L } from "react";
 import { cn as t } from "../../../../utils/index.js";
-import { buttonGroupLabelVariants as o, buttonGroupDescriptionVariants as I, buttonGroupItemContentVariants as L, buttonGroupItemVariants as g } from "./ButtonGroupItem.variants.js";
-import { m as V } from "../../../../proxy-BIRlSMN_.js";
-const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : r ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", j = x(
+import { buttonGroupLabelVariants as u, buttonGroupDescriptionVariants as V, buttonGroupItemContentVariants as g, buttonGroupItemVariants as w } from "./ButtonGroupItem.variants.js";
+import { m as j } from "../../../../proxy-CngVm5qA.js";
+const k = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : r ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = L(
   ({
     animationDirection: r,
     className: n,
-    contentClassName: u,
-    descriptionClassName: d,
-    duration: p = 0.3,
-    hasDescription: h,
+    contentClassName: d,
+    descriptionAlign: p,
+    descriptionClassName: h,
+    duration: b = 0.3,
+    hasDescription: f,
     index: c,
     isDisabled: l,
-    isFirst: b,
-    isLast: f,
+    isFirst: y,
+    isLast: N,
     isSelected: i,
-    labelClassName: m,
+    labelAlign: m,
+    labelClassName: o,
     option: e,
-    value: y,
-    onKeyDown: N,
-    onSelect: v
+    value: v,
+    onKeyDown: G,
+    onSelect: x
   }) => /* @__PURE__ */ s(
     "button",
     {
@@ -30,10 +32,10 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
       "data-value": e.value,
       disabled: l,
       tabIndex: i || c === 0 ? 0 : -1,
-      onClick: () => !l && v(y),
-      onKeyDown: (G) => N(G, c),
+      onClick: () => !l && x(v),
+      onKeyDown: (I) => G(I, c),
       className: t(
-        g({ disabled: l, isFirst: b, isLast: f }),
+        w({ disabled: l, isFirst: y, isLast: N }),
         "relative",
         n
       ),
@@ -41,9 +43,9 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
         "div",
         {
           className: t(
-            L({ hasDescription: h }),
+            g({ hasDescription: f }),
             "relative",
-            u
+            d
           ),
           children: [
             /* @__PURE__ */ a("span", { className: "relative w-full", children: [
@@ -51,8 +53,8 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
                 "span",
                 {
                   className: t(
-                    o({ selected: !1 }),
-                    m
+                    u({ selected: !1, labelAlign: m }),
+                    o
                   ),
                   children: [
                     /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
@@ -64,22 +66,22 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
                 }
               ),
               /* @__PURE__ */ a(
-                V.span,
+                j.span,
                 {
                   className: t(
-                    o({ selected: !0 }),
+                    u({ selected: !0, labelAlign: m }),
                     "absolute inset-0",
-                    m
+                    o
                   ),
                   "aria-hidden": "true",
                   initial: !1,
                   animate: {
-                    clipPath: w(i, r)
+                    clipPath: k(i, r)
                   },
                   transition: {
                     type: "tween",
                     ease: "linear",
-                    duration: p
+                    duration: b
                   },
                   children: [
                     /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
@@ -95,8 +97,8 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
               "span",
               {
                 className: t(
-                  I(),
-                  d
+                  V({ descriptionAlign: p }),
+                  h
                 ),
                 children: e.description
               }
@@ -108,7 +110,7 @@ const w = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" :
     e.value
   )
 );
-j.displayName = "KonstructButtonGroupItem";
+B.displayName = "KonstructButtonGroupItem";
 export {
-  j as ButtonGroupItem
+  B as ButtonGroupItem
 };

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.types.d.ts

@@ -1,12 +1,14 @@
 import { KeyboardEvent } from 'react';
-import { ButtonGroupOption } from '../../ButtonGroup.types';
+import { ButtonGroupOption, TextAlign } from '../../ButtonGroup.types';
 import { AnimationDirection } from '../../hooks';
 export type Props = {
     animationDirection: AnimationDirection;
     className?: string;
     contentClassName?: string;
+    descriptionAlign?: TextAlign;
     descriptionClassName?: string;
     duration?: number;
+    labelAlign?: TextAlign;
     hasDescription: boolean;
     index: number;
     isDisabled: boolean;

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.variants.d.ts

@@ -17,8 +17,11 @@ export declare const buttonGroupItemContentVariants: (props?: ({
  */
 export declare const buttonGroupLabelVariants: (props?: ({
     selected?: boolean | null | undefined;
+    labelAlign?: "center" | "left" | "right" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Description text variants inside button item
  */
-export declare const buttonGroupDescriptionVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonGroupDescriptionVariants: (props?: ({
+    descriptionAlign?: "center" | "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;