@forgedevstack/bear 1.2.5 → 1.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -1
- package/dist/components/AppBar/AppBar.cjs +1 -1
- package/dist/components/AppBar/AppBar.const.cjs +1 -0
- package/dist/components/AppBar/AppBar.const.d.ts +36 -1
- package/dist/components/AppBar/AppBar.const.js +39 -0
- package/dist/components/AppBar/AppBar.js +66 -42
- package/dist/components/AppBar/AppBar.types.d.ts +9 -3
- package/dist/components/Autocomplete/Autocomplete.cjs +1 -1
- package/dist/components/Autocomplete/Autocomplete.js +32 -32
- package/dist/components/Backdrop/Backdrop.cjs +1 -0
- package/dist/components/Backdrop/Backdrop.const.cjs +1 -0
- package/dist/components/Backdrop/Backdrop.const.d.ts +8 -0
- package/dist/components/Backdrop/Backdrop.const.js +11 -0
- package/dist/components/Backdrop/Backdrop.d.ts +3 -0
- package/dist/components/Backdrop/Backdrop.js +50 -0
- package/dist/components/Backdrop/Backdrop.types.d.ts +14 -0
- package/dist/components/Backdrop/index.d.ts +2 -0
- package/dist/components/BottomNavigation/BottomNavigation.cjs +1 -1
- package/dist/components/BottomNavigation/BottomNavigation.const.cjs +1 -0
- package/dist/components/BottomNavigation/BottomNavigation.const.d.ts +8 -1
- package/dist/components/BottomNavigation/BottomNavigation.const.js +11 -0
- package/dist/components/BottomNavigation/BottomNavigation.js +64 -46
- package/dist/components/Breadcrumbs/Breadcrumbs.cjs +1 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +65 -64
- package/dist/components/Button/Button.cjs +1 -1
- package/dist/components/Button/Button.js +48 -48
- package/dist/components/Chip/Chip.cjs +1 -1
- package/dist/components/Chip/Chip.const.cjs +1 -0
- package/dist/components/Chip/Chip.const.d.ts +49 -0
- package/dist/components/Chip/Chip.const.js +53 -0
- package/dist/components/Chip/Chip.js +46 -65
- package/dist/components/ChipGroup/ChipGroup.cjs +1 -0
- package/dist/components/ChipGroup/ChipGroup.const.cjs +1 -0
- package/dist/components/ChipGroup/ChipGroup.const.d.ts +11 -0
- package/dist/components/ChipGroup/ChipGroup.const.js +14 -0
- package/dist/components/ChipGroup/ChipGroup.d.ts +3 -0
- package/dist/components/ChipGroup/ChipGroup.js +95 -0
- package/dist/components/ChipGroup/ChipGroup.types.d.ts +14 -0
- package/dist/components/ChipGroup/index.d.ts +2 -0
- package/dist/components/Drawer/Drawer.cjs +1 -1
- package/dist/components/Drawer/Drawer.js +68 -64
- package/dist/components/EmptyState/EmptyState.cjs +1 -1
- package/dist/components/EmptyState/EmptyState.const.cjs +1 -0
- package/dist/components/EmptyState/EmptyState.const.d.ts +26 -1
- package/dist/components/EmptyState/EmptyState.const.js +29 -0
- package/dist/components/EmptyState/EmptyState.js +49 -31
- package/dist/components/Input/Input.cjs +1 -1
- package/dist/components/Input/Input.const.cjs +1 -1
- package/dist/components/Input/Input.const.d.ts +10 -0
- package/dist/components/Input/Input.const.js +16 -6
- package/dist/components/Input/Input.js +108 -107
- package/dist/components/List/List.cjs +1 -1
- package/dist/components/List/List.js +133 -123
- package/dist/components/List/List.types.d.ts +2 -0
- package/dist/components/MessageList/MessageList.cjs +1 -1
- package/dist/components/MessageList/MessageList.const.cjs +1 -1
- package/dist/components/MessageList/MessageList.const.d.ts +6 -0
- package/dist/components/MessageList/MessageList.const.js +26 -20
- package/dist/components/MessageList/MessageList.d.ts +0 -16
- package/dist/components/MessageList/MessageList.js +133 -115
- package/dist/components/MessageList/MessageList.types.d.ts +4 -0
- package/dist/components/MessageList/MessageList.utils.cjs +1 -1
- package/dist/components/MessageList/MessageList.utils.d.ts +7 -0
- package/dist/components/MessageList/MessageList.utils.js +47 -28
- package/dist/components/Modal/Modal.cjs +1 -1
- package/dist/components/Modal/Modal.const.cjs +1 -1
- package/dist/components/Modal/Modal.const.js +7 -8
- package/dist/components/Modal/Modal.js +60 -55
- package/dist/components/PageHeader/PageHeader.cjs +1 -0
- package/dist/components/PageHeader/PageHeader.const.cjs +1 -0
- package/dist/components/PageHeader/PageHeader.const.d.ts +6 -0
- package/dist/components/PageHeader/PageHeader.const.js +9 -0
- package/dist/components/PageHeader/PageHeader.d.ts +3 -0
- package/dist/components/PageHeader/PageHeader.js +57 -0
- package/dist/components/PageHeader/PageHeader.types.d.ts +10 -0
- package/dist/components/PageHeader/index.d.ts +2 -0
- package/dist/components/Progress/Progress.cjs +1 -1
- package/dist/components/Progress/Progress.const.cjs +1 -0
- package/dist/components/Progress/Progress.const.d.ts +16 -1
- package/dist/components/Progress/Progress.const.js +19 -0
- package/dist/components/Progress/Progress.d.ts +0 -10
- package/dist/components/Progress/Progress.js +81 -71
- package/dist/components/Progress/Progress.types.d.ts +2 -11
- package/dist/components/PropsPlayground/PropsPlayground.cjs +1 -1
- package/dist/components/PropsPlayground/PropsPlayground.js +40 -40
- package/dist/components/Select/Select.cjs +1 -1
- package/dist/components/Select/Select.const.cjs +1 -0
- package/dist/components/Select/Select.const.d.ts +9 -0
- package/dist/components/Select/Select.const.js +13 -0
- package/dist/components/Select/Select.js +151 -66
- package/dist/components/Select/Select.types.d.ts +3 -1
- package/dist/components/Snackbar/Snackbar.cjs +1 -1
- package/dist/components/Snackbar/Snackbar.js +62 -60
- package/dist/components/Snackbar/Snackbar.types.d.ts +2 -0
- package/dist/components/Stepper/Stepper.cjs +1 -1
- package/dist/components/Stepper/Stepper.js +89 -83
- package/dist/components/Tabs/Tabs.cjs +1 -1
- package/dist/components/Tabs/Tabs.const.cjs +1 -0
- package/dist/components/Tabs/Tabs.const.d.ts +2 -0
- package/dist/components/Tabs/Tabs.const.js +5 -0
- package/dist/components/Tabs/Tabs.js +40 -35
- package/dist/components/Tabs/Tabs.types.d.ts +1 -0
- package/dist/components/Toast/Toast.cjs +1 -1
- package/dist/components/Toast/Toast.const.cjs +1 -0
- package/dist/components/Toast/Toast.const.d.ts +4 -0
- package/dist/components/Toast/Toast.const.js +9 -0
- package/dist/components/Toast/Toast.d.ts +0 -1
- package/dist/components/Toast/Toast.js +111 -101
- package/dist/components/index.cjs +1 -1
- package/dist/components/index.d.ts +6 -0
- package/dist/components/index.js +285 -279
- package/dist/context/BearProvider.cjs +1 -1
- package/dist/context/BearProvider.d.ts +8 -0
- package/dist/context/BearProvider.js +149 -139
- package/dist/context/index.cjs +1 -1
- package/dist/context/index.d.ts +1 -1
- package/dist/context/index.js +12 -10
- package/dist/hooks/index.cjs +1 -1
- package/dist/hooks/index.d.ts +3 -0
- package/dist/hooks/index.js +45 -41
- package/dist/hooks/useBreakpoint/index.d.ts +4 -0
- package/dist/hooks/useBreakpoint/useBreakpoint.cjs +1 -0
- package/dist/hooks/useBreakpoint/useBreakpoint.const.cjs +1 -0
- package/dist/hooks/useBreakpoint/useBreakpoint.const.d.ts +8 -0
- package/dist/hooks/useBreakpoint/useBreakpoint.const.js +10 -0
- package/dist/hooks/useBreakpoint/useBreakpoint.d.ts +2 -0
- package/dist/hooks/useBreakpoint/useBreakpoint.js +26 -0
- package/dist/hooks/useBreakpoint/useBreakpoint.types.d.ts +12 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +464 -443
- package/dist/styles.css +67 -23
- package/dist/utils/generateBearId.const.cjs +1 -1
- package/dist/utils/generateBearId.const.d.ts +4 -2
- package/dist/utils/generateBearId.const.js +6 -4
- package/dist/utils/generateBearId.utils.cjs +1 -1
- package/dist/utils/generateBearId.utils.js +33 -21
- package/dist/utils/index.cjs +1 -1
- package/dist/utils/index.d.ts +4 -1
- package/dist/utils/index.js +27 -18
- package/dist/utils/liveRegion.const.cjs +1 -0
- package/dist/utils/liveRegion.const.d.ts +5 -0
- package/dist/utils/liveRegion.const.js +17 -0
- package/dist/utils/liveRegion.utils.cjs +1 -0
- package/dist/utils/liveRegion.utils.d.ts +7 -0
- package/dist/utils/liveRegion.utils.js +10 -0
- package/dist/utils/useBearId.cjs +1 -1
- package/dist/utils/useBearId.js +5 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,30 @@
|
|
|
1
1
|
# @forgedevstack/bear
|
|
2
2
|
|
|
3
|
-
Strong, reliable React UI components.
|
|
3
|
+
Strong, reliable React UI components. AeroCraft-powered, zero config required. The protective force of ForgeStack.
|
|
4
4
|
|
|
5
5
|
## Portal
|
|
6
6
|
|
|
7
7
|
Visit the [Bear UI Portal](https://bearui.com/) to explore all components, view live examples, and browse the documentation.
|
|
8
8
|
|
|
9
|
+
## Sanity / Playwright
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
# Install browsers once (required — missing Chromium yields 0 passes)
|
|
13
|
+
cd portal && npx playwright install chromium
|
|
14
|
+
|
|
15
|
+
# Critical-path smoke (recommended before release)
|
|
16
|
+
cd portal && npm run test:e2e:smoke
|
|
17
|
+
|
|
18
|
+
# Full portal suite
|
|
19
|
+
cd portal && npm run test:e2e
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
`BEAR_E2E_SMOKE=1` runs `e2e/specs/smoke.spec.ts` only (includes RTL direction + Toast aria-live checks). The e2e webServer builds Bear, then starts the portal on port `5174`.
|
|
23
|
+
|
|
24
|
+
### Auto DOM ids
|
|
25
|
+
|
|
26
|
+
Public components generate root `id` values as `Bear-{Component}-{alphanumeric}` (e.g. `Bear-Button-a48293100123`). Pass `id` to override; keep `testId` on `data-testid`.
|
|
27
|
+
|
|
9
28
|
## Features
|
|
10
29
|
|
|
11
30
|
- **Tailwind-Powered**: Built with Tailwind CSS, zero config required
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),_=require("./AppBar.const.cjs"),N=require("../../context/BearProvider.cjs");require("../../context/defaultTheme.cjs");const e=require("../../utils/cn.cjs");require("react");const l=require("../../utils/generateBearId.utils.cjs"),u=require("../../utils/useBearId.cjs"),D=P=>{const{children:t,position:n=_.DEFAULT_APP_BAR_POSITION,variant:s=_.DEFAULT_APP_BAR_VARIANT,color:r=_.DEFAULT_APP_BAR_COLOR,className:E,leftContent:B,rightContent:R,centerContent:a,elevation:i=_.DEFAULT_APP_BAR_ELEVATION,dense:C,disableGutters:c=_.DEFAULT_APP_BAR_DISABLE_GUTTERS,enableColorOnDark:o=_.DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK,id:O,testId:T}=P,{density:d}=N.useBearDensityOptional(),S=C??d==="compact",L=u.useBearId("AppBar"),I=l.resolveBearId(O,L);return A.jsx("header",{id:I,"data-testid":T,className:e.cn(_.APP_BAR_ROOT_CLASS,_.APP_BAR_BASE_CLASS,S?_.APP_BAR_HEIGHT_DENSE:_.APP_BAR_HEIGHT_COMFORTABLE,!c&&(S?_.APP_BAR_GUTTER_X_DENSE:_.APP_BAR_GUTTER_X),_.APP_BAR_POSITION_CLASSES[n],_.APP_BAR_VARIANT_CLASSES[s],_.APP_BAR_COLOR_CLASSES[r],o&&r==="default"&&_.APP_BAR_COLOR_ON_DARK_CLASS,i&&_.APP_BAR_ELEVATION_CLASS,S&&_.APP_BAR_DENSE_MODIFIER_CLASS,E),style:{backgroundColor:r==="primary"?"var(--bear-primary-600)":void 0},children:t??A.jsxs(A.Fragment,{children:[A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_BASE_CLASS),children:B}),A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_CENTER_CLASS,_.APP_BAR_SECTION_BASE_CLASS,_.APP_BAR_SECTION_GROW_CLASS),children:a}),A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_END_CLASS,_.APP_BAR_SECTION_BASE_CLASS),children:R})]})})};exports.AppBar=D;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="Bear-AppBar",A="Bear-AppBar--dense",e="Bear-AppBar__section",P="Bear-AppBar__section--center",r="Bear-AppBar__section--end",S="sticky",a="default",E="primary",R=!0,t=!1,B=!1,T="bear-h-16",b="bear-h-12",L="bear-px-4",O="bear-px-3",C={fixed:"bear-fixed bear-top-0 bear-left-0 bear-right-0 bear-z-50",sticky:"bear-sticky bear-top-0 bear-z-50",static:"bear-static",relative:"bear-relative"},s={default:"",transparent:"bear-bg-transparent",blur:"bear-backdrop-blur-md"},c={default:"bear-bg-white bear-text-gray-900 dark:bear-bg-zinc-900 dark:bear-text-white",primary:"bear-bg-primary-600 bear-text-white",dark:"bear-bg-gray-900 bear-text-white dark:bear-bg-black"},n="dark:bear-bg-primary-600 dark:bear-text-white",N="bear-shadow-md bear-border-b bear-border-gray-200/10 dark:bear-border-gray-800/40",o="bear-w-full bear-flex bear-items-center",I="bear-flex bear-items-center bear-gap-4",i="bear-flex-1 bear-justify-center";exports.APP_BAR_BASE_CLASS=o;exports.APP_BAR_COLOR_CLASSES=c;exports.APP_BAR_COLOR_ON_DARK_CLASS=n;exports.APP_BAR_DENSE_MODIFIER_CLASS=A;exports.APP_BAR_ELEVATION_CLASS=N;exports.APP_BAR_GUTTER_X=L;exports.APP_BAR_GUTTER_X_DENSE=O;exports.APP_BAR_HEIGHT_COMFORTABLE=T;exports.APP_BAR_HEIGHT_DENSE=b;exports.APP_BAR_POSITION_CLASSES=C;exports.APP_BAR_ROOT_CLASS=_;exports.APP_BAR_SECTION_BASE_CLASS=I;exports.APP_BAR_SECTION_CENTER_CLASS=P;exports.APP_BAR_SECTION_CLASS=e;exports.APP_BAR_SECTION_END_CLASS=r;exports.APP_BAR_SECTION_GROW_CLASS=i;exports.APP_BAR_VARIANT_CLASSES=s;exports.DEFAULT_APP_BAR_COLOR=E;exports.DEFAULT_APP_BAR_DISABLE_GUTTERS=t;exports.DEFAULT_APP_BAR_ELEVATION=R;exports.DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK=B;exports.DEFAULT_APP_BAR_POSITION=S;exports.DEFAULT_APP_BAR_VARIANT=a;
|
|
@@ -1 +1,36 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const APP_BAR_ROOT_CLASS = "Bear-AppBar";
|
|
2
|
+
export declare const APP_BAR_DENSE_MODIFIER_CLASS = "Bear-AppBar--dense";
|
|
3
|
+
export declare const APP_BAR_SECTION_CLASS = "Bear-AppBar__section";
|
|
4
|
+
export declare const APP_BAR_SECTION_CENTER_CLASS = "Bear-AppBar__section--center";
|
|
5
|
+
export declare const APP_BAR_SECTION_END_CLASS = "Bear-AppBar__section--end";
|
|
6
|
+
export declare const DEFAULT_APP_BAR_POSITION: "sticky";
|
|
7
|
+
export declare const DEFAULT_APP_BAR_VARIANT: "default";
|
|
8
|
+
export declare const DEFAULT_APP_BAR_COLOR: "primary";
|
|
9
|
+
export declare const DEFAULT_APP_BAR_ELEVATION = true;
|
|
10
|
+
export declare const DEFAULT_APP_BAR_DISABLE_GUTTERS = false;
|
|
11
|
+
export declare const DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK = false;
|
|
12
|
+
export declare const APP_BAR_HEIGHT_COMFORTABLE = "bear-h-16";
|
|
13
|
+
export declare const APP_BAR_HEIGHT_DENSE = "bear-h-12";
|
|
14
|
+
export declare const APP_BAR_GUTTER_X = "bear-px-4";
|
|
15
|
+
export declare const APP_BAR_GUTTER_X_DENSE = "bear-px-3";
|
|
16
|
+
export declare const APP_BAR_POSITION_CLASSES: {
|
|
17
|
+
readonly fixed: "bear-fixed bear-top-0 bear-left-0 bear-right-0 bear-z-50";
|
|
18
|
+
readonly sticky: "bear-sticky bear-top-0 bear-z-50";
|
|
19
|
+
readonly static: "bear-static";
|
|
20
|
+
readonly relative: "bear-relative";
|
|
21
|
+
};
|
|
22
|
+
export declare const APP_BAR_VARIANT_CLASSES: {
|
|
23
|
+
readonly default: "";
|
|
24
|
+
readonly transparent: "bear-bg-transparent";
|
|
25
|
+
readonly blur: "bear-backdrop-blur-md";
|
|
26
|
+
};
|
|
27
|
+
export declare const APP_BAR_COLOR_CLASSES: {
|
|
28
|
+
readonly default: "bear-bg-white bear-text-gray-900 dark:bear-bg-zinc-900 dark:bear-text-white";
|
|
29
|
+
readonly primary: "bear-bg-primary-600 bear-text-white";
|
|
30
|
+
readonly dark: "bear-bg-gray-900 bear-text-white dark:bear-bg-black";
|
|
31
|
+
};
|
|
32
|
+
export declare const APP_BAR_COLOR_ON_DARK_CLASS = "dark:bear-bg-primary-600 dark:bear-text-white";
|
|
33
|
+
export declare const APP_BAR_ELEVATION_CLASS = "bear-shadow-md bear-border-b bear-border-gray-200/10 dark:bear-border-gray-800/40";
|
|
34
|
+
export declare const APP_BAR_BASE_CLASS = "bear-w-full bear-flex bear-items-center";
|
|
35
|
+
export declare const APP_BAR_SECTION_BASE_CLASS = "bear-flex bear-items-center bear-gap-4";
|
|
36
|
+
export declare const APP_BAR_SECTION_GROW_CLASS = "bear-flex-1 bear-justify-center";
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
const e = "Bear-AppBar", r = "Bear-AppBar--dense", _ = "Bear-AppBar__section", A = "Bear-AppBar__section--center", a = "Bear-AppBar__section--end", t = "sticky", b = "default", P = "primary", S = !0, s = !1, E = !1, R = "bear-h-16", c = "bear-h-12", B = "bear-px-4", n = "bear-px-3", o = {
|
|
2
|
+
fixed: "bear-fixed bear-top-0 bear-left-0 bear-right-0 bear-z-50",
|
|
3
|
+
sticky: "bear-sticky bear-top-0 bear-z-50",
|
|
4
|
+
static: "bear-static",
|
|
5
|
+
relative: "bear-relative"
|
|
6
|
+
}, L = {
|
|
7
|
+
default: "",
|
|
8
|
+
transparent: "bear-bg-transparent",
|
|
9
|
+
blur: "bear-backdrop-blur-md"
|
|
10
|
+
}, T = {
|
|
11
|
+
default: "bear-bg-white bear-text-gray-900 dark:bear-bg-zinc-900 dark:bear-text-white",
|
|
12
|
+
primary: "bear-bg-primary-600 bear-text-white",
|
|
13
|
+
dark: "bear-bg-gray-900 bear-text-white dark:bear-bg-black"
|
|
14
|
+
}, O = "dark:bear-bg-primary-600 dark:bear-text-white", i = "bear-shadow-md bear-border-b bear-border-gray-200/10 dark:bear-border-gray-800/40", C = "bear-w-full bear-flex bear-items-center", p = "bear-flex bear-items-center bear-gap-4", d = "bear-flex-1 bear-justify-center";
|
|
15
|
+
export {
|
|
16
|
+
C as APP_BAR_BASE_CLASS,
|
|
17
|
+
T as APP_BAR_COLOR_CLASSES,
|
|
18
|
+
O as APP_BAR_COLOR_ON_DARK_CLASS,
|
|
19
|
+
r as APP_BAR_DENSE_MODIFIER_CLASS,
|
|
20
|
+
i as APP_BAR_ELEVATION_CLASS,
|
|
21
|
+
B as APP_BAR_GUTTER_X,
|
|
22
|
+
n as APP_BAR_GUTTER_X_DENSE,
|
|
23
|
+
R as APP_BAR_HEIGHT_COMFORTABLE,
|
|
24
|
+
c as APP_BAR_HEIGHT_DENSE,
|
|
25
|
+
o as APP_BAR_POSITION_CLASSES,
|
|
26
|
+
e as APP_BAR_ROOT_CLASS,
|
|
27
|
+
p as APP_BAR_SECTION_BASE_CLASS,
|
|
28
|
+
A as APP_BAR_SECTION_CENTER_CLASS,
|
|
29
|
+
_ as APP_BAR_SECTION_CLASS,
|
|
30
|
+
a as APP_BAR_SECTION_END_CLASS,
|
|
31
|
+
d as APP_BAR_SECTION_GROW_CLASS,
|
|
32
|
+
L as APP_BAR_VARIANT_CLASSES,
|
|
33
|
+
P as DEFAULT_APP_BAR_COLOR,
|
|
34
|
+
s as DEFAULT_APP_BAR_DISABLE_GUTTERS,
|
|
35
|
+
S as DEFAULT_APP_BAR_ELEVATION,
|
|
36
|
+
E as DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK,
|
|
37
|
+
t as DEFAULT_APP_BAR_POSITION,
|
|
38
|
+
b as DEFAULT_APP_BAR_VARIANT
|
|
39
|
+
};
|
|
@@ -1,54 +1,78 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
1
|
+
import { jsx as _, jsxs as m, Fragment as I } from "react/jsx-runtime";
|
|
2
|
+
import { DEFAULT_APP_BAR_POSITION as p, DEFAULT_APP_BAR_VARIANT as D, DEFAULT_APP_BAR_COLOR as v, DEFAULT_APP_BAR_ELEVATION as F, DEFAULT_APP_BAR_DISABLE_GUTTERS as U, DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK as f, APP_BAR_SECTION_BASE_CLASS as P, APP_BAR_SECTION_CLASS as t, APP_BAR_SECTION_GROW_CLASS as h, APP_BAR_SECTION_CENTER_CLASS as G, APP_BAR_SECTION_END_CLASS as u, APP_BAR_DENSE_MODIFIER_CLASS as y, APP_BAR_ELEVATION_CLASS as b, APP_BAR_COLOR_ON_DARK_CLASS as g, APP_BAR_COLOR_CLASSES as H, APP_BAR_VARIANT_CLASSES as V, APP_BAR_POSITION_CLASSES as x, APP_BAR_GUTTER_X_DENSE as j, APP_BAR_GUTTER_X as k, APP_BAR_HEIGHT_DENSE as K, APP_BAR_HEIGHT_COMFORTABLE as M, APP_BAR_BASE_CLASS as X, APP_BAR_ROOT_CLASS as W } from "./AppBar.const.js";
|
|
3
|
+
import { useBearDensityOptional as q } from "../../context/BearProvider.js";
|
|
4
|
+
import "../../context/defaultTheme.js";
|
|
5
|
+
import { cn as A } from "../../utils/cn.js";
|
|
3
6
|
import "react";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, p = {
|
|
25
|
-
default: "bear-bg-white bear-text-gray-900 dark:bear-bg-zinc-900 dark:bear-text-white",
|
|
26
|
-
primary: "bear-bg-primary-600 bear-text-white",
|
|
27
|
-
dark: "bear-bg-gray-900 bear-text-white dark:bear-bg-black"
|
|
28
|
-
}, m = n ? "bear-shadow-md bear-border-b bear-border-gray-200/10" : "";
|
|
29
|
-
return /* @__PURE__ */ e(
|
|
7
|
+
import { resolveBearId as w } from "../../utils/generateBearId.utils.js";
|
|
8
|
+
import { useBearId as z } from "../../utils/useBearId.js";
|
|
9
|
+
const r_ = (S) => {
|
|
10
|
+
const {
|
|
11
|
+
children: o,
|
|
12
|
+
position: E = p,
|
|
13
|
+
variant: R = D,
|
|
14
|
+
color: e = v,
|
|
15
|
+
className: a,
|
|
16
|
+
leftContent: n,
|
|
17
|
+
rightContent: s,
|
|
18
|
+
centerContent: i,
|
|
19
|
+
elevation: B = F,
|
|
20
|
+
dense: C,
|
|
21
|
+
disableGutters: O = U,
|
|
22
|
+
enableColorOnDark: L = f,
|
|
23
|
+
id: T,
|
|
24
|
+
testId: d
|
|
25
|
+
} = S, { density: N } = q(), r = C ?? N === "compact", c = z("AppBar"), l = w(T, c);
|
|
26
|
+
return /* @__PURE__ */ _(
|
|
30
27
|
"header",
|
|
31
28
|
{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
29
|
+
id: l,
|
|
30
|
+
"data-testid": d,
|
|
31
|
+
className: A(
|
|
32
|
+
W,
|
|
33
|
+
X,
|
|
34
|
+
r ? K : M,
|
|
35
|
+
!O && (r ? j : k),
|
|
36
|
+
x[E],
|
|
37
|
+
V[R],
|
|
38
|
+
H[e],
|
|
39
|
+
L && e === "default" && g,
|
|
40
|
+
B && b,
|
|
41
|
+
r && y,
|
|
42
|
+
a
|
|
40
43
|
),
|
|
41
44
|
style: {
|
|
42
|
-
backgroundColor:
|
|
45
|
+
backgroundColor: e === "primary" ? "var(--bear-primary-600)" : void 0
|
|
43
46
|
},
|
|
44
|
-
children:
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
|
|
47
|
+
children: o ?? /* @__PURE__ */ m(I, { children: [
|
|
48
|
+
/* @__PURE__ */ _("div", { className: A(t, P), children: n }),
|
|
49
|
+
/* @__PURE__ */ _(
|
|
50
|
+
"div",
|
|
51
|
+
{
|
|
52
|
+
className: A(
|
|
53
|
+
t,
|
|
54
|
+
G,
|
|
55
|
+
P,
|
|
56
|
+
h
|
|
57
|
+
),
|
|
58
|
+
children: i
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
/* @__PURE__ */ _(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
className: A(
|
|
65
|
+
t,
|
|
66
|
+
u,
|
|
67
|
+
P
|
|
68
|
+
),
|
|
69
|
+
children: s
|
|
70
|
+
}
|
|
71
|
+
)
|
|
48
72
|
] })
|
|
49
73
|
}
|
|
50
74
|
);
|
|
51
75
|
};
|
|
52
76
|
export {
|
|
53
|
-
|
|
77
|
+
r_ as AppBar
|
|
54
78
|
};
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
+
export type AppBarPosition = 'fixed' | 'sticky' | 'static' | 'relative';
|
|
3
|
+
export type AppBarVariant = 'default' | 'transparent' | 'blur';
|
|
4
|
+
export type AppBarColor = 'default' | 'primary' | 'dark';
|
|
2
5
|
export interface AppBarProps {
|
|
3
6
|
testId?: string;
|
|
4
7
|
id?: string;
|
|
5
8
|
children?: ReactNode;
|
|
6
|
-
position?:
|
|
7
|
-
variant?:
|
|
8
|
-
color?:
|
|
9
|
+
position?: AppBarPosition;
|
|
10
|
+
variant?: AppBarVariant;
|
|
11
|
+
color?: AppBarColor;
|
|
9
12
|
className?: string;
|
|
10
13
|
leftContent?: ReactNode;
|
|
11
14
|
rightContent?: ReactNode;
|
|
12
15
|
centerContent?: ReactNode;
|
|
13
16
|
elevation?: boolean;
|
|
17
|
+
dense?: boolean;
|
|
18
|
+
disableGutters?: boolean;
|
|
19
|
+
enableColorOnDark?: boolean;
|
|
14
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),m=require("../../utils/cn.cjs"),D=require("../Portal/Portal.cjs"),V=require("./Autocomplete.utils.cjs"),M=require("./Autocomplete.const.cjs"),C=({options:z,value:b="",onChange:i,onSelect:x,placeholder:I="Start typing...",label:v,helperText:j,error:u,disabled:f=!1,freeSolo:k=!1,loading:E=!1,filterOptions:q=V.defaultFilter,className:_,testId:B})=>{const[c,s]=a.useState(!1),[n,h]=a.useState(-1),[l,T]=a.useState({top:0,left:0,width:0}),N=a.useRef(null),P=a.useRef(null),p=a.useRef(null),A=a.useRef(null),w=a.useRef(null),o=q(z,b),g=c&&!f&&o.length>0,y=c&&!f&&o.length===0&&!!b&&!E;a.useEffect(()=>{if(!g&&!y)return;const e=()=>{var d;const r=(d=P.current)==null?void 0:d.getBoundingClientRect();r&&T({top:r.bottom+4,left:Math.max(8,Math.min(r.left,window.innerWidth-r.width-8)),width:r.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[g,y]),a.useEffect(()=>{if(!c)return;const e=r=>{var R,O;const d=r.target;(R=N.current)!=null&&R.contains(d)||(O=p.current)!=null&&O.contains(d)||s(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[c]),a.useEffect(()=>{h(-1)},[b]),a.useEffect(()=>{if(n>=0&&w.current){const e=w.current.children[n];e&&e.scrollIntoView({block:"nearest"})}},[n]);const U=e=>{const r=e.target.value;i==null||i(r),s(!0)},L=e=>{var r;i==null||i(e.label),x==null||x(e),s(!1),(r=A.current)==null||r.blur()},W=e=>{if(!c){(e.key==="ArrowDown"||e.key==="ArrowUp")&&(s(!0),e.preventDefault());return}switch(e.key){case"ArrowDown":e.preventDefault(),h(r=>r<o.length-1?r+1:0);break;case"ArrowUp":e.preventDefault(),h(r=>r>0?r-1:o.length-1);break;case"Enter":e.preventDefault(),n>=0&&o[n]?L(o[n]):k&&b&&s(!1);break;case"Escape":s(!1);break}};return t.jsxs("div",{className:m.cn("bear-w-full bear-relative",_),ref:N,"data-testid":B,children:[v&&t.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5",children:v}),t.jsxs("div",{className:"bear-relative",ref:P,children:[t.jsx("input",{ref:A,type:"text",value:b,onChange:U,onFocus:()=>s(!0),onKeyDown:W,placeholder:I,disabled:f,className:m.cn("bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border","bear-bg-[var(--bear-bg-primary)]","bear-text-sm bear-text-[var(--bear-text-primary)]","placeholder:bear-text-[var(--bear-text-muted)]","bear-transition-colors bear-outline-none",u?"bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20":"bear-border-[var(--bear-border-default)] focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",f&&"bear-opacity-50 bear-cursor-not-allowed bear-bg-[var(--bear-bg-secondary)]")}),t.jsx("div",{className:"bear-absolute bear-right-3 bear-top-1/2 bear-transform bear--translate-y-1/2",children:E?t.jsxs("svg",{className:"bear-animate-spin bear-w-4 bear-h-4 bear-text-gray-400",viewBox:"0 0 24 24",fill:"none",children:[t.jsx("circle",{className:"bear-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),t.jsx("path",{className:"bear-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}):t.jsx("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})})})]}),g&&t.jsx(D.Portal,{children:t.jsx("div",{ref:p,className:"bear-fixed bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-shadow-lg bear-bg-[var(--bear-bg-primary)]",style:{top:l.top,left:l.left,width:l.width,zIndex:M.AUTOCOMPLETE_PANEL_Z},children:t.jsx("div",{ref:w,className:"bear-max-h-60 bear-overflow-auto bear-py-1",children:o.map((e,r)=>t.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>L(e),className:m.cn("bear-w-full bear-px-4 bear-py-2 bear-text-left bear-text-sm bear-transition-colors","bear-text-[var(--bear-text-primary)]",r===n?"bear-bg-[var(--bear-bg-tertiary)]":"hover:bear-bg-[var(--bear-bg-secondary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[t.jsx("div",{className:"bear-font-medium",children:e.label}),e.description&&t.jsx("div",{className:"bear-text-xs bear-text-[var(--bear-text-muted)] bear-mt-0.5",children:e.description})]},e.value))})})}),y&&t.jsx(D.Portal,{children:t.jsx("div",{ref:p,className:"bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",style:{top:l.top,left:l.left,width:l.width,zIndex:M.AUTOCOMPLETE_PANEL_Z},children:k?"Press Enter to use this value":"No results found"})}),(j||u)&&t.jsx("p",{className:m.cn("bear-mt-1.5 bear-text-xs",u?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:u||j})]})};exports.Autocomplete=C;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as m, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { useState as N, useRef as c, useEffect as
|
|
3
|
-
import { cn as
|
|
2
|
+
import { useState as N, useRef as c, useEffect as p } from "react";
|
|
3
|
+
import { cn as h } from "../../utils/cn.js";
|
|
4
4
|
import { Portal as B } from "../Portal/Portal.js";
|
|
5
5
|
import { defaultFilter as T } from "./Autocomplete.utils.js";
|
|
6
6
|
import { AUTOCOMPLETE_PANEL_Z as W } from "./Autocomplete.const.js";
|
|
@@ -20,9 +20,9 @@ const Y = ({
|
|
|
20
20
|
className: F,
|
|
21
21
|
testId: H
|
|
22
22
|
}) => {
|
|
23
|
-
const [l, a] = N(!1), [n,
|
|
24
|
-
|
|
25
|
-
if (!
|
|
23
|
+
const [l, a] = N(!1), [n, x] = N(-1), [i, K] = N({ top: 0, left: 0, width: 0 }), D = c(null), z = c(null), g = c(null), I = c(null), y = c(null), s = V(j, b), v = l && !f && s.length > 0, k = l && !f && s.length === 0 && !!b && !A;
|
|
24
|
+
p(() => {
|
|
25
|
+
if (!v && !k) return;
|
|
26
26
|
const e = () => {
|
|
27
27
|
var d;
|
|
28
28
|
const r = (d = z.current) == null ? void 0 : d.getBoundingClientRect();
|
|
@@ -35,19 +35,19 @@ const Y = ({
|
|
|
35
35
|
return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
|
|
36
36
|
window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
|
|
37
37
|
};
|
|
38
|
-
}, [
|
|
38
|
+
}, [v, k]), p(() => {
|
|
39
39
|
if (!l) return;
|
|
40
40
|
const e = (r) => {
|
|
41
41
|
var M, O;
|
|
42
42
|
const d = r.target;
|
|
43
|
-
(M = D.current) != null && M.contains(d) || (O =
|
|
43
|
+
(M = D.current) != null && M.contains(d) || (O = g.current) != null && O.contains(d) || a(!1);
|
|
44
44
|
};
|
|
45
45
|
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
46
|
-
}, [l]),
|
|
47
|
-
|
|
48
|
-
}, [b]),
|
|
49
|
-
if (n >= 0 &&
|
|
50
|
-
const e =
|
|
46
|
+
}, [l]), p(() => {
|
|
47
|
+
x(-1);
|
|
48
|
+
}, [b]), p(() => {
|
|
49
|
+
if (n >= 0 && y.current) {
|
|
50
|
+
const e = y.current.children[n];
|
|
51
51
|
e && e.scrollIntoView({ block: "nearest" });
|
|
52
52
|
}
|
|
53
53
|
}, [n]);
|
|
@@ -64,12 +64,12 @@ const Y = ({
|
|
|
64
64
|
}
|
|
65
65
|
switch (e.key) {
|
|
66
66
|
case "ArrowDown":
|
|
67
|
-
e.preventDefault(),
|
|
67
|
+
e.preventDefault(), x(
|
|
68
68
|
(r) => r < s.length - 1 ? r + 1 : 0
|
|
69
69
|
);
|
|
70
70
|
break;
|
|
71
71
|
case "ArrowUp":
|
|
72
|
-
e.preventDefault(),
|
|
72
|
+
e.preventDefault(), x(
|
|
73
73
|
(r) => r > 0 ? r - 1 : s.length - 1
|
|
74
74
|
);
|
|
75
75
|
break;
|
|
@@ -81,7 +81,7 @@ const Y = ({
|
|
|
81
81
|
break;
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
|
-
return /* @__PURE__ */ m("div", { className:
|
|
84
|
+
return /* @__PURE__ */ m("div", { className: h("bear-w-full bear-relative", F), ref: D, "data-testid": H, children: [
|
|
85
85
|
E && /* @__PURE__ */ t("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5", children: E }),
|
|
86
86
|
/* @__PURE__ */ m("div", { className: "bear-relative", ref: z, children: [
|
|
87
87
|
/* @__PURE__ */ t(
|
|
@@ -95,14 +95,14 @@ const Y = ({
|
|
|
95
95
|
onKeyDown: C,
|
|
96
96
|
placeholder: U,
|
|
97
97
|
disabled: f,
|
|
98
|
-
className:
|
|
98
|
+
className: h(
|
|
99
99
|
"bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border",
|
|
100
|
-
"bear-bg-
|
|
101
|
-
"bear-text-sm bear-text-
|
|
102
|
-
"placeholder:bear-text-
|
|
100
|
+
"bear-bg-[var(--bear-bg-primary)]",
|
|
101
|
+
"bear-text-sm bear-text-[var(--bear-text-primary)]",
|
|
102
|
+
"placeholder:bear-text-[var(--bear-text-muted)]",
|
|
103
103
|
"bear-transition-colors bear-outline-none",
|
|
104
|
-
u ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-
|
|
105
|
-
f && "bear-opacity-50 bear-cursor-not-allowed bear-bg-
|
|
104
|
+
u ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-[var(--bear-border-default)] focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",
|
|
105
|
+
f && "bear-opacity-50 bear-cursor-not-allowed bear-bg-[var(--bear-bg-secondary)]"
|
|
106
106
|
)
|
|
107
107
|
}
|
|
108
108
|
),
|
|
@@ -111,42 +111,42 @@ const Y = ({
|
|
|
111
111
|
/* @__PURE__ */ t("path", { className: "bear-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
|
|
112
112
|
] }) : /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4 bear-text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
|
|
113
113
|
] }),
|
|
114
|
-
|
|
114
|
+
v && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
|
|
115
115
|
"div",
|
|
116
116
|
{
|
|
117
|
-
ref:
|
|
118
|
-
className: "bear-fixed bear-rounded-lg bear-border bear-border-
|
|
117
|
+
ref: g,
|
|
118
|
+
className: "bear-fixed bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-shadow-lg bear-bg-[var(--bear-bg-primary)]",
|
|
119
119
|
style: {
|
|
120
120
|
top: i.top,
|
|
121
121
|
left: i.left,
|
|
122
122
|
width: i.width,
|
|
123
123
|
zIndex: W
|
|
124
124
|
},
|
|
125
|
-
children: /* @__PURE__ */ t("div", { ref:
|
|
125
|
+
children: /* @__PURE__ */ t("div", { ref: y, className: "bear-max-h-60 bear-overflow-auto bear-py-1", children: s.map((e, r) => /* @__PURE__ */ m(
|
|
126
126
|
"button",
|
|
127
127
|
{
|
|
128
128
|
type: "button",
|
|
129
129
|
disabled: e.disabled,
|
|
130
130
|
onClick: () => R(e),
|
|
131
|
-
className:
|
|
131
|
+
className: h(
|
|
132
132
|
"bear-w-full bear-px-4 bear-py-2 bear-text-left bear-text-sm bear-transition-colors",
|
|
133
|
-
"bear-text-
|
|
134
|
-
r === n ? "bear-bg-
|
|
133
|
+
"bear-text-[var(--bear-text-primary)]",
|
|
134
|
+
r === n ? "bear-bg-[var(--bear-bg-tertiary)]" : "hover:bear-bg-[var(--bear-bg-secondary)]",
|
|
135
135
|
e.disabled && "bear-opacity-50 bear-cursor-not-allowed"
|
|
136
136
|
),
|
|
137
137
|
children: [
|
|
138
138
|
/* @__PURE__ */ t("div", { className: "bear-font-medium", children: e.label }),
|
|
139
|
-
e.description && /* @__PURE__ */ t("div", { className: "bear-text-xs bear-text-
|
|
139
|
+
e.description && /* @__PURE__ */ t("div", { className: "bear-text-xs bear-text-[var(--bear-text-muted)] bear-mt-0.5", children: e.description })
|
|
140
140
|
]
|
|
141
141
|
},
|
|
142
142
|
e.value
|
|
143
143
|
)) })
|
|
144
144
|
}
|
|
145
145
|
) }),
|
|
146
|
-
|
|
146
|
+
k && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
|
|
147
147
|
"div",
|
|
148
148
|
{
|
|
149
|
-
ref:
|
|
149
|
+
ref: g,
|
|
150
150
|
className: "bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",
|
|
151
151
|
style: {
|
|
152
152
|
top: i.top,
|
|
@@ -157,7 +157,7 @@ const Y = ({
|
|
|
157
157
|
children: P ? "Press Enter to use this value" : "No results found"
|
|
158
158
|
}
|
|
159
159
|
) }),
|
|
160
|
-
(L || u) && /* @__PURE__ */ t("p", { className:
|
|
160
|
+
(L || u) && /* @__PURE__ */ t("p", { className: h(
|
|
161
161
|
"bear-mt-1.5 bear-text-xs",
|
|
162
162
|
u ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
|
|
163
163
|
), children: u || L })
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react/jsx-runtime"),e=require("./Backdrop.const.cjs"),I=require("../../utils/cn.cjs");require("react");const O=require("../../utils/generateBearId.utils.cjs"),R=require("../../utils/useBearId.cjs"),E=s=>{const{id:n,testId:i,open:r=!0,invisible:a=!1,blur:o=!1,zIndex:d=e.BACKDROP_DEFAULT_Z_INDEX,transitionDuration:S=e.BACKDROP_DEFAULT_TRANSITION_MS,keepMounted:c=!1,onClick:u,children:t,className:_,style:B,...l}=s,A=R.useBearId("Backdrop"),C=O.resolveBearId(n,A);return!r&&!c&&!t?null:D.jsx("div",{...l,id:C,"data-testid":i,"aria-hidden":!r,onClick:u,className:I.cn(e.BACKDROP_ROOT_CLASS,e.BACKDROP_BASE_CLASSES,r?e.BACKDROP_VISIBLE_CLASSES:e.BACKDROP_HIDDEN_CLASSES,!a&&e.BACKDROP_TINT_CLASSES,o&&e.BACKDROP_BLUR_CLASSES,_),style:{zIndex:d,transitionDuration:`${S}ms`,...B},children:t})};exports.Backdrop=E;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="Bear-Backdrop",e=11e3,A=200,_="bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity",t="bear-opacity-100 bear-pointer-events-auto",C="bear-opacity-0 bear-pointer-events-none",r="bear-bg-black/50 dark:bear-bg-black/60",a="bear-backdrop-blur-sm";exports.BACKDROP_BASE_CLASSES=_;exports.BACKDROP_BLUR_CLASSES=a;exports.BACKDROP_DEFAULT_TRANSITION_MS=A;exports.BACKDROP_DEFAULT_Z_INDEX=e;exports.BACKDROP_HIDDEN_CLASSES=C;exports.BACKDROP_ROOT_CLASS=S;exports.BACKDROP_TINT_CLASSES=r;exports.BACKDROP_VISIBLE_CLASSES=t;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const BACKDROP_ROOT_CLASS = "Bear-Backdrop";
|
|
2
|
+
export declare const BACKDROP_DEFAULT_Z_INDEX = 11000;
|
|
3
|
+
export declare const BACKDROP_DEFAULT_TRANSITION_MS = 200;
|
|
4
|
+
export declare const BACKDROP_BASE_CLASSES = "bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity";
|
|
5
|
+
export declare const BACKDROP_VISIBLE_CLASSES = "bear-opacity-100 bear-pointer-events-auto";
|
|
6
|
+
export declare const BACKDROP_HIDDEN_CLASSES = "bear-opacity-0 bear-pointer-events-none";
|
|
7
|
+
export declare const BACKDROP_TINT_CLASSES = "bear-bg-black/50 dark:bear-bg-black/60";
|
|
8
|
+
export declare const BACKDROP_BLUR_CLASSES = "bear-backdrop-blur-sm";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const e = "Bear-Backdrop", a = 11e3, r = 200, t = "bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity", S = "bear-opacity-100 bear-pointer-events-auto", b = "bear-opacity-0 bear-pointer-events-none", n = "bear-bg-black/50 dark:bear-bg-black/60", o = "bear-backdrop-blur-sm";
|
|
2
|
+
export {
|
|
3
|
+
t as BACKDROP_BASE_CLASSES,
|
|
4
|
+
o as BACKDROP_BLUR_CLASSES,
|
|
5
|
+
r as BACKDROP_DEFAULT_TRANSITION_MS,
|
|
6
|
+
a as BACKDROP_DEFAULT_Z_INDEX,
|
|
7
|
+
b as BACKDROP_HIDDEN_CLASSES,
|
|
8
|
+
e as BACKDROP_ROOT_CLASS,
|
|
9
|
+
n as BACKDROP_TINT_CLASSES,
|
|
10
|
+
S as BACKDROP_VISIBLE_CLASSES
|
|
11
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { BACKDROP_DEFAULT_Z_INDEX as I, BACKDROP_DEFAULT_TRANSITION_MS as c, BACKDROP_BLUR_CLASSES as p, BACKDROP_TINT_CLASSES as E, BACKDROP_VISIBLE_CLASSES as O, BACKDROP_HIDDEN_CLASSES as R, BACKDROP_BASE_CLASSES as L, BACKDROP_ROOT_CLASS as f } from "./Backdrop.const.js";
|
|
3
|
+
import { cn as u } from "../../utils/cn.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { resolveBearId as K } from "../../utils/generateBearId.utils.js";
|
|
6
|
+
import { useBearId as P } from "../../utils/useBearId.js";
|
|
7
|
+
const b = (t) => {
|
|
8
|
+
const {
|
|
9
|
+
id: o,
|
|
10
|
+
testId: i,
|
|
11
|
+
open: r = !0,
|
|
12
|
+
invisible: s = !1,
|
|
13
|
+
blur: n = !1,
|
|
14
|
+
zIndex: S = I,
|
|
15
|
+
transitionDuration: a = c,
|
|
16
|
+
keepMounted: d = !1,
|
|
17
|
+
onClick: A,
|
|
18
|
+
children: e,
|
|
19
|
+
className: _,
|
|
20
|
+
style: m,
|
|
21
|
+
...B
|
|
22
|
+
} = t, C = P("Backdrop"), D = K(o, C);
|
|
23
|
+
return !r && !d && !e ? null : /* @__PURE__ */ l(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
...B,
|
|
27
|
+
id: D,
|
|
28
|
+
"data-testid": i,
|
|
29
|
+
"aria-hidden": !r,
|
|
30
|
+
onClick: A,
|
|
31
|
+
className: u(
|
|
32
|
+
f,
|
|
33
|
+
L,
|
|
34
|
+
r ? O : R,
|
|
35
|
+
!s && E,
|
|
36
|
+
n && p,
|
|
37
|
+
_
|
|
38
|
+
),
|
|
39
|
+
style: {
|
|
40
|
+
zIndex: S,
|
|
41
|
+
transitionDuration: `${a}ms`,
|
|
42
|
+
...m
|
|
43
|
+
},
|
|
44
|
+
children: e
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
export {
|
|
49
|
+
b as Backdrop
|
|
50
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode, MouseEvent } from 'react';
|
|
2
|
+
export interface BackdropProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
|
|
3
|
+
id?: string;
|
|
4
|
+
testId?: string;
|
|
5
|
+
open?: boolean;
|
|
6
|
+
invisible?: boolean;
|
|
7
|
+
blur?: boolean;
|
|
8
|
+
zIndex?: number;
|
|
9
|
+
transitionDuration?: number;
|
|
10
|
+
keepMounted?: boolean;
|
|
11
|
+
onClick?: (event: MouseEvent<HTMLDivElement>) => void;
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("./BottomNavigation.const.cjs"),s=require("../../utils/cn.cjs");require("react");const f=require("../../utils/generateBearId.utils.cjs"),m=require("../../utils/useBearId.cjs"),A=b=>{const{items:o,value:l,onChange:n,showLabels:i="active",variant:c="default",className:d,id:u,testId:N}=b,x=m.useBearId("BottomNavigation"),I=f.resolveBearId(u,x),T=e=>i===!0||i==="always"?!0:i==="active"?e:!1;return a.jsx("nav",{id:I,"data-testid":N,className:s.cn(r.BOTTOM_NAVIGATION_ROOT_CLASS,"bear-fixed bear-bottom-0 bear-left-0 bear-right-0 bear-z-50 bear-h-16 bear-flex bear-items-center bear-justify-around bear-px-2",r.BOTTOM_NAVIGATION_VARIANT_CLASSES[c],d),children:o.map(e=>{const t=l===e.id;return a.jsxs("button",{type:"button",onClick:()=>!e.disabled&&(n==null?void 0:n(e.id)),disabled:e.disabled,className:s.cn(`${r.BOTTOM_NAVIGATION_ROOT_CLASS}__item`,"bear-flex bear-flex-col bear-items-center bear-justify-center bear-flex-1 bear-h-full bear-py-2 bear-transition-all",t?r.BOTTOM_NAVIGATION_ACTIVE_CLASSES:r.BOTTOM_NAVIGATION_INACTIVE_CLASSES,e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[a.jsxs("div",{className:"bear-relative",children:[a.jsx("span",{className:s.cn("bear-transition-transform",t&&"bear-scale-110"),children:e.icon}),e.badge!==void 0&&a.jsx("span",{className:"bear-absolute -bear-top-1 -bear-right-1 bear-min-w-[16px] bear-h-4 bear-px-1 bear-flex bear-items-center bear-justify-center bear-text-xs bear-font-medium bear-bg-primary-500 bear-text-white bear-rounded-full",children:e.badge})]}),T(t)&&a.jsx("span",{className:s.cn("bear-text-xs bear-mt-1 bear-transition-all",t?"bear-font-medium":""),children:e.label})]},e.id)})})};exports.BottomNavigation=A;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="Bear-BottomNavigation",e={default:"bear-bg-white dark:bear-bg-zinc-900 bear-border-t bear-border-gray-200 dark:bear-border-zinc-800",elevated:"bear-bg-white dark:bear-bg-zinc-900 bear-shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:bear-shadow-[0_-4px_20px_rgba(0,0,0,0.3)]",transparent:"bear-bg-white/80 dark:bear-bg-zinc-900/80 bear-backdrop-blur-md bear-border-t bear-border-gray-200/70 dark:bear-border-zinc-800/50"},a="bear-text-primary-600 dark:bear-text-primary-400",b="bear-text-gray-500 hover:bear-text-gray-800 dark:bear-text-zinc-500 dark:hover:bear-text-zinc-300";exports.BOTTOM_NAVIGATION_ACTIVE_CLASSES=a;exports.BOTTOM_NAVIGATION_INACTIVE_CLASSES=b;exports.BOTTOM_NAVIGATION_ROOT_CLASS=r;exports.BOTTOM_NAVIGATION_VARIANT_CLASSES=e;
|
|
@@ -1 +1,8 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const BOTTOM_NAVIGATION_ROOT_CLASS = "Bear-BottomNavigation";
|
|
2
|
+
export declare const BOTTOM_NAVIGATION_VARIANT_CLASSES: {
|
|
3
|
+
readonly default: "bear-bg-white dark:bear-bg-zinc-900 bear-border-t bear-border-gray-200 dark:bear-border-zinc-800";
|
|
4
|
+
readonly elevated: "bear-bg-white dark:bear-bg-zinc-900 bear-shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:bear-shadow-[0_-4px_20px_rgba(0,0,0,0.3)]";
|
|
5
|
+
readonly transparent: "bear-bg-white/80 dark:bear-bg-zinc-900/80 bear-backdrop-blur-md bear-border-t bear-border-gray-200/70 dark:bear-border-zinc-800/50";
|
|
6
|
+
};
|
|
7
|
+
export declare const BOTTOM_NAVIGATION_ACTIVE_CLASSES = "bear-text-primary-600 dark:bear-text-primary-400";
|
|
8
|
+
export declare const BOTTOM_NAVIGATION_INACTIVE_CLASSES = "bear-text-gray-500 hover:bear-text-gray-800 dark:bear-text-zinc-500 dark:hover:bear-text-zinc-300";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const r = "Bear-BottomNavigation", a = {
|
|
2
|
+
default: "bear-bg-white dark:bear-bg-zinc-900 bear-border-t bear-border-gray-200 dark:bear-border-zinc-800",
|
|
3
|
+
elevated: "bear-bg-white dark:bear-bg-zinc-900 bear-shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:bear-shadow-[0_-4px_20px_rgba(0,0,0,0.3)]",
|
|
4
|
+
transparent: "bear-bg-white/80 dark:bear-bg-zinc-900/80 bear-backdrop-blur-md bear-border-t bear-border-gray-200/70 dark:bear-border-zinc-800/50"
|
|
5
|
+
}, e = "bear-text-primary-600 dark:bear-text-primary-400", b = "bear-text-gray-500 hover:bear-text-gray-800 dark:bear-text-zinc-500 dark:hover:bear-text-zinc-300";
|
|
6
|
+
export {
|
|
7
|
+
e as BOTTOM_NAVIGATION_ACTIVE_CLASSES,
|
|
8
|
+
b as BOTTOM_NAVIGATION_INACTIVE_CLASSES,
|
|
9
|
+
r as BOTTOM_NAVIGATION_ROOT_CLASS,
|
|
10
|
+
a as BOTTOM_NAVIGATION_VARIANT_CLASSES
|
|
11
|
+
};
|