@soft-stech/bootsman-ui-shadcn 1.4.34 → 1.4.36

package/dist/{utils-CwP7Up6y.js → utils-C11OfLQK.js}

@@ -1,4 +1,4 @@
-import { defineComponent as M, provide as Ce, useAttrs as H, openBlock as N, createElementBlock as fe, mergeProps as Q, unref as f, renderSlot as F, inject as X, createBlock as O, withCtx as ee, toValue as _e, toRef as Ie, normalizeClass as ze, h as P } from "vue";
+import { defineComponent as N, provide as Ce, useAttrs as H, openBlock as $, createElementBlock as fe, mergeProps as Q, unref as f, renderSlot as F, inject as X, createBlock as O, withCtx as ee, toValue as _e, toRef as Ie, normalizeClass as ze, h as S } from "vue";
 import { FieldContextKey as Ae, useIsFieldValid as Se, useIsFieldDirty as Me, useIsFieldTouched as Ne, useFieldError as $e, ErrorMessage as Re } from "vee-validate";
 import { bs as je, bt as Ee, av as Ge, bu as Pe } from "./index-DKlaqzM0.js";
 function ge(e) {
@@ -190,9 +190,9 @@ const te = "-", Te = (e) => {
     if (n.includes(w))
       continue;
     n.push(w);
-    const R = s(m, x);
-    for (let A = 0; A < R.length; ++A) {
-      const T = R[A];
+    const j = s(m, x);
+    for (let A = 0; A < j.length; ++A) {
+      const T = j[A];
       n.push(v + T);
     }
     a = c + (a.length > 0 ? " " + a : a);
@@ -233,7 +233,7 @@ function Xe(e, ...t) {
 const p = (e) => {
   const t = (r) => r[e] || [];
   return t.isThemeGetter = !0, t;
-}, ve = /^\[(?:([a-z-]+):)?(.+)\]$/i, Ze = /^\d+\/\d+$/, He = /* @__PURE__ */ new Set(["px", "full", "screen"]), Qe = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, et = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, tt = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, rt = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ot = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, _ = (e) => S(e) || He.has(e) || Ze.test(e), I = (e) => $(e, "length", ut), S = (e) => !!e && !Number.isNaN(Number(e)), Y = (e) => $(e, "number", S), E = (e) => !!e && Number.isInteger(Number(e)), nt = (e) => e.endsWith("%") && S(e.slice(0, -1)), l = (e) => ve.test(e), z = (e) => Qe.test(e), st = /* @__PURE__ */ new Set(["length", "size", "percentage"]), at = (e) => $(e, st, xe), it = (e) => $(e, "position", xe), lt = /* @__PURE__ */ new Set(["image", "url"]), ct = (e) => $(e, lt, bt), dt = (e) => $(e, "", pt), G = () => !0, $ = (e, t, r) => {
+}, ve = /^\[(?:([a-z-]+):)?(.+)\]$/i, Ze = /^\d+\/\d+$/, He = /* @__PURE__ */ new Set(["px", "full", "screen"]), Qe = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, et = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, tt = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, rt = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ot = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, _ = (e) => M(e) || He.has(e) || Ze.test(e), I = (e) => R(e, "length", ut), M = (e) => !!e && !Number.isNaN(Number(e)), Y = (e) => R(e, "number", M), G = (e) => !!e && Number.isInteger(Number(e)), nt = (e) => e.endsWith("%") && M(e.slice(0, -1)), l = (e) => ve.test(e), z = (e) => Qe.test(e), st = /* @__PURE__ */ new Set(["length", "size", "percentage"]), at = (e) => R(e, st, xe), it = (e) => R(e, "position", xe), lt = /* @__PURE__ */ new Set(["image", "url"]), ct = (e) => R(e, lt, bt), dt = (e) => R(e, "", pt), P = () => !0, R = (e, t, r) => {
   const o = ve.exec(e);
   return o ? o[1] ? typeof t == "string" ? o[1] === t : t.has(o[1]) : r(o[2]) : !1;
 }, ut = (e) => (
@@ -242,12 +242,12 @@ const p = (e) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   et.test(e) && !tt.test(e)
 ), xe = () => !1, pt = (e) => rt.test(e), bt = (e) => ot.test(e), ft = () => {
-  const e = p("colors"), t = p("spacing"), r = p("blur"), o = p("brightness"), s = p("borderColor"), n = p("borderRadius"), i = p("borderSpacing"), a = p("borderWidth"), d = p("contrast"), c = p("grayscale"), g = p("hueRotate"), y = p("invert"), h = p("gap"), k = p("gradientColorStops"), x = p("gradientColorStopPositions"), m = p("inset"), u = p("margin"), v = p("opacity"), w = p("padding"), R = p("saturate"), A = p("scale"), T = p("sepia"), oe = p("skew"), ne = p("space"), se = p("translate"), K = () => ["auto", "contain", "none"], q = () => ["auto", "hidden", "clip", "visible", "scroll"], D = () => ["auto", l, t], b = () => [l, t], ae = () => ["", _, I], B = () => ["auto", S, l], ie = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], V = () => ["solid", "dashed", "dotted", "double", "none"], le = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], J = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], j = () => ["", "0", l], ce = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], C = () => [S, l];
+  const e = p("colors"), t = p("spacing"), r = p("blur"), o = p("brightness"), s = p("borderColor"), n = p("borderRadius"), i = p("borderSpacing"), a = p("borderWidth"), d = p("contrast"), c = p("grayscale"), g = p("hueRotate"), y = p("invert"), h = p("gap"), k = p("gradientColorStops"), x = p("gradientColorStopPositions"), m = p("inset"), u = p("margin"), v = p("opacity"), w = p("padding"), j = p("saturate"), A = p("scale"), T = p("sepia"), oe = p("skew"), ne = p("space"), se = p("translate"), K = () => ["auto", "contain", "none"], q = () => ["auto", "hidden", "clip", "visible", "scroll"], D = () => ["auto", l, t], b = () => [l, t], ae = () => ["", _, I], B = () => ["auto", M, l], ie = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], V = () => ["solid", "dashed", "dotted", "double", "none"], le = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], J = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], E = () => ["", "0", l], ce = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], C = () => [M, l];
   return {
     cacheSize: 500,
     separator: ":",
     theme: {
-      colors: [G],
+      colors: [P],
       spacing: [_, I],
       blur: ["none", "", z, l],
       brightness: C(),
@@ -256,9 +256,9 @@ const p = (e) => {
       borderSpacing: b(),
       borderWidth: ae(),
       contrast: C(),
-      grayscale: j(),
+      grayscale: E(),
       hueRotate: C(),
-      invert: j(),
+      invert: E(),
       gap: b(),
       gradientColorStops: [e],
       gradientColorStopPositions: [nt, I],
@@ -268,7 +268,7 @@ const p = (e) => {
       padding: b(),
       saturate: C(),
       scale: C(),
-      sepia: j(),
+      sepia: E(),
       skew: C(),
       space: b(),
       translate: b()
@@ -487,7 +487,7 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/z-index
        */
       z: [{
-        z: ["auto", E, l]
+        z: ["auto", G, l]
       }],
       // Flexbox and Grid
       /**
@@ -523,28 +523,28 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/flex-grow
        */
       grow: [{
-        grow: j()
+        grow: E()
       }],
       /**
        * Flex Shrink
        * @see https://tailwindcss.com/docs/flex-shrink
        */
       shrink: [{
-        shrink: j()
+        shrink: E()
       }],
       /**
        * Order
        * @see https://tailwindcss.com/docs/order
        */
       order: [{
-        order: ["first", "last", "none", E, l]
+        order: ["first", "last", "none", G, l]
       }],
       /**
        * Grid Template Columns
        * @see https://tailwindcss.com/docs/grid-template-columns
        */
       "grid-cols": [{
-        "grid-cols": [G]
+        "grid-cols": [P]
       }],
       /**
        * Grid Column Start / End
@@ -552,7 +552,7 @@ const p = (e) => {
        */
       "col-start-end": [{
         col: ["auto", {
-          span: ["full", E, l]
+          span: ["full", G, l]
         }, l]
       }],
       /**
@@ -574,7 +574,7 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/grid-template-rows
        */
       "grid-rows": [{
-        "grid-rows": [G]
+        "grid-rows": [P]
       }],
       /**
        * Grid Row Start / End
@@ -582,7 +582,7 @@ const p = (e) => {
        */
       "row-start-end": [{
         row: ["auto", {
-          span: [E, l]
+          span: [G, l]
         }, l]
       }],
       /**
@@ -937,7 +937,7 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [G]
+        font: [P]
       }],
       /**
        * Font Variant Numeric
@@ -981,7 +981,7 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/line-clamp
        */
       "line-clamp": [{
-        "line-clamp": ["none", S, Y]
+        "line-clamp": ["none", M, Y]
       }],
       /**
        * Line Height
@@ -1608,7 +1608,7 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/box-shadow-color
        */
       "shadow-color": [{
-        shadow: [G]
+        shadow: [P]
       }],
       /**
        * Opacity
@@ -1694,7 +1694,7 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/saturate
        */
       saturate: [{
-        saturate: [R]
+        saturate: [j]
       }],
       /**
        * Sepia
@@ -1765,7 +1765,7 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/backdrop-saturate
        */
       "backdrop-saturate": [{
-        "backdrop-saturate": [R]
+        "backdrop-saturate": [j]
       }],
       /**
        * Backdrop Sepia
@@ -1887,7 +1887,7 @@ const p = (e) => {
        * @see https://tailwindcss.com/docs/rotate
        */
       rotate: [{
-        rotate: [E, l]
+        rotate: [G, l]
       }],
       /**
        * Translate X
@@ -2297,14 +2297,14 @@ const pe = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, be =
     ] : c;
   }, []);
   return be(e, i, d, r?.class, r?.className);
-}, ke = Symbol(), Nt = /* @__PURE__ */ M({
+}, ke = Symbol(), Nt = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "BuiFormItem",
   setup(e) {
     const t = je();
     Ce(ke, t);
     const { class: r, ...o } = H();
-    return (s, n) => (N(), fe("div", Q({
+    return (s, n) => ($(), fe("div", Q({
       class: f(W)("space-y-1", f(r) ?? "")
     }, o), [
       F(s.$slots, "default")
@@ -2329,11 +2329,11 @@ function U() {
     ...r
   };
 }
-const $t = /* @__PURE__ */ M({
+const $t = /* @__PURE__ */ N({
   __name: "BuiFormControl",
   setup(e) {
     const { error: t, formItemId: r, formDescriptionId: o, formMessageId: s } = U();
-    return (n, i) => (N(), O(f(Ee), {
+    return (n, i) => ($(), O(f(Ee), {
       id: f(r),
       "aria-describedby": f(t) ? `${f(o)} ${f(s)}` : `${f(o)}`,
       "aria-invalid": !!f(t)
@@ -2344,19 +2344,19 @@ const $t = /* @__PURE__ */ M({
       _: 3
     }, 8, ["id", "aria-describedby", "aria-invalid"]));
   }
-}), yt = ["id"], Rt = /* @__PURE__ */ M({
+}), yt = ["id"], Rt = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "BuiFormDescription",
   setup(e) {
     const { formDescriptionId: t } = U(), { class: r, ...o } = H();
-    return (s, n) => (N(), fe("p", Q({
+    return (s, n) => ($(), fe("p", Q({
       id: f(t),
       class: f(W)("text-sm text-muted-foreground", f(r) ?? "")
     }, o), [
       F(s.$slots, "default")
     ], 16, yt));
   }
-}), jt = /* @__PURE__ */ M({
+}), jt = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "BuiFormLabel",
   props: {
@@ -2366,7 +2366,7 @@ const $t = /* @__PURE__ */ M({
   },
   setup(e) {
     const { error: t, valid: r, formItemId: o } = U(), { class: s, ...n } = H();
-    return (i, a) => (N(), O(f(Ge), Q({
+    return (i, a) => ($(), O(f(Ge), Q({
       class: f(W)(
         "block text-left text-sm font-medium tracking-tight text-foreground",
         f(t) && "text-destructive-foreground",
@@ -2380,18 +2380,18 @@ const $t = /* @__PURE__ */ M({
       _: 3
     }, 16, ["class", "for"]));
   }
-}), Et = /* @__PURE__ */ M({
+}), Et = /* @__PURE__ */ N({
   __name: "BuiFormMessage",
   setup(e) {
     const { name: t, formMessageId: r } = U();
-    return (o, s) => (N(), O(f(Re), {
+    return (o, s) => ($(), O(f(Re), {
       id: f(r),
       as: "p",
       name: _e(f(t)),
       class: "text-sm font-medium text-destructive-foreground"
     }, null, 8, ["id", "name"]));
   }
-}), vt = Symbol(), xt = /* @__PURE__ */ M({
+}), vt = Symbol(), xt = /* @__PURE__ */ N({
   __name: "BuiButton",
   props: {
     class: { default: "" },
@@ -2404,7 +2404,7 @@ const $t = /* @__PURE__ */ M({
   },
   setup(e) {
     const t = e, r = X(vt, Ie(!1));
-    return (o, s) => (N(), O(f(Pe), {
+    return (o, s) => ($(), O(f(Pe), {
       as: o.as,
       "as-child": o.asChild,
       class: ze(f(W)(f(wt)({ variant: o.variant, size: o.size }), t.class)),
@@ -2492,7 +2492,7 @@ var L = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ct = ({ size: e, strokeWidth: t = 2, absoluteStrokeWidth: r, color: o, iconNode: s, name: n, class: i, ...a }, { slots: d }) => P(
+const Ct = ({ size: e, strokeWidth: t = 2, absoluteStrokeWidth: r, color: o, iconNode: s, name: n, class: i, ...a }, { slots: d }) => S(
   "svg",
   {
     ...L,
@@ -2503,7 +2503,7 @@ const Ct = ({ size: e, strokeWidth: t = 2, absoluteStrokeWidth: r, color: o, ico
     class: ["lucide", `lucide-${kt(n ?? "icon")}`],
     ...a
   },
-  [...s.map((c) => P(...c)), ...d.default ? [d.default()] : []]
+  [...s.map((c) => S(...c)), ...d.default ? [d.default()] : []]
 );
 /**
  * @license lucide-vue-next v0.441.0 - ISC
@@ -2511,7 +2511,7 @@ const Ct = ({ size: e, strokeWidth: t = 2, absoluteStrokeWidth: r, color: o, ico
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const re = (e, t) => (r, { slots: o }) => P(
+const re = (e, t) => (r, { slots: o }) => S(
   Ct,
   {
     ...r,
@@ -2560,14 +2560,17 @@ function W(...e) {
 }
 const Pt = (e, t) => {
   let r;
-  return e.getIsSorted() === "asc" ? r = It : e.getIsSorted() === "desc" ? r = zt : r = _t, P(
+  return e.getIsSorted() === "asc" ? r = It : e.getIsSorted() === "desc" ? r = zt : r = _t, S(
     xt,
     {
       variant: "none",
-      class: "text-foreground px-0 text-sm font-semibold",
+      class: "text-foreground px-0 text-sm font-semibold h-full",
       onClick: () => e.toggleSorting(e.getIsSorted() === "asc")
     },
-    () => [t, P(r, { class: "ml-2 h-4 w-4 text-muted-foreground" })]
+    () => [
+      S("div", { class: "whitespace-normal break-normal" }, [t]),
+      S(r, { class: "ml-1 h-4 w-4 text-muted-foreground shrink-0" })
+    ]
   );
 };
 export {

package/dist/{variables-Cp5imn3x.js → variables-4ez0MWno.js}

@@ -5,20 +5,20 @@ import "vee-validate";
 import "@vueuse/core";
 import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
 import { BuiInput as C } from "./components/ui/input/index.js";
-import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-KcSVihcY.js";
+import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-CFmk7_AN.js";
 import { _ as w } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-BNN6bEtZ.js";
-import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-B5WlMfC3.js";
-import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-B0NFOsOl.js";
-import { _ as h } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-B6bF0Vu2.js";
+import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-BPAHSkB4.js";
+import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-C191NkOr.js";
+import { _ as h } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-CLHtKjGO.js";
 import "@tanstack/vue-table";
 import "./components/ui/toast/use-toast.js";
 import "@vee-validate/zod";
 import "zod";
 import "./index-BGsblnmA.js";
-import { _ as q } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-CwmCuGgF.js";
-import { _ as E } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-CSOtvyld.js";
-import { _ as j } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-B4HmMbjL.js";
-import { _ as D } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-3UkM3Scg.js";
+import { _ as q } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-Cldzpica.js";
+import { _ as E } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-DAMRrI27.js";
+import { _ as j } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-CQ0gejml.js";
+import { _ as D } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-DuI0BC1U.js";
 const F = { class: "text-sm text-muted-foreground" }, L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */ V({
   __name: "BuiPaginationCommon",
   props: /* @__PURE__ */ $({

package/dist/{x-Dg7QGokN.js → x-BCuyj3Zc.js}

@@ -1,4 +1,4 @@
-import { h as e } from "./utils-CwP7Up6y.js";
+import { h as e } from "./utils-C11OfLQK.js";
 /**
  * @license lucide-vue-next v0.441.0 - ISC
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.34",
+  "version": "1.4.36",
   "type": "module",
   "files": [
     "dist",

package/src/components/stories/BuiDataTable.story.vue

@@ -73,7 +73,7 @@ const columns: ColumnDef<Task>[] = [
   },
   {
     accessorKey: 'status',
-    header: ({ column }) => tableColumnSortCommon(column, 'Status'),
+    header: ({ column }) => tableColumnSortCommon(column, 'Очень длинный заголовок для статуса'),
     meta: { title: 'Статус таска' }
   },
   {

package/src/components/ui/table/BuiDataTable.vue

@@ -48,6 +48,7 @@ import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/u
 import { BuiScrollArea } from '@/components/ui/scroll-area'
 import { BuiButton } from '@/components/ui/button'
 import { Settings2Icon } from 'lucide-vue-next'
+import { useElementSize } from '@vueuse/core'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
 
@@ -237,6 +238,9 @@ const tableHeaders = computed(() =>
 watch(columnsListIds, () => {
   table.setColumnOrder(columnsListIds.value)
 })
+
+const tableHeaderRef = ref<InstanceType<typeof BuiTableHeader> | null>(null)
+const { height } = useElementSize(tableHeaderRef)
 </script>
 
 <template>
@@ -247,7 +251,10 @@ watch(columnsListIds, () => {
     <template v-if="enableColumnListControl" #columnVisibility>
       <BuiPopover v-model:open="open">
         <BuiPopoverTrigger as-child>
-          <div class="absolute right-0 top-0 z-10 h-10 bg-background">
+          <div
+            class="absolute right-0 top-0 z-10 bg-background"
+            :style="{ height: `${height.toFixed(1)}px` }"
+          >
             <div
               class="flex h-full items-center border-b border-l border-border/[0.16] bg-foreground/[0.04] px-1"
             >
@@ -286,7 +293,7 @@ watch(columnsListIds, () => {
         </BuiPopoverContent>
       </BuiPopover>
     </template>
-    <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader">
+    <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader" ref="tableHeaderRef">
       <BuiTableHead
         v-for="header in tableHeaders"
         :key="header.id"
@@ -392,7 +399,7 @@ watch(columnsListIds, () => {
   </BuiTable>
   <div
     v-if="(showPagination || $slots.numberOfItems) && computedItems > 0"
-    class="flex w-full border-x border-b border-border/[0.16] bg-primary/[0.04] px-4 py-1 text-sm text-muted-foreground"
+    class="flex w-full border-x border-b border-border/[0.16] bg-primary/[0.04] px-2.5 py-1 text-sm text-muted-foreground"
     :class="{
       'justify-between': showPagination && $slots.numberOfItems,
       'justify-start': $slots.numberOfItems && !showPagination,

package/src/components/ui/table/BuiTableCell.vue

@@ -8,7 +8,7 @@ const props = defineProps<{ class?: string }>()
   <td
     :class="
       cn(
-        'h-12 break-words px-3 py-1 align-middle text-xs first:pl-6 last:pr-6 [&:has([role=checkbox])]:pr-0',
+        'h-12 break-words px-2 py-1 align-middle text-xs first:pl-3 last:pr-3 [&:has([role=checkbox])]:pr-0',
         props.class
       )
     "

package/src/components/ui/table/BuiTableHead.vue

@@ -22,7 +22,7 @@ const props = defineProps<{
       :class="{ 'bg-foreground/[0.04]': props.freezeHeader }"
     >
       <div
-        class="flex h-8 w-full items-center whitespace-nowrap border-r border-border/[0.16] px-3 text-sm font-semibold"
+        class="flex h-full w-full items-center whitespace-nowrap border-r border-border/[0.16] px-2 text-sm font-semibold"
       >
         <slot />
       </div>

package/src/components/ui/table/BuiTableHeader.vue

@@ -14,8 +14,8 @@ const props = defineProps<{
         '[&_tr]:border-border/[0.16]',
         props.class,
         props.freezeHeader
-          ? 'sticky top-0 z-[1] [&_th:first-child>div>div]:pl-6 [&_th:last-child>div>div]:border-r-0 [&_th:last-child>div>div]:pr-14 [&_tr:last-child]:border-b-0'
-          : '[&_th:first-child>div]:pl-6 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-14 [&_tr]:border-b'
+          ? 'sticky top-0 z-[1] [&_th:first-child>div>div]:pl-3 [&_th:last-child>div>div]:border-r-0 [&_th:last-child>div>div]:pr-14 [&_tr:last-child]:border-b-0'
+          : '[&_th:first-child>div]:pl-3 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-14 [&_tr]:border-b'
       )
     "
   >

package/src/lib/utils.ts

@@ -30,9 +30,12 @@ export const tableColumnSortCommon = (column: Column<any>, name: string) => {
     BuiButton,
     {
       variant: 'none',
-      class: 'text-foreground px-0 text-sm font-semibold',
+      class: 'text-foreground px-0 text-sm font-semibold h-full',
       onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
     },
-    () => [name, h(icon, { class: 'ml-2 h-4 w-4 text-muted-foreground' })]
+    () => [
+      h('div', { class: 'whitespace-normal break-normal' }, [name]),
+      h(icon, { class: 'ml-1 h-4 w-4 text-muted-foreground shrink-0' })
+    ]
   )
 }