@wellingtonhlc/shared-ui 0.25.3 → 0.25.4

package/README.md

@@ -221,6 +221,29 @@ import { Bell, Settings } from 'lucide-react';
 </AppShell.Actions>
 ```
 
+## TabsUnderlined
+
+`TabsUnderlined` renderiza abas sublinhadas com conteudo controlado ou nao controlado.
+As abas ja possuem tamanho minimo padrao e padding horizontal para comportar labels
+medias, como `Configuracoes` e `Fornecedor`, sem ficarem apertadas.
+
+Quando houver labels longas, use `tabWidth` e `truncateLabels` para manter abas
+uniformes e aplicar ellipsis no texto que exceder o limite.
+
+```tsx
+import { TabsUnderlined } from '@wellingtonhlc/shared-ui';
+
+<TabsUnderlined
+  items={items}
+  tabWidth="12rem"
+  truncateLabels
+/>;
+```
+
+Quando a largura puder variar dentro de uma faixa, use `tabMinWidth` e `tabMaxWidth`.
+`truncateLabels` nao altera o comportamento sozinho; defina tambem `tabWidth` ou
+`tabMaxWidth` para que o navegador saiba quando abreviar o texto.
+
 ## ThemePreferencesSelector
 
 `ThemePreferencesSelector` centraliza a escolha de cor e aparencia (`system`, `light`, `dark`) usada pelos consumidores.

package/dist/components/EmptyState.js

@@ -8,7 +8,7 @@ export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(
             className: cn('h-10 w-10 text-foreground-muted', icon.props.className),
         })
         : icon;
-    return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'h-full flex-1 px-5 py-10', withMargin && 'm-2', className), children: _jsxs("div", { className: cn('mx-auto grid justify-items-center', isCompact ? 'max-w-xs gap-1.5' : 'max-w-sm gap-2'), children: [showIcon && styledIcon ? (_jsx("div", { className: "text-foreground-muted mb-1 flex h-11 w-11 items-center justify-center", children: styledIcon })) : null, _jsx("strong", { className: "text-foreground text-sm font-semibold", children: title }), description ? _jsx("p", { className: "text-foreground-muted text-xs leading-5", children: description }) : null, children ? _jsx("div", { className: cn('mt-2 flex flex-wrap items-center justify-center gap-2', isCompact ? 'text-xs' : 'text-sm'), children: children }) : null] }) }));
+    return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)] bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'h-full flex-1 px-5 py-10', withMargin && 'm-2', className), children: _jsxs("div", { className: cn('mx-auto grid justify-items-center', isCompact ? 'max-w-xs gap-1.5' : 'max-w-sm gap-2'), children: [showIcon && styledIcon ? (_jsx("div", { className: "text-foreground-muted mb-1 flex h-11 w-11 items-center justify-center", children: styledIcon })) : null, _jsx("strong", { className: "text-foreground text-sm font-semibold", children: title }), description ? _jsx("p", { className: "text-foreground-muted text-xs leading-5", children: description }) : null, children ? _jsx("div", { className: cn('mt-2 flex flex-wrap items-center justify-center gap-2', isCompact ? 'text-xs' : 'text-sm'), children: children }) : null] }) }));
 }
 function DefaultEmptyIcon() {
     return (_jsx("svg", { "aria-hidden": "true", className: "h-10 w-10", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "1.8", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 8.75 6.2 5.4A2 2 0 0 1 7.82 4.6h8.36a2 2 0 0 1 1.62.8l2.45 3.35M3.75 8.75v6.9A3.75 3.75 0 0 0 7.5 19.4h9a3.75 3.75 0 0 0 3.75-3.75v-6.9M3.75 8.75h4.92a1.5 1.5 0 0 1 1.34.83l.28.56a1.5 1.5 0 0 0 1.34.83h.74a1.5 1.5 0 0 0 1.34-.83l.28-.56a1.5 1.5 0 0 1 1.34-.83h4.92" }) }));

package/dist/components/TabsUnderlined.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 export interface UnderlinedTabItem {
     id: string;
     label: string;
@@ -14,6 +14,10 @@ export interface TabsUnderlinedProps {
     listClassName?: string;
     triggerClassName?: string;
     contentClassName?: string;
+    tabWidth?: CSSProperties['width'];
+    tabMinWidth?: CSSProperties['minWidth'];
+    tabMaxWidth?: CSSProperties['maxWidth'];
+    truncateLabels?: boolean;
 }
-export declare function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, triggerClassName, value, }: TabsUnderlinedProps): import("react").JSX.Element;
+export declare function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, tabMaxWidth, tabMinWidth, tabWidth, triggerClassName, truncateLabels, value, }: TabsUnderlinedProps): import("react").JSX.Element;
 //# sourceMappingURL=TabsUnderlined.d.ts.map

package/dist/components/TabsUnderlined.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK1D,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,KAAK,GACN,EAAE,mBAAmB,+BAmDrB"}
+{"version":3,"file":"TabsUnderlined.d.ts","sourceRoot":"","sources":["../../src/components/TabsUnderlined.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAO9E,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,KAAK,EACL,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,cAAsB,EACtB,KAAK,GACN,EAAE,mBAAmB,+BA2DrB"}

package/dist/components/TabsUnderlined.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
 import { cn } from '../utils/cn';
-export function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, triggerClassName, value, }) {
+const DEFAULT_TAB_MIN_WIDTH = '8.75rem';
+export function TabsUnderlined({ className, contentClassName, defaultValue, items, listClassName, onValueChange, tabMaxWidth, tabMinWidth, tabWidth, triggerClassName, truncateLabels = false, value, }) {
     const visibleItems = useMemo(() => items.filter((item) => item.visible ?? true), [items]);
     const initialValue = defaultValue && visibleItems.some((item) => item.id === defaultValue)
         ? defaultValue
@@ -13,8 +14,13 @@ export function TabsUnderlined({ className, contentClassName, defaultValue, item
         setInternalValue(nextValue);
         onValueChange?.(nextValue);
     }
-    return (_jsx("div", { className: cn('border-app-border bg-surface flex h-full min-w-0 flex-col overflow-hidden rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn('border-app-border flex min-w-0 overflow-x-auto overflow-y-hidden border-b bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--surface))] text-sm', listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full min-w-0 flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
+    return (_jsx("div", { className: cn('border-app-border bg-surface flex h-full min-w-0 flex-col overflow-hidden rounded-xl border', className), children: _jsxs(Tabs.Root, { value: resolvedValue, onValueChange: handleValueChange, className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Tabs.List, { className: cn('border-app-border flex min-w-0 overflow-x-auto overflow-y-hidden border-b bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--surface))] text-sm', listClassName), children: visibleItems.map((item) => (_jsx(TabTrigger, { value: item.id, className: triggerClassName, maxWidth: tabMaxWidth, minWidth: tabMinWidth, width: tabWidth, truncate: truncateLabels, children: item.label }, item.id))) }), visibleItems.map((item) => (_jsx(Tabs.Content, { value: item.id, className: cn('flex h-full min-w-0 flex-1 flex-col overflow-hidden', contentClassName), children: item.children }, item.id)))] }) }));
 }
-function TabTrigger({ children, className, value, }) {
-    return (_jsx(Tabs.Trigger, { value: value, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 data-[state=active]:border-app-border data-[state=active]:border-b-surface data-[state=active]:bg-surface data-[state=active]:text-foreground -mb-px inline-flex shrink-0 cursor-pointer items-center border border-t-0 border-transparent bg-[color-mix(in_srgb,var(--foreground-muted)_7%,var(--surface))] px-3 py-2 text-sm font-medium transition-colors first:border-l-0 hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,var(--surface))] focus:outline-none focus-visible:ring-2', className), children: children }));
+function TabTrigger({ children, className, value, maxWidth, minWidth, width, truncate, }) {
+    const style = {
+        maxWidth,
+        minWidth: minWidth ?? DEFAULT_TAB_MIN_WIDTH,
+        width,
+    };
+    return (_jsx(Tabs.Trigger, { value: value, style: style, className: cn('text-foreground-muted hover:text-foreground focus-visible:ring-brand/50 data-[state=active]:border-app-border data-[state=active]:border-b-surface data-[state=active]:bg-surface data-[state=active]:text-foreground -mb-px inline-flex shrink-0 cursor-pointer items-center justify-center border border-t-0 border-transparent bg-[color-mix(in_srgb,var(--foreground-muted)_7%,var(--surface))] px-4 py-2 text-sm font-medium transition-colors first:border-l-0 hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,var(--surface))] focus:outline-none focus-visible:ring-2', className), children: _jsx("span", { className: cn('min-w-0', truncate && 'overflow-hidden text-ellipsis whitespace-nowrap'), children: children }) }));
 }

package/dist/styles.css

@@ -1192,6 +1192,9 @@ h2.react-datepicker__current-month {
   .h-56 {
     height: calc(var(--spacing) * 56);
   }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
@@ -1372,6 +1375,9 @@ h2.react-datepicker__current-month {
   .w-\[42rem\] {
     width: 42rem;
   }
+  .w-\[44rem\] {
+    width: 44rem;
+  }
   .w-\[46rem\] {
     width: 46rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.25.3",
+    "version": "0.25.4",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",