@rufous/ui 0.3.60 → 0.3.62

package/dist/main.css

@@ -97,6 +97,7 @@
   flex-direction: column;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
   width: 685px !important;
+  max-width: 95vw;
   transition: background-color 0.3s, color 0.3s;
 }
 .dialog-container.size-sm {
@@ -495,6 +496,57 @@
   color: var(--primary-color);
   background: var(--hover-color);
 }
+.dg-actions-overflow {
+  display: contents;
+}
+.dg-toolbar-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: var(--surface-color);
+  color: var(--text-secondary);
+  cursor: pointer;
+  flex-shrink: 0;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    background-color 0.2s;
+}
+.dg-toolbar-toggle:hover {
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+  background: var(--hover-color);
+}
+.dg-toolbar-toggle > svg {
+  transition: transform 0.2s ease;
+}
+.dg-toolbar-toggle--expanded > svg {
+  transform: rotate(180deg);
+}
+@media (max-width: 600px) {
+  .dg-toolbar-toggle {
+    display: inline-flex;
+    margin-left: auto;
+  }
+  .dg-actions-overflow {
+    display: none;
+  }
+  .dg-actions-overflow--expanded {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex-basis: 100%;
+    order: 99;
+    margin-top: 4px;
+  }
+}
 .dg-table-wrap {
   border-top: 2px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);

package/dist/main.d.cts

