@veevarts/design-system 1.17.0-alpha.4 → 1.17.0-alpha.6

package/dist/patterns/AdminTextField/AdminTextField.d.ts

@@ -1,7 +1,21 @@
 import { default as React } from 'react';
+/**
+ * The uppercase field label, standalone — for a control this component does
+ * not cover (a checkbox group, a read-only preview) that should still be
+ * captioned like every other admin field. `suffix` is the lighter tail:
+ * "· optional", "· auto-generated, immutable".
+ */
+export declare const AdminFieldLabel: React.FC<{
+    children: React.ReactNode;
+    suffix?: React.ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}>;
 interface AdminTextFieldBase {
     /** Uppercase label above the control. Omit only when an adjacent element already names it. */
     label?: React.ReactNode;
+    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
+    labelSuffix?: React.ReactNode;
     value: string;
     placeholder?: string;
     disabled?: boolean;

package/dist/patterns/AdminTextField/index.d.ts

@@ -1,3 +1,3 @@
-export { AdminTextField } from './AdminTextField';
+export { AdminFieldLabel, AdminTextField } from './AdminTextField';
 export type { AdminTextFieldProps } from './AdminTextField';
-export { adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';
+export { adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';

package/dist/patterns/AdminTextField/styles.d.ts

@@ -16,6 +16,12 @@
  */
 /** Uppercase label above a control — HeroUI's `label` slot. */
 export declare const adminFieldLabelClass = "text-[11px] font-semibold uppercase tracking-[.04em] text-acct-muted mb-1.5";
+/**
+ * The lighter tail of a label — "· optional", "· auto-generated, immutable".
+ * Undoes the label's uppercase/tracking/weight so the annotation reads as an
+ * aside, not as part of the field's name.
+ */
+export declare const adminFieldLabelSuffixClass = "font-normal normal-case tracking-normal";
 /**
  * The 38px box — HeroUI's `inputWrapper` slot, which carries the border and
  * background (the `input` slot is the bare field).

package/dist/patterns/AdminToolbar/AdminToolbar.d.ts

@@ -2,8 +2,10 @@ import { default as React } from 'react';
 export interface AdminToolbarProps {
     searchValue: string;
     onSearchChange: (value: string) => void;
-    /** Placeholder AND the hidden label, so the field is named even once filled. */
+    /** The field's accessible name — say what it searches, not how. */
     searchLabel: string;
+    /** Visible hint. Falls back to the label when the two would say the same thing. */
+    searchPlaceholder?: string;
     /** Leading glyph inside the search box. */
     searchIcon?: React.ReactNode;
     /** Filters, sort pickers, a toggle — laid out after the search box. */

package/dist/patterns/FeedbackState/FeedbackState.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { EmptyStateProps, ErrorStateProps, FeedbackStateProps, LoadingStateProps, SuccessStateProps } from './type';
-export declare function FeedbackState({ variant, title, titleAs: TitleElement, description, icon, actions, role, ariaLive, iconSize, className, classNames, 'data-testid': dataTestId, }: FeedbackStateProps): JSX.Element;
+export declare function FeedbackState({ variant, surface, title, titleAs: TitleElement, description, icon, actions, role, ariaLive, iconSize, className, classNames, 'data-testid': dataTestId, }: FeedbackStateProps): JSX.Element;
 export declare namespace FeedbackState {
     var displayName: string;
 }

package/dist/patterns/FeedbackState/type.d.ts

@@ -1,5 +1,18 @@
 import { AriaRole, ReactNode } from 'react';
 export type FeedbackStateVariant = 'empty' | 'error' | 'success' | 'loading';
+/**
+ * Where the state is rendered, which is a different question from what it says.
+ *
+ * `card` is the inline block: a dashed outline that marks off a region of a
+ * denser page. `panel` is the whole content area of an admin card that has
+ * nothing to show — no outline (the card already draws one), a larger icon tile
+ * and heavier title, sized so the state does not read as a small notice
+ * stranded in a big empty box.
+ *
+ * The `panel` measurements are the back-office mockups', which is why they are
+ * pinned rather than rounded to the nearest scale step.
+ */
+export type FeedbackStateSurface = 'card' | 'panel';
 export interface FeedbackStateClassNames {
     base?: string;
     iconWrapper?: string;
@@ -12,6 +25,8 @@ export interface FeedbackStateClassNames {
 export interface FeedbackStateProps {
     /** Visual tone and default accessibility role. */
     variant?: FeedbackStateVariant;
+    /** Inline block (default) or the full content area of an admin card. */
+    surface?: FeedbackStateSurface;
     /** Main state message. */
     title: ReactNode;
     /** Semantic element used for the title. Defaults to a paragraph for inline states. */

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.17.0-alpha.4",
+    "version": "1.17.0-alpha.6",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",