@dynamic-framework/ui-react 1.19.1 → 1.21.0

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

@@ -5,6 +5,7 @@ type Props<CustomModifierNames extends string = never, WithRange extends boolean
     date?: string | null;
     selectsRange?: boolean;
     inputLabel?: string;
+    inputHint?: string;
     inputAriaLabel?: string;
     inputActionAriaLabel?: string;
     iconInput?: string;
@@ -21,6 +22,8 @@ type Props<CustomModifierNames extends string = never, WithRange extends boolean
     locale?: Locale;
     minYearSelect?: number;
     maxYearSelect?: number;
+    invalid?: boolean;
+    valid?: boolean;
 };
-export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, inputLabel, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, locale, className, formatWeekDay: formatWeekDayProp, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
+export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid, valid, locale, className, formatWeekDay: formatWeekDayProp, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,6 +5,6 @@ type Props = BaseProps & {
     value?: string;
     onClick?: () => void;
     inputLabel?: string;
-} & Omit<ComponentProps<typeof DInput>, 'type' | 'isReadOnly' | 'onIconEndClick' | 'value'>;
+} & Omit<ComponentProps<typeof DInput>, 'type' | 'onIconEndClick' | 'value'>;
 declare const ForwardedDDatePickerInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDDatePickerInput;

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.19.1",
+  "version": "1.21.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -149,5 +149,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "a8a398fe7b2718df5329a1f1ca6d38aa36b8ef02"
+  "gitHead": "b56a0d3b750c6e09caa743b3445b49b157704fa1"
 }

package/src/style/abstracts/_utilities.scss

@@ -125,5 +125,12 @@ $utilities: map-merge(
         responsive: true,
       )
     ),
+    "body-font-size": (
+      class: "fs-body",
+      responsive: true,
+      css-var: true,
+      css-variable-name: fs-body-font-size,
+      values: $body-font-sizes
+    )
   )
 );

package/src/style/abstracts/variables/_typography.scss

@@ -38,12 +38,47 @@ $font-weight-base: $font-weight-normal !default;
 $line-height-base: 1.5 !default;
 
 // custom
-$h1-font-size-value: $font-size-base * 4 !default;
-$h2-font-size-value: $font-size-base * 3.5 !default;
-$h3-font-size-value: $font-size-base * 3 !default;
-$h4-font-size-value: $font-size-base * 2 !default;
-$h5-font-size-value: $font-size-base * 1.5 !default;
-$h6-font-size-value: $font-size-base * 1.125 !default;
+$body-large-font-size-value: $font-size-base * 1.5 !default;   // 24px - 21.525px
+$body-medium-font-size-value: $font-size-base * 1.25 !default; // 20px - 20px
+$body-normal-font-size-value: $font-size-base * 1 !default;    // 16px - 16px
+$body-small-font-size-value: $font-size-base * .875 !default;  // 14px - 14px
+$body-tiny-font-size-value: $font-size-base * .8125 !default;  // 13px - 13px
+
+$body-large-font-size: var(--#{$prefix}fs-body-large) !default;
+$body-medium-font-size: var(--#{$prefix}fs-body-medium) !default;
+$body-normal-font-size: var(--#{$prefix}fs-body-normal) !default;
+$body-small-font-size: var(--#{$prefix}fs-body-small) !default;
+$body-tiny-font-size: var(--#{$prefix}fs-body-tiny) !default;
+// end custom
+// scss-docs-end font-variables
+
+// scss-docs-start body-font-sizes
+// custom
+$body-font-sizes-value: (
+  large: $body-large-font-size-value,
+  medium: $body-medium-font-size-value,
+  normal: $body-normal-font-size-value,
+  small: $body-small-font-size-value,
+  tiny: $body-tiny-font-size-value,
+) !default;
+
+$body-font-sizes: (
+  large: $body-large-font-size,
+  medium: $body-medium-font-size,
+  normal: $body-normal-font-size,
+  small: $body-small-font-size,
+  tiny: $body-tiny-font-size,
+) !default;
+// end custom
+// scss-docs-end body-font-sizes
+
+// custom
+$h1-font-size-value: $font-size-base * 3 !default;    // 48px - 30.675px
+$h2-font-size-value: $font-size-base * 2.5 !default;  // 40px - 27.625px
+$h3-font-size-value: $font-size-base * 2 !default;    // 32px - 25.575px
+$h4-font-size-value: $font-size-base * 1.5 !default;  // 24px - 21.525px
+$h5-font-size-value: $font-size-base * 1.25 !default; // 20px - 20px
+$h6-font-size-value: $font-size-base !default;        // 16px - 16px
 
 $h1-font-size: var(--#{$prefix}fs-1) !default;
 $h2-font-size: var(--#{$prefix}fs-2) !default;
@@ -85,12 +120,12 @@ $headings-line-height: var(--#{$prefix}heading-line-height) !default;
 
 // scss-docs-start display-headings
 // custom
-$display1-font-size-value: 7.5rem !default;
-$display2-font-size-value: 4.5rem !default;
-$display3-font-size-value: 4rem !default;
-$display4-font-size-value: 3.5rem !default;
-$display5-font-size-value: 3rem !default;
-$display6-font-size-value: 2.5rem !default;
+$display1-font-size-value: $font-size-base * 6 !default;   // 96px - 48.975px
+$display2-font-size-value: $font-size-base * 5.5 !default; // 88px - 45.925px
+$display3-font-size-value: $font-size-base * 5 !default;   // 80px - 42.875px
+$display4-font-size-value: $font-size-base * 4.5 !default; // 72px - 39.825px
+$display5-font-size-value: $font-size-base * 4 !default;   // 64px - 36.775px
+$display6-font-size-value: $font-size-base * 3.5 !default; // 56px - 33.725px
 
 $display1-font-size: var(--#{$prefix}fs-display-1) !default;
 $display2-font-size: var(--#{$prefix}fs-display-2) !default;

package/src/style/base/_type.scss

@@ -40,6 +40,11 @@
   line-height: $display-line-height;
 }
 
+// Body display classes
+[class*="fs-body-"] {
+  font-size: var(--#{$prefix}fs-body-font-size);
+}
+
 //
 // Emphasis
 //

package/src/style/components/_d-input-pin.scss

@@ -9,7 +9,7 @@
   flex-direction: column;
   align-items: flex-start;
 
-  form {
+  .d-input-pin-group {
     display: flex;
     flex-direction: row;
     gap: var(--#{$prefix}input-pin-form-gap);

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

@@ -101,6 +101,7 @@
   // select menu
   .d-select__menu-list {
     top: calc(var(--#{$prefix}input-border-width) * 2);
+    margin: calc(var(--#{$prefix}input-border-width) * -1);
     background: $input-bg;
     border-radius: var(--#{$prefix}input-border-radius);
     box-shadow: var(--#{$prefix}select-menu-shadow);

package/src/style/root/_root.scss

@@ -183,6 +183,11 @@
   @include rfs($small-font-size-value, --#{$prefix}rfs-fs-small);
   --#{$prefix}fs-small: var(--#{$prefix}rfs-fs-small);
 
+  @each $level, $value in $body-font-sizes-value {
+    @include rfs($value, --#{$prefix}rfs-fs-body-#{$level});
+    --#{$prefix}fs-body-#{$level}: var(--#{$prefix}rfs-fs-body-#{$level});
+  }
+
   --#{$prefix}fw-lighter: #{$font-weight-lighter-value};
   --#{$prefix}fw-light: #{$font-weight-light-value};
   --#{$prefix}fw-normal: #{$font-weight-normal-value};