@@ -907,6 +907,8 @@ interface BaseDialogProps {
     showCloseButton?: boolean;
     buttonAlign?: "flex-start" | "flex-end" | "center";
     showCancelButton?: boolean;
+    /** Show/hide the confirm (or submit) button. Defaults to true. */
+    showConfirmButton?: boolean;
     formatTitle?: boolean;
     fullWidth?: boolean;
     className?: string;
@@ -1840,10 +1842,116 @@ interface ListSubheaderProps {
 }
 declare const ListSubheader: React__default.FC<ListSubheaderProps>;
 
-interface TypographyProps {
+/**
+ * Shared system-prop surface for the four system-prop components. All values
+ * are `string | number`; numeric spacing/border values are resolved through
+ * the sx engine (1 unit = 8px by default).
+ */
+interface SystemProps {
+    m?: number | string;
+    mt?: number | string;
+    mb?: number | string;
+    ml?: number | string;
+    mr?: number | string;
+    mx?: number | string;
+    my?: number | string;
+    margin?: number | string;
+    marginTop?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    marginRight?: number | string;
+    marginInline?: number | string;
+    marginInlineStart?: number | string;
+    marginInlineEnd?: number | string;
+    marginBlock?: number | string;
+    marginBlockStart?: number | string;
+    marginBlockEnd?: number | string;
+    p?: number | string;
+    pt?: number | string;
+    pb?: number | string;
+    pl?: number | string;
+    pr?: number | string;
+    px?: number | string;
+    py?: number | string;
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    paddingRight?: number | string;
+    paddingInline?: number | string;
+    paddingInlineStart?: number | string;
+    paddingInlineEnd?: number | string;
+    paddingBlock?: number | string;
+    paddingBlockStart?: number | string;
+    paddingBlockEnd?: number | string;
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+    border?: number | string;
+    borderTop?: number | string;
+    borderRight?: number | string;
+    borderBottom?: number | string;
+    borderLeft?: number | string;
+    borderRadius?: number | string;
+    borderColor?: string;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    boxSizing?: string;
+    bgcolor?: string;
+    color?: string;
+    boxShadow?: number | string;
+    zIndex?: number | string;
+    typography?: string;
+    display?: string;
+    alignContent?: string;
+    alignItems?: string;
+    alignSelf?: string;
+    flex?: number | string;
+    flexDirection?: string;
+    flexGrow?: number | string;
+    flexShrink?: number | string;
+    flexWrap?: string;
+    flexBasis?: number | string;
+    justifyContent?: string;
+    justifyItems?: string;
+    justifySelf?: string;
+    order?: number | string;
+    gridColumn?: number | string;
+    gridRow?: number | string;
+    gridAutoFlow?: string;
+    gridAutoColumns?: string;
+    gridAutoRows?: string;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridTemplateAreas?: string;
+    gridArea?: string;
+    position?: string;
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    fontFamily?: string;
+    fontSize?: number | string;
+    fontStyle?: string;
+    fontWeight?: number | string;
+    letterSpacing?: number | string;
+    lineHeight?: number | string;
+    textAlign?: string;
+    textTransform?: string;
+    overflow?: string;
+    overflowX?: string;
+    overflowY?: string;
+}
+
+interface TypographyProps extends Omit<React__default.HTMLAttributes<HTMLElement>, "color">, SystemProps {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "overline" | "button";
     component?: keyof React__default.JSX.IntrinsicElements;
     align?: "inherit" | "left" | "center" | "right" | "justify";
+    /** Palette token (`primary`, `secondary`, `textPrimary`, …) or any CSS colour. */
     color?: "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | string;
     noWrap?: boolean;
     gutterBottom?: boolean;
@@ -1884,94 +1992,29 @@ interface TooltipProps {
 }
 declare const Tooltip: React__default.FC<TooltipProps>;
 
-interface BoxProps extends React.HTMLAttributes<HTMLElement> {
+interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, SystemProps {
     component?: keyof React.JSX.IntrinsicElements;
     children?: ReactNode;
-    display?: string;
-    flexDirection?: string;
-    alignItems?: string;
-    justifyContent?: string;
-    gap?: string | number;
-    flex?: string | number;
-    flexWrap?: string;
-    flexGrow?: number;
-    flexShrink?: number;
-    overflow?: string;
-    position?: string;
-    top?: string | number;
-    right?: string | number;
-    bottom?: string | number;
-    left?: string | number;
-    borderRadius?: string | number;
-    bgcolor?: string;
-    color?: string;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
-    width?: string | number;
-    height?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    minHeight?: string | number;
-    maxHeight?: string | number;
-    margin?: string | number;
-    padding?: string | number;
-    m?: number | string;
-    mt?: number | string;
-    mr?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mx?: number | string;
-    my?: number | string;
-    p?: number | string;
-    pt?: number | string;
-    pr?: number | string;
-    pb?: number | string;
-    pl?: number | string;
-    px?: number | string;
-    py?: number | string;
 }
 declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
 
-interface StackProps extends React.HTMLAttributes<HTMLElement> {
+interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, SystemProps {
     direction?: "row" | "row-reverse" | "column" | "column-reverse";
     spacing?: number | string;
-    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
-    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
     divider?: ReactNode;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
     useFlexGap?: boolean;
-    flex?: string | number;
-    overflow?: string;
     component?: keyof React.JSX.IntrinsicElements;
     children: ReactNode;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
-    width?: string | number;
-    height?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    minHeight?: string | number;
-    maxHeight?: string | number;
-    m?: number | string;
-    mt?: number | string;
-    mr?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mx?: number | string;
-    my?: number | string;
-    p?: number | string;
-    pt?: number | string;
-    pr?: number | string;
-    pb?: number | string;
-    pl?: number | string;
-    px?: number | string;
-    py?: number | string;
 }
 declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
 
-interface GridProps extends React.HTMLAttributes<HTMLElement> {
+interface GridProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, SystemProps {
     container?: boolean;
     item?: boolean;
     xs?: number | "auto" | true;
@@ -1985,8 +2028,6 @@ interface GridProps extends React.HTMLAttributes<HTMLElement> {
         md?: number;
     };
     direction?: "row" | "row-reverse" | "column" | "column-reverse";
-    alignItems?: string;
-    justifyContent?: string;
     wrap?: "nowrap" | "wrap" | "wrap-reverse";
     zeroMinWidth?: boolean;
     component?: keyof React.JSX.IntrinsicElements;
@@ -1994,26 +2035,6 @@ interface GridProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
-    width?: string | number;
-    height?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    minHeight?: string | number;
-    maxHeight?: string | number;
-    m?: number | string;
-    mt?: number | string;
-    mr?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mx?: number | string;
-    my?: number | string;
-    p?: number | string;
-    pt?: number | string;
-    pr?: number | string;
-    pb?: number | string;
-    pl?: number | string;
-    px?: number | string;
-    py?: number | string;
 }
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
 

package/dist/main.d.ts

@@ -907,6 +907,8 @@ interface BaseDialogProps {
     showCloseButton?: boolean;
     buttonAlign?: "flex-start" | "flex-end" | "center";
     showCancelButton?: boolean;
+    /** Show/hide the confirm (or submit) button. Defaults to true. */
+    showConfirmButton?: boolean;
     formatTitle?: boolean;
     fullWidth?: boolean;
     className?: string;
@@ -1840,10 +1842,116 @@ interface ListSubheaderProps {
 }
 declare const ListSubheader: React__default.FC<ListSubheaderProps>;
 
-interface TypographyProps {
+/**
+ * Shared system-prop surface for the four system-prop components. All values
+ * are `string | number`; numeric spacing/border values are resolved through
+ * the sx engine (1 unit = 8px by default).
+ */
+interface SystemProps {
+    m?: number | string;
+    mt?: number | string;
+    mb?: number | string;
+    ml?: number | string;
+    mr?: number | string;
+    mx?: number | string;
+    my?: number | string;
+    margin?: number | string;
+    marginTop?: number | string;
+    marginBottom?: number | string;
+    marginLeft?: number | string;
+    marginRight?: number | string;
+    marginInline?: number | string;
+    marginInlineStart?: number | string;
+    marginInlineEnd?: number | string;
+    marginBlock?: number | string;
+    marginBlockStart?: number | string;
+    marginBlockEnd?: number | string;
+    p?: number | string;
+    pt?: number | string;
+    pb?: number | string;
+    pl?: number | string;
+    pr?: number | string;
+    px?: number | string;
+    py?: number | string;
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
+    paddingRight?: number | string;
+    paddingInline?: number | string;
+    paddingInlineStart?: number | string;
+    paddingInlineEnd?: number | string;
+    paddingBlock?: number | string;
+    paddingBlockStart?: number | string;
+    paddingBlockEnd?: number | string;
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+    border?: number | string;
+    borderTop?: number | string;
+    borderRight?: number | string;
+    borderBottom?: number | string;
+    borderLeft?: number | string;
+    borderRadius?: number | string;
+    borderColor?: string;
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    boxSizing?: string;
+    bgcolor?: string;
+    color?: string;
+    boxShadow?: number | string;
+    zIndex?: number | string;
+    typography?: string;
+    display?: string;
+    alignContent?: string;
+    alignItems?: string;
+    alignSelf?: string;
+    flex?: number | string;
+    flexDirection?: string;
+    flexGrow?: number | string;
+    flexShrink?: number | string;
+    flexWrap?: string;
+    flexBasis?: number | string;
+    justifyContent?: string;
+    justifyItems?: string;
+    justifySelf?: string;
+    order?: number | string;
+    gridColumn?: number | string;
+    gridRow?: number | string;
+    gridAutoFlow?: string;
+    gridAutoColumns?: string;
+    gridAutoRows?: string;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridTemplateAreas?: string;
+    gridArea?: string;
+    position?: string;
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    fontFamily?: string;
+    fontSize?: number | string;
+    fontStyle?: string;
+    fontWeight?: number | string;
+    letterSpacing?: number | string;
+    lineHeight?: number | string;
+    textAlign?: string;
+    textTransform?: string;
+    overflow?: string;
+    overflowX?: string;
+    overflowY?: string;
+}
+
+interface TypographyProps extends Omit<React__default.HTMLAttributes<HTMLElement>, "color">, SystemProps {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "overline" | "button";
     component?: keyof React__default.JSX.IntrinsicElements;
     align?: "inherit" | "left" | "center" | "right" | "justify";
+    /** Palette token (`primary`, `secondary`, `textPrimary`, …) or any CSS colour. */
     color?: "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | string;
     noWrap?: boolean;
     gutterBottom?: boolean;
@@ -1884,94 +1992,29 @@ interface TooltipProps {
 }
 declare const Tooltip: React__default.FC<TooltipProps>;
 
-interface BoxProps extends React.HTMLAttributes<HTMLElement> {
+interface BoxProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, SystemProps {
     component?: keyof React.JSX.IntrinsicElements;
     children?: ReactNode;
-    display?: string;
-    flexDirection?: string;
-    alignItems?: string;
-    justifyContent?: string;
-    gap?: string | number;
-    flex?: string | number;
-    flexWrap?: string;
-    flexGrow?: number;
-    flexShrink?: number;
-    overflow?: string;
-    position?: string;
-    top?: string | number;
-    right?: string | number;
-    bottom?: string | number;
-    left?: string | number;
-    borderRadius?: string | number;
-    bgcolor?: string;
-    color?: string;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
-    width?: string | number;
-    height?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    minHeight?: string | number;
-    maxHeight?: string | number;
-    margin?: string | number;
-    padding?: string | number;
-    m?: number | string;
-    mt?: number | string;
-    mr?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mx?: number | string;
-    my?: number | string;
-    p?: number | string;
-    pt?: number | string;
-    pr?: number | string;
-    pb?: number | string;
-    pl?: number | string;
-    px?: number | string;
-    py?: number | string;
 }
 declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
 
-interface StackProps extends React.HTMLAttributes<HTMLElement> {
+interface StackProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, SystemProps {
     direction?: "row" | "row-reverse" | "column" | "column-reverse";
     spacing?: number | string;
-    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
-    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
     divider?: ReactNode;
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
     useFlexGap?: boolean;
-    flex?: string | number;
-    overflow?: string;
     component?: keyof React.JSX.IntrinsicElements;
     children: ReactNode;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
-    width?: string | number;
-    height?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    minHeight?: string | number;
-    maxHeight?: string | number;
-    m?: number | string;
-    mt?: number | string;
-    mr?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mx?: number | string;
-    my?: number | string;
-    p?: number | string;
-    pt?: number | string;
-    pr?: number | string;
-    pb?: number | string;
-    pl?: number | string;
-    px?: number | string;
-    py?: number | string;
 }
 declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
 
-interface GridProps extends React.HTMLAttributes<HTMLElement> {
+interface GridProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, SystemProps {
     container?: boolean;
     item?: boolean;
     xs?: number | "auto" | true;
@@ -1985,8 +2028,6 @@ interface GridProps extends React.HTMLAttributes<HTMLElement> {
         md?: number;
     };
     direction?: "row" | "row-reverse" | "column" | "column-reverse";
-    alignItems?: string;
-    justifyContent?: string;
     wrap?: "nowrap" | "wrap" | "wrap-reverse";
     zeroMinWidth?: boolean;
     component?: keyof React.JSX.IntrinsicElements;
@@ -1994,26 +2035,6 @@ interface GridProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
-    width?: string | number;
-    height?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
-    minHeight?: string | number;
-    maxHeight?: string | number;
-    m?: number | string;
-    mt?: number | string;
-    mr?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mx?: number | string;
-    my?: number | string;
-    p?: number | string;
-    pt?: number | string;
-    pr?: number | string;
-    pb?: number | string;
-    pl?: number | string;
-    px?: number | string;
-    py?: number | string;
 }
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;