@ostack.tech/ui 0.6.1 → 0.6.3

package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts

@@ -23,7 +23,7 @@ export interface LocalizationObject {
     dateFnsLocale: DateFnsLocale;
     AlertDialog: Pick<ConfirmDialogOptions, "okText">;
     Calendar: Pick<CalendarProps, "previousMonthLabel" | "nextMonthLabel">;
-    CloseButton: Pick<CloseButtonProps, "aria-label">;
+    CloseButton: Pick<CloseButtonProps, "label">;
     CommandMenu: Pick<CommandMenuProps, "label" | "searchPlaceholder" | "listLabel" | "loadingLabel" | "emptyMessage">;
     CommandMenuDialog: Pick<CommandMenuDialogProps, "title" | "description">;
     ConfirmDialog: Pick<ConfirmDialogOptions, "okText" | "cancelText">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -44,12 +44,12 @@
     "copy:scss": "cpy 'src/**/*.scss' '!src/**/*.stories.scss' scss/"
   },
   "dependencies": {
-    "@fortawesome/react-fontawesome": "^3.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "@tanstack/react-virtual": "^3.13.12",
     "cmdk": "^1.1.1",
     "from-exponential": "^1.1.1",
     "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.11.2",
+    "react-day-picker": "^9.11.3",
     "react-error-boundary": "^6.0.0",
     "react-number-format": "^5.4.4",
     "react-to-print": "^3.2.0",

package/scss/_utils.scss

@@ -26,7 +26,6 @@
 @forward "components/Calendar/Calendar-variables";
 @forward "components/Card/Card-variables";
 @forward "components/Checkbox/Checkbox-variables";
-@forward "components/CloseButton/CloseButton-variables";
 @forward "components/Code/Code-variables";
 @forward "components/Collapsible/Collapsible-variables";
 @forward "components/Dialog/Dialog-variables";
@@ -44,6 +43,7 @@
 @forward "components/Feedback/Feedback-variables";
 @forward "components/Icon/Icon-variables";
 @forward "components/IconButton/IconButton-variables";
+@forward "components/CloseButton/CloseButton-variables";
 @forward "components/Input/Input-variables";
 @forward "components/Link/Link-variables";
 @forward "components/Mark/Mark-variables";

package/scss/components/CloseButton/_CloseButton-variables.scss

@@ -1,2 +1,36 @@
-$close-button-size: 1.75em !default;
+@use "../IconButton/IconButton-variables" as *;
+@use "../../scss/base-variables" as *;
+
 $close-button-opacity: 0.8 !default;
+
+// Small size
+$close-button-sm-min-size: 18px !default;
+$close-button-sm-font-size: var(--#{$prefix}font-size-2xs) !default;
+
+// Medium size
+$close-button-md-min-size: 24px !default;
+$close-button-md-font-size: var(--#{$prefix}font-size-sm) !default;
+
+// Large size
+$close-button-lg-min-size: 32px !default;
+$close-button-lg-font-size: var(--#{$prefix}font-size-lg) !default;
+
+// Extra large size
+$close-button-xl-min-size: 40px !default;
+$close-button-xl-font-size: var(--#{$prefix}font-size-2xl) !default;
+
+// Sizes
+$close-button-sizes: $icon-button-sizes !default;
+
+$close-button-min-size-by-size: (
+  sm: $close-button-sm-min-size,
+  md: $close-button-md-min-size,
+  lg: $close-button-lg-min-size,
+  xl: $close-button-xl-min-size,
+) !default;
+$close-button-font-size-by-size: (
+  sm: $close-button-sm-font-size,
+  md: $close-button-md-font-size,
+  lg: $close-button-lg-font-size,
+  xl: $close-button-xl-font-size,
+) !default;

package/scss/components/CloseButton/_CloseButton.scss

@@ -1,9 +1,12 @@
+@use "sass:map";
 @use "CloseButton-variables" as *;
 @use "../../scss/base-variables" as *;
+@use "../../scss/utils/declare-var" as *;
 
 .#{$prefix}close-button {
-  min-height: $close-button-size !important;
-  min-width: $close-button-size !important;
+  min-height: var(--#{$prefix}close-button-min-size) !important;
+  min-width: var(--#{$prefix}close-button-min-size) !important;
+  font-size: var(--#{$prefix}close-button-font-size) !important;
 
   color: inherit !important;
   opacity: $close-button-opacity;
@@ -11,4 +14,18 @@
   &:hover:not(:disabled, [data-disabled]) {
     opacity: 1;
   }
+
+  // Sizes
+  @each $size in $close-button-sizes {
+    &.#{$prefix}icon-button--#{$size} {
+      @include declare-var(
+        --#{$prefix}close-button-min-size,
+        map.get($close-button-min-size-by-size, $size)
+      );
+      @include declare-var(
+        --#{$prefix}close-button-font-size,
+        map.get($close-button-font-size-by-size, $size)
+      );
+    }
+  }
 }

package/scss/components/Tag/_Tag-variables.scss

@@ -34,4 +34,7 @@ $tag-close-button-size: 1.5em !default;
 $tag-close-button-margin-y: calc($tag-padding-y * -2) !default;
 $tag-close-button-margin-left: calc($tag-padding-x * 0.5) !default;
 $tag-close-button-margin-right: calc($tag-padding-x * -0.5) !default;
-$tag-close-button-font-size: min(1em, var(--#{$prefix}font-size-md)) !default;
+$tag-close-button-font-size: min(
+  0.85em,
+  var(--#{$prefix}font-size-md)
+) !default;

package/scss/components/Tag/_Tag.scss

@@ -4,6 +4,7 @@
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/animation" as *;
 @use "../../scss/utils/declare-var" as *;
+@use "../../scss/utils/maybe-important" as *;
 @use "../../scss/utils/spacing" as *;
 @use "../../scss/utils/transition" as *;
 
@@ -77,10 +78,10 @@
 
   // Close button
   &__close-button {
-    min-width: $tag-close-button-size !important;
-    min-height: $tag-close-button-size !important;
+    min-width: maybe-important($tag-close-button-size);
+    min-height: maybe-important($tag-close-button-size);
     margin: $tag-close-button-margin-y $tag-close-button-margin-right
       $tag-close-button-margin-y $tag-close-button-margin-left;
-    font-size: $tag-close-button-font-size;
+    font-size: maybe-important($tag-close-button-font-size);
   }
 }

package/dist/chunks/en-lyNzumTm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"en-lyNzumTm.js","sources":["../../src/locales/en.tsx"],"sourcesContent":["import type { LocalizationObject } from \"../providers/LocalizationProvider\";\n\n/** `en` locale (partial). */\nexport const en: Omit<LocalizationObject, \"languageTag\" | \"dateFnsLocale\"> = {\n  AlertDialog: {\n    okText: \"OK\",\n  },\n  Calendar: {\n    previousMonthLabel: \"Previous month\",\n    nextMonthLabel: \"Next month\",\n  },\n  CloseButton: {\n    \"aria-label\": \"Close\",\n  },\n  CommandMenu: {\n    searchPlaceholder: \"Search…\",\n    listLabel: \"Suggestions\",\n    loadingLabel: \"Loading…\",\n    emptyMessage: \"No results found.\",\n  },\n  CommandMenuDialog: {\n    title: \"Command palette\",\n    description: \"Search for a command…\",\n  },\n  ConfirmDialog: {\n    cancelText: \"Cancel\",\n  },\n  ControlCode: {\n    visuallyHiddenPrefix: \"Field\",\n  },\n  DataTable: {\n    emptyMessage: \"Nothing to show.\",\n  },\n  DataTableFilter: {\n    \"aria-label\": \"Table filter\",\n    placeholder: \"Filter\",\n  },\n  DataTablePagination: {\n    rowsRange: (range, total) => (\n      <>\n        Rows&nbsp;{range}&nbsp;of {total}\n      </>\n    ),\n    previousPageButtonLabel: \"Previous page\",\n    nextPageButtonLabel: \"Next page\",\n  },\n  DataTableRowsPerPage: {\n    label: \"Rows per page\",\n  },\n  DateInput: {\n    calendarButtonLabel: (selectedDate, editable) =>\n      editable\n        ? selectedDate\n          ? `Open calendar to change selected date: ${selectedDate}`\n          : \"Open calendar to select date\"\n        : selectedDate\n          ? `Open calendar with selected date: ${selectedDate}`\n          : \"Open calendar with no selected date\",\n  },\n  DateRangeInput: {\n    startInputLabel: \"Start date\",\n    endInputLabel: \"End date\",\n    calendarButtonLabel: (selectedDateRange, editable) =>\n      editable\n        ? selectedDateRange\n          ? `Open calendar to change selected date-range: ${selectedDateRange}`\n          : \"Open calendar to select date-range\"\n        : selectedDateRange\n          ? `Open calendar with selected date-range: ${selectedDateRange}`\n          : \"Open calendar with no selected date-range\",\n  },\n  ErrorBoundary: {\n    fallbackMessage: (\n      <>\n        Something went wrong.\n        <br />\n        Press the button on the right to try again. If the problem persists,\n        please try again later.\n      </>\n    ),\n    resetButtonLabel: \"Retry\",\n  },\n  Feedback: {\n    visuallyHiddenPrefix: (type) =>\n      type === \"error\" ? \"Error:\" : type === \"warning\" ? \"Warning:\" : null,\n  },\n  FeedbackPopover: {\n    label: \"Show feedback\",\n  },\n  FieldGroupHeader: {\n    visuallyHiddenCodePrefix: \"Group\",\n  },\n  Input: {\n    clearButtonLabel: \"Clear\",\n  },\n  Label: {\n    requiredIconLabel: \"Required\",\n    helperButtonLabel: \"Show help\",\n  },\n  NumericInput: {\n    decimalSeparator: \".\",\n    groupingStyle: \"thousand\",\n    groupSeparator: \",\",\n  },\n  Select: {\n    optionsLabel: \"Options\",\n  },\n  TableColumn: {\n    helperButtonLabel: \"Show help\",\n  },\n  TableHead: {\n    sortByColumnDescription: (columnName, sortDirection) =>\n      sortDirection === null\n        ? `Stop sorting table by column “${columnName}”`\n        : `Sort table by column “${columnName}” in ${\n            sortDirection === \"asc\" ? \"ascending\" : \"descending\"\n          } order`,\n  },\n  ToastProvider: {\n    label: \"Notification\",\n  },\n  ToastViewport: {\n    label: \"Notifications ({hotkey})\",\n  },\n};\n"],"names":[],"mappings":";AAGO,MAAM,KAAgE;AAAA,EAC3E,aAAa;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAAA;AAAA,EAElB,aAAa;AAAA,IACX,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,cAAc;AAAA,EAAA;AAAA,EAEhB,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf,eAAe;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,aAAa;AAAA,IACX,sBAAsB;AAAA,EAAA;AAAA,EAExB,WAAW;AAAA,IACT,cAAc;AAAA,EAAA;AAAA,EAEhB,iBAAiB;AAAA,IACf,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAAA,EAEf,qBAAqB;AAAA,IACnB,WAAW,CAAC,OAAO,UACjB,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACW;AAAA,MAAM;AAAA,MAAU;AAAA,IAAA,GAC7B;AAAA,IAEF,yBAAyB;AAAA,IACzB,qBAAqB;AAAA,EAAA;AAAA,EAEvB,sBAAsB;AAAA,IACpB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,qBAAqB,CAAC,cAAc,aAClC,WACI,eACE,0CAA0C,YAAY,KACtD,iCACF,eACE,qCAAqC,YAAY,KACjD;AAAA,EAAA;AAAA,EAEV,gBAAgB;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,qBAAqB,CAAC,mBAAmB,aACvC,WACI,oBACE,gDAAgD,iBAAiB,KACjE,uCACF,oBACE,2CAA2C,iBAAiB,KAC5D;AAAA,EAAA;AAAA,EAEV,eAAe;AAAA,IACb,iBACE,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,MAAE;AAAA,IAAA,GAGR;AAAA,IAEF,kBAAkB;AAAA,EAAA;AAAA,EAEpB,UAAU;AAAA,IACR,sBAAsB,CAAC,SACrB,SAAS,UAAU,WAAW,SAAS,YAAY,aAAa;AAAA,EAAA;AAAA,EAEpE,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAAA,EAET,kBAAkB;AAAA,IAChB,0BAA0B;AAAA,EAAA;AAAA,EAE5B,OAAO;AAAA,IACL,kBAAkB;AAAA,EAAA;AAAA,EAEpB,OAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,EAAA;AAAA,EAErB,cAAc;AAAA,IACZ,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAAA,EAElB,QAAQ;AAAA,IACN,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,EAAA;AAAA,EAErB,WAAW;AAAA,IACT,yBAAyB,CAAC,YAAY,kBACpC,kBAAkB,OACd,iCAAiC,UAAU,MAC3C,yBAAyB,UAAU,QACjC,kBAAkB,QAAQ,cAAc,YAC1C;AAAA,EAAA;AAAA,EAER,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAET,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAEX;"}