@paygreen/pgui 3.1.3 → 3.2.0

package/dist/components/card-expandable/card-expandable.d.ts

@@ -3,7 +3,9 @@ import { Card } from '@chakra-ui/react';
 export interface CardExpandableProps extends Omit<Card.RootProps, 'title' | 'variant' | 'colorPalette'> {
     title?: ReactNode;
     subtitle?: ReactNode;
+    /** Custom header. Inside the expand button — no links or nested buttons. */
     header?: ReactNode;
+    /** Trailing chips. Same constraint as `header`: non-interactive only. */
     tags?: ReactNode[];
     children: ReactNode;
     defaultExpanded?: boolean;
@@ -13,7 +15,7 @@ export interface CardExpandableProps extends Omit<Card.RootProps, 'title' | 'var
     isLazy?: boolean;
 }
 declare const CardExpandable: {
-    ({ title, subtitle, header, tags, children, defaultExpanded, onExpandChange, colorPalette, icon, isLazy, ...cardProps }: CardExpandableProps): import("react").JSX.Element;
+    ({ title, subtitle, header, tags, children, defaultExpanded, onExpandChange, colorPalette, icon, isLazy, css: userCss, ...cardProps }: CardExpandableProps): import("react").JSX.Element;
     displayName: string;
 };
 export { CardExpandable };

package/dist/components/data-table/hooks/use-table-styling.d.ts

