app-studio 0.8.0 → 0.8.2
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 +76 -32
- package/dist/web/app-studio.umd.production.min.global.js +3 -3
- package/dist/web/app-studio.umd.production.min.global.js.map +1 -1
- package/dist/web/index.cjs +41 -5
- package/dist/web/index.cjs.map +1 -1
- package/dist/web/index.d.mts +28 -0
- package/dist/web/index.d.ts +28 -0
- package/dist/web/index.js +41 -5
- package/dist/web/index.js.map +1 -1
- package/docs/Animation.md +2 -0
- package/docs/Components.md +12 -0
- package/docs/Design.md +2 -0
- package/docs/Events.md +2 -0
- package/docs/Hooks.md +2 -0
- package/docs/IframeSupport.md +2 -0
- package/docs/Native.md +428 -0
- package/docs/Providers.md +2 -0
- package/docs/README.md +4 -1
- package/docs/Responsive.md +2 -0
- package/docs/Styling.md +2 -0
- package/docs/Theming.md +53 -0
- package/package.json +1 -1
package/dist/web/index.d.mts
CHANGED
|
@@ -114,6 +114,13 @@ interface CssProps extends CSSProperties {
|
|
|
114
114
|
_selection?: CSSProperties;
|
|
115
115
|
_backdrop?: CSSProperties;
|
|
116
116
|
_marker?: CSSProperties;
|
|
117
|
+
_webkitAutofill?: CSSProperties | string;
|
|
118
|
+
_webkitContactsAutoFillButton?: CSSProperties | string;
|
|
119
|
+
_webkitInnerSpinButton?: CSSProperties | string;
|
|
120
|
+
_webkitOuterSpinButton?: CSSProperties | string;
|
|
121
|
+
_webkitSearchCancelButton?: CSSProperties | string;
|
|
122
|
+
_mozPlaceholder?: CSSProperties | string;
|
|
123
|
+
_mozFocusInner?: CSSProperties | string;
|
|
117
124
|
WebkitUserDrag?: CSSProperties['userSelect'];
|
|
118
125
|
webkitUserDrag?: CSSProperties['userSelect'];
|
|
119
126
|
}
|
|
@@ -180,6 +187,13 @@ interface ElementProps extends CssProps, Omit<ViewStyleProps, keyof HTMLAttribut
|
|
|
180
187
|
_selection?: CssProps;
|
|
181
188
|
_backdrop?: CssProps;
|
|
182
189
|
_marker?: CssProps;
|
|
190
|
+
_webkitAutofill?: CssProps | string;
|
|
191
|
+
_webkitContactsAutoFillButton?: CssProps | string;
|
|
192
|
+
_webkitInnerSpinButton?: CssProps | string;
|
|
193
|
+
_webkitOuterSpinButton?: CssProps | string;
|
|
194
|
+
_webkitSearchCancelButton?: CssProps | string;
|
|
195
|
+
_mozPlaceholder?: CssProps | string;
|
|
196
|
+
_mozFocusInner?: CssProps | string;
|
|
183
197
|
}
|
|
184
198
|
|
|
185
199
|
declare const Element$1: react__default.MemoExoticComponent<react__default.ForwardRefExoticComponent<ElementProps & react__default.RefAttributes<HTMLElement>>>;
|
|
@@ -233,6 +247,20 @@ interface ButtonProps extends CommonProps, Omit<Partial<HTMLButtonElement>, keyo
|
|
|
233
247
|
onClick?: (..._args: any) => void;
|
|
234
248
|
}
|
|
235
249
|
interface InputProps extends ElementProps, CommonProps, Omit<Partial<HTMLInputElement>, keyof ElementProps> {
|
|
250
|
+
/**
|
|
251
|
+
* Visible label rendered alongside the input. Form-library wrappers (Switch,
|
|
252
|
+
* TextField, Checkbox, …) consume this. Not a native HTML attribute on
|
|
253
|
+
* <input>, but conventionally part of the form-control prop surface.
|
|
254
|
+
*/
|
|
255
|
+
label?: react__default.ReactNode;
|
|
256
|
+
/**
|
|
257
|
+
* Helper text rendered below the input (hint / error / explanation).
|
|
258
|
+
*/
|
|
259
|
+
helperText?: react__default.ReactNode;
|
|
260
|
+
/**
|
|
261
|
+
* Error state — usually a string for the error message, or a boolean toggle.
|
|
262
|
+
*/
|
|
263
|
+
error?: boolean | string;
|
|
236
264
|
}
|
|
237
265
|
declare const Form: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & FormProps & react__default.RefAttributes<HTMLElement>>;
|
|
238
266
|
declare const Input: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & InputProps & react__default.RefAttributes<HTMLElement>>;
|
package/dist/web/index.d.ts
CHANGED
|
@@ -114,6 +114,13 @@ interface CssProps extends CSSProperties {
|
|
|
114
114
|
_selection?: CSSProperties;
|
|
115
115
|
_backdrop?: CSSProperties;
|
|
116
116
|
_marker?: CSSProperties;
|
|
117
|
+
_webkitAutofill?: CSSProperties | string;
|
|
118
|
+
_webkitContactsAutoFillButton?: CSSProperties | string;
|
|
119
|
+
_webkitInnerSpinButton?: CSSProperties | string;
|
|
120
|
+
_webkitOuterSpinButton?: CSSProperties | string;
|
|
121
|
+
_webkitSearchCancelButton?: CSSProperties | string;
|
|
122
|
+
_mozPlaceholder?: CSSProperties | string;
|
|
123
|
+
_mozFocusInner?: CSSProperties | string;
|
|
117
124
|
WebkitUserDrag?: CSSProperties['userSelect'];
|
|
118
125
|
webkitUserDrag?: CSSProperties['userSelect'];
|
|
119
126
|
}
|
|
@@ -180,6 +187,13 @@ interface ElementProps extends CssProps, Omit<ViewStyleProps, keyof HTMLAttribut
|
|
|
180
187
|
_selection?: CssProps;
|
|
181
188
|
_backdrop?: CssProps;
|
|
182
189
|
_marker?: CssProps;
|
|
190
|
+
_webkitAutofill?: CssProps | string;
|
|
191
|
+
_webkitContactsAutoFillButton?: CssProps | string;
|
|
192
|
+
_webkitInnerSpinButton?: CssProps | string;
|
|
193
|
+
_webkitOuterSpinButton?: CssProps | string;
|
|
194
|
+
_webkitSearchCancelButton?: CssProps | string;
|
|
195
|
+
_mozPlaceholder?: CssProps | string;
|
|
196
|
+
_mozFocusInner?: CssProps | string;
|
|
183
197
|
}
|
|
184
198
|
|
|
185
199
|
declare const Element$1: react__default.MemoExoticComponent<react__default.ForwardRefExoticComponent<ElementProps & react__default.RefAttributes<HTMLElement>>>;
|
|
@@ -233,6 +247,20 @@ interface ButtonProps extends CommonProps, Omit<Partial<HTMLButtonElement>, keyo
|
|
|
233
247
|
onClick?: (..._args: any) => void;
|
|
234
248
|
}
|
|
235
249
|
interface InputProps extends ElementProps, CommonProps, Omit<Partial<HTMLInputElement>, keyof ElementProps> {
|
|
250
|
+
/**
|
|
251
|
+
* Visible label rendered alongside the input. Form-library wrappers (Switch,
|
|
252
|
+
* TextField, Checkbox, …) consume this. Not a native HTML attribute on
|
|
253
|
+
* <input>, but conventionally part of the form-control prop surface.
|
|
254
|
+
*/
|
|
255
|
+
label?: react__default.ReactNode;
|
|
256
|
+
/**
|
|
257
|
+
* Helper text rendered below the input (hint / error / explanation).
|
|
258
|
+
*/
|
|
259
|
+
helperText?: react__default.ReactNode;
|
|
260
|
+
/**
|
|
261
|
+
* Error state — usually a string for the error message, or a boolean toggle.
|
|
262
|
+
*/
|
|
263
|
+
error?: boolean | string;
|
|
236
264
|
}
|
|
237
265
|
declare const Form: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & FormProps & react__default.RefAttributes<HTMLElement>>;
|
|
238
266
|
declare const Input: react__default.ForwardRefExoticComponent<react__default.ComponentPropsWithRef<typeof Element$1> & InputProps & react__default.RefAttributes<HTMLElement>>;
|
package/dist/web/index.js
CHANGED
|
@@ -1727,7 +1727,15 @@ var excludedKeys = /* @__PURE__ */ new Set([
|
|
|
1727
1727
|
"_firstLine",
|
|
1728
1728
|
"_selection",
|
|
1729
1729
|
"_backdrop",
|
|
1730
|
-
"_marker"
|
|
1730
|
+
"_marker",
|
|
1731
|
+
// Browser-specific pseudo-classes for form-control polish
|
|
1732
|
+
"_webkitAutofill",
|
|
1733
|
+
"_webkitContactsAutoFillButton",
|
|
1734
|
+
"_webkitInnerSpinButton",
|
|
1735
|
+
"_webkitOuterSpinButton",
|
|
1736
|
+
"_webkitSearchCancelButton",
|
|
1737
|
+
"_mozPlaceholder",
|
|
1738
|
+
"_mozFocusInner"
|
|
1731
1739
|
// Add more styling props here if needed
|
|
1732
1740
|
]);
|
|
1733
1741
|
var extraKeys = /* @__PURE__ */ new Set([
|
|
@@ -2511,6 +2519,14 @@ var EVENT_TO_PSEUDO = {
|
|
|
2511
2519
|
selection: "selection",
|
|
2512
2520
|
backdrop: "backdrop",
|
|
2513
2521
|
marker: "marker",
|
|
2522
|
+
// Browser-specific pseudo-classes for form-control polish
|
|
2523
|
+
webkitAutofill: "-webkit-autofill",
|
|
2524
|
+
webkitContactsAutoFillButton: "-webkit-contacts-auto-fill-button",
|
|
2525
|
+
webkitInnerSpinButton: "-webkit-inner-spin-button",
|
|
2526
|
+
webkitOuterSpinButton: "-webkit-outer-spin-button",
|
|
2527
|
+
webkitSearchCancelButton: "-webkit-search-cancel-button",
|
|
2528
|
+
mozPlaceholder: "-moz-placeholder",
|
|
2529
|
+
mozFocusInner: "-moz-focus-inner",
|
|
2514
2530
|
// Group modifiers
|
|
2515
2531
|
groupHover: "group-hover",
|
|
2516
2532
|
groupFocus: "group-focus",
|
|
@@ -2523,6 +2539,25 @@ var EVENT_TO_PSEUDO = {
|
|
|
2523
2539
|
peerDisabled: "peer-disabled",
|
|
2524
2540
|
peerChecked: "peer-checked"
|
|
2525
2541
|
};
|
|
2542
|
+
var PSEUDO_ELEMENTS = /* @__PURE__ */ new Set([
|
|
2543
|
+
"before",
|
|
2544
|
+
"after",
|
|
2545
|
+
"first-letter",
|
|
2546
|
+
"first-line",
|
|
2547
|
+
"placeholder",
|
|
2548
|
+
"selection",
|
|
2549
|
+
"backdrop",
|
|
2550
|
+
"marker",
|
|
2551
|
+
"-moz-placeholder",
|
|
2552
|
+
"-moz-focus-inner",
|
|
2553
|
+
"-webkit-contacts-auto-fill-button",
|
|
2554
|
+
"-webkit-inner-spin-button",
|
|
2555
|
+
"-webkit-outer-spin-button",
|
|
2556
|
+
"-webkit-search-cancel-button"
|
|
2557
|
+
]);
|
|
2558
|
+
var isPseudoElement = (pseudo) => PSEUDO_ELEMENTS.has(pseudo);
|
|
2559
|
+
var pseudoPrefix = (pseudo) => isPseudoElement(pseudo) ? "::" : ":";
|
|
2560
|
+
var buildPseudoSelector = (chain) => chain.split("::").filter(Boolean).map((part) => `${pseudoPrefix(part)}${part}`).join("");
|
|
2526
2561
|
var AnimationUtils = {
|
|
2527
2562
|
parseDuration(duration) {
|
|
2528
2563
|
const match = duration.match(/^([\d.]+)(ms|s)$/);
|
|
@@ -2795,9 +2830,10 @@ var UtilityClassManager = class {
|
|
|
2795
2830
|
});
|
|
2796
2831
|
});
|
|
2797
2832
|
} else {
|
|
2833
|
+
const colon = pseudoPrefix(modifier);
|
|
2798
2834
|
cssProperties2.forEach((prefixedProperty) => {
|
|
2799
2835
|
rules.push({
|
|
2800
|
-
rule: `.${escapedClassName}
|
|
2836
|
+
rule: `.${escapedClassName}${colon}${modifier} { ${prefixedProperty}: ${valueForCss}; }`,
|
|
2801
2837
|
context: "pseudo"
|
|
2802
2838
|
});
|
|
2803
2839
|
});
|
|
@@ -3017,9 +3053,9 @@ function processPseudoStyles(styles, parentPseudo = "", getColor, manager) {
|
|
|
3017
3053
|
)}-${parentPseudo.replace(/:/g, "-")}`;
|
|
3018
3054
|
const escapedClassName = pseudoClassName.replace(/[^\w-]/g, "-");
|
|
3019
3055
|
const processedValue = ValueUtils.formatValue(value, key, getColor);
|
|
3020
|
-
const rule = `.${escapedClassName}
|
|
3021
|
-
|
|
3022
|
-
)}: ${processedValue}; }`;
|
|
3056
|
+
const rule = `.${escapedClassName}${buildPseudoSelector(
|
|
3057
|
+
parentPseudo
|
|
3058
|
+
)} { ${propertyToKebabCase(key)}: ${processedValue}; }`;
|
|
3023
3059
|
(manager || utilityClassManager).injectRule(rule, "pseudo");
|
|
3024
3060
|
classes.push(escapedClassName);
|
|
3025
3061
|
}
|