@dynamic-framework/ui-react 2.0.0-dev.21 → 2.0.0-dev.23

package/dist/types/components/DButton/DButton.d.ts

@@ -1,6 +1,9 @@
 import { type ButtonHTMLAttributes } from 'react';
 import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, EndIconProps, StartIconProps } from '../interface';
 interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, BaseProps, StartIconProps, EndIconProps {
+    href?: string;
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     color?: ComponentColor;
     size?: ComponentSize;
     variant?: ButtonVariant;
@@ -9,5 +12,5 @@ interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
     loadingText?: string;
     loadingAriaLabel?: string;
 }
-declare const DButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default DButton;

package/dist/types/components/DButtonIcon/DButtonIcon.d.ts

@@ -13,7 +13,10 @@ type Props = BaseProps & FamilyIconProps & {
     ariaLabel?: string;
     stopPropagationEnabled?: boolean;
     disabled?: boolean;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    href?: string;
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+    onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 };
-export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, color, type, loading, disabled, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, color, type, loading, disabled, href, target, rel, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, dataAttributes, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DCreditCard/DCreditCard.d.ts

@@ -1,6 +1,7 @@
+type CardBrand = 'visa' | 'mastercard';
 type Props = {
     className?: string;
-    brand?: string;
+    brand?: CardBrand;
     isChipVisible?: boolean;
     name?: string;
     number?: string;

package/dist/types/components/DDataStateWrapper/DDataStateWrapper.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+type Renderable = ReactNode | (() => ReactNode);
+type DDataStateWrapperProps<T> = {
+    isLoading: boolean;
+    isError: boolean;
+    data: T[] | undefined;
+    onRetry?: () => void;
+    renderLoading?: Renderable;
+    renderEmpty?: Renderable;
+    renderError?: Renderable;
+    children: (data: T[]) => ReactNode;
+};
+export default function DDataStateWrapper<T>({ isLoading, isError, data, onRetry, renderLoading, renderEmpty, renderError, children, }: DDataStateWrapperProps<T>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/types/components/DDataStateWrapper/components/EmptyState.d.ts

@@ -0,0 +1,8 @@
+interface EmptyStateProps {
+    message?: string;
+    icon?: string;
+    actionText?: string;
+    onAction?: () => void;
+}
+export declare function EmptyState({ message, icon, actionText, onAction, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DDataStateWrapper/components/ErrorState.d.ts

@@ -0,0 +1,8 @@
+type ErrorStateProps = {
+    message?: string;
+    onRetry?: () => void;
+    retryMessage?: string;
+    color?: 'danger' | 'warning';
+};
+export declare function ErrorState({ message, onRetry, retryMessage, color, }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DDataStateWrapper/components/LoadingState.d.ts

@@ -0,0 +1,6 @@
+type LoadingStateProps = {
+    ariaLabel?: string;
+    className?: string;
+};
+export declare function LoadingState({ ariaLabel, className }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DDataStateWrapper/index.d.ts

@@ -0,0 +1,2 @@
+import DDataStateWrapper from './DDataStateWrapper';
+export default DDataStateWrapper;

package/dist/types/components/DErrorBoundary/DErrorBoundary.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren, type ReactNode, type ErrorInfo } from 'react';
+import { FallbackProps, useErrorBoundary, getErrorMessage } from 'react-error-boundary';
+export { type FallbackProps, useErrorBoundary, getErrorMessage, };
+export type DErrorBoundaryProps = PropsWithChildren<{
+    name?: string;
+    fallback?: (props: FallbackProps) => ReactNode;
+    resetKeys?: unknown[];
+    onReset?: () => void;
+    onError?: (error: unknown, info: ErrorInfo) => void;
+}>;
+export default function DErrorBoundary({ name, fallback, resetKeys, onReset, onError, children, }: DErrorBoundaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DErrorBoundary/components/DefaultErrorBoundary.d.ts

@@ -0,0 +1,6 @@
+import { FallbackProps } from 'react-error-boundary';
+type Props = {
+    resetErrorBoundary: FallbackProps['resetErrorBoundary'];
+};
+export default function DefaultErrorBoundary({ resetErrorBoundary }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DErrorBoundary/index.d.ts

@@ -0,0 +1,3 @@
+import DErrorBoundary, { type FallbackProps, useErrorBoundary, getErrorMessage } from './DErrorBoundary';
+export { type FallbackProps, useErrorBoundary, getErrorMessage, };
+export default DErrorBoundary;

package/dist/types/components/DVoucher/DVoucher.d.ts

@@ -1,14 +1,15 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
+import DIcon from '../DIcon';
 type Props = PropsWithChildren<{
     amount?: string;
     amountDetails?: ReactNode;
-    icon?: string;
-    color?: string;
+    icon?: false | null | string | Partial<ComponentProps<typeof DIcon>>;
+    className?: string;
     message: string;
     title: string;
     downloadText?: string;
     shareText?: string;
     onError?: (err: Error) => Promise<void> | void;
 }>;
-export default function DVoucher({ amount, amountDetails, icon, color, title, onError, message, downloadText, shareText, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DVoucher({ amount, amountDetails, icon, title, onError, message, downloadText, shareText, className, children, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/index.d.ts

@@ -48,3 +48,5 @@ export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';
 export { default as DVoucher } from './DVoucher';
 export { default as DOtp } from './DOtp';
+export { default as DErrorBoundary, useErrorBoundary, type FallbackProps, getErrorMessage, } from './DErrorBoundary';
+export { default as DDataStateWrapper } from './DDataStateWrapper';

package/package.json

@@ -3,9 +3,9 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.21",
+  "version": "2.0.0-dev.23",
   "description": "React Dynamic Framework",
-  "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
+  "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dynamic-framework/dynamic-ui.git"
@@ -103,6 +103,7 @@
     "jspdf": "^4.0.0",
     "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
+    "react-error-boundary": "^6.1.0",
     "react-international-phone": "~4.6.0",
     "react-responsive-pagination": "~2.11.3",
     "react-select": "~5.10.2"

package/src/style/abstracts/_utilities-dark.scss

@@ -0,0 +1,72 @@
+@mixin generate-dark-utility($utility) {
+  $values: map-get($utility, values);
+
+  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+    $values: zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map-get($utility, property);
+
+    @if type-of($properties) == "string" {
+      $properties: append((), $properties);
+    }
+
+    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+    $property-class-modifier: if($key, if($property-class == "", "", "-") + $key, "");
+
+    $is-css-var: map-get($utility, css-var);
+    $is-local-vars: map-get($utility, local-vars);
+
+    @if $value != null {
+      $escaped-prefix: "dark\\:";
+      $selector: ".#{$escaped-prefix}#{$property-class}#{$property-class-modifier}";
+
+      @if $is-css-var {
+        @media (prefers-color-scheme: dark) {
+          #{$selector} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
+        }
+        .dark #{$selector} {
+          --#{$prefix}#{$css-variable-name}: #{$value};
+        }
+      } @else {
+        @media (prefers-color-scheme: dark) {
+          #{$selector} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
+          }
+        }
+        .dark #{$selector} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
+              }
+            }
+            #{$property}: $value if($enable-important-utilities, !important, null);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin generate-dark-utilities($utilities-map) {
+  @each $name, $utility in $utilities-map {
+    @if map-has-key($utility, values) and map-has-key($utility, property) {
+      @include generate-dark-utility($utility);
+    }
+  }
+}
+
+@include generate-dark-utilities($utilities);

package/src/style/components/_d-voucher.scss

@@ -18,6 +18,7 @@
 
 .d-voucher-amount {
   padding: var(--#{$prefix}voucher-amount-padding);
+  text-align: center;
   background: var(--#{$prefix}voucher-amount-background);
   border-radius: var(--#{$prefix}voucher-amount-rounded);
 }

package/src/style/dynamic-ui-non-root.scss

@@ -12,4 +12,6 @@
 
 @import "abstracts/utilities-hover";
 
+@import "abstracts/utilities-dark";
+
 @import "shame";

package/src/style/dynamic-ui.scss

@@ -13,5 +13,6 @@
 @import "node_modules/bootstrap/scss/utilities/api";
 
 @import "abstracts/utilities-hover";
+@import "abstracts/utilities-dark";
 
 @import "shame";