@@ -1,40 +1,40 @@
 export declare const useTableStyling: (variant: "simple" | "striped", colorPalette?: "blue" | "orange") => {
     headerBg: {
-        readonly base: "lm_cello.80";
-        readonly _dark: "bg.muted";
+        _dark: string;
+        base: "lm_cello.80";
     } | {
-        readonly base: "lm_orange.80";
-        readonly _dark: "lm_orange.30/20";
+        _dark: string;
+        base: "lm_orange.80";
     } | {
-        readonly base: "lm_gray.90";
-        readonly _dark: "lm_gray.30/20";
+        _dark: string;
+        base: "lm_gray.90";
     };
     headerHover: {
         readonly base: "lm_cello.70";
-        readonly _dark: "bg.emphasized";
+        readonly _dark: "lm_cello.30/40";
     } | {
         readonly base: "lm_orange.70";
         readonly _dark: "lm_orange.30/40";
     } | {
         readonly base: "lm_gray.80";
-        readonly _dark: "lm_gray.30/40";
+        readonly _dark: "bg.hover";
     };
-    getRowBg: (index: number) => "bg" | {
+    getRowBg: (index: number) => "bg.panel" | {
         readonly base: "lm_cello.80";
-        readonly _dark: "bg.muted";
+        readonly _dark: "lm_cello.30/20";
     } | {
         readonly base: "lm_orange.80";
         readonly _dark: "lm_orange.30/20";
     } | {
         readonly base: "lm_gray.90";
-        readonly _dark: "lm_gray.30/20";
+        readonly _dark: "bg.emphasized";
     };
     getRowHoverBg: (index: number) => {
         readonly base: "lm_cello.80";
-        readonly _dark: "bg.muted";
+        readonly _dark: "lm_cello.30/20";
     } | {
         readonly base: "lm_cello.70";
-        readonly _dark: "bg.emphasized";
+        readonly _dark: "lm_cello.30/40";
     } | {
         readonly base: "lm_orange.80";
         readonly _dark: "lm_orange.30/20";
@@ -43,9 +43,9 @@ export declare const useTableStyling: (variant: "simple" | "striped", colorPalet
         readonly _dark: "lm_orange.30/40";
     } | {
         readonly base: "lm_gray.90";
-        readonly _dark: "lm_gray.30/20";
+        readonly _dark: "bg.emphasized";
     } | {
         readonly base: "lm_gray.80";
-        readonly _dark: "lm_gray.30/40";
+        readonly _dark: "bg.hover";
     };
 };

package/dist/components/field-wrapper/field-wrapper.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Field, BoxProps } from '@chakra-ui/react';
 interface FieldContextType {
     /** Whether the field is invalid */
     invalid?: boolean;
@@ -6,7 +7,16 @@ interface FieldContextType {
     required?: boolean;
     /** Whether the field is disabled */
     disabled?: boolean;
+    /** Shared id used to associate the visible label with the control */
+    id?: string;
+    /** Visible FieldWrapper label, when set */
+    label?: string;
+    /** Space-separated ids of helper / error text */
+    describedBy?: string;
+    /** Id of the visible error message, when invalid */
+    errorId?: string;
 }
+declare const useField: () => FieldContextType;
 export interface FieldWrapperProps {
     /** The field label */
     label?: string;
@@ -22,29 +32,29 @@ export interface FieldWrapperProps {
     helperText?: string;
     /** The field content (input, select, etc.) */
     children: ReactNode;
-    /** Additional props for the field root */
-    fieldRootProps?: Record<string, any>;
+    /** Additional props for the field root. `required` is announced on the control, not the group. */
+    fieldRootProps?: Omit<Field.RootProps, 'invalid' | 'required' | 'disabled' | 'children'>;
     /** Additional props for the field container */
-    containerProps?: Record<string, any>;
+    containerProps?: BoxProps;
+}
+export interface ControlFieldProps {
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    fallbackLabel?: string;
 }
+export declare const asAriaString: (value: unknown) => string | undefined;
+/** Maps FieldWrapper context onto a control, unless the consumer set aria-label. */
+declare const useControlFieldProps: (options?: ControlFieldProps) => {
+    id: string | undefined;
+    'aria-label': string | undefined;
+    'aria-labelledby': string | undefined;
+    'aria-describedby': string | undefined;
+    errorId: string | undefined;
+};
 /**
- * FieldWrapper component - A wrapper for form fields with label, error message, and context
- *
- * @example
- * ```tsx
- * <FieldWrapper
- *   label="Email"
- *   errorMessage="Please enter a valid email"
- *   invalid={hasError}
- *   required
- * >
- *   <Input type="email" />
- * </FieldWrapper>
- * ```
+ * Field wrapper: label, error, helper, and shared field context.
  */
 declare const FieldWrapper: import('react').ForwardRefExoticComponent<FieldWrapperProps & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * Hook to access the field context
- */
-declare const useField: () => FieldContextType;
-export { FieldWrapper, useField };
+export { FieldWrapper, useControlFieldProps, useField };

package/dist/components/ui/toast-info-icon.d.ts

@@ -0,0 +1 @@
+export declare const ToastInfoIcon: () => import("react").JSX.Element;

package/dist/components/ui/toaster.d.ts

@@ -1,2 +1,3 @@
-export declare const toaster: import('@zag-js/toast').Store<any>;
+import { ReactNode } from 'react';
+export declare const toaster: import('@ark-ui/react').CreateToasterReturn<ReactNode>;
 export declare const Toaster: () => import("react").JSX.Element;

package/dist/foundations/form-controls/all-controls-section.d.ts

@@ -0,0 +1,2 @@
+declare const AllControlsSection: () => import("react").JSX.Element;
+export default AllControlsSection;

package/dist/foundations/form-controls/chakra-native-select.d.ts

@@ -0,0 +1,6 @@
+import { FieldSize } from './constants';
+type ChakraNativeSelectProps = {
+    size?: FieldSize;
+} & Record<string, unknown>;
+declare const ChakraNativeSelect: ({ size, ...rootProps }: ChakraNativeSelectProps) => import("react").JSX.Element;
+export default ChakraNativeSelect;

package/dist/foundations/form-controls/constants.d.ts

@@ -0,0 +1,4 @@
+import { SelectOptionType } from '../../components/select/select';
+export declare const FIELD_SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
+export type FieldSize = (typeof FIELD_SIZES)[number];
+export declare const SELECT_OPTIONS: SelectOptionType[];

package/dist/foundations/form-controls/sizes-section.d.ts

@@ -0,0 +1,2 @@
+declare const SizesSection: () => import("react").JSX.Element;
+export default SizesSection;

package/dist/foundations/form-controls/states-section.d.ts

@@ -0,0 +1,2 @@
+declare const StatesSection: () => import("react").JSX.Element;
+export default StatesSection;