@adgytec/adgytec-web-ui-components 2.1.1 → 2.1.3
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/assets/AppBar.css +1 -1
- package/dist/assets/AppBarAction.css +1 -0
- package/dist/assets/AppBarAvatar.css +1 -1
- package/dist/assets/SideSheet.css +1 -1
- package/dist/assets/core5.css +1 -1
- package/dist/chunks/AppBar +7 -6
- package/dist/chunks/AppBar.map +1 -1
- package/dist/chunks/AppBarAction +13 -0
- package/dist/chunks/AppBarAction.map +1 -0
- package/dist/chunks/AppBarAvatar +1 -1
- package/dist/chunks/AppBarAvatar.map +1 -1
- package/dist/chunks/SideSheet +7 -7
- package/dist/chunks/SideSheet.map +1 -1
- package/dist/chunks/core4 +9 -9
- package/dist/chunks/core4.map +1 -1
- package/dist/components/AppBar/AppBarAction/index.js +2 -12
- package/dist/components/AppBar/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/components/AppBar/AppBarAction/index.js.map +0 -1
package/dist/assets/AppBar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{._app-
|
|
1
|
+
@layer adgytec.comps{._app-bar_54m0f_10{--_md-app-bar-background:var(--md-app-bar-background,var(--md-sys-color-surface));--_md-app-bar-on-scroll-background:var(--md-app-bar-on-scroll-background,var(--md-sys-color-surface-container));--_md-app-bar-title-color:var(--md-app-bar-title-color,var(--md-sys-color-on-surface));--_md-app-bar-headline-block-size:var(--md-sys-layout-space-28);gap:var(--md-sys-layout-space-12);padding-inline:var(--md-sys-layout-space-4);padding-block:var(--md-sys-layout-space-8);background-color:var(--_md-app-bar-background);transition:background-color var(--md-sys-motion-expressive-fast-effects) var(--md-sys-motion-expressive-fast-effects-duration);display:grid}@media (prefers-reduced-motion){._app-bar_54m0f_10{transition:none}}._app-bar_54m0f_10[data-size=medium]{--_md-app-bar-headline-block-size:var(--md-sys-layout-space-36)}._app-bar_54m0f_10[data-size=large]{--_md-app-bar-headline-block-size:calc(44 * var(--dp,1px))}._app-bar_54m0f_10[data-scroll]{background-color:var(--_md-app-bar-on-scroll-background);box-shadow:var(--md-sys-elevation-shadow-2)}._primary_54m0f_55{gap:var(--md-sys-layout-space-4);align-items:center;display:flex}._primary_54m0f_55[data-alignment=centered]{grid-template-columns:1fr auto 1fr;display:grid}._leading-action_54m0f_66{--md-button-color:var(--_md-app-bar-title-color)}._leading-action_54m0f_66[data-alignment=centered]{grid-column:1;justify-self:start}._headline_54m0f_75[data-initial-padding]{padding-inline-start:var(--md-sys-layout-space-12)}._headline_54m0f_75[data-alignment=centered]{grid-column:2;justify-self:center}._trailing-actions_54m0f_84{align-items:center;margin-inline-start:auto;display:flex}._trailing-actions_54m0f_84[data-alignment=centered]{grid-column:3;justify-self:end;margin-inline-start:0}._secondary_54m0f_97{padding-inline:var(--md-sys-layout-space-12)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer adgytec.comps{._action_106b8_2{inline-size:var(--md-sys-layout-space-48);block-size:var(--md-sys-layout-space-48);justify-content:center;align-items:center;display:flex}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{.
|
|
1
|
+
@layer adgytec.comps{._avatar_xrsa2_2{--_md-app-bar-avatar-size:var(--md-sys-layout-space-32);inline-size:var(--md-sys-layout-space-48);block-size:var(--md-sys-layout-space-48);justify-content:center;align-items:center;display:flex}._avatar_xrsa2_2>[data-visual-button]{inline-size:var(--_md-app-bar-avatar-size);max-inline-size:var(--_md-app-bar-avatar-size);block-size:var(--_md-app-bar-avatar-size);max-block-size:var(--_md-app-bar-avatar-size);text-align:center;border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative;overflow:clip}:is(._avatar_xrsa2_2>[data-visual-button]) img{-o-object-fit:cover;object-fit:cover;block-size:100%;inline-size:100%}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{._side-sheet-
|
|
1
|
+
@layer adgytec.comps{._side-sheet-dialog_x6kag_10{--_md-side-sheet-background:var(--md-side-sheet-background,var(--md-sys-color-surface-container-low));--_md-side-sheet-color:var(--md-side-sheet-color,var(--md-sys-color-on-surface));--_md-side-sheet-headline-color:var(--md-side-sheet-headline-color,var(--md-sys-color-on-surface-variant));--_md-side-sheet-padding-inline:var(--md-sys-layout-space-16);--_max-inline-size:calc(400 * var(--dp,1px));inline-size:min(100svi, var(--_max-inline-size));background-color:var(--_md-side-sheet-background);block-size:100dvb;color:var(--_md-side-sheet-color);box-shadow:var(--md-sys-elevation-shadow-1);border-radius:var(--md-sys-shape-corner-radius-large);outline:none;grid-template-rows:1fr;display:grid}._side-sheet-dialog_x6kag_10[data-layout=detached]{block-size:calc(100dvb - calc(2 * var(--_detached-margin)));inline-size:min(calc(100svi - calc(2 * var(--_detached-margin))), var(--_max-inline-size))}._side-sheet-dialog_x6kag_10[data-layout=standard][data-alignment=start]{border-start-start-radius:0;border-end-start-radius:0}._side-sheet-dialog_x6kag_10[data-layout=standard][data-alignment=end]{border-start-end-radius:0;border-end-end-radius:0}._side-sheet_x6kag_10{padding-block:var(--md-sys-layout-space-16);grid-template-rows:auto 1fr}._side-sheet_x6kag_10[data-actions]{grid-template-rows:auto 1fr auto}._header_x6kag_70{justify-content:space-between;align-items:center;gap:var(--md-sys-layout-space-12);padding-inline:var(--_md-side-sheet-padding-inline);padding-block-end:var(--md-sys-layout-space-12);display:flex}._close_x6kag_80{margin-inline-start:auto}._headline_x6kag_84{color:var(--_md-side-sheet-headline-color)}._main_x6kag_88{padding-inline:var(--_md-side-sheet-padding-inline);padding-block:var(--md-sys-layout-space-12);overflow-y:auto}._actions_x6kag_95{--_divider-thickness:calc(1 * var(--dp,1px));--_divider-color:rgb(from var(--md-sys-color-outline) r g b / var(--md-sys-state-divider));padding-inline:var(--_md-side-sheet-padding-inline);gap:var(--md-sys-layout-space-12);border-block-start:var(--_divider-thickness) solid var(--_divider-color);padding-block-start:var(--md-sys-layout-space-12);display:flex}._actions_x6kag_95[data-alignment=start]{justify-content:end}._actions_x6kag_95[data-alignment=end]{justify-content:start}}
|
package/dist/assets/core5.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{.
|
|
1
|
+
@layer adgytec.comps{._unset_1o31m_8{all:unset}._colors_1o31m_12{--disabled-color:rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-disabled-content));--outline-color-normal:var(--md-sys-color-outline);--outline-color-invalid:var(--md-sys-color-error);--outline-width:calc(1 * var(--dp,1px));--outline-width-focused:calc(2 * var(--dp,1px));--outline-color-hovered-normal:var(--md-sys-color-on-surface);--outline-color-hovered-invalid:var(--md-sys-color-on-error-container);--outline-color-focused-normal:var(--md-textfield-focused-outline-color,var(--md-sys-color-primary));--outline-color-focused-invalid:var(--md-sys-color-error);--group-color-normal:var(--md-sys-color-on-surface-variant);--group-color-invalid:var(--md-sys-color-error);--editor-infix-text-color-normal:var(--md-sys-color-on-surface-variant);--editor-color-normal:var(--md-sys-color-on-surface);--caret-color-normal:var(--md-sys-color-primary);--caret-color-invalid:var(--md-sys-color-error);--group-color:var(--group-color-normal);--editor-infix-color:var(--editor-infix-text-color-normal);--editor-color:var(--editor-color-normal);--caret-color:var(--caret-color-normal);--outline-color:var(--outline-color-normal);--outline-color-focused:transparent;--placeholder-color:var(--group-color-normal)}._colors_1o31m_12[data-invalid]{--group-color:var(--group-color-invalid);--caret-color:var(--caret-color-invalid);--outline-color:var(--outline-color-invalid)}._colors_1o31m_12[data-disabled]{--group-color:var(--disabled-color);--editor-infix-color:var(--disabled-color);--editor-color:var(--disabled-color);--caret-color:var(--disabled-color);--outline-color:var(--disabled-color);--placeholder-color:var(--disabled-color)}._group_1o31m_80{--label-padding-inline-start:var(--md-sys-layout-space-16);--label-padding-inline-end:var(--md-sys-layout-space-16);gap:var(--md-sys-layout-space-4);color:var(--group-color);caret-color:var(--caret-color);display:inline-grid}._group_1o31m_80>[slot=label]{padding-inline-start:var(--label-padding-inline-start);padding-inline-end:var(--label-padding-inline-end)}._group_1o31m_80[data-leading]{--label-padding-inline-start:var(--md-sys-layout-space-12)}._group_1o31m_80[data-trailing]{--label-padding-inline-end:var(--md-sys-layout-space-12)}._date-segment_1o31m_104{border-radius:var(--md-sys-shape-corner-radius-extra-small)}._date-segment_1o31m_104[data-focused],._date-segment_1o31m_104[data-focus-visible]{outline:calc(2 * var(--dp,1px)) solid var(--outline-color);outline-offset:calc(-4 * var(--dp,1px))}._date-segment_1o31m_104:not([data-type=literal]){padding:var(--md-sys-layout-space-8)}._editor_1o31m_118{border-radius:var(--md-sys-shape-corner-radius-extra-small);border:var(--outline-width) solid var(--outline-color);outline:var(--outline-width-focused) solid var(--outline-color-focused);padding:var(--md-sys-layout-space-16);align-items:center;gap:var(--md-sys-layout-space-16);color:var(--editor-infix-color);scrollbar-width:none;transition:border-color var(--md-sys-motion-expressive-fast-effects) var(--md-sys-motion-expressive-fast-effects-duration), outline-color var(--md-sys-motion-expressive-fast-effects) var(--md-sys-motion-expressive-fast-effects-duration);display:inline-flex;overflow:auto}._editor_1o31m_118[data-input]{cursor:text}._editor_1o31m_118[data-trailing]{padding-inline-end:var(--md-sys-layout-space-12);padding-block:var(--md-sys-layout-space-8)}._editor_1o31m_118[data-leading]{padding-inline-start:var(--md-sys-layout-space-12)}._editor_1o31m_118[data-hovered]:not([data-disabled]){--outline-color:var(--outline-color-hovered-normal)}._editor_1o31m_118[data-hovered][data-invalid]:not([data-disabled]){--outline-color:var(--outline-color-hovered-invalid)}._editor_1o31m_118[data-focus-visible]:not([data-disabled]),._editor_1o31m_118[data-focus-within]:not([data-disabled]),._editor_1o31m_118[data-focused]:not([data-disabled]),._editor_1o31m_118[data-open]:not([data-disabled]){--outline-color:var(--outline-color-focused-normal);--outline-color-focused:var(--outline-color)}[data-invalid]:is(._editor_1o31m_118[data-focus-visible]:not([data-disabled]),._editor_1o31m_118[data-focus-within]:not([data-disabled]),._editor_1o31m_118[data-focused]:not([data-disabled]),._editor_1o31m_118[data-open]:not([data-disabled])){--outline-color:var(--outline-color-focused-invalid)}._editor_1o31m_118[data-disabled]{cursor:default}._editor_1o31m_118[data-date-input]{padding:var(--md-sys-layout-space-8);gap:0}._editor-input-group_1o31m_186{align-items:center;inline-size:100%;display:inline-flex}._editor-input_1o31m_186{color:var(--editor-color)}._editor-input_1o31m_186[data-input]{inline-size:100%}._editor-input_1o31m_186[data-textarea]{resize:vertical;min-block-size:calc(58 * var(--dp,1px));max-block-size:calc(300 * var(--dp,1px))}._editor-input_1o31m_186[data-textarea][data-disabled]{resize:none}._editor-input_1o31m_186[data-date-input]{inline-size:100%}._editor-input_1o31m_186::placeholder{color:var(--placeholder-color)}._supporting-text_1o31m_220{padding-inline:var(--md-sys-layout-space-16);justify-content:space-between;align-items:flex-start;gap:var(--md-sys-layout-space-16);transition:color var(--md-sys-motion-expressive-fast-effects) var(--md-sys-motion-expressive-fast-effects-duration);display:inline-flex}@media (prefers-reduced-motion){._supporting-text_1o31m_220{transition:none}}._supporting-text_1o31m_220[data-leading]{padding-inline-start:var(--md-sys-layout-space-12)}._supporting-text_1o31m_220[data-trailing]{padding-inline-end:var(--md-sys-layout-space-12)}._character-count_1o31m_244{margin-inline-start:auto}}
|
package/dist/chunks/AppBar
CHANGED
|
@@ -4,12 +4,12 @@ import i from "clsx";
|
|
|
4
4
|
import { useContext as a, useMemo as o } from "react";
|
|
5
5
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
6
6
|
import '../assets/AppBar.css';var l = {
|
|
7
|
-
"app-bar": "_app-
|
|
8
|
-
primary: "
|
|
9
|
-
"leading-action": "_leading-
|
|
10
|
-
headline: "
|
|
11
|
-
"trailing-actions": "_trailing-
|
|
12
|
-
secondary: "
|
|
7
|
+
"app-bar": "_app-bar_54m0f_10",
|
|
8
|
+
primary: "_primary_54m0f_55",
|
|
9
|
+
"leading-action": "_leading-action_54m0f_66",
|
|
10
|
+
headline: "_headline_54m0f_75",
|
|
11
|
+
"trailing-actions": "_trailing-actions_54m0f_84",
|
|
12
|
+
secondary: "_secondary_54m0f_97"
|
|
13
13
|
}, u = ({ className: u, size: d = "small", alignment: f = "default", leadingAction: p, trailingActions: m, headline: h, ...g }) => {
|
|
14
14
|
let _ = a(e), v = d !== "small", y = m && m.length > 0;
|
|
15
15
|
return /* @__PURE__ */ s(t, {
|
|
@@ -41,6 +41,7 @@ import '../assets/AppBar.css';var l = {
|
|
|
41
41
|
!v && h && /* @__PURE__ */ s("div", {
|
|
42
42
|
"data-alignment": f,
|
|
43
43
|
className: i(l.headline),
|
|
44
|
+
"data-initial-padding": !p || void 0,
|
|
44
45
|
children: h
|
|
45
46
|
}),
|
|
46
47
|
y && /* @__PURE__ */ s("div", {
|
package/dist/chunks/AppBar.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppBar","names":[],"sources":["../../src/components/AppBar/AppBar/appBar.module.css","../../src/components/AppBar/AppBar/AppBar.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-app-bar-background\n* --md-app-bar-on-scroll-background\n* --md-app-bar-title-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .app-bar {\n --_md-app-bar-background: var(\n --md-app-bar-background,\n var(--md-sys-color-surface)\n );\n --_md-app-bar-on-scroll-background: var(\n --md-app-bar-on-scroll-background,\n var(--md-sys-color-surface-container)\n );\n --_md-app-bar-title-color: var(\n --md-app-bar-title-color,\n var(--md-sys-color-on-surface)\n );\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-28);\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--md-sys-layout-space-4);\n padding-block: var(--md-sys-layout-space-
|
|
1
|
+
{"version":3,"file":"AppBar","names":[],"sources":["../../src/components/AppBar/AppBar/appBar.module.css","../../src/components/AppBar/AppBar/AppBar.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-app-bar-background\n* --md-app-bar-on-scroll-background\n* --md-app-bar-title-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .app-bar {\n --_md-app-bar-background: var(\n --md-app-bar-background,\n var(--md-sys-color-surface)\n );\n --_md-app-bar-on-scroll-background: var(\n --md-app-bar-on-scroll-background,\n var(--md-sys-color-surface-container)\n );\n --_md-app-bar-title-color: var(\n --md-app-bar-title-color,\n var(--md-sys-color-on-surface)\n );\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-28);\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--md-sys-layout-space-4);\n padding-block: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-app-bar-background);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-size=\"medium\"] {\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-36);\n }\n\n &[data-size=\"large\"] {\n --_md-app-bar-headline-block-size: calc(44 * var(--dp, 1px));\n }\n\n &[data-scroll] {\n background-color: var(--_md-app-bar-on-scroll-background);\n box-shadow: var(--md-sys-elevation-shadow-2);\n }\n }\n\n .primary {\n display: flex;\n gap: var(--md-sys-layout-space-4);\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n }\n }\n\n .leading-action {\n --md-button-color: var(--_md-app-bar-title-color);\n\n &[data-alignment=\"centered\"] {\n grid-column: 1;\n justify-self: start;\n }\n }\n\n .headline[data-initial-padding] {\n padding-inline-start: var(--md-sys-layout-space-12);\n }\n\n .headline[data-alignment=\"centered\"] {\n grid-column: 2;\n justify-self: center;\n }\n\n .trailing-actions {\n margin-inline-start: auto;\n\n display: flex;\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n grid-column: 3;\n justify-self: end;\n margin-inline-start: 0;\n }\n }\n\n .secondary {\n padding-inline: var(--md-sys-layout-space-12);\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { AppBarStateContext } from \"../AppBarState\";\nimport {\n AppBarContext,\n AppBarHeadlineBlockSize,\n AppBarHeadlineTypography,\n} from \"../core\";\nimport styles from \"./appBar.module.css\";\nimport type { AppBarProps } from \"./types\";\n\nexport const AppBar: React.FC<AppBarProps> = ({\n className,\n size = \"small\",\n alignment = \"default\",\n leadingAction,\n trailingActions,\n headline,\n ...props\n}) => {\n const appBarState = useContext(AppBarStateContext);\n const hasSecondary = size !== \"small\";\n const hasTrailingActions = trailingActions && trailingActions.length > 0;\n\n const contextValue = useMemo(\n () => ({\n size,\n alignment,\n headlineBlockSize: AppBarHeadlineBlockSize[size],\n headlineTypography: AppBarHeadlineTypography[size],\n }),\n [size, alignment]\n );\n\n return (\n <AppBarContext value={contextValue}>\n <header\n className={clsx(styles[\"app-bar\"], className)}\n {...props}\n data-size={size}\n data-alignment={alignment}\n data-has-secondary={(hasSecondary && !!headline) || undefined}\n data-scroll={appBarState?.isScrolling || undefined}\n >\n <div\n data-primary\n className={clsx(styles[\"primary\"])}\n data-alignment={alignment}\n data-size={size}\n >\n {leadingAction && (\n <div\n data-alignment={alignment}\n data-primary-leading\n className={clsx(styles[\"leading-action\"])}\n >\n {leadingAction}\n </div>\n )}\n\n {!hasSecondary && headline && (\n <div\n data-alignment={alignment}\n className={clsx(styles[\"headline\"])}\n data-initial-padding={!leadingAction || undefined}\n >\n {headline}\n </div>\n )}\n\n {hasTrailingActions && (\n <div\n data-alignment={alignment}\n data-primary-trailing\n className={clsx(styles[\"trailing-actions\"])}\n >\n {trailingActions}\n </div>\n )}\n </div>\n\n {hasSecondary && headline && (\n <div\n data-secondary\n data-alignment={alignment}\n className={clsx(styles[\"secondary\"])}\n >\n {headline}\n </div>\n )}\n </header>\n </AppBarContext>\n );\n};\n"],"mappings":";;;;;;;;;;;;GCWa,KAAiC,EAC1C,cACA,UAAO,SACP,eAAY,WACZ,kBACA,oBACA,aACA,GAAG,QACD;CACF,IAAM,IAAc,EAAW,CAAkB,GAC3C,IAAe,MAAS,SACxB,IAAqB,KAAmB,EAAgB,SAAS;CAYvE,OACI,kBAAC,GAAD;EAAe,OAXE,SACV;GACH;GACA;GACA,mBAAmB,EAAwB;GAC3C,oBAAoB,EAAyB;EACjD,IACA,CAAC,GAAM,CAAS,CAIM;YAClB,kBAAC,UAAD;GACI,WAAW,EAAK,EAAO,YAAY,CAAS;GAC5C,GAAI;GACJ,aAAW;GACX,kBAAgB;GAChB,sBAAqB,KAAgB,CAAC,CAAC,KAAa,KAAA;GACpD,eAAa,GAAa,eAAe,KAAA;aAN7C,CAQI,kBAAC,OAAD;IACI,gBAAA;IACA,WAAW,EAAK,EAAO,OAAU;IACjC,kBAAgB;IAChB,aAAW;cAJf;KAMK,KACG,kBAAC,OAAD;MACI,kBAAgB;MAChB,wBAAA;MACA,WAAW,EAAK,EAAO,iBAAiB;gBAEvC;KACA,CAAA;KAGR,CAAC,KAAgB,KACd,kBAAC,OAAD;MACI,kBAAgB;MAChB,WAAW,EAAK,EAAO,QAAW;MAClC,wBAAsB,CAAC,KAAiB,KAAA;gBAEvC;KACA,CAAA;KAGR,KACG,kBAAC,OAAD;MACI,kBAAgB;MAChB,yBAAA;MACA,WAAW,EAAK,EAAO,mBAAmB;gBAEzC;KACA,CAAA;IAER;OAEJ,KAAgB,KACb,kBAAC,OAAD;IACI,kBAAA;IACA,kBAAgB;IAChB,WAAW,EAAK,EAAO,SAAY;cAElC;GACA,CAAA,CAEL;;CACG,CAAA;AAEvB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { IconButton as e } from "../components/Button/IconButton/index.js";
|
|
2
|
+
import t from "clsx";
|
|
3
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
4
|
+
import '../assets/AppBarAction.css';var r = { action: "_action_106b8_2" }, i = ({ color: i = "standard", className: a, ...o }) => /* @__PURE__ */ n(e, {
|
|
5
|
+
className: (e) => t(r.action, typeof a == "function" ? a(e) : a),
|
|
6
|
+
...o,
|
|
7
|
+
color: i,
|
|
8
|
+
size: "small"
|
|
9
|
+
});
|
|
10
|
+
//#endregion
|
|
11
|
+
export { i as t };
|
|
12
|
+
|
|
13
|
+
//# sourceMappingURL=AppBarAction.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AppBarAction","names":[],"sources":["../../src/components/AppBar/AppBarAction/appBarAction.module.css","../../src/components/AppBar/AppBarAction/AppBarAction.tsx"],"sourcesContent":["@layer adgytec.comps {\n .action {\n inline-size: var(--md-sys-layout-space-48);\n block-size: var(--md-sys-layout-space-48);\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n","import clsx from \"clsx\";\nimport { IconButton, type IconButtonProps } from \"@/components/Button\";\nimport styles from \"./appBarAction.module.css\";\n\nexport const AppBarAction: React.FC<Omit<IconButtonProps, \"size\">> = ({\n color = \"standard\",\n className,\n ...props\n}) => {\n return (\n <IconButton\n className={(renderProps) =>\n clsx(\n styles[\"action\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n color={color}\n size=\"small\"\n />\n );\n};\n"],"mappings":";;;uCCIa,KAAyD,EAClE,WAAQ,YACR,cACA,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,QACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACG;CACP,MAAK;AACR,CAAA"}
|
package/dist/chunks/AppBarAvatar
CHANGED
|
@@ -5,7 +5,7 @@ import { f as i, l as a, u as o } from "./core";
|
|
|
5
5
|
import s from "clsx";
|
|
6
6
|
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
7
7
|
import { Button as u } from "react-aria-components";
|
|
8
|
-
import '../assets/AppBarAvatar.css';var d = { avatar: "
|
|
8
|
+
import '../assets/AppBarAvatar.css';var d = { avatar: "_avatar_xrsa2_2" }, f = ({ className: f, children: p, onPress: m, ...h }) => {
|
|
9
9
|
let { splashInfo: g, handlePress: _ } = r(m);
|
|
10
10
|
return /* @__PURE__ */ c(u, {
|
|
11
11
|
onPress: _,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppBarAvatar","names":[],"sources":["../../src/components/AppBar/AppBarAvatar/appBarAvatar.module.css","../../src/components/AppBar/AppBarAvatar/AppBarAvatar.tsx"],"sourcesContent":["@layer adgytec.comps {\n .avatar {\n --_md-app-bar-avatar-size: var(--md-sys-layout-space-32);\n\n & > [data-visual-button] {\n display: flex;\n align-items: center;\n justify-content: center;\n\n inline-size: var(--_md-app-bar-avatar-size);\n max-inline-size: var(--_md-app-bar-avatar-size);\n\n block-size: var(--_md-app-bar-avatar-size);\n max-block-size: var(--_md-app-bar-avatar-size);\n\n border-radius: 50%;\n overflow: clip;\n position: relative;\n\n text-align: center;\n\n & img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Button } from \"react-aria-components\";\nimport {\n ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n} from \"@/components/Button\";\nimport { Splash, useSplash } from \"@/components/Splash\";\nimport { TapTarget, typography } from \"@/utils\";\nimport styles from \"./appBarAvatar.module.css\";\n\nexport const AppBarAvatar: React.FC<\n React.ComponentPropsWithRef<typeof Button>\n> = ({ className, children, onPress, ...props }) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <Button\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n styles[\"avatar\"],\n typography.labelLarge,\n TapTarget,\n buttonColorConfig(\"filled\"),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-button\n >\n {(renderProps) => {\n const {\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\n } = renderProps;\n\n const dataAttrs = {\n \"data-hovered\": isHovered || undefined,\n \"data-disabled\": isDisabled || undefined,\n \"data-focused\": isFocused || undefined,\n \"data-focus-visible\": isFocusVisible || undefined,\n \"data-pressed\": isPressed || undefined,\n \"data-visual-button\": true,\n };\n\n return (\n <span className={clsx(buttonColorBase)} {...dataAttrs}>\n {splashInfo && <Splash {...splashInfo} />}\n\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n </span>\n );\n }}\n </Button>\n );\n};\n"],"mappings":";;;;;;;uCCWa,KAER,EAAE,cAAW,aAAU,YAAS,GAAG,QAAY;CAChD,IAAM,EAAE,eAAY,mBAAgB,EAAU,CAAO;CAErD,OACI,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,GACA,EAAO,QACP,EAAW,YACX,GACA,EAAkB,QAAQ,GAC1B,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,eAAA;aAEE,MAAgB;GACd,IAAM,EACF,eACA,mBACA,cACA,cACA,iBACA,GAEE,IAAY;IACd,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB;GAC1B;GAEA,OACI,kBAAC,QAAD;IAAM,WAAW,EAAK,CAAe;IAAG,GAAI;cAA5C,CACK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA,GAEvC,OAAO,KAAa,aACf,EAAS,CAAW,IACpB,CACJ;;EAEd;CACI,CAAA;AAEhB"}
|
|
1
|
+
{"version":3,"file":"AppBarAvatar","names":[],"sources":["../../src/components/AppBar/AppBarAvatar/appBarAvatar.module.css","../../src/components/AppBar/AppBarAvatar/AppBarAvatar.tsx"],"sourcesContent":["@layer adgytec.comps {\n .avatar {\n --_md-app-bar-avatar-size: var(--md-sys-layout-space-32);\n\n inline-size: var(--md-sys-layout-space-48);\n block-size: var(--md-sys-layout-space-48);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > [data-visual-button] {\n display: flex;\n align-items: center;\n justify-content: center;\n\n inline-size: var(--_md-app-bar-avatar-size);\n max-inline-size: var(--_md-app-bar-avatar-size);\n\n block-size: var(--_md-app-bar-avatar-size);\n max-block-size: var(--_md-app-bar-avatar-size);\n\n border-radius: 50%;\n overflow: clip;\n position: relative;\n\n text-align: center;\n\n & img {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Button } from \"react-aria-components\";\nimport {\n ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n} from \"@/components/Button\";\nimport { Splash, useSplash } from \"@/components/Splash\";\nimport { TapTarget, typography } from \"@/utils\";\nimport styles from \"./appBarAvatar.module.css\";\n\nexport const AppBarAvatar: React.FC<\n React.ComponentPropsWithRef<typeof Button>\n> = ({ className, children, onPress, ...props }) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <Button\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n styles[\"avatar\"],\n typography.labelLarge,\n TapTarget,\n buttonColorConfig(\"filled\"),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-button\n >\n {(renderProps) => {\n const {\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\n } = renderProps;\n\n const dataAttrs = {\n \"data-hovered\": isHovered || undefined,\n \"data-disabled\": isDisabled || undefined,\n \"data-focused\": isFocused || undefined,\n \"data-focus-visible\": isFocusVisible || undefined,\n \"data-pressed\": isPressed || undefined,\n \"data-visual-button\": true,\n };\n\n return (\n <span className={clsx(buttonColorBase)} {...dataAttrs}>\n {splashInfo && <Splash {...splashInfo} />}\n\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n </span>\n );\n }}\n </Button>\n );\n};\n"],"mappings":";;;;;;;uCCWa,KAER,EAAE,cAAW,aAAU,YAAS,GAAG,QAAY;CAChD,IAAM,EAAE,eAAY,mBAAgB,EAAU,CAAO;CAErD,OACI,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,GACA,EAAO,QACP,EAAW,YACX,GACA,EAAkB,QAAQ,GAC1B,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,eAAA;aAEE,MAAgB;GACd,IAAM,EACF,eACA,mBACA,cACA,cACA,iBACA,GAEE,IAAY;IACd,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB;GAC1B;GAEA,OACI,kBAAC,QAAD;IAAM,WAAW,EAAK,CAAe;IAAG,GAAI;cAA5C,CACK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA,GAEvC,OAAO,KAAa,aACf,EAAS,CAAW,IACpB,CACJ;;EAEd;CACI,CAAA;AAEhB"}
|
package/dist/chunks/SideSheet
CHANGED
|
@@ -8,13 +8,13 @@ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
|
8
8
|
import { Dialog as l, Header as u, Heading as d } from "react-aria-components";
|
|
9
9
|
import { X as f } from "lucide-react";
|
|
10
10
|
import '../assets/SideSheet.css';var p = {
|
|
11
|
-
"side-sheet-dialog": "_side-sheet-
|
|
12
|
-
"side-sheet": "_side-
|
|
13
|
-
header: "
|
|
14
|
-
close: "
|
|
15
|
-
headline: "
|
|
16
|
-
main: "
|
|
17
|
-
actions: "
|
|
11
|
+
"side-sheet-dialog": "_side-sheet-dialog_x6kag_10",
|
|
12
|
+
"side-sheet": "_side-sheet_x6kag_10",
|
|
13
|
+
header: "_header_x6kag_70",
|
|
14
|
+
close: "_close_x6kag_80",
|
|
15
|
+
headline: "_headline_x6kag_84",
|
|
16
|
+
main: "_main_x6kag_88",
|
|
17
|
+
actions: "_actions_x6kag_95"
|
|
18
18
|
}, m = ({ className: e, ...t }) => {
|
|
19
19
|
let { layout: o, alignment: c } = a(r);
|
|
20
20
|
return /* @__PURE__ */ s(n, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideSheet","names":[],"sources":["../../src/components/Sheets/SideSheet/sideSheet.module.css","../../src/components/Sheets/SideSheet/SideSheetDialog.tsx","../../src/components/Sheets/SideSheet/SideSheet.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-side-sheet-background\n* --md-side-sheet-color\n* --md-side-sheet-headline-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .side-sheet-dialog {\n --_md-side-sheet-background: var(\n --md-side-sheet-background,\n var(--md-sys-color-surface-container-low)\n );\n --_md-side-sheet-color: var(\n --md-side-sheet-color,\n var(--md-sys-color-on-surface)\n );\n --_md-side-sheet-headline-color: var(\n --md-side-sheet-headline-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-side-sheet-padding-inline: var(--md-sys-layout-space-16);\n --_max-inline-size: calc(400 * var(--dp, 1px));\n\n inline-size: min(100svi, var(--_max-inline-size));\n block-size:
|
|
1
|
+
{"version":3,"file":"SideSheet","names":[],"sources":["../../src/components/Sheets/SideSheet/sideSheet.module.css","../../src/components/Sheets/SideSheet/SideSheetDialog.tsx","../../src/components/Sheets/SideSheet/SideSheet.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-side-sheet-background\n* --md-side-sheet-color\n* --md-side-sheet-headline-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .side-sheet-dialog {\n --_md-side-sheet-background: var(\n --md-side-sheet-background,\n var(--md-sys-color-surface-container-low)\n );\n --_md-side-sheet-color: var(\n --md-side-sheet-color,\n var(--md-sys-color-on-surface)\n );\n --_md-side-sheet-headline-color: var(\n --md-side-sheet-headline-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-side-sheet-padding-inline: var(--md-sys-layout-space-16);\n --_max-inline-size: calc(400 * var(--dp, 1px));\n\n inline-size: min(100svi, var(--_max-inline-size));\n block-size: 100dvb;\n\n display: grid;\n grid-template-rows: 1fr;\n\n background-color: var(--_md-side-sheet-background);\n color: var(--_md-side-sheet-color);\n\n box-shadow: var(--md-sys-elevation-shadow-1);\n border-radius: var(--md-sys-shape-corner-radius-large);\n\n outline: none;\n\n &[data-layout=\"detached\"] {\n block-size: calc(100dvb - calc(2 * var(--_detached-margin)));\n inline-size: min(\n calc(100svi - calc(2 * var(--_detached-margin))),\n var(--_max-inline-size)\n );\n }\n\n &[data-layout=\"standard\"] {\n &[data-alignment=\"start\"] {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n &[data-alignment=\"end\"] {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n }\n }\n\n .side-sheet {\n grid-template-rows: auto 1fr;\n padding-block: var(--md-sys-layout-space-16);\n\n &[data-actions] {\n grid-template-rows: auto 1fr auto;\n }\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--_md-side-sheet-padding-inline);\n padding-block-end: var(--md-sys-layout-space-12);\n }\n\n .close {\n margin-inline-start: auto;\n }\n\n .headline {\n color: var(--_md-side-sheet-headline-color);\n }\n\n .main {\n padding-inline: var(--_md-side-sheet-padding-inline);\n overflow-y: auto;\n\n padding-block: var(--md-sys-layout-space-12);\n }\n\n .actions {\n --_divider-thickness: calc(1 * var(--dp, 1px));\n --_divider-color: rgb(\n from var(--md-sys-color-outline) r g b /\n var(--md-sys-state-divider)\n );\n\n padding-inline: var(--_md-side-sheet-padding-inline);\n padding-block-start: var(--md-sys-layout-space-12);\n display: flex;\n gap: var(--md-sys-layout-space-12);\n\n border-block-start: var(--_divider-thickness) solid\n var(--_divider-color);\n\n /* biome-ignore lint: different elements */\n &[data-alignment=\"start\"] {\n justify-content: end;\n }\n\n /* biome-ignore lint: different elements */\n &[data-alignment=\"end\"] {\n justify-content: start;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport { Dialog } from \"react-aria-components\";\nimport { DialogContext } from \"@/components/Dialog\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetDialogProps } from \"./types\";\n\nexport const SideSheetDialog: React.FC<SideSheetDialogProps> = ({\n className,\n ...props\n}) => {\n const { layout, alignment } = useContext(SideSheetContext);\n\n return (\n <DialogContext value={true}>\n <Dialog\n className={clsx(styles[\"side-sheet-dialog\"], className)}\n data-alignment={alignment}\n data-layout={layout}\n {...props}\n />\n </DialogContext>\n );\n};\n","import clsx from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useContext } from \"react\";\nimport { Header, Heading } from \"react-aria-components\";\nimport { IconButton } from \"@/components/Button\";\nimport { typography } from \"@/utils\";\nimport { SideSheetContext } from \"../SideSheetModal\";\nimport { SideSheetDialog } from \"./SideSheetDialog\";\nimport styles from \"./sideSheet.module.css\";\nimport type { SideSheetProps } from \"./types\";\n\nexport const SideSheet: React.FC<SideSheetProps> = ({\n headline,\n actions,\n className,\n children,\n ...props\n}) => {\n const { alignment } = useContext(SideSheetContext);\n const hasActions = Array.isArray(actions) ? actions.length > 0 : !!actions;\n\n return (\n <SideSheetDialog\n className={clsx(styles[\"side-sheet\"], className)}\n {...props}\n data-actions={hasActions || undefined}\n >\n {(renderProps) => (\n <>\n <Header\n className={clsx(styles[\"header\"])}\n data-headline={!!headline || undefined}\n >\n {headline && (\n <Heading\n slot=\"title\"\n className={clsx(\n styles[\"headline\"],\n typography.titleLarge\n )}\n >\n {headline}\n </Heading>\n )}\n\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n className={clsx(styles[\"close\"])}\n />\n </Header>\n\n <div className={clsx(styles[\"main\"])}>\n {typeof children === \"function\"\n ? children(renderProps)\n : children}\n </div>\n\n {hasActions && (\n <div\n className={clsx(styles[\"actions\"])}\n data-alignment={alignment}\n >\n {typeof actions === \"function\"\n ? actions(renderProps)\n : actions}\n </div>\n )}\n </>\n )}\n </SideSheetDialog>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;GCQa,KAAmD,EAC5D,cACA,GAAG,QACD;CACF,IAAM,EAAE,WAAQ,iBAAc,EAAW,CAAgB;CAEzD,OACI,kBAAC,GAAD;EAAe,OAAO;YAClB,kBAAC,GAAD;GACI,WAAW,EAAK,EAAO,sBAAsB,CAAS;GACtD,kBAAgB;GAChB,eAAa;GACb,GAAI;EACP,CAAA;CACU,CAAA;AAEvB,GCba,KAAuC,EAChD,aACA,YACA,cACA,aACA,GAAG,QACD;CACF,IAAM,EAAE,iBAAc,EAAW,CAAgB,GAC3C,IAAa,MAAM,QAAQ,CAAO,IAAI,EAAQ,SAAS,IAAI,CAAC,CAAC;CAEnE,OACI,kBAAC,GAAD;EACI,WAAW,EAAK,EAAO,eAAe,CAAS;EAC/C,GAAI;EACJ,gBAAc,KAAc,KAAA;aAE1B,MACE,kBAAA,GAAA,EAAA,UAAA;GACI,kBAAC,GAAD;IACI,WAAW,EAAK,EAAO,MAAS;IAChC,iBAAe,CAAC,CAAC,KAAY,KAAA;cAFjC,CAIK,KACG,kBAAC,GAAD;KACI,MAAK;KACL,WAAW,EACP,EAAO,UACP,EAAW,UACf;eAEC;IACI,CAAA,GAGb,kBAAC,GAAD;KACI,MAAK;KACL,MAAM;KACN,OAAM;KACN,WAAW,EAAK,EAAO,KAAQ;IAClC,CAAA,CACG;;GAER,kBAAC,OAAD;IAAK,WAAW,EAAK,EAAO,IAAO;cAC9B,OAAO,KAAa,aACf,EAAS,CAAW,IACpB;GACL,CAAA;GAEJ,KACG,kBAAC,OAAD;IACI,WAAW,EAAK,EAAO,OAAU;IACjC,kBAAgB;cAEf,OAAO,KAAY,aACd,EAAQ,CAAW,IACnB;GACL,CAAA;EAEX,EAAA,CAAA;CAEO,CAAA;AAEzB"}
|
package/dist/chunks/core4
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import '../assets/core5.css';var e = {
|
|
2
|
-
unset: "
|
|
3
|
-
colors: "
|
|
4
|
-
group: "
|
|
5
|
-
"date-segment": "_date-
|
|
6
|
-
editor: "
|
|
7
|
-
"editor-input-group": "_editor-input-
|
|
8
|
-
"editor-input": "_editor-
|
|
9
|
-
"supporting-text": "_supporting-
|
|
10
|
-
"character-count": "_character-
|
|
2
|
+
unset: "_unset_1o31m_8",
|
|
3
|
+
colors: "_colors_1o31m_12",
|
|
4
|
+
group: "_group_1o31m_80",
|
|
5
|
+
"date-segment": "_date-segment_1o31m_104",
|
|
6
|
+
editor: "_editor_1o31m_118",
|
|
7
|
+
"editor-input-group": "_editor-input-group_1o31m_186",
|
|
8
|
+
"editor-input": "_editor-input_1o31m_186",
|
|
9
|
+
"supporting-text": "_supporting-text_1o31m_220",
|
|
10
|
+
"character-count": "_character-count_1o31m_244"
|
|
11
11
|
}, t = 24, n = e.unset, r = e.colors, i = e.group, a = e.editor, o = e["editor-input-group"], s = e["editor-input"], c = e["supporting-text"], l = e["character-count"], u = e["date-input"], d = e["date-segment"];
|
|
12
12
|
//#endregion
|
|
13
13
|
export { o as a, i as c, n as d, d as i, c as l, r as n, s as o, u as r, a as s, l as t, t as u };
|
package/dist/chunks/core4.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"core4","names":[],"sources":["../../src/components/Input/core/textField.module.css","../../src/components/Input/core/textField.ts"],"sourcesContent":["/* configurable tokens\n*\n* --md-textfield-focused-outline-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .unset {\n all: unset;\n }\n\n .colors {\n --disabled-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n /* outline color */\n --outline-color-normal: var(--md-sys-color-outline);\n --outline-color-invalid: var(--md-sys-color-error);\n\n --outline-width: calc(1 * var(--dp, 1px));\n --outline-width-focused: calc(2 * var(--dp, 1px));\n\n --outline-color-hovered-normal: var(--md-sys-color-on-surface);\n --outline-color-hovered-invalid: var(--md-sys-color-on-error-container);\n\n --outline-color-focused-normal: var(\n --md-textfield-focused-outline-color,\n var(--md-sys-color-primary)\n );\n --outline-color-focused-invalid: var(--md-sys-color-error);\n\n /* group color */\n --group-color-normal: var(--md-sys-color-on-surface-variant);\n --group-color-invalid: var(--md-sys-color-error);\n\n /* editor */\n --editor-infix-text-color-normal: var(\n --md-sys-color-on-surface-variant\n );\n --editor-color-normal: var(--md-sys-color-on-surface);\n\n /* caret color */\n --caret-color-normal: var(--md-sys-color-primary);\n --caret-color-invalid: var(--md-sys-color-error);\n\n /* variable to use */\n --group-color: var(--group-color-normal);\n\n --editor-infix-color: var(--editor-infix-text-color-normal);\n --editor-color: var(--editor-color-normal);\n\n --caret-color: var(--caret-color-normal);\n\n --outline-color: var(--outline-color-normal);\n --outline-color-focused: transparent;\n\n --placeholder-color: var(--group-color-normal);\n\n &[data-invalid] {\n --group-color: var(--group-color-invalid);\n --caret-color: var(--caret-color-invalid);\n --outline-color: var(--outline-color-invalid);\n }\n\n &[data-disabled] {\n --group-color: var(--disabled-color);\n\n --editor-infix-color: var(--disabled-color);\n --editor-color: var(--disabled-color);\n\n --caret-color: var(--disabled-color);\n\n --outline-color: var(--disabled-color);\n --placeholder-color: var(--disabled-color);\n }\n }\n\n .group {\n --label-padding-inline-start: var(--md-sys-layout-space-16);\n --label-padding-inline-end: var(--md-sys-layout-space-16);\n\n display: inline-grid;\n gap: var(--md-sys-layout-space-4);\n\n color: var(--group-color);\n caret-color: var(--caret-color);\n\n > [slot=\"label\"] {\n padding-inline-start: var(--label-padding-inline-start);\n padding-inline-end: var(--label-padding-inline-end);\n }\n\n &[data-leading] {\n --label-padding-inline-start: var(--md-sys-layout-space-12);\n }\n\n &[data-trailing] {\n --label-padding-inline-end: var(--md-sys-layout-space-12);\n }\n }\n\n .date-segment {\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n &[data-focused],\n &[data-focus-visible] {\n outline: calc(2 * var(--dp, 1px)) solid var(--outline-color);\n outline-offset: calc(-4 * var(--dp, 1px));\n }\n\n &:not([data-type=\"literal\"]) {\n padding: var(--md-sys-layout-space-8);\n }\n }\n\n .editor {\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n border: var(--outline-width) solid var(--outline-color);\n outline: var(--outline-width-focused) solid var(--outline-color-focused);\n\n padding: var(--md-sys-layout-space-16);\n\n display: inline-flex;\n align-items: center;\n gap: var(--md-sys-layout-space-16);\n\n color: var(--editor-infix-color);\n\n overflow: auto;\n scrollbar-width: none;\n\n transition:\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n outline-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n &[data-input] {\n cursor: text;\n }\n\n &[data-trailing] {\n padding-inline-end: var(--md-sys-layout-space-12);\n padding-block: var(--md-sys-layout-space-8);\n }\n\n &[data-leading] {\n padding-inline-start: var(--md-sys-layout-space-12);\n }\n\n &:not([data-disabled]) {\n &[data-hovered] {\n --outline-color: var(--outline-color-hovered-normal);\n\n &[data-invalid] {\n --outline-color: var(--outline-color-hovered-invalid);\n }\n }\n\n &[data-focus-visible],\n &[data-focus-within],\n &[data-focused],\n &[data-open] {\n --outline-color: var(--outline-color-focused-normal);\n --outline-color-focused: var(--outline-color);\n\n &[data-invalid] {\n --outline-color: var(--outline-color-focused-invalid);\n }\n }\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-date-input] {\n gap: 0;\n padding: var(--md-sys-layout-space-8);\n }\n }\n\n .editor-input-group {\n display: inline-flex;\n align-items: center;\n inline-size: 100%;\n }\n\n .editor-input {\n color: var(--editor-color);\n\n &[data-input] {\n inline-size: 100%;\n }\n\n &[data-textarea] {\n resize: vertical;\n\n /* 2dp for border thickness */\n min-block-size: calc(58 * var(--dp, 1px));\n max-block-size: calc(300 * var(--dp, 1px));\n\n &[data-disabled] {\n resize: none;\n }\n }\n\n &[data-date-input] {\n inline-size: 100%;\n }\n\n &::placeholder {\n color: var(--placeholder-color);\n }\n }\n\n .supporting-text {\n padding-inline: var(--md-sys-layout-space-16);\n\n display: inline-flex;\n align-items:
|
|
1
|
+
{"version":3,"file":"core4","names":[],"sources":["../../src/components/Input/core/textField.module.css","../../src/components/Input/core/textField.ts"],"sourcesContent":["/* configurable tokens\n*\n* --md-textfield-focused-outline-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .unset {\n all: unset;\n }\n\n .colors {\n --disabled-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n /* outline color */\n --outline-color-normal: var(--md-sys-color-outline);\n --outline-color-invalid: var(--md-sys-color-error);\n\n --outline-width: calc(1 * var(--dp, 1px));\n --outline-width-focused: calc(2 * var(--dp, 1px));\n\n --outline-color-hovered-normal: var(--md-sys-color-on-surface);\n --outline-color-hovered-invalid: var(--md-sys-color-on-error-container);\n\n --outline-color-focused-normal: var(\n --md-textfield-focused-outline-color,\n var(--md-sys-color-primary)\n );\n --outline-color-focused-invalid: var(--md-sys-color-error);\n\n /* group color */\n --group-color-normal: var(--md-sys-color-on-surface-variant);\n --group-color-invalid: var(--md-sys-color-error);\n\n /* editor */\n --editor-infix-text-color-normal: var(\n --md-sys-color-on-surface-variant\n );\n --editor-color-normal: var(--md-sys-color-on-surface);\n\n /* caret color */\n --caret-color-normal: var(--md-sys-color-primary);\n --caret-color-invalid: var(--md-sys-color-error);\n\n /* variable to use */\n --group-color: var(--group-color-normal);\n\n --editor-infix-color: var(--editor-infix-text-color-normal);\n --editor-color: var(--editor-color-normal);\n\n --caret-color: var(--caret-color-normal);\n\n --outline-color: var(--outline-color-normal);\n --outline-color-focused: transparent;\n\n --placeholder-color: var(--group-color-normal);\n\n &[data-invalid] {\n --group-color: var(--group-color-invalid);\n --caret-color: var(--caret-color-invalid);\n --outline-color: var(--outline-color-invalid);\n }\n\n &[data-disabled] {\n --group-color: var(--disabled-color);\n\n --editor-infix-color: var(--disabled-color);\n --editor-color: var(--disabled-color);\n\n --caret-color: var(--disabled-color);\n\n --outline-color: var(--disabled-color);\n --placeholder-color: var(--disabled-color);\n }\n }\n\n .group {\n --label-padding-inline-start: var(--md-sys-layout-space-16);\n --label-padding-inline-end: var(--md-sys-layout-space-16);\n\n display: inline-grid;\n gap: var(--md-sys-layout-space-4);\n\n color: var(--group-color);\n caret-color: var(--caret-color);\n\n > [slot=\"label\"] {\n padding-inline-start: var(--label-padding-inline-start);\n padding-inline-end: var(--label-padding-inline-end);\n }\n\n &[data-leading] {\n --label-padding-inline-start: var(--md-sys-layout-space-12);\n }\n\n &[data-trailing] {\n --label-padding-inline-end: var(--md-sys-layout-space-12);\n }\n }\n\n .date-segment {\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n &[data-focused],\n &[data-focus-visible] {\n outline: calc(2 * var(--dp, 1px)) solid var(--outline-color);\n outline-offset: calc(-4 * var(--dp, 1px));\n }\n\n &:not([data-type=\"literal\"]) {\n padding: var(--md-sys-layout-space-8);\n }\n }\n\n .editor {\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n border: var(--outline-width) solid var(--outline-color);\n outline: var(--outline-width-focused) solid var(--outline-color-focused);\n\n padding: var(--md-sys-layout-space-16);\n\n display: inline-flex;\n align-items: center;\n gap: var(--md-sys-layout-space-16);\n\n color: var(--editor-infix-color);\n\n overflow: auto;\n scrollbar-width: none;\n\n transition:\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n outline-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n &[data-input] {\n cursor: text;\n }\n\n &[data-trailing] {\n padding-inline-end: var(--md-sys-layout-space-12);\n padding-block: var(--md-sys-layout-space-8);\n }\n\n &[data-leading] {\n padding-inline-start: var(--md-sys-layout-space-12);\n }\n\n &:not([data-disabled]) {\n &[data-hovered] {\n --outline-color: var(--outline-color-hovered-normal);\n\n &[data-invalid] {\n --outline-color: var(--outline-color-hovered-invalid);\n }\n }\n\n &[data-focus-visible],\n &[data-focus-within],\n &[data-focused],\n &[data-open] {\n --outline-color: var(--outline-color-focused-normal);\n --outline-color-focused: var(--outline-color);\n\n &[data-invalid] {\n --outline-color: var(--outline-color-focused-invalid);\n }\n }\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-date-input] {\n gap: 0;\n padding: var(--md-sys-layout-space-8);\n }\n }\n\n .editor-input-group {\n display: inline-flex;\n align-items: center;\n inline-size: 100%;\n }\n\n .editor-input {\n color: var(--editor-color);\n\n &[data-input] {\n inline-size: 100%;\n }\n\n &[data-textarea] {\n resize: vertical;\n\n /* 2dp for border thickness */\n min-block-size: calc(58 * var(--dp, 1px));\n max-block-size: calc(300 * var(--dp, 1px));\n\n &[data-disabled] {\n resize: none;\n }\n }\n\n &[data-date-input] {\n inline-size: 100%;\n }\n\n &::placeholder {\n color: var(--placeholder-color);\n }\n }\n\n .supporting-text {\n padding-inline: var(--md-sys-layout-space-16);\n\n display: inline-flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-16);\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-leading] {\n padding-inline-start: var(--md-sys-layout-space-12);\n }\n\n &[data-trailing] {\n padding-inline-end: var(--md-sys-layout-space-12);\n }\n }\n\n .character-count {\n margin-inline-start: auto;\n }\n}\n","import styles from \"./textField.module.css\";\n\nexport const TextFieldIconSize = 24;\n\nexport const UnsetStyles = styles[\"unset\"];\n\nexport const Colors = styles[\"colors\"];\n\nexport const InputGroupStyles = styles[\"group\"];\nexport const EditorStyles = styles[\"editor\"];\nexport const EditorInputGroupStyles = styles[\"editor-input-group\"];\nexport const EditorInputStyles = styles[\"editor-input\"];\n\nexport const SupportingTextStyles = styles[\"supporting-text\"];\nexport const CharacterCountStyles = styles[\"character-count\"];\n\nexport const DateInputStyles = styles[\"date-input\"];\nexport const DateSegmentStyles = styles[\"date-segment\"];\n"],"mappings":";;;;;;;;;;GCEa,IAAoB,IAEpB,IAAc,EAAO,OAErB,IAAS,EAAO,QAEhB,IAAmB,EAAO,OAC1B,IAAe,EAAO,QACtB,IAAyB,EAAO,uBAChC,IAAoB,EAAO,iBAE3B,IAAuB,EAAO,oBAC9B,IAAuB,EAAO,oBAE9B,IAAkB,EAAO,eACzB,IAAoB,EAAO"}
|
|
@@ -1,12 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
//#region src/components/AppBar/AppBarAction/AppBarAction.tsx
|
|
4
|
-
var n = ({ color: n = "standard", ...r }) => /* @__PURE__ */ t(e, {
|
|
5
|
-
...r,
|
|
6
|
-
color: n,
|
|
7
|
-
size: "small"
|
|
8
|
-
});
|
|
9
|
-
//#endregion
|
|
10
|
-
export { n as AppBarAction };
|
|
11
|
-
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { t as e } from "../../../chunks/AppBarAction";
|
|
2
|
+
export { e as AppBarAction };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AppBarState as e, AppBarStateContext as t } from "./AppBarState/index.js";
|
|
2
2
|
import { AppBarContext as n, AppBarHeadlineBlockSize as r, AppBarHeadlineTypography as i, useAppBarContext as a } from "./core/index.js";
|
|
3
3
|
import { t as o } from "../../chunks/AppBar";
|
|
4
|
-
import {
|
|
4
|
+
import { t as s } from "../../chunks/AppBarAction";
|
|
5
5
|
import { t as c } from "../../chunks/AppBarAvatar";
|
|
6
6
|
import { t as l } from "../../chunks/AppBarHeadline";
|
|
7
7
|
export { o as AppBar, s as AppBarAction, c as AppBarAvatar, n as AppBarContext, l as AppBarHeadline, r as AppBarHeadlineBlockSize, i as AppBarHeadlineTypography, e as AppBarState, t as AppBarStateContext, a as useAppBarContext };
|
package/dist/index.js
CHANGED
|
@@ -29,7 +29,7 @@ import { SplitButtonPrimary as oe } from "./components/Button/SplitButton/SplitB
|
|
|
29
29
|
import { t as se } from "./chunks/SplitButtonTrigger";
|
|
30
30
|
import { ToggleButton as ce } from "./components/Button/ToggleButton/index.js";
|
|
31
31
|
import { ToggleIconButton as le } from "./components/Button/ToggleIconButton/index.js";
|
|
32
|
-
import {
|
|
32
|
+
import { t as ue } from "./chunks/AppBarAction";
|
|
33
33
|
import { t as de } from "./chunks/AppBarAvatar";
|
|
34
34
|
import { t as fe } from "./chunks/AppBarHeadline";
|
|
35
35
|
import "./components/AppBar/index.js";
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/AppBar/AppBarAction/AppBarAction.tsx"],"sourcesContent":["import { IconButton, type IconButtonProps } from \"@/components/Button\";\n\nexport const AppBarAction: React.FC<Omit<IconButtonProps, \"size\">> = ({\n color = \"standard\",\n ...props\n}) => {\n return <IconButton {...props} color={color} size=\"small\" />;\n};\n"],"mappings":";;;AAEA,IAAa,KAAyD,EAClE,WAAQ,YACR,GAAG,QAEI,kBAAC,GAAD;CAAY,GAAI;CAAc;CAAO,MAAK;AAAS,CAAA"}
|