colibri-ui 0.8.80 → 0.8.82

package/esm/Theme/themes/buenos_aires.d.ts

@@ -518,6 +518,36 @@ declare const _default: {
     "component-avatar-font-size-xxxl": string;
     "component-accordion-text": string;
     "component-accordion-line": string;
+    "component-sheet-bg": string;
+    "component-sheet-text": string;
+    "component-sheet-secondary": string;
+    "component-sheet-overlay": string;
+    "component-sheet-radius": string;
+    "component-sheet-shadow": string;
+    "component-sheet-z-index": string;
+    "component-sheet-max-height": string;
+    "component-sheet-overlay-blur": string;
+    "component-sheet-motion-duration": string;
+    "component-sheet-resize-duration": string;
+    "component-sheet-motion-easing": string;
+    "component-sheet-reduced-motion-duration": string;
+    "component-sheet-drag-area-height": string;
+    "component-sheet-handle-width": string;
+    "component-sheet-handle-height": string;
+    "component-sheet-handle-radius": string;
+    "component-sheet-handle-opacity": string;
+    "component-sheet-header-gap": string;
+    "component-sheet-header-padding": string;
+    "component-sheet-border-width": string;
+    "component-sheet-border-color": string;
+    "component-sheet-title-font-size": string;
+    "component-sheet-title-line-height": string;
+    "component-sheet-title-font-weight": string;
+    "component-sheet-description-offset": string;
+    "component-sheet-description-font-size": string;
+    "component-sheet-body-padding": string;
+    "component-sheet-footer-padding-block": string;
+    "component-sheet-footer-padding-inline": string;
     "component-modal-bg": string;
     "component-modal-border": string;
     "component-modal-overlay": string;

package/esm/Theme/themes/buenos_aires.js

@@ -520,6 +520,36 @@ var THEME_BA = {
   "component-avatar-font-size-xxxl": "9rem",
   "component-accordion-text": Color.BRAND_BA_FOREST,
   "component-accordion-line": Color.NEUTRAL_BA_300,
+  "component-sheet-bg": "var(--color-bg-surface)",
+  "component-sheet-text": "var(--color-text-primary)",
+  "component-sheet-secondary": "var(--color-text-secondary)",
+  "component-sheet-overlay": "var(--component-modal-overlay)",
+  "component-sheet-radius": "var(--radius-xl)",
+  "component-sheet-shadow": "var(--shadow-raised)",
+  "component-sheet-z-index": "1000",
+  "component-sheet-max-height": "96dvh",
+  "component-sheet-overlay-blur": "var(--space-3)",
+  "component-sheet-motion-duration": "220ms",
+  "component-sheet-resize-duration": "200ms",
+  "component-sheet-motion-easing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "component-sheet-reduced-motion-duration": "0.001ms",
+  "component-sheet-drag-area-height": "var(--space-6)",
+  "component-sheet-handle-width": "calc(var(--space-10) + var(--space-1))",
+  "component-sheet-handle-height": "var(--space-1)",
+  "component-sheet-handle-radius": "var(--radius-full)",
+  "component-sheet-handle-opacity": "0.45",
+  "component-sheet-header-gap": "var(--space-4)",
+  "component-sheet-header-padding": "var(--space-3) var(--space-5) var(--space-4)",
+  "component-sheet-border-width": "var(--border-width-hairline)",
+  "component-sheet-border-color": "var(--color-border-subtle)",
+  "component-sheet-title-font-size": "var(--font-size-heading-sm)",
+  "component-sheet-title-line-height": "var(--line-height-heading-sm)",
+  "component-sheet-title-font-weight": "var(--font-weight-semibold)",
+  "component-sheet-description-offset": "var(--space-1)",
+  "component-sheet-description-font-size": "var(--font-size-text-sm)",
+  "component-sheet-body-padding": "var(--space-5)",
+  "component-sheet-footer-padding-block": "var(--space-4)",
+  "component-sheet-footer-padding-inline": "var(--space-5)",
   "component-modal-bg": Color.NEUTRAL_BA_0,
   "component-modal-border": Color.NEUTRAL_BA_200,
   "component-modal-overlay": "rgb(22 51 0 / 28%)",

package/esm/Theme/themes/jaipur.d.ts

@@ -518,6 +518,36 @@ declare const _default: {
     "component-avatar-font-size-xxxl": string;
     "component-accordion-text": string;
     "component-accordion-line": string;
+    "component-sheet-bg": string;
+    "component-sheet-text": string;
+    "component-sheet-secondary": string;
+    "component-sheet-overlay": string;
+    "component-sheet-radius": string;
+    "component-sheet-shadow": string;
+    "component-sheet-z-index": string;
+    "component-sheet-max-height": string;
+    "component-sheet-overlay-blur": string;
+    "component-sheet-motion-duration": string;
+    "component-sheet-resize-duration": string;
+    "component-sheet-motion-easing": string;
+    "component-sheet-reduced-motion-duration": string;
+    "component-sheet-drag-area-height": string;
+    "component-sheet-handle-width": string;
+    "component-sheet-handle-height": string;
+    "component-sheet-handle-radius": string;
+    "component-sheet-handle-opacity": string;
+    "component-sheet-header-gap": string;
+    "component-sheet-header-padding": string;
+    "component-sheet-border-width": string;
+    "component-sheet-border-color": string;
+    "component-sheet-title-font-size": string;
+    "component-sheet-title-line-height": string;
+    "component-sheet-title-font-weight": string;
+    "component-sheet-description-offset": string;
+    "component-sheet-description-font-size": string;
+    "component-sheet-body-padding": string;
+    "component-sheet-footer-padding-block": string;
+    "component-sheet-footer-padding-inline": string;
     "component-modal-bg": string;
     "component-modal-border": string;
     "component-modal-overlay": string;

package/esm/Theme/themes/jaipur.js

@@ -520,6 +520,36 @@ var theme_jaipur = {
   "component-avatar-font-size-xxxl": "9rem",
   "component-accordion-text": Color.BRAND_JP_EGGPLANT,
   "component-accordion-line": Color.NEUTRAL_JP_300,
+  "component-sheet-bg": "var(--color-bg-surface)",
+  "component-sheet-text": "var(--color-text-primary)",
+  "component-sheet-secondary": "var(--color-text-secondary)",
+  "component-sheet-overlay": "var(--component-modal-overlay)",
+  "component-sheet-radius": "var(--radius-xl)",
+  "component-sheet-shadow": "var(--shadow-raised)",
+  "component-sheet-z-index": "1000",
+  "component-sheet-max-height": "96dvh",
+  "component-sheet-overlay-blur": "var(--space-3)",
+  "component-sheet-motion-duration": "220ms",
+  "component-sheet-resize-duration": "200ms",
+  "component-sheet-motion-easing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "component-sheet-reduced-motion-duration": "0.001ms",
+  "component-sheet-drag-area-height": "var(--space-6)",
+  "component-sheet-handle-width": "calc(var(--space-10) + var(--space-1))",
+  "component-sheet-handle-height": "var(--space-1)",
+  "component-sheet-handle-radius": "var(--radius-full)",
+  "component-sheet-handle-opacity": "0.45",
+  "component-sheet-header-gap": "var(--space-4)",
+  "component-sheet-header-padding": "var(--space-3) var(--space-5) var(--space-4)",
+  "component-sheet-border-width": "var(--border-width-hairline)",
+  "component-sheet-border-color": "var(--color-border-subtle)",
+  "component-sheet-title-font-size": "var(--font-size-heading-sm)",
+  "component-sheet-title-line-height": "var(--line-height-heading-sm)",
+  "component-sheet-title-font-weight": "var(--font-weight-semibold)",
+  "component-sheet-description-offset": "var(--space-1)",
+  "component-sheet-description-font-size": "var(--font-size-text-sm)",
+  "component-sheet-body-padding": "var(--space-5)",
+  "component-sheet-footer-padding-block": "var(--space-4)",
+  "component-sheet-footer-padding-inline": "var(--space-5)",
   "component-modal-bg": Color.NEUTRAL_JP_0,
   "component-modal-border": Color.NEUTRAL_JP_200,
   "component-modal-overlay": "color-mix(in srgb, var(--palette-black) 25%, transparent)",

package/esm/hooks/useModalStack/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
+ * An inactive entry is not registered and counts as topmost only while no
+ * modal is open.
+ */
+export declare const useModalStack: (id: string, active?: boolean) => () => boolean;

package/esm/hooks/useModalStack/index.js

@@ -0,0 +1,24 @@
+import { useEffect, useCallback } from 'react';
+
+var stack = [];
+/**
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
+ * An inactive entry is not registered and counts as topmost only while no
+ * modal is open.
+ */
+var useModalStack = function useModalStack(id) {
+  var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  useEffect(function () {
+    if (!active) return;
+    stack.push(id);
+    return function () {
+      var index = stack.lastIndexOf(id);
+      if (index !== -1) stack.splice(index, 1);
+    };
+  }, [id, active]);
+  return useCallback(function () {
+    return stack.length ? stack[stack.length - 1] === id : !active;
+  }, [id, active]);
+};
+
+export { useModalStack };

package/esm/index.d.ts

@@ -64,6 +64,8 @@ export { Select } from "./Select";
 export type { SelectProps } from "./Select/index.props";
 export { Separator } from "./Separator";
 export type { SeparatorProps } from "./Separator/index.props";
+export { Sheet } from "./Sheet";
+export type { SheetProps, SheetSnapPoint, SheetCloseReason } from "./Sheet";
 export { SkeletonRect, SkeletonText } from "./Skeleton";
 export type { RectProps as SkeletonRectProps, TextProps as SkeletonTextProps, } from "./Skeleton/index.props";
 export { Slider } from "./Slider";

package/esm/index.js

@@ -31,6 +31,7 @@ export { RadioGroup } from './RadioGroup/index.js';
 export { Rating } from './Rating/Rating.js';
 export { Select } from './Select/index.js';
 export { Separator } from './Separator/index.js';
+export { Sheet } from './Sheet/Sheet.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { Slider } from './Slider/Slider.js';
 export { Status } from './Status/index.js';

package/esm/theme_ba_variables.css

@@ -518,6 +518,36 @@
 --component-avatar-font-size-xxxl: 9rem;
 --component-accordion-text: #163300;
 --component-accordion-line: #CBD2C8;
+--component-sheet-bg: var(--color-bg-surface);
+--component-sheet-text: var(--color-text-primary);
+--component-sheet-secondary: var(--color-text-secondary);
+--component-sheet-overlay: var(--component-modal-overlay);
+--component-sheet-radius: var(--radius-xl);
+--component-sheet-shadow: var(--shadow-raised);
+--component-sheet-z-index: 1000;
+--component-sheet-max-height: 96dvh;
+--component-sheet-overlay-blur: var(--space-3);
+--component-sheet-motion-duration: 220ms;
+--component-sheet-resize-duration: 200ms;
+--component-sheet-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+--component-sheet-reduced-motion-duration: 0.001ms;
+--component-sheet-drag-area-height: var(--space-6);
+--component-sheet-handle-width: calc(var(--space-10) + var(--space-1));
+--component-sheet-handle-height: var(--space-1);
+--component-sheet-handle-radius: var(--radius-full);
+--component-sheet-handle-opacity: 0.45;
+--component-sheet-header-gap: var(--space-4);
+--component-sheet-header-padding: var(--space-3) var(--space-5) var(--space-4);
+--component-sheet-border-width: var(--border-width-hairline);
+--component-sheet-border-color: var(--color-border-subtle);
+--component-sheet-title-font-size: var(--font-size-heading-sm);
+--component-sheet-title-line-height: var(--line-height-heading-sm);
+--component-sheet-title-font-weight: var(--font-weight-semibold);
+--component-sheet-description-offset: var(--space-1);
+--component-sheet-description-font-size: var(--font-size-text-sm);
+--component-sheet-body-padding: var(--space-5);
+--component-sheet-footer-padding-block: var(--space-4);
+--component-sheet-footer-padding-inline: var(--space-5);
 --component-modal-bg: #FFFFFF;
 --component-modal-border: #E2E7DF;
 --component-modal-overlay: rgb(22 51 0 / 28%);

package/esm/theme_jaipur_variables.css

@@ -518,6 +518,36 @@
 --component-avatar-font-size-xxxl: 9rem;
 --component-accordion-text: #2C2242;
 --component-accordion-line: #D0CECC;
+--component-sheet-bg: var(--color-bg-surface);
+--component-sheet-text: var(--color-text-primary);
+--component-sheet-secondary: var(--color-text-secondary);
+--component-sheet-overlay: var(--component-modal-overlay);
+--component-sheet-radius: var(--radius-xl);
+--component-sheet-shadow: var(--shadow-raised);
+--component-sheet-z-index: 1000;
+--component-sheet-max-height: 96dvh;
+--component-sheet-overlay-blur: var(--space-3);
+--component-sheet-motion-duration: 220ms;
+--component-sheet-resize-duration: 200ms;
+--component-sheet-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+--component-sheet-reduced-motion-duration: 0.001ms;
+--component-sheet-drag-area-height: var(--space-6);
+--component-sheet-handle-width: calc(var(--space-10) + var(--space-1));
+--component-sheet-handle-height: var(--space-1);
+--component-sheet-handle-radius: var(--radius-full);
+--component-sheet-handle-opacity: 0.45;
+--component-sheet-header-gap: var(--space-4);
+--component-sheet-header-padding: var(--space-3) var(--space-5) var(--space-4);
+--component-sheet-border-width: var(--border-width-hairline);
+--component-sheet-border-color: var(--color-border-subtle);
+--component-sheet-title-font-size: var(--font-size-heading-sm);
+--component-sheet-title-line-height: var(--line-height-heading-sm);
+--component-sheet-title-font-weight: var(--font-weight-semibold);
+--component-sheet-description-offset: var(--space-1);
+--component-sheet-description-font-size: var(--font-size-text-sm);
+--component-sheet-body-padding: var(--space-5);
+--component-sheet-footer-padding-block: var(--space-4);
+--component-sheet-footer-padding-inline: var(--space-5);
 --component-modal-bg: #FFFFFF;
 --component-modal-border: #E4E3DF;
 --component-modal-overlay: color-mix(in srgb, var(--palette-black) 25%, transparent);

package/hooks/useModalStack/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
+ * An inactive entry is not registered and counts as topmost only while no
+ * modal is open.
+ */
+export declare const useModalStack: (id: string, active?: boolean) => () => boolean;

package/hooks/useModalStack/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+
+var stack = [];
+/**
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
+ * An inactive entry is not registered and counts as topmost only while no
+ * modal is open.
+ */
+var useModalStack = function useModalStack(id) {
+  var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  React.useEffect(function () {
+    if (!active) return;
+    stack.push(id);
+    return function () {
+      var index = stack.lastIndexOf(id);
+      if (index !== -1) stack.splice(index, 1);
+    };
+  }, [id, active]);
+  return React.useCallback(function () {
+    return stack.length ? stack[stack.length - 1] === id : !active;
+  }, [id, active]);
+};
+
+exports.useModalStack = useModalStack;

package/index.d.ts

@@ -64,6 +64,8 @@ export { Select } from "./Select";
 export type { SelectProps } from "./Select/index.props";
 export { Separator } from "./Separator";
 export type { SeparatorProps } from "./Separator/index.props";
+export { Sheet } from "./Sheet";
+export type { SheetProps, SheetSnapPoint, SheetCloseReason } from "./Sheet";
 export { SkeletonRect, SkeletonText } from "./Skeleton";
 export type { RectProps as SkeletonRectProps, TextProps as SkeletonTextProps, } from "./Skeleton/index.props";
 export { Slider } from "./Slider";

package/index.js

@@ -33,6 +33,7 @@ var index$n = require('./RadioGroup/index.js');
 require('./Rating/index.js');
 var index$o = require('./Select/index.js');
 var index$p = require('./Separator/index.js');
+require('./Sheet/index.js');
 var index$q = require('./Skeleton/index.js');
 require('./Slider/index.js');
 var index$r = require('./Status/index.js');
@@ -81,6 +82,7 @@ var Plus = require('./Icons/Plus.js');
 var Progress = require('./Progress/Progress.js');
 var Rating = require('./Rating/Rating.js');
 var Setting = require('./Icons/Setting.js');
+var Sheet = require('./Sheet/Sheet.js');
 var Shield = require('./Icons/Shield.js');
 var Slider = require('./Slider/Slider.js');
 var Trash = require('./Icons/Trash.js');
@@ -168,6 +170,7 @@ exports.Plus = Plus.Plus;
 exports.Progress = Progress.Progress;
 exports.Rating = Rating.Rating;
 exports.Setting = Setting.Setting;
+exports.Sheet = Sheet.Sheet;
 exports.Shield = Shield.Shield;
 exports.Slider = Slider.Slider;
 exports.Trash = Trash.Trash;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.80",
+  "version": "0.8.82",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",

package/theme_ba_variables.css

@@ -518,6 +518,36 @@
 --component-avatar-font-size-xxxl: 9rem;
 --component-accordion-text: #163300;
 --component-accordion-line: #CBD2C8;
+--component-sheet-bg: var(--color-bg-surface);
+--component-sheet-text: var(--color-text-primary);
+--component-sheet-secondary: var(--color-text-secondary);
+--component-sheet-overlay: var(--component-modal-overlay);
+--component-sheet-radius: var(--radius-xl);
+--component-sheet-shadow: var(--shadow-raised);
+--component-sheet-z-index: 1000;
+--component-sheet-max-height: 96dvh;
+--component-sheet-overlay-blur: var(--space-3);
+--component-sheet-motion-duration: 220ms;
+--component-sheet-resize-duration: 200ms;
+--component-sheet-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+--component-sheet-reduced-motion-duration: 0.001ms;
+--component-sheet-drag-area-height: var(--space-6);
+--component-sheet-handle-width: calc(var(--space-10) + var(--space-1));
+--component-sheet-handle-height: var(--space-1);
+--component-sheet-handle-radius: var(--radius-full);
+--component-sheet-handle-opacity: 0.45;
+--component-sheet-header-gap: var(--space-4);
+--component-sheet-header-padding: var(--space-3) var(--space-5) var(--space-4);
+--component-sheet-border-width: var(--border-width-hairline);
+--component-sheet-border-color: var(--color-border-subtle);
+--component-sheet-title-font-size: var(--font-size-heading-sm);
+--component-sheet-title-line-height: var(--line-height-heading-sm);
+--component-sheet-title-font-weight: var(--font-weight-semibold);
+--component-sheet-description-offset: var(--space-1);
+--component-sheet-description-font-size: var(--font-size-text-sm);
+--component-sheet-body-padding: var(--space-5);
+--component-sheet-footer-padding-block: var(--space-4);
+--component-sheet-footer-padding-inline: var(--space-5);
 --component-modal-bg: #FFFFFF;
 --component-modal-border: #E2E7DF;
 --component-modal-overlay: rgb(22 51 0 / 28%);

package/theme_jaipur_variables.css

@@ -518,6 +518,36 @@
 --component-avatar-font-size-xxxl: 9rem;
 --component-accordion-text: #2C2242;
 --component-accordion-line: #D0CECC;
+--component-sheet-bg: var(--color-bg-surface);
+--component-sheet-text: var(--color-text-primary);
+--component-sheet-secondary: var(--color-text-secondary);
+--component-sheet-overlay: var(--component-modal-overlay);
+--component-sheet-radius: var(--radius-xl);
+--component-sheet-shadow: var(--shadow-raised);
+--component-sheet-z-index: 1000;
+--component-sheet-max-height: 96dvh;
+--component-sheet-overlay-blur: var(--space-3);
+--component-sheet-motion-duration: 220ms;
+--component-sheet-resize-duration: 200ms;
+--component-sheet-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
+--component-sheet-reduced-motion-duration: 0.001ms;
+--component-sheet-drag-area-height: var(--space-6);
+--component-sheet-handle-width: calc(var(--space-10) + var(--space-1));
+--component-sheet-handle-height: var(--space-1);
+--component-sheet-handle-radius: var(--radius-full);
+--component-sheet-handle-opacity: 0.45;
+--component-sheet-header-gap: var(--space-4);
+--component-sheet-header-padding: var(--space-3) var(--space-5) var(--space-4);
+--component-sheet-border-width: var(--border-width-hairline);
+--component-sheet-border-color: var(--color-border-subtle);
+--component-sheet-title-font-size: var(--font-size-heading-sm);
+--component-sheet-title-line-height: var(--line-height-heading-sm);
+--component-sheet-title-font-weight: var(--font-weight-semibold);
+--component-sheet-description-offset: var(--space-1);
+--component-sheet-description-font-size: var(--font-size-text-sm);
+--component-sheet-body-padding: var(--space-5);
+--component-sheet-footer-padding-block: var(--space-4);
+--component-sheet-footer-padding-inline: var(--space-5);
 --component-modal-bg: #FFFFFF;
 --component-modal-border: #E4E3DF;
 --component-modal-overlay: color-mix(in srgb, var(--palette-black) 25%, transparent);

package/Modal/useModalStack.d.ts

@@ -1,2 +0,0 @@
-/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
-export declare const useModalStack: (id: string) => () => boolean;

package/Modal/useModalStack.js

@@ -1,20 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-var stack = [];
-/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
-var useModalStack = function useModalStack(id) {
-  React.useEffect(function () {
-    stack.push(id);
-    return function () {
-      var index = stack.lastIndexOf(id);
-      if (index !== -1) stack.splice(index, 1);
-    };
-  }, [id]);
-  return React.useCallback(function () {
-    return stack[stack.length - 1] === id;
-  }, [id]);
-};
-
-exports.useModalStack = useModalStack;

package/esm/Modal/useModalStack.d.ts

@@ -1,2 +0,0 @@
-/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
-export declare const useModalStack: (id: string) => () => boolean;

package/esm/Modal/useModalStack.js

@@ -1,18 +0,0 @@
-import { useEffect, useCallback } from 'react';
-
-var stack = [];
-/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
-var useModalStack = function useModalStack(id) {
-  useEffect(function () {
-    stack.push(id);
-    return function () {
-      var index = stack.lastIndexOf(id);
-      if (index !== -1) stack.splice(index, 1);
-    };
-  }, [id]);
-  return useCallback(function () {
-    return stack[stack.length - 1] === id;
-  }, [id]);
-};
-
-export { useModalStack };