@caseparts-org/caseblocks 0.0.89 → 0.0.91
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/dist/Cart.module-9txlotpz.js +18 -0
- package/dist/assets/Cart.css +1 -1
- package/dist/assets/Icon.css +1 -1
- package/dist/assets/Popover.css +1 -0
- package/dist/assets/SlideInPanel.css +1 -0
- package/dist/assets/Tooltip.css +1 -1
- package/dist/assets/buttonClassName.css +1 -1
- package/dist/atoms/Button/buttonClassName.js +25 -25
- package/dist/atoms/Icon/Icon.d.ts +3 -1
- package/dist/atoms/Icon/Icon.js +48 -32
- package/dist/atoms/Input/Input.js +4 -4
- package/dist/atoms/Popover/Popover.d.ts +14 -0
- package/dist/atoms/Popover/Popover.js +110 -0
- package/dist/atoms/Popover/Popover.stories.d.ts +66 -0
- package/dist/atoms/Popover/Popover.stories.js +207 -0
- package/dist/atoms/SlideInPanel/SlideInPanel.d.ts +18 -0
- package/dist/atoms/SlideInPanel/SlideInPanel.js +99 -0
- package/dist/atoms/SlideInPanel/SlideInPanel.stories.d.ts +10 -0
- package/dist/atoms/SlideInPanel/SlideInPanel.stories.js +117 -0
- package/dist/atoms/Tooltip/Tooltip.d.ts +16 -0
- package/dist/atoms/Tooltip/Tooltip.js +126 -0
- package/dist/{molecules → atoms}/Tooltip/Tooltip.stories.d.ts +8 -26
- package/dist/atoms/Tooltip/Tooltip.stories.js +209 -0
- package/dist/index-B4KbmMH3.js +383 -0
- package/dist/main-client.d.ts +3 -1
- package/dist/main-client.js +40 -38
- package/dist/molecules/AddToCart/AddToCart.js +18 -18
- package/dist/molecules/CardLink/CardLink.js +5 -5
- package/dist/molecules/Cart/Cart.d.ts +10 -6
- package/dist/molecules/Cart/Cart.js +42 -93
- package/dist/molecules/Cart/Cart.stories.js +61 -28
- package/dist/molecules/Cart/CartSlideInPanel.d.ts +15 -0
- package/dist/molecules/Cart/CartSlideInPanel.js +97 -0
- package/dist/molecules/CategoryNav/CategoryNav.js +2 -2
- package/dist/molecules/StatefulButton/StatefulButton.stories.js +4 -4
- package/dist/molecules/ToggleView/ToggleView.js +6 -6
- package/dist/organisms/Carousel/Carousel.js +44 -44
- package/dist/organisms/Footer/Footer.js +1 -1
- package/dist/organisms/MainNav/MainNav.d.ts +13 -11
- package/dist/organisms/MainNav/MainNav.js +86 -82
- package/dist/organisms/MainNav/MainNav.stories.d.ts +1 -2
- package/dist/organisms/MainNav/MainNav.stories.js +85 -58
- package/package.json +28 -7
- package/dist/molecules/Cart/Cart.stories.d.ts +0 -15
- package/dist/molecules/Tooltip/Tooltip.d.ts +0 -12
- package/dist/molecules/Tooltip/Tooltip.js +0 -2321
- package/dist/molecules/Tooltip/Tooltip.stories.js +0 -202
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import './assets/Cart.css';const t = "_cartIconButton_pkqoj_2", o = "_count_pkqoj_9", n = "_cartContainer_pkqoj_24", e = "_header_pkqoj_35", _ = "_cartItems_pkqoj_40", c = "_topRow_pkqoj_65", a = "_itemInfo_pkqoj_71", s = "_purchaseInformation_pkqoj_76", r = "_itemManagement_pkqoj_83", m = "_removeItem_pkqoj_101", p = "_noItems_pkqoj_111", u = "_subtotal_pkqoj_118", I = "_checkoutButton_pkqoj_125", k = {
|
|
2
|
+
cartIconButton: t,
|
|
3
|
+
count: o,
|
|
4
|
+
cartContainer: n,
|
|
5
|
+
header: e,
|
|
6
|
+
cartItems: _,
|
|
7
|
+
topRow: c,
|
|
8
|
+
itemInfo: a,
|
|
9
|
+
purchaseInformation: s,
|
|
10
|
+
itemManagement: r,
|
|
11
|
+
removeItem: m,
|
|
12
|
+
noItems: p,
|
|
13
|
+
subtotal: u,
|
|
14
|
+
checkoutButton: I
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
k as s
|
|
18
|
+
};
|
package/dist/assets/Cart.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._cartIconButton_pkqoj_2{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_pkqoj_9{position:absolute;top:0;left:14px;border-radius:50%;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--color-brand-primary-primary-tangerine);color:var(--color-neutrals-neutral-1);font-weight:var(--font-weight-semibold)}._cartContainer_pkqoj_24{height:100vh;width:100%;min-width:320px;max-width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto auto;gap:var(--spacing-1);padding:var(--spacing-1)}._header_pkqoj_35{display:flex;flex-direction:column;align-items:flex-start}._cartItems_pkqoj_40{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_pkqoj_40 ul{margin:0;padding:0}._cartItems_pkqoj_40 li{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-0-5);align-items:center;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border-bottom:1px solid var(--color-neutrals-neutral-2)}._cartItems_pkqoj_40 li:first-of-type{border-top:1px solid var(--color-neutrals-neutral-2)}._topRow_pkqoj_65{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}._itemInfo_pkqoj_71{display:flex;flex-direction:column;align-items:flex-start}._purchaseInformation_pkqoj_76{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._itemManagement_pkqoj_83{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-spacing-3xs)}._cartItems_pkqoj_40 li p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._cartItems_pkqoj_40 img{height:40px;width:40px;object-fit:contain}._removeItem_pkqoj_101{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_pkqoj_111{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_pkqoj_118{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_pkqoj_125{width:100%}
|
package/dist/assets/Icon.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._icon-
|
|
1
|
+
._icon-sm_1xeu5_1{--icon-size: var(--font-size-md);--icon-padding: calc(var(--font-size-md) / 4)}._icon-md_1xeu5_5{--icon-size: var(--font-size-2xl);--icon-padding: calc(var(--font-size-md) / 4)}._icon-lg_1xeu5_9{--icon-size: var(--font-size-3xl);--icon-padding: calc(var(--font-size-lg) / 4)}._wrapper_1xeu5_15{display:inline-flex;box-sizing:border-box;width:calc(var(--icon-size) + (var(--icon-padding) * 2));height:calc(var(--icon-size) + (var(--icon-padding) * 2));aspect-ratio:1 / 1;align-items:center;justify-content:center;line-height:1;padding:var(--icon-padding)}._wrapper_1xeu5_15>i,._wrapper_1xeu5_15>svg{font-size:var(--icon-size);width:100%;height:100%;max-width:100%;max-height:100%}._iconColor-inherit_1xeu5_38{color:inherit}._iconColor-default_1xeu5_39{color:var(--icons-icon-default)}._iconColor-default-inverted_1xeu5_40{color:var(--icons-icon-invert)}._iconColor-secondary_1xeu5_41{color:var(--icons-icon-secondary)}._iconColor-warning_1xeu5_42{color:var(--icons-icon-warning)}._iconColor-error-warning_1xeu5_43{color:var(--icons-icon-error-warning)}._iconColor-success_1xeu5_44{color:var(--icons-icon-success)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._popover_vlr81_1{position:relative;display:inline-block;z-index:20}._content_vlr81_7{background:#fff;border:1px solid var(--color-neutrals-neutral-1);border-radius:4px;box-shadow:8px 8px 12px #00000026;padding:var(--spacing-1);min-width:160px;box-sizing:border-box}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._root_12lt6_1{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;pointer-events:none}._overlay_12lt6_8{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:auto}._panel_12lt6_16{position:absolute;background:#fff;box-shadow:0 4px 18px #00000040;display:flex;flex-direction:column;overflow:auto;pointer-events:auto;transition:transform .28s cubic-bezier(.28,.8,.32,1),opacity .28s;will-change:transform}._panel-left_12lt6_29{top:0;left:0;height:100%;max-width:100%;transform:translate(-100%)}._panel-right_12lt6_36{top:0;right:0;height:100%;max-width:100%;transform:translate(100%)}._panel-bottom_12lt6_43{left:0;bottom:0;width:100%;max-height:100%;transform:translateY(100%)}._active_12lt6_52._from-left_12lt6_52 ._panel-left_12lt6_29,._active_12lt6_52._from-right_12lt6_53 ._panel-right_12lt6_36{transform:translate(0)}._active_12lt6_52._from-bottom_12lt6_54 ._panel-bottom_12lt6_43{transform:translateY(0)}
|
package/dist/assets/Tooltip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tooltip_17o7a_1{position:relative;display:inline-block;overflow:visible;pointer-events:none;z-index:9999}._content_17o7a_11{box-shadow:8px 8px 12px #00000026;background-color:#fff;padding:var(--spacing-1);box-sizing:border-box;width:max-content;border:1px solid var(--color-neutrals-neutral-1);border-radius:4px;pointer-events:auto}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_1mhe3_1{--inset-shadow-color: var(--surface-surface-primary-btn);--inset-shadow-style: 0 0 0, inset 0 0 0 var(--spacing-0-125) var(--inset-shadow-color);transition-property:background-color,border-width,box-shadow,color;transition-duration:.1s;transition-timing-function:ease-in;padding:var(--spacing-1);border:none;cursor:pointer;text-decoration:none;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-spacing-3xs)}._button_1mhe3_1:hover{box-shadow:var(--color-neutrals-neutral-2) var(--spacing-0-125) var(--spacing-0-25) var(--spacing-0-5)}._button_1mhe3_1:active{box-shadow:none}._button_1mhe3_1:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert);transition:none;cursor:default}._button_1mhe3_1:disabled:hover{box-shadow:none}._button-primary_1mhe3_44{background-color:var(--surface-surface-primary-btn);color:var(--surface-surface-primary)}._button-primary_1mhe3_44:active{background-color:var(--color-brand-secondary-dark-teal-blue)}._button-primary_1mhe3_44:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_1mhe3_58{background-color:var(--surface-surface-secondary-btn);border:1px solid var(--border-border-secondary-btn);color:var(--text-text-links)}._button-secondary_1mhe3_58:active{--inset-shadow-color: var(--surface-surface-secondary);box-shadow:var(--inset-shadow-style)}._button-secondary_1mhe3_58:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-secondary_1mhe3_58:disabled:hover{box-shadow:var(--inset-shadow-style)}._button-secondary-transparent_1mhe3_80{background-color:transparent;border:1px solid var(--color-neutrals-neutral-1);color:var(--color-neutrals-neutral-1)}._button-secondary-transparent_1mhe3_80:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);border:1px solid var(--border-border-primary)}._button-secondary-transparent_1mhe3_80:disabled:hover{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-disabled-btn-focus);box-shadow:none}._button-secondary-transparent_1mhe3_80:hover{background-color:var(--color-neutrals-neutral-1);border:1px solid var(--border-border-primary);color:#000;box-shadow:none}._button-cta-primary_1mhe3_105{background-color:var(--surface-surface-call-to-action-btn);color:var(--surface-surface-primary)}._button-cta-primary_1mhe3_105:active{background-color:var(--surface-surface-call-to-action-btn-focus)}._button-cta-primary_1mhe3_105:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-tertiary_1mhe3_119{background-color:var(--surface-surface-tertiary-btn);color:var(--surface-surface-tertiary-btn-focus)}._button-tertiary_1mhe3_119:active{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-tertiary_1mhe3_119:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-destructive_1mhe3_137{background-color:var(--surface-surface-error-warning-btn);color:var(--surface-surface-primary)}._button-destructive_1mhe3_137:active{color:var(--surface-surface-error-warning-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--border-border-error-warning);box-shadow:var(--inset-shadow-style)}._button-destructive_1mhe3_137:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-size-xxs_1mhe3_155{border-radius:var(--border-radius-xs);padding:var(--spacing-spacing-4xs) var(--spacing-spacing-4xs)}._button-size-xs_1mhe3_159{border-radius:var(--border-radius-xs);padding:calc(var(--spacing-spacing-4xs) - 1px) var(--spacing-spacing-2xs)}._button-size-sm_1mhe3_163{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-3xs) - 1px) var(--spacing-0-75)}._button-size-md_1mhe3_167,._button-size-lg_1mhe3_171{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-2xs) - 1px) var(--spacing-spacing-default)}._button-size-xl_1mhe3_175{border-radius:var(--border-radius-sm);padding:var(--spacing-0-75) var(--spacing-spacing-default)}._button-primary_1mhe3_44._button-disabled_1mhe3_180{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_1mhe3_58._button-disabled_1mhe3_180{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-secondary_1mhe3_58._button-disabled_1mhe3_180:hover{box-shadow:var(--inset-shadow-style)}._button-secondary-transparent_1mhe3_80._button-disabled_1mhe3_180{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style);border:1px solid var(--border-border-primary)}._button-secondary-transparent_1mhe3_80._button-disabled_1mhe3_180:hover{box-shadow:var(--inset-shadow-style);color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-disabled-btn-focus)}._button-cta-primary_1mhe3_105._button-disabled_1mhe3_180,._button-tertiary_1mhe3_119._button-disabled_1mhe3_180,._button-destructive_1mhe3_137._button-disabled_1mhe3_180{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { t as
|
|
1
|
+
import { t as e } from "../../Text.module-Dzhzk2fH.js";
|
|
2
2
|
import { c as u } from "../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { getHideAtStyles as r } from "../HideAt.js";
|
|
4
|
-
import '../../assets/buttonClassName.css';const
|
|
5
|
-
button:
|
|
6
|
-
"button-primary": "_button-
|
|
7
|
-
"button-secondary": "_button-
|
|
8
|
-
"button-secondary-transparent": "_button-secondary-
|
|
9
|
-
"button-cta-primary": "_button-cta-
|
|
10
|
-
"button-tertiary": "_button-
|
|
11
|
-
"button-destructive": "_button-
|
|
12
|
-
"button-size-xxs": "_button-size-
|
|
13
|
-
"button-size-xs": "_button-size-
|
|
14
|
-
"button-size-sm": "_button-size-
|
|
15
|
-
"button-size-md": "_button-size-
|
|
16
|
-
"button-size-lg": "_button-size-
|
|
17
|
-
"button-size-xl": "_button-size-
|
|
18
|
-
"button-disabled": "_button-
|
|
4
|
+
import '../../assets/buttonClassName.css';const m = "_button_1mhe3_1", t = {
|
|
5
|
+
button: m,
|
|
6
|
+
"button-primary": "_button-primary_1mhe3_44",
|
|
7
|
+
"button-secondary": "_button-secondary_1mhe3_58",
|
|
8
|
+
"button-secondary-transparent": "_button-secondary-transparent_1mhe3_80",
|
|
9
|
+
"button-cta-primary": "_button-cta-primary_1mhe3_105",
|
|
10
|
+
"button-tertiary": "_button-tertiary_1mhe3_119",
|
|
11
|
+
"button-destructive": "_button-destructive_1mhe3_137",
|
|
12
|
+
"button-size-xxs": "_button-size-xxs_1mhe3_155",
|
|
13
|
+
"button-size-xs": "_button-size-xs_1mhe3_159",
|
|
14
|
+
"button-size-sm": "_button-size-sm_1mhe3_163",
|
|
15
|
+
"button-size-md": "_button-size-md_1mhe3_167",
|
|
16
|
+
"button-size-lg": "_button-size-lg_1mhe3_171",
|
|
17
|
+
"button-size-xl": "_button-size-xl_1mhe3_175",
|
|
18
|
+
"button-disabled": "_button-disabled_1mhe3_180"
|
|
19
19
|
};
|
|
20
|
-
function
|
|
20
|
+
function h({
|
|
21
21
|
size: o,
|
|
22
22
|
variant: n,
|
|
23
|
-
hideAt:
|
|
24
|
-
className:
|
|
23
|
+
hideAt: s,
|
|
24
|
+
className: _,
|
|
25
25
|
disabled: b
|
|
26
26
|
}) {
|
|
27
27
|
return u(
|
|
28
28
|
t.button,
|
|
29
29
|
t[`button-${n}`],
|
|
30
30
|
t[`button-size-${o}`],
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
r(
|
|
31
|
+
e.text,
|
|
32
|
+
e[`text-${o}`],
|
|
33
|
+
e["text-semibold"],
|
|
34
|
+
r(s),
|
|
35
35
|
b && t["button-disabled"],
|
|
36
|
-
|
|
36
|
+
_
|
|
37
37
|
);
|
|
38
38
|
}
|
|
39
39
|
export {
|
|
40
|
-
|
|
40
|
+
h as buttonClassNames
|
|
41
41
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
1
2
|
import { HideAtProps } from '../HideAt';
|
|
2
3
|
type IconSet = "fa-kit" | "fa-solid" | "fa-regular" | "fa-light" | "fa-thin" | "fa-brands";
|
|
3
4
|
type IconVariant = "fa-sharp" | "fa-duotone" | "fa-sharp-duotone";
|
|
@@ -6,6 +7,7 @@ interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, HideAtProps {
|
|
|
6
7
|
iconKey: `${IconSet} ${string}` | `${IconVariant} ${IconSet} ${string}`;
|
|
7
8
|
size?: "sm" | "md" | "lg";
|
|
8
9
|
colorToken?: IconColorToken;
|
|
10
|
+
debugSizes?: boolean;
|
|
9
11
|
}
|
|
10
|
-
export declare function Icon({ iconKey, size, hideAt, className, colorToken, ...otherProps }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function Icon({ iconKey, size, hideAt, className, colorToken, debugSizes, ...otherProps }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
export {};
|
package/dist/atoms/Icon/Icon.js
CHANGED
|
@@ -1,42 +1,58 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
"icon-
|
|
7
|
-
"icon-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
"iconColor-
|
|
11
|
-
"iconColor-default
|
|
12
|
-
"iconColor-
|
|
13
|
-
"iconColor-
|
|
14
|
-
"iconColor-
|
|
15
|
-
"iconColor-
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import l from "react";
|
|
3
|
+
import { c as _ } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { getHideAtStyles as p } from "../HideAt.js";
|
|
5
|
+
import '../../assets/Icon.css';const f = "_wrapper_1xeu5_15", r = {
|
|
6
|
+
"icon-sm": "_icon-sm_1xeu5_1",
|
|
7
|
+
"icon-md": "_icon-md_1xeu5_5",
|
|
8
|
+
"icon-lg": "_icon-lg_1xeu5_9",
|
|
9
|
+
wrapper: f,
|
|
10
|
+
"iconColor-inherit": "_iconColor-inherit_1xeu5_38",
|
|
11
|
+
"iconColor-default": "_iconColor-default_1xeu5_39",
|
|
12
|
+
"iconColor-default-inverted": "_iconColor-default-inverted_1xeu5_40",
|
|
13
|
+
"iconColor-secondary": "_iconColor-secondary_1xeu5_41",
|
|
14
|
+
"iconColor-warning": "_iconColor-warning_1xeu5_42",
|
|
15
|
+
"iconColor-error-warning": "_iconColor-error-warning_1xeu5_43",
|
|
16
|
+
"iconColor-success": "_iconColor-success_1xeu5_44"
|
|
16
17
|
};
|
|
17
|
-
function
|
|
18
|
-
iconKey:
|
|
19
|
-
size:
|
|
20
|
-
hideAt:
|
|
21
|
-
className:
|
|
22
|
-
colorToken:
|
|
23
|
-
|
|
18
|
+
function h({
|
|
19
|
+
iconKey: n,
|
|
20
|
+
size: i = "md",
|
|
21
|
+
hideAt: a,
|
|
22
|
+
className: s,
|
|
23
|
+
colorToken: u = "inherit",
|
|
24
|
+
debugSizes: c = !1,
|
|
25
|
+
...d
|
|
24
26
|
}) {
|
|
25
|
-
|
|
27
|
+
const e = l.useRef(null);
|
|
28
|
+
return l.useEffect(() => {
|
|
29
|
+
if (c && e.current) {
|
|
30
|
+
const o = getComputedStyle(e.current);
|
|
31
|
+
console.log("[Icon debugSizes]", {
|
|
32
|
+
width: o.width,
|
|
33
|
+
height: o.height,
|
|
34
|
+
iconSize: o.getPropertyValue("--icon-size"),
|
|
35
|
+
iconPadding: o.getPropertyValue("--icon-padding"),
|
|
36
|
+
iconWrapperSize: o.getPropertyValue("--icon-wrapper-size"),
|
|
37
|
+
fontSize: o.fontSize
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}, [c, i, n]), /* @__PURE__ */ t(
|
|
26
41
|
"span",
|
|
27
42
|
{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
43
|
+
ref: e,
|
|
44
|
+
className: _(
|
|
45
|
+
r.wrapper,
|
|
46
|
+
r[`icon-${i}`],
|
|
47
|
+
r[`iconColor-${u}`],
|
|
48
|
+
p(a),
|
|
49
|
+
s
|
|
34
50
|
),
|
|
35
|
-
...
|
|
36
|
-
children: /* @__PURE__ */
|
|
51
|
+
...d,
|
|
52
|
+
children: /* @__PURE__ */ t("i", { className: _(n), "aria-hidden": "true" })
|
|
37
53
|
}
|
|
38
54
|
);
|
|
39
55
|
}
|
|
40
56
|
export {
|
|
41
|
-
|
|
57
|
+
h as Icon
|
|
42
58
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as r, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import m from "react";
|
|
3
3
|
import { c } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import { getHideAtStyles as o } from "../HideAt.js";
|
|
@@ -6,15 +6,15 @@ import '../../assets/Input.css';const u = "_input_1fwgs_1", e = {
|
|
|
6
6
|
"input-container": "_input-container_1fwgs_1",
|
|
7
7
|
input: u
|
|
8
8
|
}, l = m.forwardRef(
|
|
9
|
-
({ label: n, hideAt: s, className:
|
|
9
|
+
({ label: n, hideAt: s, className: a, ...t }, p) => /* @__PURE__ */ r("div", { className: e["input-container"], children: [
|
|
10
10
|
n && /* @__PURE__ */ i("label", { htmlFor: t.name, children: n }),
|
|
11
11
|
/* @__PURE__ */ i(
|
|
12
12
|
"input",
|
|
13
13
|
{
|
|
14
|
-
ref:
|
|
14
|
+
ref: p,
|
|
15
15
|
id: t.name,
|
|
16
16
|
type: "text",
|
|
17
|
-
className: c(e.input, o(s),
|
|
17
|
+
className: c(e.input, o(s), a),
|
|
18
18
|
...t
|
|
19
19
|
}
|
|
20
20
|
)
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
type PositionKeyword = "top" | "right" | "bottom" | "left";
|
|
3
|
+
type Position = "top left" | "top center" | "top right" | "right top" | "right center" | "right bottom" | "bottom left" | "bottom center" | "bottom right" | "left top" | "left center" | "left bottom" | PositionKeyword;
|
|
4
|
+
export type PopoverProps = {
|
|
5
|
+
trigger: React.ReactElement;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
position?: Position;
|
|
8
|
+
popoverClassName?: string;
|
|
9
|
+
contentClassName?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
closeOnOutsideClick?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare const Popover: React.FC<PopoverProps>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { jsxs as z, Fragment as P, jsx as b } from "react/jsx-runtime";
|
|
2
|
+
import * as u from "react";
|
|
3
|
+
import { r as k } from "../../index-B4KbmMH3.js";
|
|
4
|
+
import { c as x } from "../../clsx-OuTLNxxd.js";
|
|
5
|
+
import '../../assets/Popover.css';const C = "_popover_vlr81_1", M = "_content_vlr81_7", L = {
|
|
6
|
+
popover: C,
|
|
7
|
+
content: M
|
|
8
|
+
};
|
|
9
|
+
function S(o) {
|
|
10
|
+
return o ? o.includes(" ") ? o : `${o} center` : "top center";
|
|
11
|
+
}
|
|
12
|
+
function j(o) {
|
|
13
|
+
const m = S(o).toLowerCase(), [c, l] = m.split(" ");
|
|
14
|
+
return { side: ["top", "right", "bottom", "left"].includes(c) ? c : "top", align: l === "left" || l === "top" ? "start" : l === "right" || l === "bottom" ? "end" : "center" };
|
|
15
|
+
}
|
|
16
|
+
function B(o, m, c, l, p = 8) {
|
|
17
|
+
const e = o.getBoundingClientRect(), a = m.getBoundingClientRect();
|
|
18
|
+
let i = 0, s = 0;
|
|
19
|
+
c === "top" ? i = e.top - a.height - p : c === "bottom" ? i = e.bottom + p : c === "left" ? s = e.left - a.width - p : c === "right" && (s = e.right + p), c === "top" || c === "bottom" ? l === "start" ? s = e.left : l === "end" ? s = e.right - a.width : s = e.left + e.width / 2 - a.width / 2 : l === "start" ? i = e.top : l === "end" ? i = e.bottom - a.height : i = e.top + e.height / 2 - a.height / 2;
|
|
20
|
+
const r = window.innerWidth, w = window.innerHeight;
|
|
21
|
+
return i = Math.max(4, Math.min(w - a.height - 4, i)), s = Math.max(4, Math.min(r - a.width - 4, s)), { top: i, left: s };
|
|
22
|
+
}
|
|
23
|
+
const q = ({
|
|
24
|
+
trigger: o,
|
|
25
|
+
children: m,
|
|
26
|
+
position: c,
|
|
27
|
+
popoverClassName: l,
|
|
28
|
+
contentClassName: p,
|
|
29
|
+
disabled: e,
|
|
30
|
+
closeOnOutsideClick: a = !0
|
|
31
|
+
}) => {
|
|
32
|
+
const { side: i, align: s } = j(c), [r, w] = u.useState(!1), [f, g] = u.useState(null), v = u.useRef(null), h = u.useRef(null), R = () => {
|
|
33
|
+
e || w((t) => !t);
|
|
34
|
+
}, E = () => w(!1), _ = u.cloneElement(o, {
|
|
35
|
+
ref: (t) => {
|
|
36
|
+
const { ref: n } = o;
|
|
37
|
+
typeof n == "function" ? n(t) : n && (n.current = t), v.current = t;
|
|
38
|
+
},
|
|
39
|
+
onClick: (t) => {
|
|
40
|
+
var n, d;
|
|
41
|
+
(d = (n = o.props).onClick) == null || d.call(n, t), R();
|
|
42
|
+
},
|
|
43
|
+
"aria-haspopup": "dialog",
|
|
44
|
+
"aria-expanded": r || void 0,
|
|
45
|
+
"aria-controls": r ? "popover-panel" : void 0,
|
|
46
|
+
style: { ...o.props.style || {}, outline: "none" }
|
|
47
|
+
});
|
|
48
|
+
return u.useLayoutEffect(() => {
|
|
49
|
+
if (!r) {
|
|
50
|
+
g(null);
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
const t = v.current, n = h.current;
|
|
54
|
+
if (!t || !n) return;
|
|
55
|
+
const d = () => {
|
|
56
|
+
g(B(t, n, i, s, 8));
|
|
57
|
+
};
|
|
58
|
+
return d(), window.addEventListener("resize", d), window.addEventListener("scroll", d, !0), () => {
|
|
59
|
+
window.removeEventListener("resize", d), window.removeEventListener("scroll", d, !0);
|
|
60
|
+
};
|
|
61
|
+
}, [r, i, s, m]), u.useEffect(() => {
|
|
62
|
+
if (!r || !a) return;
|
|
63
|
+
const t = (n) => {
|
|
64
|
+
const d = h.current, y = v.current;
|
|
65
|
+
!d || !y || d.contains(n.target) || y.contains(n.target) || E();
|
|
66
|
+
};
|
|
67
|
+
return window.addEventListener("mousedown", t), () => window.removeEventListener("mousedown", t);
|
|
68
|
+
}, [r, a]), u.useEffect(() => {
|
|
69
|
+
if (!r) return;
|
|
70
|
+
const t = (n) => {
|
|
71
|
+
n.key === "Escape" && E();
|
|
72
|
+
};
|
|
73
|
+
return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
|
|
74
|
+
}, [r]), u.useEffect(() => {
|
|
75
|
+
if (r && h.current) {
|
|
76
|
+
const t = h.current.querySelector(
|
|
77
|
+
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
|
78
|
+
);
|
|
79
|
+
t == null || t.focus();
|
|
80
|
+
}
|
|
81
|
+
}, [r]), /* @__PURE__ */ z(P, { children: [
|
|
82
|
+
_,
|
|
83
|
+
r && typeof document < "u" && k.createPortal(
|
|
84
|
+
/* @__PURE__ */ b(
|
|
85
|
+
"div",
|
|
86
|
+
{
|
|
87
|
+
id: "popover-panel",
|
|
88
|
+
ref: h,
|
|
89
|
+
role: "dialog",
|
|
90
|
+
"aria-modal": "false",
|
|
91
|
+
className: x(L.popover, l),
|
|
92
|
+
"data-side": i,
|
|
93
|
+
"data-align": s,
|
|
94
|
+
style: {
|
|
95
|
+
position: "absolute",
|
|
96
|
+
top: (f == null ? void 0 : f.top) ?? 0,
|
|
97
|
+
left: (f == null ? void 0 : f.left) ?? 0,
|
|
98
|
+
visibility: f ? "visible" : "hidden",
|
|
99
|
+
zIndex: 20
|
|
100
|
+
},
|
|
101
|
+
children: /* @__PURE__ */ b("div", { className: x(L.content, p), children: m })
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
document.body
|
|
105
|
+
)
|
|
106
|
+
] });
|
|
107
|
+
};
|
|
108
|
+
export {
|
|
109
|
+
q as Popover
|
|
110
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
3
|
+
import { Popover } from './Popover';
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: React.FC<import('./Popover').PopoverProps>;
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
controls: {
|
|
10
|
+
sort: string;
|
|
11
|
+
};
|
|
12
|
+
docs: {
|
|
13
|
+
description: {
|
|
14
|
+
component: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
tags: string[];
|
|
19
|
+
args: {
|
|
20
|
+
position: "top center";
|
|
21
|
+
closeOnOutsideClick: true;
|
|
22
|
+
disabled: false;
|
|
23
|
+
};
|
|
24
|
+
argTypes: {
|
|
25
|
+
position: {
|
|
26
|
+
control: "select";
|
|
27
|
+
options: string[];
|
|
28
|
+
description: string;
|
|
29
|
+
};
|
|
30
|
+
closeOnOutsideClick: {
|
|
31
|
+
control: "boolean";
|
|
32
|
+
description: string;
|
|
33
|
+
};
|
|
34
|
+
disabled: {
|
|
35
|
+
control: "boolean";
|
|
36
|
+
description: string;
|
|
37
|
+
};
|
|
38
|
+
popoverClassName: {
|
|
39
|
+
table: {
|
|
40
|
+
disable: true;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
contentClassName: {
|
|
44
|
+
table: {
|
|
45
|
+
disable: true;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
trigger: {
|
|
49
|
+
table: {
|
|
50
|
+
disable: true;
|
|
51
|
+
};
|
|
52
|
+
description: string;
|
|
53
|
+
};
|
|
54
|
+
children: {
|
|
55
|
+
description: string;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
export default meta;
|
|
60
|
+
type Story = StoryObj<typeof Popover>;
|
|
61
|
+
export declare const BasicClick: Story;
|
|
62
|
+
export declare const BottomClick: Story;
|
|
63
|
+
export declare const PositionRight: Story;
|
|
64
|
+
export declare const PositionLeft: Story;
|
|
65
|
+
export declare const InteractiveContent: Story;
|
|
66
|
+
export declare const OutsideClickDisabled: Story;
|