@once-ui-system/core 2.0.0-alpha.0 → 2.0.0-alpha.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/AGENTS.md +1 -1
- package/LICENSE.md +21 -0
- package/ai/catalog.json +11 -4
- package/ai/components/Effect.json +1 -1
- package/ai/components/Feedback.json +1 -0
- package/ai/components/Form.json +15 -0
- package/ai/components/Input.json +3 -2
- package/ai/components/{Particle.json → ParticleFx.json} +1 -1
- package/ai/components/ScrollContainer.json +9 -1
- package/ai/components/Textarea.json +3 -2
- package/ai/components/ThemeSwitcher.json +2 -1
- package/ai/eval-tasks.md +2 -1
- package/ai/examples/auth.tsx +1 -2
- package/ai/examples/blocks/Dashboard1.tsx +8 -8
- package/ai/examples/blocks/Feed3.tsx +4 -4
- package/ai/examples/blocks/Footer4.tsx +2 -2
- package/ai/examples/blocks/Header2.tsx +1 -1
- package/ai/examples/blocks/Header4.tsx +1 -2
- package/ai/examples/blocks/Productivity1.tsx +1 -1
- package/ai/examples/blocks/Roadmap1.tsx +3 -3
- package/ai/examples/blocks/Sidebar1.tsx +1 -1
- package/ai/examples/blocks/Sidebar2.tsx +1 -1
- package/ai/examples/blocks/Table1.tsx +3 -3
- package/ai/examples/blocks/manifest.json +2 -2
- package/ai/examples/dashboard.tsx +5 -5
- package/ai/examples/marketing-hero.tsx +2 -2
- package/ai/examples/pricing.tsx +3 -3
- package/ai/examples/settings.tsx +4 -4
- package/ai/gotchas.json +26 -2
- package/ai/manifest.json +2 -2
- package/ai/recipes.md +1 -1
- package/ai/rules.compact.md +8 -2
- package/ai/rules.md +18 -6
- package/ai/spec.json +35 -10
- package/ai/tasks/settings.json +1 -1
- package/dist/AGENTS.md +1 -1
- package/dist/ai/catalog.json +11 -4
- package/dist/ai/components/Effect.json +1 -1
- package/dist/ai/components/Feedback.json +1 -0
- package/dist/ai/components/Form.json +15 -0
- package/dist/ai/components/Input.json +3 -2
- package/dist/ai/components/{Particle.json → ParticleFx.json} +1 -1
- package/dist/ai/components/ScrollContainer.json +9 -1
- package/dist/ai/components/Textarea.json +3 -2
- package/dist/ai/components/ThemeSwitcher.json +2 -1
- package/dist/ai/eval-tasks.md +2 -1
- package/dist/ai/examples/blocks/manifest.json +2 -2
- package/dist/ai/gotchas.json +26 -2
- package/dist/ai/manifest.json +2 -2
- package/dist/ai/recipes.md +1 -1
- package/dist/ai/rules.compact.md +8 -2
- package/dist/ai/rules.md +18 -6
- package/dist/ai/spec.json +35 -10
- package/dist/ai/tasks/settings.json +1 -1
- package/dist/components/Animation.d.ts +1 -2
- package/dist/components/Animation.d.ts.map +1 -1
- package/dist/components/Animation.js +1 -1
- package/dist/components/Animation.js.map +1 -1
- package/dist/components/ArrowNavigationContext.d.ts.map +1 -1
- package/dist/components/ArrowNavigationContext.js +12 -3
- package/dist/components/ArrowNavigationContext.js.map +1 -1
- package/dist/components/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar.js +1 -1
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Carousel.js +1 -1
- package/dist/components/Carousel.js.map +1 -1
- package/dist/components/ContextMenu.d.ts +1 -1
- package/dist/components/ContextMenu.d.ts.map +1 -1
- package/dist/components/CountFx.d.ts.map +1 -1
- package/dist/components/CountFx.js +19 -7
- package/dist/components/CountFx.js.map +1 -1
- package/dist/components/CursorCard.d.ts +1 -1
- package/dist/components/CursorCard.d.ts.map +1 -1
- package/dist/components/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker.js +9 -2
- package/dist/components/DatePicker.js.map +1 -1
- package/dist/components/DropdownWrapper.d.ts +1 -1
- package/dist/components/DropdownWrapper.d.ts.map +1 -1
- package/dist/components/DropdownWrapper.js +178 -35
- package/dist/components/DropdownWrapper.js.map +1 -1
- package/dist/components/DropdownWrapper.module.scss +3 -1
- package/dist/components/Effect.d.ts +2 -2
- package/dist/components/Effect.d.ts.map +1 -1
- package/dist/components/Effect.js +2 -2
- package/dist/components/Effect.js.map +1 -1
- package/dist/components/EmojiPicker.js +1 -1
- package/dist/components/EmojiPicker.js.map +1 -1
- package/dist/components/Feedback.d.ts +4 -0
- package/dist/components/Feedback.d.ts.map +1 -1
- package/dist/components/Feedback.js +2 -2
- package/dist/components/Feedback.js.map +1 -1
- package/dist/components/FocusTrap.d.ts +3 -3
- package/dist/components/FocusTrap.d.ts.map +1 -1
- package/dist/components/FocusTrap.js +10 -0
- package/dist/components/FocusTrap.js.map +1 -1
- package/dist/components/Form.d.ts +48 -0
- package/dist/components/Form.d.ts.map +1 -0
- package/dist/components/Form.js +191 -0
- package/dist/components/Form.js.map +1 -0
- package/dist/components/Form.module.scss +160 -0
- package/dist/components/FormContext.d.ts +20 -0
- package/dist/components/FormContext.d.ts.map +1 -0
- package/dist/components/FormContext.js +12 -0
- package/dist/components/FormContext.js.map +1 -0
- package/dist/components/Input.d.ts +3 -0
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +13 -2
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Input.module.scss +27 -6
- package/dist/components/OgCard.d.ts.map +1 -1
- package/dist/components/OgCard.js +7 -4
- package/dist/components/OgCard.js.map +1 -1
- package/dist/components/{Particle.d.ts → ParticleFx.d.ts} +9 -4
- package/dist/components/ParticleFx.d.ts.map +1 -0
- package/dist/components/{Particle.js → ParticleFx.js} +9 -4
- package/dist/components/ParticleFx.js.map +1 -0
- package/dist/components/ScrollContainer.d.ts +69 -2
- package/dist/components/ScrollContainer.d.ts.map +1 -1
- package/dist/components/ScrollContainer.js +377 -46
- package/dist/components/ScrollContainer.js.map +1 -1
- package/dist/components/ScrollContainer.module.scss +131 -0
- package/dist/components/Select.d.ts +1 -1
- package/dist/components/Select.d.ts.map +1 -1
- package/dist/components/Select.js +1 -1
- package/dist/components/Select.js.map +1 -1
- package/dist/components/Setting.d.ts.map +1 -1
- package/dist/components/Setting.js +6 -1
- package/dist/components/Setting.js.map +1 -1
- package/dist/components/Table.js +2 -2
- package/dist/components/Table.js.map +1 -1
- package/dist/components/Textarea.d.ts +3 -0
- package/dist/components/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea.js +22 -6
- package/dist/components/Textarea.js.map +1 -1
- package/dist/components/ThemeSwitcher.d.ts +16 -0
- package/dist/components/ThemeSwitcher.d.ts.map +1 -1
- package/dist/components/ThemeSwitcher.js +48 -9
- package/dist/components/ThemeSwitcher.js.map +1 -1
- package/dist/components/ThemeSwitcher.module.scss +112 -0
- package/dist/components/User.js +1 -1
- package/dist/components/User.js.map +1 -1
- package/dist/components/UserMenu.d.ts +1 -1
- package/dist/components/UserMenu.d.ts.map +1 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -1
- package/dist/components/index.js.map +1 -1
- package/dist/data/emoji-data.json +10 -0
- package/dist/hooks/useArrowNavigation.d.ts.map +1 -1
- package/dist/hooks/useArrowNavigation.js +52 -7
- package/dist/hooks/useArrowNavigation.js.map +1 -1
- package/dist/modules/navigation/MegaMenu.d.ts.map +1 -1
- package/dist/modules/navigation/MegaMenu.js +76 -10
- package/dist/modules/navigation/MegaMenu.js.map +1 -1
- package/dist/package.json +1 -1
- package/dist/scripts/validate-ai-code.js +239 -21
- package/dist/types.d.ts +14 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/scripts/validate-ai-code.js +239 -21
- package/dist/components/Particle.d.ts.map +0 -1
- package/dist/components/Particle.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAIZ,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAIZ,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,UAAU,UACR,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EACJ,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,cAAc,GACd,aAAa,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B;;;;yCAIqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,GAAG,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;qEACiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,KAAK,qFA6NV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/components/Input.js
CHANGED
|
@@ -5,7 +5,14 @@ import classNames from "clsx";
|
|
|
5
5
|
import { Column, Row, Text, Spinner } from ".";
|
|
6
6
|
import styles from "./Input.module.scss";
|
|
7
7
|
import { useDebounce } from "../hooks/useDebounce";
|
|
8
|
-
|
|
8
|
+
import { useFieldSize } from "./FormContext";
|
|
9
|
+
const Input = forwardRef(({ id, label, placeholder, size, error = false, errorMessage, description, corners, className, style, prefix, suffix, variant = "default", focusRing = false, characterCount, loading = false,
|
|
10
|
+
// Consumed by `Form`, never rendered. Destructured so it cannot reach
|
|
11
|
+
// the DOM when an `Input` carrying it is used on its own.
|
|
12
|
+
span, children, onFocus, onBlur, onAnimationStart, validate, cursor, ...props }, ref) => {
|
|
13
|
+
// A `Form` can set the size for every field in it; the field's own
|
|
14
|
+
// prop still wins, and `"m"` is still the default on its own.
|
|
15
|
+
const resolvedSize = useFieldSize(size);
|
|
9
16
|
const [isFocused, setIsFocused] = useState(false);
|
|
10
17
|
// Seeded from `defaultValue` too: an uncontrolled field — how a settings
|
|
11
18
|
// form normally renders saved data — has no `value`, so the label never
|
|
@@ -85,7 +92,11 @@ const Input = forwardRef(({ id, label, placeholder, size = "m", error = false, e
|
|
|
85
92
|
});
|
|
86
93
|
return (_jsxs(Column, { gap: "8", style: style, fillWidth: true, fitHeight: true, className: classNames(className, {
|
|
87
94
|
[styles.error]: (error || (displayError && debouncedValue !== "")) && props.value !== "",
|
|
88
|
-
}), children: [_jsxs(Row
|
|
95
|
+
}), children: [_jsxs(Row
|
|
96
|
+
// The element that actually carries the border and the radius, two
|
|
97
|
+
// levels below what a parent lays out. `Form` needs to reach it to
|
|
98
|
+
// fuse a group's corners, and `> *` only reaches the Column above.
|
|
99
|
+
, { "data-surface": "field", transition: "micro-medium", border: variant === "ghost" ? "transparent" : "neutral-medium", background: variant === "ghost" ? "transparent" : "neutral-alpha-weak", overflow: "hidden", vertical: "stretch", className: classNames(styles.base, focusRing && styles.focusRing, styles[resolvedSize], corners === "none" ? "radius-none" : corners ? `radius-l-${corners}` : "radius-l"), children: [prefix && (_jsx(Row, { paddingLeft: "12", className: styles.prefix, position: "static", children: prefix })), _jsxs(Column, { fillWidth: true, padding: "4", children: [_jsx("input", { ...props, ref: ref, id: id, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, onAnimationStart: handleAnimationStart, className: inputClassNames, "aria-describedby": displayError ? `${id}-error` : undefined, "aria-invalid": !!displayError }), label && (_jsx(Text, { as: "label", variant: "label-default-m", htmlFor: id, className: classNames(styles.label, styles.inputLabel, {
|
|
89
100
|
[styles.floating]: isFocused || isFilled || placeholder,
|
|
90
101
|
}), children: label })), children] }), characterCount && props.maxLength && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: _jsx(Text, { variant: "label-default-s", onBackground: props.maxLength - String(props.value || '').length <= 5
|
|
91
102
|
? "danger-weak"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,QAAQ,EACR,SAAS,EACT,UAAU,EAEV,WAAW,GAEZ,MAAM,OAAO,CAAC;AACf,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;AAC/C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -230,7 +230,24 @@
|
|
|
230
230
|
|
|
231
231
|
&.textarea {
|
|
232
232
|
height: auto;
|
|
233
|
-
|
|
233
|
+
/* A textarea grows, so it cannot centre its value the way an input does by
|
|
234
|
+
pinching the box to one line. Left to itself its first line sits at the
|
|
235
|
+
top of the content box while an input's sits in the middle of it — an
|
|
236
|
+
11px step at size m, which reads as a misaligned placeholder and is
|
|
237
|
+
impossible to miss once a `Form` fuses the two into one control.
|
|
238
|
+
|
|
239
|
+
Padding the block symmetrically puts the first line exactly where an
|
|
240
|
+
input's single line falls, and lets the rest grow downwards from there.
|
|
241
|
+
Floored so the inset never collapses on a field whose content has
|
|
242
|
+
already outgrown one line. Note the floating-label rule below overrides
|
|
243
|
+
`padding-top` when there is a label, because then the value has to clear
|
|
244
|
+
the label rather than centre. */
|
|
245
|
+
--fld-textarea-inset: max(
|
|
246
|
+
var(--static-space-8),
|
|
247
|
+
calc((var(--fld-box) - var(--fld-lh)) / 2)
|
|
248
|
+
);
|
|
249
|
+
padding-top: var(--fld-textarea-inset);
|
|
250
|
+
padding-bottom: var(--fld-textarea-inset);
|
|
234
251
|
}
|
|
235
252
|
|
|
236
253
|
&::placeholder {
|
|
@@ -256,13 +273,17 @@
|
|
|
256
273
|
}
|
|
257
274
|
|
|
258
275
|
/* The value only clears room for the label once the label is actually floating
|
|
259
|
-
above it — an input with no label keeps its text centred by the UA.
|
|
276
|
+
above it — an input with no label keeps its text centred by the UA.
|
|
277
|
+
|
|
278
|
+
Both paddings, textareas included. Setting only the top used to push a
|
|
279
|
+
textarea's content past the bottom of a box that cannot grow to meet it: the
|
|
280
|
+
field is stretched to `--fld-h` by its parent, so the extra top padding came
|
|
281
|
+
straight off the bottom and the textarea scrolled its own single line. At
|
|
282
|
+
size m the content box needed 51.7px of a 46px box, and focusing a labelled
|
|
283
|
+
textarea put a scrollbar down the side of it. */
|
|
260
284
|
.base:has(.label.floating) .input {
|
|
261
285
|
padding-top: var(--fld-value-top);
|
|
262
|
-
|
|
263
|
-
&:not(.textarea) {
|
|
264
|
-
padding-bottom: var(--fld-value-bottom);
|
|
265
|
-
}
|
|
286
|
+
padding-bottom: var(--fld-value-bottom);
|
|
266
287
|
}
|
|
267
288
|
|
|
268
289
|
.error {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OgCard.d.ts","sourceRoot":"","sources":["../../src/components/OgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAA4B,IAAI,EAAY,MAAM,GAAG,CAAC;AAI7D,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,gBAAgB,GAAG,aAAa,CAAC;IAChE,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC1B;AAuCD,QAAA,MAAM,MAAM;gJAcT,WAAW;;
|
|
1
|
+
{"version":3,"file":"OgCard.d.ts","sourceRoot":"","sources":["../../src/components/OgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAA4B,IAAI,EAAY,MAAM,GAAG,CAAC;AAI7D,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,gBAAgB,GAAG,aAAa,CAAC;IAChE,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC1B;AAuCD,QAAA,MAAM,MAAM;gJAcT,WAAW;;CA4Jb,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -34,8 +34,11 @@ const getFaviconUrl = (url, proxyFn) => {
|
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
const OgCard = ({ url, ogData: providedOgData, direction = "column", sizes = "320px", unoptimized = false, size = "m", serviceConfig = {}, title, description, favicon, image, cardUrl, ...card }) => {
|
|
37
|
-
const { ogData: fetchedOgData, loading } = useOgData(url || null, serviceConfig.fetchOgUrl, serviceConfig.proxyOgUrl);
|
|
37
|
+
const { ogData: fetchedOgData, loading: fetching } = useOgData(providedOgData ? null : url || null, serviceConfig.fetchOgUrl, serviceConfig.proxyOgUrl);
|
|
38
38
|
const data = providedOgData || fetchedOgData;
|
|
39
|
+
// Data handed in directly is never loading: nothing is fetched for it, so
|
|
40
|
+
// the skeleton would only cover a card that could already be drawn.
|
|
41
|
+
const loading = !providedOgData && fetching;
|
|
39
42
|
// Resolve content based on props
|
|
40
43
|
const resolvedTitle = useMemo(() => {
|
|
41
44
|
if (title === false)
|
|
@@ -85,13 +88,13 @@ const OgCard = ({ url, ogData: providedOgData, direction = "column", sizes = "32
|
|
|
85
88
|
return null;
|
|
86
89
|
}
|
|
87
90
|
return (_jsxs(Card, { href: resolvedUrl || undefined, direction: direction, fillWidth: true, vertical: direction === "row" || direction === "row-reverse" ? "center" : undefined, gap: "4", radius: "l", background: "surface", border: "neutral-alpha-medium", ...card, children: [resolvedImage !== null && (proxiedImageUrl || loading) && (_jsx(Media, { minWidth: direction === "row" || direction === "row-reverse" ? 16 : undefined, maxWidth: direction === "row" || direction === "row-reverse" ? 24 : undefined, loading: loading, radius: "l", sizes: sizes, unoptimized: unoptimized, aspectRatio: "16/9", border: "neutral-alpha-weak", src: proxiedImageUrl })), _jsxs(Column, { fillWidth: true, paddingX: size === "s" ? "12" : size === "m" ? "20" : "32", paddingY: size === "s" ? "12" : size === "m" ? "16" : "24", gap: size === "s" || size === "m" ? "8" : "20", children: [resolvedFavicon !== null && (_jsxs(Row, { fillWidth: true, gap: "8", vertical: "center", children: [_jsx(Media, { aspectRatio: "1/1", sizes: "24px", unoptimized: unoptimized, src: resolvedFavicon, loading: loading, minWidth: "16", maxWidth: "16", fillWidth: false, radius: "xs", border: "neutral-alpha-weak" }), resolvedUrl &&
|
|
88
|
-
(loading ? (_jsx(Skeleton, { shape: "line", width: "25%",
|
|
89
|
-
(loading ? (_jsx(Skeleton, { shape: "line", width: "33%",
|
|
91
|
+
(loading ? (_jsx(Skeleton, { shape: "line", width: "25%", size: "xs" })) : (_jsx(Text, { variant: "label-default-s", onBackground: "neutral-weak", children: formatDisplayUrl(resolvedUrl) })))] })), _jsxs(Column, { fillWidth: true, gap: size === "s" ? "4" : size === "m" ? "8" : "12", children: [resolvedTitle !== null &&
|
|
92
|
+
(loading ? (_jsx(Skeleton, { shape: "line", width: "33%", size: "s" })) : (resolvedTitle && (_jsx(Text, { variant: size === "s"
|
|
90
93
|
? "label-default-s"
|
|
91
94
|
: size === "m"
|
|
92
95
|
? "label-default-m"
|
|
93
96
|
: "label-default-l", children: resolvedTitle })))), resolvedDescription !== null &&
|
|
94
|
-
(loading ? (_jsxs(Column, { fillWidth: true, paddingY: "8", gap: "8", children: [_jsx(Skeleton, { shape: "line", width: "100%",
|
|
97
|
+
(loading ? (_jsxs(Column, { fillWidth: true, paddingY: "8", gap: "8", children: [_jsx(Skeleton, { shape: "line", width: "100%", size: "xs" }), _jsx(Skeleton, { shape: "line", width: "75%", size: "xs" })] })) : resolvedDescription ? (_jsx(Text, { variant: size === "s"
|
|
95
98
|
? "label-default-s"
|
|
96
99
|
: size === "m"
|
|
97
100
|
? "label-default-m"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OgCard.js","sourceRoot":"","sources":["../../src/components/OgCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAgChC,MAAM,gBAAgB,GAAG,CAAC,GAAuB,EAAU,EAAE;IAC3D,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC;IAEpB,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QAE5B,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;QAE7B,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAEtC,OAAO,MAAM,CAAC;IAChB,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,IAAI,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QACnD,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAElD,YAAY,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAE1C,OAAO,YAAY,CAAC;IACtB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,GAAuB,EAAE,OAAiC,EAAU,EAAE;IAC3F,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC;IAEpB,IAAI,CAAC;QACH,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QAC5B,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;QAE/B,MAAM,gBAAgB,GAAG,6CAA6C,MAAM,QAAQ,CAAC;QAErF,qEAAqE;QACrE,OAAO,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAChE,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,EAAE,CAAC;IACZ,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,EACd,GAAG,EACH,MAAM,EAAE,cAAc,EACtB,SAAS,GAAG,QAAQ,EACpB,KAAK,GAAG,OAAO,EACf,WAAW,GAAG,KAAK,EACnB,IAAI,GAAG,GAAG,EACV,aAAa,GAAG,EAAE,EAClB,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACK,EAAE,EAAE;IAChB,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"OgCard.js","sourceRoot":"","sources":["../../src/components/OgCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { ColorValue, SpacingToken } from "../types";
|
|
3
3
|
import { DisplayProps } from "../interfaces";
|
|
4
4
|
import { Flex } from ".";
|
|
5
|
-
interface
|
|
5
|
+
interface ParticleFxProps extends React.ComponentProps<typeof Flex> {
|
|
6
6
|
density?: number;
|
|
7
7
|
color?: ColorValue;
|
|
8
8
|
size?: SpacingToken;
|
|
@@ -16,6 +16,11 @@ interface ParticleProps extends React.ComponentProps<typeof Flex> {
|
|
|
16
16
|
style?: React.CSSProperties;
|
|
17
17
|
children?: React.ReactNode;
|
|
18
18
|
}
|
|
19
|
-
declare const
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
declare const ParticleFx: React.ForwardRefExoticComponent<Omit<ParticleFxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated Renamed to `ParticleFx`, in line with the other effects. This
|
|
22
|
+
* name keeps working through 2.x and is removed in 3.0.
|
|
23
|
+
*/
|
|
24
|
+
declare const Particle: React.ForwardRefExoticComponent<Omit<ParticleFxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
export { ParticleFx, Particle };
|
|
26
|
+
//# sourceMappingURL=ParticleFx.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParticleFx.d.ts","sourceRoot":"","sources":["../../src/components/ParticleFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAIzB,UAAU,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,UAAU,qGA0Lf,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,QAAQ,qGAAa,CAAC;AAE5B,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from "react";
|
|
|
4
4
|
import { Flex } from ".";
|
|
5
5
|
import { useInViewport } from "../hooks/useInViewport";
|
|
6
6
|
import { useReducedMotion } from "../hooks/useReducedMotion";
|
|
7
|
-
const
|
|
7
|
+
const ParticleFx = React.forwardRef(({ density = 100, color = "brand-on-background-weak", size = "2", speed = 0.3, interactive = false, mode = "repel", intensity = 20, opacity = 100, reducedMotion = "auto", children, className, style, ...rest }, forwardedRef) => {
|
|
8
8
|
const containerRef = useRef(null);
|
|
9
9
|
const isInViewport = useInViewport(containerRef);
|
|
10
10
|
const { shouldAnimate } = useReducedMotion(reducedMotion);
|
|
@@ -135,6 +135,11 @@ const Particle = React.forwardRef(({ density = 100, color = "brand-on-background
|
|
|
135
135
|
}, [color, size, speed, interactive, intensity, opacity, density, mode, shouldAnimate, isInViewport]);
|
|
136
136
|
return (_jsx(Flex, { ref: containerRef, fill: true, position: "relative", pointerEvents: interactive ? "auto" : "none", className: className, style: { containerType: "size", ...style }, ...rest, children: children }));
|
|
137
137
|
});
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
138
|
+
ParticleFx.displayName = "ParticleFx";
|
|
139
|
+
/**
|
|
140
|
+
* @deprecated Renamed to `ParticleFx`, in line with the other effects. This
|
|
141
|
+
* name keeps working through 2.x and is removed in 3.0.
|
|
142
|
+
*/
|
|
143
|
+
const Particle = ParticleFx;
|
|
144
|
+
export { ParticleFx, Particle };
|
|
145
|
+
//# sourceMappingURL=ParticleFx.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ParticleFx.js","sourceRoot":"","sources":["../../src/components/ParticleFx.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,76 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import type React from "react";
|
|
2
2
|
import { Row } from ".";
|
|
3
|
+
export type ScrollContainerControlPlacement = "top-start" | "top-center" | "top-end" | "top-between" | "bottom-start" | "bottom-center" | "bottom-end" | "bottom-between";
|
|
3
4
|
export interface ScrollContainerProps extends React.ComponentProps<typeof Row> {
|
|
4
5
|
items: React.ReactNode[];
|
|
5
|
-
controlPlacement?:
|
|
6
|
+
controlPlacement?: ScrollContainerControlPlacement;
|
|
7
|
+
/**
|
|
8
|
+
* Wrap around: past the last item the track continues into the first, in the
|
|
9
|
+
* same direction, with no rewind.
|
|
10
|
+
*/
|
|
11
|
+
infinite?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Markers showing how many items there are and which one is in front.
|
|
14
|
+
* `true` puts them opposite the controls, or name the side yourself.
|
|
15
|
+
*/
|
|
16
|
+
markers?: boolean | "top" | "bottom";
|
|
17
|
+
/** Drag the track with a pointer — mouse, pen or finger. */
|
|
18
|
+
draggable?: boolean;
|
|
19
|
+
/** Items moved per control press. */
|
|
20
|
+
step?: number;
|
|
21
|
+
/** Clip the track at its edges instead of letting tiles paint past them. */
|
|
22
|
+
clip?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Scale tiles by how far they are from the one in front, so the run has a
|
|
25
|
+
* focus that follows the track as it moves. `true` uses a gentle default;
|
|
26
|
+
* a number is how much smaller each whole step away is, as a fraction —
|
|
27
|
+
* `0.08` makes the neighbour 92%.
|
|
28
|
+
*/
|
|
29
|
+
proximity?: boolean | number;
|
|
30
|
+
/**
|
|
31
|
+
* The item to bring to the front, by its index in `items`.
|
|
32
|
+
*
|
|
33
|
+
* Changing it moves the run, by the shorter way round when `infinite`. It
|
|
34
|
+
* is a command rather than a lock: the run still moves on its own from the
|
|
35
|
+
* controls, the markers and a drag, and `onActiveChange` is how the caller
|
|
36
|
+
* keeps up with that. Pair the two to drive the run from your own UI — a
|
|
37
|
+
* row of names beside it, say — without the two disagreeing.
|
|
38
|
+
*/
|
|
39
|
+
active?: number;
|
|
40
|
+
/**
|
|
41
|
+
* Called with the index of the item that has come to the front, however it
|
|
42
|
+
* got there. Not called on mount.
|
|
43
|
+
*/
|
|
44
|
+
onActiveChange?: (index: number) => void;
|
|
6
45
|
}
|
|
46
|
+
/**
|
|
47
|
+
* A horizontal run of items with controls, drag, optional wrap-around,
|
|
48
|
+
* optional proximity scaling and optional markers.
|
|
49
|
+
*
|
|
50
|
+
* This moves a track with a transform rather than scrolling a box, which is
|
|
51
|
+
* the decision the rest of the component follows from. The previous version
|
|
52
|
+
* was an `overflow-x: auto` row, and a scroll box cannot do any of the three
|
|
53
|
+
* things asked of a carousel: its contents are clipped at its own edge by
|
|
54
|
+
* definition, so no tile can peek past it; its scroll range has two hard ends,
|
|
55
|
+
* so there is nowhere for a wrap-around to go; and the browser owns the
|
|
56
|
+
* easing, so a drag can only set `scrollLeft` and hope. A transform has none
|
|
57
|
+
* of those limits — the track is laid out once and moved, tiles paint wherever
|
|
58
|
+
* they land, the offset is free to run past either end, and the motion is a
|
|
59
|
+
* CSS transition this component controls.
|
|
60
|
+
*
|
|
61
|
+
* What it gives up is the browser's own scrolling: a trackpad's horizontal
|
|
62
|
+
* gesture no longer moves the track, and that is why `draggable` is on by
|
|
63
|
+
* default and the controls are never hidden. Both are real affordances rather
|
|
64
|
+
* than the invisible one a scroll box relies on.
|
|
65
|
+
*
|
|
66
|
+
* Tiles are unstyled. The wrapper each item sits in used to arrive with
|
|
67
|
+
* `aspectRatio="3/4"`, `border`, `radius="xl"` and a width range already set,
|
|
68
|
+
* so anything that was not a tall bordered portrait card had to override four
|
|
69
|
+
* properties before it could begin — and any prop passed to override them
|
|
70
|
+
* landed on every tile, since that is where the rest props go. The wrapper now
|
|
71
|
+
* contributes only what a track item cannot do without, which is refusing to
|
|
72
|
+
* shrink. Sizing stays with the caller, through those same rest props.
|
|
73
|
+
*/
|
|
7
74
|
declare const ScrollContainer: React.ForwardRefExoticComponent<Omit<ScrollContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
75
|
export { ScrollContainer };
|
|
9
76
|
//# sourceMappingURL=ScrollContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../src/components/ScrollContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"ScrollContainer.d.ts","sourceRoot":"","sources":["../../src/components/ScrollContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,GAAG,EAAE,MAAM,GAAG,CAAC;AAGlD,MAAM,MAAM,+BAA+B,GACvC,WAAW,GACX,YAAY,GACZ,SAAS,GACT,aAAa,GACb,cAAc,GACd,eAAe,GACf,YAAY,GACZ,gBAAgB,CAAC;AAErB,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC;IAC5E,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,+BAA+B,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACrC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,eAAe,0GAudpB,CAAC;AAIF,OAAO,EAAE,eAAe,EAAE,CAAC"}
|