@proyecto-viviana/ui 0.8.0-rc.1 → 0.8.0-rc.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/dist/_chunk/text.js.map +1 -1
- package/dist/_chunk/text.jsx.map +1 -1
- package/dist/dropzone/index.d.ts +6 -1
- package/dist/dropzone/index.d.ts.map +1 -1
- package/dist/dropzone/index.js.map +1 -1
- package/dist/dropzone/index.jsx.map +1 -1
- package/dist/font-faces.css +0 -245
- package/dist/inlinealert/index.d.ts +7 -1
- package/dist/inlinealert/index.d.ts.map +1 -1
- package/dist/inlinealert/index.js +4 -1
- package/dist/inlinealert/index.js.map +1 -1
- package/dist/inlinealert/index.jsx +2 -1
- package/dist/inlinealert/index.jsx.map +1 -1
- package/dist/picker/index.d.ts.map +1 -1
- package/dist/picker/index.js +32 -3
- package/dist/picker/index.js.map +1 -1
- package/dist/picker/index.jsx +21 -3
- package/dist/picker/index.jsx.map +1 -1
- package/dist/segmentedcontrol/index.d.ts.map +1 -1
- package/dist/segmentedcontrol/index.js +2 -2
- package/dist/segmentedcontrol/index.js.map +1 -1
- package/dist/segmentedcontrol/index.jsx +2 -2
- package/dist/segmentedcontrol/index.jsx.map +1 -1
- package/dist/style/index.js.map +1 -1
- package/dist/viviana-tokens.css +15 -1
- package/package.json +4 -4
- package/src/dropzone/index.tsx +6 -9
- package/src/font-faces.css +0 -245
- package/src/inlinealert/index.tsx +9 -2
- package/src/picker/index.tsx +32 -1
- package/src/segmentedcontrol/index.tsx +3 -2
- package/src/style/spectrum-theme.ts +8 -8
- package/src/text/type-roles.ts +3 -3
- package/src/viviana-tokens.css +15 -1
package/dist/_chunk/text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.js","names":["<ElementTag\n tag={tag()}\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </ElementTag>","ref={mergeContextRefs(contextProps?.ref, props.ref)}","ref={mergeContextRefs(contextProps?.ref, props.ref, inertRef)}","{children()}","<span\n {...getContentDomProps(merged)}\n id={id()}\n ref={mergeContextRefs(contextProps?.ref, props.ref, inertRef)}\n class={className()}\n style={skeletonStyle()}\n slot={local.slot || undefined}\n data-rsp-slot={slotValue()[\"data-rsp-slot\"] ?? \"text\"}\n >\n {children()}\n </span>","ref={mergeContextRefs(contextProps?.ref, props.ref)}","{local.children}","<header\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </header>","<div\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </div>","<footer\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </footer>"],"sources":["../../src/text/type-roles.ts","../../src/text/Heading.tsx","../../src/text/index.tsx"],"sourcesContent":["import { style } from \"../style\" with { type: \"macro\" };\n\n/* The Glasselated register's CLOSED type ladder — twelve roles, no more.\n *\n * The handoff declares each role as one CSS custom property\n * (`--type-display` … `--type-button`, glasselated.css:154-168) so an app can\n * name a role and get it. The library's type lives in the build-time style()\n * macro instead, so this module is the equivalent surface: one precompiled\n * atom string per role, usable through any component's `styles` prop or as a\n * plain class on a bare element. The values are the register's own, verbatim:\n *\n * display-xl 500 66px/0.98 Geist Pixel +0.005em landing hero\n * display-lg 500 56px/1.02 Geist Pixel +0.008em home greeting\n * display-md 500 40px/1.08 Geist Pixel +0.01em page titles\n * display 500 28px/1.15 Geist Pixel +0.01em hero & page titles\n * title 600 20px/1.2 Geist Pixel +0.01em section/panel titles\n * headline 700 15px/1.3 Geist Pixel +0.01em card & list titles\n * label 600 13.5px/1.15 Geist Pixel +0.01em buttons/nav/chips\n * body 400 14px/1.55 Geist prose\n * meta 400 12px/1.5 Geist secondary, `--text-secondary` ink\n * micro 700 10px/1.2 Geist Mono +0.1em below the pixel floor\n * terminal 400 11.5px/1.95 Geist Mono wells & prompts\n * button 400 13px/1 Geist Mono control labels\n *\n * Each role opens with a `font:` shorthand purely to pick up the right FAMILY\n * routing (heading-* → display face, body-* → sans, code-* and ui → mono, see\n * spectrum-theme.ts font()) plus the role's semantic ink; the explicit\n * properties after it then pin size/weight/leading/tracking to the register's\n * exact numbers — shorthands expand first, so later keys win. Arbitrary\n * bracket values are deliberate: the register declares exact pixels, not ramp\n * rungs, and this module IS the register's ladder rather than a consumer of\n * Spectrum's.\n *\n * ELSH INVARIANT: the pixel face squares its terminals through a variation axis that\n * only resolves legibly at 16px and up, so a role may take `--font-display` ONLY at\n * >=16px. That is why the three hero tiers are all Pixel and why `label` (13.5px) is\n * the floor the handoff already calls \"the 13px pixel floor\" — the roles below it\n * (`body`, `meta`, `micro`, `terminal`, `button`) take sans or mono, and any NEW role\n * under 16px must do the same.\n *\n * The weight ladder on the pixel tiers is INVERTED — lighter as it gets\n * bigger (500/600/700) — which font()'s Spectrum weight tokens cannot say;\n * that is why every pixel role restates fontWeight. `meta` is the one role\n * that restates ink: \"secondary\" is part of the role's definition, not a\n * context choice.\n *\n * Faces come from the `--s2-font-family-*` bridge (display → Geist Pixel,\n * sans → Geist, code → Geist Mono); an app that bridges nothing falls back to\n * the Spectrum stacks and only the metrics of these roles apply. */\nexport const typeRoles = {\n \"display-xl\": style({\n font: \"heading-3xl\",\n fontSize: \"[66px]\",\n fontWeight: \"medium\",\n lineHeight: \"[0.98]\",\n letterSpacing: \"0.005em\",\n }),\n \"display-lg\": style({\n font: \"heading-2xl\",\n fontSize: \"[56px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.02]\",\n letterSpacing: \"0.008em\",\n }),\n \"display-md\": style({\n font: \"heading-xl\",\n fontSize: \"[40px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.08]\",\n letterSpacing: \"0.01em\",\n }),\n display: style({\n font: \"heading-lg\",\n fontSize: \"[28px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.15]\",\n letterSpacing: \"0.01em\",\n }),\n title: style({\n font: \"heading-sm\",\n fontSize: \"[20px]\",\n fontWeight: \"semi-bold\",\n lineHeight: \"[1.2]\",\n letterSpacing: \"0.01em\",\n }),\n headline: style({\n font: \"heading-2xs\",\n fontSize: \"[15px]\",\n fontWeight: \"bold\",\n lineHeight: \"[1.3]\",\n letterSpacing: \"0.01em\",\n }),\n label: style({\n font: \"heading-2xs\",\n fontSize: \"[13.5px]\",\n fontWeight: \"semi-bold\",\n lineHeight: \"[1.15]\",\n letterSpacing: \"0.01em\",\n }),\n body: style({\n font: \"body\",\n lineHeight: \"[1.55]\",\n }),\n meta: style({\n font: \"body-sm\",\n fontSize: \"[12px]\",\n lineHeight: \"[1.5]\",\n color: \"neutral-subdued\",\n }),\n micro: style({\n font: \"code-xs\",\n fontSize: \"[10px]\",\n fontWeight: \"bold\",\n lineHeight: \"[1.2]\",\n letterSpacing: \"0.1em\",\n }),\n terminal: style({\n font: \"code-xs\",\n fontSize: \"[11.5px]\",\n lineHeight: \"[1.95]\",\n }),\n button: style({\n font: \"ui\",\n fontSize: \"[13px]\",\n fontWeight: \"normal\",\n lineHeight: \"[1]\",\n }),\n} as const;\n\nexport type TypeRole = keyof typeof typeRoles;\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Content.tsx\n\n// Port of packages/@react-spectrum/s2/src/Content.tsx.\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { ElementTag } from \"@proyecto-viviana/solidaria-components\";\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport type { StyleString } from \"../style\";\nimport { type BaseContentProps, getContentDomProps, mergeUnsafeClassName } from \"./shared\";\nimport { typeRoles } from \"./type-roles\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface HeadingProps extends BaseContentProps<HTMLHeadingElement> {\n level?: number;\n}\n\n/* Heading carried NO styles of its own: `className()` below composes context styles and\n * UNSAFE_className only, so a bare <Heading> rendered at whatever type the host page\n * happened to set on h1-h4. Any heading face it appeared to have came from the consuming\n * app's own stylesheet; an installed consumer without one got nothing. This gives the\n * component a real default type role.\n *\n * The FACE comes for free: font() routes `heading` to the `display` family\n * (spectrum-theme.ts, fontFamily ternary), so every rung below resolves to the register's\n * display face instead of whatever was inherited.\n *\n * The SIZE has to vary with `level`, and previously did not. One module-level constant was\n * shared by every level, so the register's three pixel tiers — display, title, headline —\n * arrived as three identical lines and the top of the type ladder collapsed. `level` chose\n * the tag and nothing else.\n *\n * The rungs are now the register's roles VERBATIM: h1 → display, h2 → title, h3 →\n * headline, taken from the typeRoles ladder (./type-roles.ts) so the component and the\n * exported role surface can never drift apart. The roles carry the register's exact\n * metrics — 28/20/15px, the INVERTED weight ladder (500/600/700, lighter as it gets\n * bigger), the +0.01em pixel-face tracking — which the earlier nearest-ramp-rung\n * approximation here could only wave at (28.4/19.9/14, Spectrum weights, no tracking).\n *\n * h4+ deliberately share the h3 rung: the register declares three pixel tiers, not six,\n * and inventing rungs below the floor would extend a ladder the design does not have.\n *\n * The role is passed as the FIRST argument to mergeContextStyles below so it stays the\n * base layer: mergeStyles(a, b) resolves later-wins (style/runtime.ts), so Dialog/\n * Popover/ContextualHelp context styles and any local `styles` prop still override it. */\nconst headingStyles = {\n 1: typeRoles.display,\n 2: typeRoles.title,\n 3: typeRoles.headline,\n} as const;\n\nfunction headingStyleForLevel(level: number): StyleString {\n return headingStyles[level === 1 ? 1 : level === 2 ? 2 : 3];\n}\n\nexport const HeadingContext = createContext<SpectrumContextValue<HeadingProps>>(null);\n\nexport function Heading(props: HeadingProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(HeadingContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as HeadingProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"level\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const level = () => local.level ?? 3;\n const tag = () => `h${level()}` as keyof JSX.IntrinsicElements;\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n headingStyleForLevel(level()),\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <ElementTag\n tag={tag()}\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </ElementTag>\n );\n}\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Content.tsx\n\n// Port of packages/@react-spectrum/s2/src/Content.tsx.\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { createIsSkeleton, useInertAttribute, useSkeletonText } from \"../skeleton\";\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { type BaseContentProps, getContentDomProps, mergeUnsafeClassName } from \"./shared\";\nimport { typeRoles } from \"./type-roles\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { joinSlotClass, useSlotValue } from \"@proyecto-viviana/solidaria-components\";\n\n/* Standalone type-role defaults (Glasselated register, mirror panel 09):\n * Text, Content and Keyboard were pure slot markers — bare elements with an\n * empty class that inherit whatever encloses them — so the register's body,\n * meta and terminal roles had no reachable carrier: an app could not ask for\n * \"prose\" or \"mono\" and get it. Each now bakes its role, but ONLY when no\n * slotted context has claimed the element (contextProps == null): inside a\n * Button, MenuItem, Card or any other composing parent, the parent's context\n * IS the styling contract — often deliberately partial so the child inherits\n * the parent's font — and a baked size there would override the host instead\n * of the page. Standalone mapping, per the register's ladder: Content → body\n * (block prose), Text → meta (inline secondary), Keyboard → terminal (mono).\n * When a context exists the default is skipped entirely, so composed\n * behavior is byte-identical to before. */\n\nexport interface TextProps extends BaseContentProps<HTMLSpanElement> {}\n\nexport const TextContext = createContext<SpectrumContextValue<TextProps>>(null);\n\nexport interface HeaderProps extends BaseContentProps<HTMLElement> {}\n\nexport const HeaderContext = createContext<SpectrumContextValue<HeaderProps>>(null);\n\nexport interface ContentProps extends BaseContentProps<HTMLDivElement> {}\n\nexport const ContentContext = createContext<SpectrumContextValue<ContentProps>>(null);\n\nexport interface FooterProps extends BaseContentProps<HTMLElement> {}\n\nexport const FooterContext = createContext<SpectrumContextValue<FooterProps>>(null);\n\nexport function Text(props: TextProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(TextContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as TextProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const slotValue = useSlotValue(() => (typeof local.slot === \"string\" ? local.slot : undefined));\n const isSkeleton = createIsSkeleton();\n const inertRef = useInertAttribute(isSkeleton);\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n const id = () => props.id ?? contextProps?.id;\n const [children, skeletonStyle] = useSkeletonText(() => local.children, unsafeStyle);\n const className = () =>\n joinSlotClass(\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n contextProps == null ? typeRoles.meta : undefined,\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \"),\n slotValue().class,\n );\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <span\n {...getContentDomProps(merged)}\n id={id()}\n ref={mergeContextRefs(contextProps?.ref, props.ref, inertRef)}\n class={className()}\n style={skeletonStyle()}\n slot={local.slot || undefined}\n data-rsp-slot={slotValue()[\"data-rsp-slot\"] ?? \"text\"}\n >\n {children()}\n </span>\n );\n}\n\nexport function Header(props: HeaderProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(HeaderContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as HeaderProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(contextProps?.styles, props.styles),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <header\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </header>\n );\n}\n\nexport function Content(props: ContentProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(ContentContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as ContentProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n contextProps == null ? typeRoles.body : undefined,\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <div\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </div>\n );\n}\n\nexport function Footer(props: FooterProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(FooterContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as FooterProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(contextProps?.styles, props.styles),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <footer\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </footer>\n );\n}\n\nexport { Heading, HeadingContext } from \"./Heading\";\nexport type { HeadingProps } from \"./Heading\";\nexport { Keyboard, KeyboardContext } from \"./Keyboard\";\nexport type { KeyboardProps } from \"./Keyboard\";\nexport { typeRoles } from \"./type-roles\";\nexport type { TypeRole } from \"./type-roles\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"text.js","names":["<ElementTag\n tag={tag()}\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </ElementTag>","ref={mergeContextRefs(contextProps?.ref, props.ref)}","ref={mergeContextRefs(contextProps?.ref, props.ref, inertRef)}","{children()}","<span\n {...getContentDomProps(merged)}\n id={id()}\n ref={mergeContextRefs(contextProps?.ref, props.ref, inertRef)}\n class={className()}\n style={skeletonStyle()}\n slot={local.slot || undefined}\n data-rsp-slot={slotValue()[\"data-rsp-slot\"] ?? \"text\"}\n >\n {children()}\n </span>","ref={mergeContextRefs(contextProps?.ref, props.ref)}","{local.children}","<header\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </header>","<div\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </div>","<footer\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </footer>"],"sources":["../../src/text/type-roles.ts","../../src/text/Heading.tsx","../../src/text/index.tsx"],"sourcesContent":["import { style } from \"../style\" with { type: \"macro\" };\n\n/* The Glasselated register's CLOSED type ladder — twelve roles, no more.\n *\n * The handoff declares each role as one CSS custom property\n * (`--type-display` … `--type-button`, glasselated.css:154-168) so an app can\n * name a role and get it. The library's type lives in the build-time style()\n * macro instead, so this module is the equivalent surface: one precompiled\n * atom string per role, usable through any component's `styles` prop or as a\n * plain class on a bare element. The values are the register's own, verbatim:\n *\n * display-xl 500 66px/0.98 Geist Pixel +0.005em landing hero\n * display-lg 500 56px/1.02 Geist Pixel +0.008em home greeting\n * display-md 500 40px/1.08 Geist Pixel +0.01em page titles\n * display 500 28px/1.15 Geist Pixel +0.01em hero & page titles\n * title 600 20px/1.2 Geist Pixel +0.01em section/panel titles\n * headline 700 15px/1.3 Geist Pixel +0.01em card & list titles\n * label 600 13.5px/1.15 Geist Pixel +0.01em buttons/nav/chips\n * body 400 14px/1.55 Geist prose\n * meta 400 12px/1.5 Geist secondary, `--text-secondary` ink\n * micro 700 10px/1.2 Geist Mono +0.1em below the pixel floor\n * terminal 400 11.5px/1.95 Geist Mono wells & prompts\n * button 400 13px/1 Geist Mono control labels\n *\n * Each role opens with a `font:` shorthand purely to pick up the right FAMILY\n * routing (heading-* → display face, body-* → sans, code-* and ui → mono, see\n * spectrum-theme.ts font()) plus the role's semantic ink; the explicit\n * properties after it then pin size/weight/leading/tracking to the register's\n * exact numbers — shorthands expand first, so later keys win. Arbitrary\n * bracket values are deliberate: the register declares exact pixels, not ramp\n * rungs, and this module IS the register's ladder rather than a consumer of\n * Spectrum's.\n *\n * ELSH INVARIANT: the pixel face squares its terminals through a variation axis that\n * only resolves legibly at 16px and up, so a role may take `--font-display` ONLY at\n * >=16px. That is why the three hero tiers are all Pixel and why `label` (13.5px) is\n * the floor the handoff already calls \"the 13px pixel floor\" — the roles below it\n * (`body`, `meta`, `micro`, `terminal`, `button`) take sans or mono, and any NEW role\n * under 16px must do the same.\n *\n * The weight ladder on the pixel tiers is INVERTED — lighter as it gets\n * bigger (500/600/700) — which font()'s Spectrum weight tokens cannot say;\n * that is why every pixel role restates fontWeight. `meta` is the one role\n * that restates ink: \"secondary\" is part of the role's definition, not a\n * context choice.\n *\n * Faces come from the `--s2-font-family-*` variables, which `viviana-tokens.css`\n * binds at the root (display → Geist Pixel, sans → Geist, code → Geist Mono).\n * An app may rebind one in a narrower scope. */\nexport const typeRoles = {\n \"display-xl\": style({\n font: \"heading-3xl\",\n fontSize: \"[66px]\",\n fontWeight: \"medium\",\n lineHeight: \"[0.98]\",\n letterSpacing: \"0.005em\",\n }),\n \"display-lg\": style({\n font: \"heading-2xl\",\n fontSize: \"[56px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.02]\",\n letterSpacing: \"0.008em\",\n }),\n \"display-md\": style({\n font: \"heading-xl\",\n fontSize: \"[40px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.08]\",\n letterSpacing: \"0.01em\",\n }),\n display: style({\n font: \"heading-lg\",\n fontSize: \"[28px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.15]\",\n letterSpacing: \"0.01em\",\n }),\n title: style({\n font: \"heading-sm\",\n fontSize: \"[20px]\",\n fontWeight: \"semi-bold\",\n lineHeight: \"[1.2]\",\n letterSpacing: \"0.01em\",\n }),\n headline: style({\n font: \"heading-2xs\",\n fontSize: \"[15px]\",\n fontWeight: \"bold\",\n lineHeight: \"[1.3]\",\n letterSpacing: \"0.01em\",\n }),\n label: style({\n font: \"heading-2xs\",\n fontSize: \"[13.5px]\",\n fontWeight: \"semi-bold\",\n lineHeight: \"[1.15]\",\n letterSpacing: \"0.01em\",\n }),\n body: style({\n font: \"body\",\n lineHeight: \"[1.55]\",\n }),\n meta: style({\n font: \"body-sm\",\n fontSize: \"[12px]\",\n lineHeight: \"[1.5]\",\n color: \"neutral-subdued\",\n }),\n micro: style({\n font: \"code-xs\",\n fontSize: \"[10px]\",\n fontWeight: \"bold\",\n lineHeight: \"[1.2]\",\n letterSpacing: \"0.1em\",\n }),\n terminal: style({\n font: \"code-xs\",\n fontSize: \"[11.5px]\",\n lineHeight: \"[1.95]\",\n }),\n button: style({\n font: \"ui\",\n fontSize: \"[13px]\",\n fontWeight: \"normal\",\n lineHeight: \"[1]\",\n }),\n} as const;\n\nexport type TypeRole = keyof typeof typeRoles;\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Content.tsx\n\n// Port of packages/@react-spectrum/s2/src/Content.tsx.\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { ElementTag } from \"@proyecto-viviana/solidaria-components\";\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport type { StyleString } from \"../style\";\nimport { type BaseContentProps, getContentDomProps, mergeUnsafeClassName } from \"./shared\";\nimport { typeRoles } from \"./type-roles\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface HeadingProps extends BaseContentProps<HTMLHeadingElement> {\n level?: number;\n}\n\n/* Heading carried NO styles of its own: `className()` below composes context styles and\n * UNSAFE_className only, so a bare <Heading> rendered at whatever type the host page\n * happened to set on h1-h4. Any heading face it appeared to have came from the consuming\n * app's own stylesheet; an installed consumer without one got nothing. This gives the\n * component a real default type role.\n *\n * The FACE comes for free: font() routes `heading` to the `display` family\n * (spectrum-theme.ts, fontFamily ternary), so every rung below resolves to the register's\n * display face instead of whatever was inherited.\n *\n * The SIZE has to vary with `level`, and previously did not. One module-level constant was\n * shared by every level, so the register's three pixel tiers — display, title, headline —\n * arrived as three identical lines and the top of the type ladder collapsed. `level` chose\n * the tag and nothing else.\n *\n * The rungs are now the register's roles VERBATIM: h1 → display, h2 → title, h3 →\n * headline, taken from the typeRoles ladder (./type-roles.ts) so the component and the\n * exported role surface can never drift apart. The roles carry the register's exact\n * metrics — 28/20/15px, the INVERTED weight ladder (500/600/700, lighter as it gets\n * bigger), the +0.01em pixel-face tracking — which the earlier nearest-ramp-rung\n * approximation here could only wave at (28.4/19.9/14, Spectrum weights, no tracking).\n *\n * h4+ deliberately share the h3 rung: the register declares three pixel tiers, not six,\n * and inventing rungs below the floor would extend a ladder the design does not have.\n *\n * The role is passed as the FIRST argument to mergeContextStyles below so it stays the\n * base layer: mergeStyles(a, b) resolves later-wins (style/runtime.ts), so Dialog/\n * Popover/ContextualHelp context styles and any local `styles` prop still override it. */\nconst headingStyles = {\n 1: typeRoles.display,\n 2: typeRoles.title,\n 3: typeRoles.headline,\n} as const;\n\nfunction headingStyleForLevel(level: number): StyleString {\n return headingStyles[level === 1 ? 1 : level === 2 ? 2 : 3];\n}\n\nexport const HeadingContext = createContext<SpectrumContextValue<HeadingProps>>(null);\n\nexport function Heading(props: HeadingProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(HeadingContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as HeadingProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"level\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const level = () => local.level ?? 3;\n const tag = () => `h${level()}` as keyof JSX.IntrinsicElements;\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n headingStyleForLevel(level()),\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <ElementTag\n tag={tag()}\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </ElementTag>\n );\n}\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Content.tsx\n\n// Port of packages/@react-spectrum/s2/src/Content.tsx.\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { createIsSkeleton, useInertAttribute, useSkeletonText } from \"../skeleton\";\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { type BaseContentProps, getContentDomProps, mergeUnsafeClassName } from \"./shared\";\nimport { typeRoles } from \"./type-roles\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { joinSlotClass, useSlotValue } from \"@proyecto-viviana/solidaria-components\";\n\n/* Standalone type-role defaults (Glasselated register, mirror panel 09):\n * Text, Content and Keyboard were pure slot markers — bare elements with an\n * empty class that inherit whatever encloses them — so the register's body,\n * meta and terminal roles had no reachable carrier: an app could not ask for\n * \"prose\" or \"mono\" and get it. Each now bakes its role, but ONLY when no\n * slotted context has claimed the element (contextProps == null): inside a\n * Button, MenuItem, Card or any other composing parent, the parent's context\n * IS the styling contract — often deliberately partial so the child inherits\n * the parent's font — and a baked size there would override the host instead\n * of the page. Standalone mapping, per the register's ladder: Content → body\n * (block prose), Text → meta (inline secondary), Keyboard → terminal (mono).\n * When a context exists the default is skipped entirely, so composed\n * behavior is byte-identical to before. */\n\nexport interface TextProps extends BaseContentProps<HTMLSpanElement> {}\n\nexport const TextContext = createContext<SpectrumContextValue<TextProps>>(null);\n\nexport interface HeaderProps extends BaseContentProps<HTMLElement> {}\n\nexport const HeaderContext = createContext<SpectrumContextValue<HeaderProps>>(null);\n\nexport interface ContentProps extends BaseContentProps<HTMLDivElement> {}\n\nexport const ContentContext = createContext<SpectrumContextValue<ContentProps>>(null);\n\nexport interface FooterProps extends BaseContentProps<HTMLElement> {}\n\nexport const FooterContext = createContext<SpectrumContextValue<FooterProps>>(null);\n\nexport function Text(props: TextProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(TextContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as TextProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const slotValue = useSlotValue(() => (typeof local.slot === \"string\" ? local.slot : undefined));\n const isSkeleton = createIsSkeleton();\n const inertRef = useInertAttribute(isSkeleton);\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n const id = () => props.id ?? contextProps?.id;\n const [children, skeletonStyle] = useSkeletonText(() => local.children, unsafeStyle);\n const className = () =>\n joinSlotClass(\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n contextProps == null ? typeRoles.meta : undefined,\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \"),\n slotValue().class,\n );\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <span\n {...getContentDomProps(merged)}\n id={id()}\n ref={mergeContextRefs(contextProps?.ref, props.ref, inertRef)}\n class={className()}\n style={skeletonStyle()}\n slot={local.slot || undefined}\n data-rsp-slot={slotValue()[\"data-rsp-slot\"] ?? \"text\"}\n >\n {children()}\n </span>\n );\n}\n\nexport function Header(props: HeaderProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(HeaderContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as HeaderProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(contextProps?.styles, props.styles),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <header\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </header>\n );\n}\n\nexport function Content(props: ContentProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(ContentContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as ContentProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n contextProps == null ? typeRoles.body : undefined,\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <div\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </div>\n );\n}\n\nexport function Footer(props: FooterProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(FooterContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as FooterProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(contextProps?.styles, props.styles),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <footer\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </footer>\n );\n}\n\nexport { Heading, HeadingContext } from \"./Heading\";\nexport type { HeadingProps } from \"./Heading\";\nexport { Keyboard, KeyboardContext } from \"./Keyboard\";\nexport type { KeyboardProps } from \"./Keyboard\";\nexport { typeRoles } from \"./type-roles\";\nexport type { TypeRole } from \"./type-roles\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,YAAY;CACvB,cAAY;CAOZ,cAAY;CAOZ,cAAY;CAOZ,SAAO;CAOP,OAAK;CAOL,UAAQ;CAOR,OAAK;CAOL,MAAI;CAIJ,MAAI;CAMJ,OAAK;CAOL,UAAQ;CAKR,QAAM;AAMR;;;AC/DA,MAAM,gBAAgB;CACpB,GAAG,UAAU;CACb,GAAG,UAAU;CACb,GAAG,UAAU;AACf;AAEA,SAAS,qBAAqB,OAA4B;CACxD,OAAO,cAAc,UAAU,IAAI,IAAI,UAAU,IAAI,IAAI;AAC3D;AAEA,MAAa,iBAAiB,cAAkD,IAAI;AAEpF,SAAgB,UAAQ,OAAkC;CACxD,MAAM,eAAe,uBAAuB,WAAW,cAAc,GAAG,MAAM,IAAI;CAClF,MAAM,SAAS,aAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,cAAc,MAAM,SAAS;CACnC,MAAM,YAAY,IAAI,MAAM;CAC5B,MAAM,kBACJ,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBACE,qBAAqB,MAAM,CAAC,GAC5B,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAEhG,IAAI,MAAM,UACR,OAAO;CAOL,IAAA,QAAK,iBAAiB,cAAc,KAAK,MAAM,GAAG;CAJtD,OACEA,gBAAAA,YAAAA,WAAAA,EACE,IAAA,MAAA;EAAK,OAAA,IAAI;CAAC,EAQA,SAPV;EAAI,OAAA,mBAAmB,MAAM;CAAC,GAFhC;EAGE,IAAA,IAAA;GAAmD,CAAA,OAAA,UAAA,cAAA,MAAA,QAAA,KAAA,MAAnDC,SAAAA,OAAAA,EAAmD;;EACnD,IAAA,UAAA;GAAO,OAAA,UAAU;EAAC;EAClB,IAAA,QAAA;GAAO,OAAA,YAAY;EAAC;EACpB,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAS;EAN/B,IAAA,WAAA;GAQG,OAAA,MAAM;EACG;;AAEhB;;;;;;;ACvEA,MAAa,gBAAc,cAA+C,IAAI;AAI9E,MAAa,gBAAgB,cAAiD,IAAI;AAIlF,MAAa,iBAAiB,cAAkD,IAAI;AAIpF,MAAa,gBAAgB,cAAiD,IAAI;AAElF,SAAgB,OAAK,OAA+B;CAClD,MAAM,eAAe,uBAAuB,WAAW,aAAW,GAAG,MAAM,IAAI;CAC/E,MAAM,SAAS,aAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,YAAY,mBAAoB,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO,KAAA,CAAU;CAC9F,MAAM,aAAa,iBAAiB;CACpC,MAAM,WAAW,kBAAkB,UAAU;CAC7C,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAChG,MAAM,WAAW,MAAM,MAAM,cAAc;CAC3C,MAAM,CAAC,UAAU,iBAAiB,sBAAsB,MAAM,UAAU,WAAW;CACnF,MAAM,kBACJ,cACE,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBACE,gBAAgB,OAAO,UAAU,OAAO,KAAA,GACxC,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACX,UAAU,CAAC,CAAC,KACd;CAEF,IAAI,MAAM,UACR,OAAO;CAIP,IAAA,OAAA,eAAA,MAUM;CAPJ,IAAA,QAAK,iBAAiB,cAAc,KAAK,MAAM,KAAK,QAAQ;CAA5D,CAAA,OAAA,UAAA,cAAA,MAAA,QAAA,KAA6D,MAA7DC,UAAAA;;CAA6D,GAA7DA,IAA6D;CAF7D,OAAA,MAAA,OAAA;EAAI,OAAA,mBAAmB,MAAM;CAAC,GAAA;EAC9B,IAAA,KAAA;GAAI,OAAA,GAAG;EAAC;EAER,IAAA,UAAA;GAAO,OAAA,UAAU;EAAC;EAClB,IAAA,QAAA;GAAO,OAAA,cAAc;EAAC;EACtB,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAS;EAC7B,IAAA,kBAAA;GAAe,OAAA,UAAU,CAAC,CAAC,oBAAoB;EAAM;;CAPvD,OAAA,MASEC,YAAAA;EAAC,OAAA,SAAU;CACP,CAAA,CAAA;CAVN,mBAUM;CAXR,OACEC;AAYJ;AAEA,SAAgB,OAAO,OAAiC;CACtD,MAAM,eAAe,uBAAuB,WAAW,aAAa,GAAG,MAAM,IAAI;CACjF,MAAM,SAAS,aAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,kBACJ,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAEhG,IAAI,MAAM,UACR,OAAO;CAIP,IAAA,QAAA,eAAA,OAQQ;CANN,IAAA,SAAK,iBAAiB,cAAc,KAAK,MAAM,GAAG;CAAlD,CAAA,OAAA,WAAA,cAAA,MAAA,QAAA,MAAmD,MAAnDC,UAAAA;;CAAmD,GAAnDA,KAAmD;CADnD,OAAA,OAAA,OAAA;EAAI,OAAA,mBAAmB,MAAM;CAAC,GAAA;EAE9B,IAAA,UAAA;GAAO,OAAA,UAAU;EAAC;EAClB,IAAA,QAAA;GAAO,OAAA,YAAY;EAAC;EACpB,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAS;;CAL/B,OAAA,OAOEC,YAAAA;EAAC,OAAA,MAAM;CAAQ,CAAA,CACT;CARR,mBAQQ;CATV,OACEC;AAUJ;AAEA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,eAAe,uBAAuB,WAAW,cAAc,GAAG,MAAM,IAAI;CAClF,MAAM,SAAS,aAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,kBACJ,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBACE,gBAAgB,OAAO,UAAU,OAAO,KAAA,GACxC,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAEhG,IAAI,MAAM,UACR,OAAO;CAIP,IAAA,QAAA,eAAA,OAQK;CANH,IAAA,SAAK,iBAAiB,cAAc,KAAK,MAAM,GAAG;CAAlD,CAAA,OAAA,WAAA,cAAA,MAAA,QAAA,MAAmD,MAAnDF,UAAAA;;CAAmD,GAAnDA,KAAmD;CADnD,OAAA,OAAA,OAAA;EAAI,OAAA,mBAAmB,MAAM;CAAC,GAAA;EAE9B,IAAA,UAAA;GAAO,OAAA,UAAU;EAAC;EAClB,IAAA,QAAA;GAAO,OAAA,YAAY;EAAC;EACpB,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAS;;CAL/B,OAAA,OAOEC,YAAAA;EAAC,OAAA,MAAM;CAAQ,CAAA,CACZ;CARL,mBAQK;CATP,OACEE;AAUJ;AAEA,SAAgB,OAAO,OAAiC;CACtD,MAAM,eAAe,uBAAuB,WAAW,aAAa,GAAG,MAAM,IAAI;CACjF,MAAM,SAAS,aAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,kBACJ,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAEhG,IAAI,MAAM,UACR,OAAO;CAIP,IAAA,QAAA,eAAA,OAQQ;CANN,IAAA,SAAK,iBAAiB,cAAc,KAAK,MAAM,GAAG;CAAlD,CAAA,OAAA,WAAA,cAAA,MAAA,QAAA,MAAmD,MAAnDH,UAAAA;;CAAmD,GAAnDA,KAAmD;CADnD,OAAA,OAAA,OAAA;EAAI,OAAA,mBAAmB,MAAM;CAAC,GAAA;EAE9B,IAAA,UAAA;GAAO,OAAA,UAAU;EAAC;EAClB,IAAA,QAAA;GAAO,OAAA,YAAY;EAAC;EACpB,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAS;;CAL/B,OAAA,OAOEC,YAAAA;EAAC,OAAA,MAAM;CAAQ,CAAA,CACT;CARR,mBAQQ;CATV,OACEG;AAUJ"}
|
package/dist/_chunk/text.jsx.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.jsx","names":["Heading","TextContext","Text"],"sources":["../../src/text/type-roles.ts","../../src/text/Heading.tsx","../../src/text/index.tsx"],"sourcesContent":["import { style } from \"../style\" with { type: \"macro\" };\n\n/* The Glasselated register's CLOSED type ladder — twelve roles, no more.\n *\n * The handoff declares each role as one CSS custom property\n * (`--type-display` … `--type-button`, glasselated.css:154-168) so an app can\n * name a role and get it. The library's type lives in the build-time style()\n * macro instead, so this module is the equivalent surface: one precompiled\n * atom string per role, usable through any component's `styles` prop or as a\n * plain class on a bare element. The values are the register's own, verbatim:\n *\n * display-xl 500 66px/0.98 Geist Pixel +0.005em landing hero\n * display-lg 500 56px/1.02 Geist Pixel +0.008em home greeting\n * display-md 500 40px/1.08 Geist Pixel +0.01em page titles\n * display 500 28px/1.15 Geist Pixel +0.01em hero & page titles\n * title 600 20px/1.2 Geist Pixel +0.01em section/panel titles\n * headline 700 15px/1.3 Geist Pixel +0.01em card & list titles\n * label 600 13.5px/1.15 Geist Pixel +0.01em buttons/nav/chips\n * body 400 14px/1.55 Geist prose\n * meta 400 12px/1.5 Geist secondary, `--text-secondary` ink\n * micro 700 10px/1.2 Geist Mono +0.1em below the pixel floor\n * terminal 400 11.5px/1.95 Geist Mono wells & prompts\n * button 400 13px/1 Geist Mono control labels\n *\n * Each role opens with a `font:` shorthand purely to pick up the right FAMILY\n * routing (heading-* → display face, body-* → sans, code-* and ui → mono, see\n * spectrum-theme.ts font()) plus the role's semantic ink; the explicit\n * properties after it then pin size/weight/leading/tracking to the register's\n * exact numbers — shorthands expand first, so later keys win. Arbitrary\n * bracket values are deliberate: the register declares exact pixels, not ramp\n * rungs, and this module IS the register's ladder rather than a consumer of\n * Spectrum's.\n *\n * ELSH INVARIANT: the pixel face squares its terminals through a variation axis that\n * only resolves legibly at 16px and up, so a role may take `--font-display` ONLY at\n * >=16px. That is why the three hero tiers are all Pixel and why `label` (13.5px) is\n * the floor the handoff already calls \"the 13px pixel floor\" — the roles below it\n * (`body`, `meta`, `micro`, `terminal`, `button`) take sans or mono, and any NEW role\n * under 16px must do the same.\n *\n * The weight ladder on the pixel tiers is INVERTED — lighter as it gets\n * bigger (500/600/700) — which font()'s Spectrum weight tokens cannot say;\n * that is why every pixel role restates fontWeight. `meta` is the one role\n * that restates ink: \"secondary\" is part of the role's definition, not a\n * context choice.\n *\n * Faces come from the `--s2-font-family-*` bridge (display → Geist Pixel,\n * sans → Geist, code → Geist Mono); an app that bridges nothing falls back to\n * the Spectrum stacks and only the metrics of these roles apply. */\nexport const typeRoles = {\n \"display-xl\": style({\n font: \"heading-3xl\",\n fontSize: \"[66px]\",\n fontWeight: \"medium\",\n lineHeight: \"[0.98]\",\n letterSpacing: \"0.005em\",\n }),\n \"display-lg\": style({\n font: \"heading-2xl\",\n fontSize: \"[56px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.02]\",\n letterSpacing: \"0.008em\",\n }),\n \"display-md\": style({\n font: \"heading-xl\",\n fontSize: \"[40px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.08]\",\n letterSpacing: \"0.01em\",\n }),\n display: style({\n font: \"heading-lg\",\n fontSize: \"[28px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.15]\",\n letterSpacing: \"0.01em\",\n }),\n title: style({\n font: \"heading-sm\",\n fontSize: \"[20px]\",\n fontWeight: \"semi-bold\",\n lineHeight: \"[1.2]\",\n letterSpacing: \"0.01em\",\n }),\n headline: style({\n font: \"heading-2xs\",\n fontSize: \"[15px]\",\n fontWeight: \"bold\",\n lineHeight: \"[1.3]\",\n letterSpacing: \"0.01em\",\n }),\n label: style({\n font: \"heading-2xs\",\n fontSize: \"[13.5px]\",\n fontWeight: \"semi-bold\",\n lineHeight: \"[1.15]\",\n letterSpacing: \"0.01em\",\n }),\n body: style({\n font: \"body\",\n lineHeight: \"[1.55]\",\n }),\n meta: style({\n font: \"body-sm\",\n fontSize: \"[12px]\",\n lineHeight: \"[1.5]\",\n color: \"neutral-subdued\",\n }),\n micro: style({\n font: \"code-xs\",\n fontSize: \"[10px]\",\n fontWeight: \"bold\",\n lineHeight: \"[1.2]\",\n letterSpacing: \"0.1em\",\n }),\n terminal: style({\n font: \"code-xs\",\n fontSize: \"[11.5px]\",\n lineHeight: \"[1.95]\",\n }),\n button: style({\n font: \"ui\",\n fontSize: \"[13px]\",\n fontWeight: \"normal\",\n lineHeight: \"[1]\",\n }),\n} as const;\n\nexport type TypeRole = keyof typeof typeRoles;\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Content.tsx\n\n// Port of packages/@react-spectrum/s2/src/Content.tsx.\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { ElementTag } from \"@proyecto-viviana/solidaria-components\";\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport type { StyleString } from \"../style\";\nimport { type BaseContentProps, getContentDomProps, mergeUnsafeClassName } from \"./shared\";\nimport { typeRoles } from \"./type-roles\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface HeadingProps extends BaseContentProps<HTMLHeadingElement> {\n level?: number;\n}\n\n/* Heading carried NO styles of its own: `className()` below composes context styles and\n * UNSAFE_className only, so a bare <Heading> rendered at whatever type the host page\n * happened to set on h1-h4. Any heading face it appeared to have came from the consuming\n * app's own stylesheet; an installed consumer without one got nothing. This gives the\n * component a real default type role.\n *\n * The FACE comes for free: font() routes `heading` to the `display` family\n * (spectrum-theme.ts, fontFamily ternary), so every rung below resolves to the register's\n * display face instead of whatever was inherited.\n *\n * The SIZE has to vary with `level`, and previously did not. One module-level constant was\n * shared by every level, so the register's three pixel tiers — display, title, headline —\n * arrived as three identical lines and the top of the type ladder collapsed. `level` chose\n * the tag and nothing else.\n *\n * The rungs are now the register's roles VERBATIM: h1 → display, h2 → title, h3 →\n * headline, taken from the typeRoles ladder (./type-roles.ts) so the component and the\n * exported role surface can never drift apart. The roles carry the register's exact\n * metrics — 28/20/15px, the INVERTED weight ladder (500/600/700, lighter as it gets\n * bigger), the +0.01em pixel-face tracking — which the earlier nearest-ramp-rung\n * approximation here could only wave at (28.4/19.9/14, Spectrum weights, no tracking).\n *\n * h4+ deliberately share the h3 rung: the register declares three pixel tiers, not six,\n * and inventing rungs below the floor would extend a ladder the design does not have.\n *\n * The role is passed as the FIRST argument to mergeContextStyles below so it stays the\n * base layer: mergeStyles(a, b) resolves later-wins (style/runtime.ts), so Dialog/\n * Popover/ContextualHelp context styles and any local `styles` prop still override it. */\nconst headingStyles = {\n 1: typeRoles.display,\n 2: typeRoles.title,\n 3: typeRoles.headline,\n} as const;\n\nfunction headingStyleForLevel(level: number): StyleString {\n return headingStyles[level === 1 ? 1 : level === 2 ? 2 : 3];\n}\n\nexport const HeadingContext = createContext<SpectrumContextValue<HeadingProps>>(null);\n\nexport function Heading(props: HeadingProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(HeadingContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as HeadingProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"level\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const level = () => local.level ?? 3;\n const tag = () => `h${level()}` as keyof JSX.IntrinsicElements;\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n headingStyleForLevel(level()),\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <ElementTag\n tag={tag()}\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </ElementTag>\n );\n}\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Content.tsx\n\n// Port of packages/@react-spectrum/s2/src/Content.tsx.\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { createIsSkeleton, useInertAttribute, useSkeletonText } from \"../skeleton\";\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { type BaseContentProps, getContentDomProps, mergeUnsafeClassName } from \"./shared\";\nimport { typeRoles } from \"./type-roles\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { joinSlotClass, useSlotValue } from \"@proyecto-viviana/solidaria-components\";\n\n/* Standalone type-role defaults (Glasselated register, mirror panel 09):\n * Text, Content and Keyboard were pure slot markers — bare elements with an\n * empty class that inherit whatever encloses them — so the register's body,\n * meta and terminal roles had no reachable carrier: an app could not ask for\n * \"prose\" or \"mono\" and get it. Each now bakes its role, but ONLY when no\n * slotted context has claimed the element (contextProps == null): inside a\n * Button, MenuItem, Card or any other composing parent, the parent's context\n * IS the styling contract — often deliberately partial so the child inherits\n * the parent's font — and a baked size there would override the host instead\n * of the page. Standalone mapping, per the register's ladder: Content → body\n * (block prose), Text → meta (inline secondary), Keyboard → terminal (mono).\n * When a context exists the default is skipped entirely, so composed\n * behavior is byte-identical to before. */\n\nexport interface TextProps extends BaseContentProps<HTMLSpanElement> {}\n\nexport const TextContext = createContext<SpectrumContextValue<TextProps>>(null);\n\nexport interface HeaderProps extends BaseContentProps<HTMLElement> {}\n\nexport const HeaderContext = createContext<SpectrumContextValue<HeaderProps>>(null);\n\nexport interface ContentProps extends BaseContentProps<HTMLDivElement> {}\n\nexport const ContentContext = createContext<SpectrumContextValue<ContentProps>>(null);\n\nexport interface FooterProps extends BaseContentProps<HTMLElement> {}\n\nexport const FooterContext = createContext<SpectrumContextValue<FooterProps>>(null);\n\nexport function Text(props: TextProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(TextContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as TextProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const slotValue = useSlotValue(() => (typeof local.slot === \"string\" ? local.slot : undefined));\n const isSkeleton = createIsSkeleton();\n const inertRef = useInertAttribute(isSkeleton);\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n const id = () => props.id ?? contextProps?.id;\n const [children, skeletonStyle] = useSkeletonText(() => local.children, unsafeStyle);\n const className = () =>\n joinSlotClass(\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n contextProps == null ? typeRoles.meta : undefined,\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \"),\n slotValue().class,\n );\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <span\n {...getContentDomProps(merged)}\n id={id()}\n ref={mergeContextRefs(contextProps?.ref, props.ref, inertRef)}\n class={className()}\n style={skeletonStyle()}\n slot={local.slot || undefined}\n data-rsp-slot={slotValue()[\"data-rsp-slot\"] ?? \"text\"}\n >\n {children()}\n </span>\n );\n}\n\nexport function Header(props: HeaderProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(HeaderContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as HeaderProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(contextProps?.styles, props.styles),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <header\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </header>\n );\n}\n\nexport function Content(props: ContentProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(ContentContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as ContentProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n contextProps == null ? typeRoles.body : undefined,\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <div\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </div>\n );\n}\n\nexport function Footer(props: FooterProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(FooterContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as FooterProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(contextProps?.styles, props.styles),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <footer\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </footer>\n );\n}\n\nexport { Heading, HeadingContext } from \"./Heading\";\nexport type { HeadingProps } from \"./Heading\";\nexport { Keyboard, KeyboardContext } from \"./Keyboard\";\nexport type { KeyboardProps } from \"./Keyboard\";\nexport { typeRoles } from \"./type-roles\";\nexport type { TypeRole } from \"./type-roles\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,MAAa,YAAY;CACvB,cAAY;CAOZ,cAAY;CAOZ,cAAY;CAOZ,SAAO;CAOP,OAAK;CAOL,UAAQ;CAOR,OAAK;CAOL,MAAI;CAIJ,MAAI;CAMJ,OAAK;CAOL,UAAQ;CAKR,QAAM;AAMR;;;AC/DA,MAAM,gBAAgB;CACpB,GAAG,UAAU;CACb,GAAG,UAAU;CACb,GAAG,UAAU;AACf;AAEA,SAAS,qBAAqB,OAA4B;CACxD,OAAO,cAAc,UAAU,IAAI,IAAI,UAAU,IAAI,IAAI;AAC3D;AAEA,MAAa,iBAAiB,cAAkD,IAAI;AAEpF,SAAgBA,UAAQ,OAAkC;CACxD,MAAM,eAAe,uBAAuB,WAAW,cAAc,GAAG,MAAM,IAAI;CAClF,MAAM,SAAS,WAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,cAAc,MAAM,SAAS;CACnC,MAAM,YAAY,IAAI,MAAM;CAC5B,MAAM,kBACJ,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBACE,qBAAqB,MAAM,CAAC,GAC5B,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAEhG,IAAI,MAAM,UACR,OAAO;CAGT,OACE,CAAC,WACC,KAAK,IAAI,OACL,mBAAmB,MAAM,GAC7B,KAAK,iBAAiB,cAAc,KAAK,MAAM,GAAG,GAClD,OAAO,UAAU,GACjB,OAAO,YAAY,GACnB,MAAM,MAAM,QAAQ,KAAA,GACrB;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;ACvEA,MAAaC,gBAAc,cAA+C,IAAI;AAI9E,MAAa,gBAAgB,cAAiD,IAAI;AAIlF,MAAa,iBAAiB,cAAkD,IAAI;AAIpF,MAAa,gBAAgB,cAAiD,IAAI;AAElF,SAAgBC,OAAK,OAA+B;CAClD,MAAM,eAAe,uBAAuB,WAAWD,aAAW,GAAG,MAAM,IAAI;CAC/E,MAAM,SAAS,WAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,YAAY,mBAAoB,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO,KAAA,CAAU;CAC9F,MAAM,aAAa,iBAAiB;CACpC,MAAM,WAAW,kBAAkB,UAAU;CAC7C,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAChG,MAAM,WAAW,MAAM,MAAM,cAAc;CAC3C,MAAM,CAAC,UAAU,iBAAiB,sBAAsB,MAAM,UAAU,WAAW;CACnF,MAAM,kBACJ,cACE,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBACE,gBAAgB,OAAO,UAAU,OAAO,KAAA,GACxC,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GACX,UAAU,CAAC,CAAC,KACd;CAEF,IAAI,MAAM,UACR,OAAO;CAGT,OACE,CAAC,SACK,mBAAmB,MAAM,GAC7B,IAAI,GAAG,GACP,KAAK,iBAAiB,cAAc,KAAK,MAAM,KAAK,QAAQ,GAC5D,OAAO,UAAU,GACjB,OAAO,cAAc,GACrB,MAAM,MAAM,QAAQ,KAAA,GACpB,eAAe,UAAU,CAAC,CAAC,oBAAoB,QAChD;OACE,SAAS,EAAE;IACd,EAAE;AAEN;AAEA,SAAgB,OAAO,OAAiC;CACtD,MAAM,eAAe,uBAAuB,WAAW,aAAa,GAAG,MAAM,IAAI;CACjF,MAAM,SAAS,WAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,kBACJ,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAEhG,IAAI,MAAM,UACR,OAAO;CAGT,OACE,CAAC,WACK,mBAAmB,MAAM,GAC7B,KAAK,iBAAiB,cAAc,KAAK,MAAM,GAAG,GAClD,OAAO,UAAU,GACjB,OAAO,YAAY,GACnB,MAAM,MAAM,QAAQ,KAAA,GACrB;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;AAEA,SAAgB,QAAQ,OAAkC;CACxD,MAAM,eAAe,uBAAuB,WAAW,cAAc,GAAG,MAAM,IAAI;CAClF,MAAM,SAAS,WAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,kBACJ,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBACE,gBAAgB,OAAO,UAAU,OAAO,KAAA,GACxC,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAEhG,IAAI,MAAM,UACR,OAAO;CAGT,OACE,CAAC,QACK,mBAAmB,MAAM,GAC7B,KAAK,iBAAiB,cAAc,KAAK,MAAM,GAAG,GAClD,OAAO,UAAU,GACjB,OAAO,YAAY,GACnB,MAAM,MAAM,QAAQ,KAAA,GACrB;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;AAEA,SAAgB,OAAO,OAAiC;CACtD,MAAM,eAAe,uBAAuB,WAAW,aAAa,GAAG,MAAM,IAAI;CACjF,MAAM,SAAS,WAAW,gBAAgB,CAAC,GAAG,KAAK;CACnD,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,kBACJ,CACE,qBAAqB,cAAc,kBAAkB,MAAM,gBAAgB,GAC3E,mBAAmB,cAAc,QAAQ,MAAM,MAAM,CACvD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,MAAM,oBAAoB,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAEhG,IAAI,MAAM,UACR,OAAO;CAGT,OACE,CAAC,WACK,mBAAmB,MAAM,GAC7B,KAAK,iBAAiB,cAAc,KAAK,MAAM,GAAG,GAClD,OAAO,UAAU,GACjB,OAAO,YAAY,GACnB,MAAM,MAAM,QAAQ,KAAA,GACrB;OACE,MAAM,SAAS;IAClB,EAAE;AAEN"}
|
|
1
|
+
{"version":3,"file":"text.jsx","names":["Heading","TextContext","Text"],"sources":["../../src/text/type-roles.ts","../../src/text/Heading.tsx","../../src/text/index.tsx"],"sourcesContent":["import { style } from \"../style\" with { type: \"macro\" };\n\n/* The Glasselated register's CLOSED type ladder — twelve roles, no more.\n *\n * The handoff declares each role as one CSS custom property\n * (`--type-display` … `--type-button`, glasselated.css:154-168) so an app can\n * name a role and get it. The library's type lives in the build-time style()\n * macro instead, so this module is the equivalent surface: one precompiled\n * atom string per role, usable through any component's `styles` prop or as a\n * plain class on a bare element. The values are the register's own, verbatim:\n *\n * display-xl 500 66px/0.98 Geist Pixel +0.005em landing hero\n * display-lg 500 56px/1.02 Geist Pixel +0.008em home greeting\n * display-md 500 40px/1.08 Geist Pixel +0.01em page titles\n * display 500 28px/1.15 Geist Pixel +0.01em hero & page titles\n * title 600 20px/1.2 Geist Pixel +0.01em section/panel titles\n * headline 700 15px/1.3 Geist Pixel +0.01em card & list titles\n * label 600 13.5px/1.15 Geist Pixel +0.01em buttons/nav/chips\n * body 400 14px/1.55 Geist prose\n * meta 400 12px/1.5 Geist secondary, `--text-secondary` ink\n * micro 700 10px/1.2 Geist Mono +0.1em below the pixel floor\n * terminal 400 11.5px/1.95 Geist Mono wells & prompts\n * button 400 13px/1 Geist Mono control labels\n *\n * Each role opens with a `font:` shorthand purely to pick up the right FAMILY\n * routing (heading-* → display face, body-* → sans, code-* and ui → mono, see\n * spectrum-theme.ts font()) plus the role's semantic ink; the explicit\n * properties after it then pin size/weight/leading/tracking to the register's\n * exact numbers — shorthands expand first, so later keys win. Arbitrary\n * bracket values are deliberate: the register declares exact pixels, not ramp\n * rungs, and this module IS the register's ladder rather than a consumer of\n * Spectrum's.\n *\n * ELSH INVARIANT: the pixel face squares its terminals through a variation axis that\n * only resolves legibly at 16px and up, so a role may take `--font-display` ONLY at\n * >=16px. That is why the three hero tiers are all Pixel and why `label` (13.5px) is\n * the floor the handoff already calls \"the 13px pixel floor\" — the roles below it\n * (`body`, `meta`, `micro`, `terminal`, `button`) take sans or mono, and any NEW role\n * under 16px must do the same.\n *\n * The weight ladder on the pixel tiers is INVERTED — lighter as it gets\n * bigger (500/600/700) — which font()'s Spectrum weight tokens cannot say;\n * that is why every pixel role restates fontWeight. `meta` is the one role\n * that restates ink: \"secondary\" is part of the role's definition, not a\n * context choice.\n *\n * Faces come from the `--s2-font-family-*` variables, which `viviana-tokens.css`\n * binds at the root (display → Geist Pixel, sans → Geist, code → Geist Mono).\n * An app may rebind one in a narrower scope. */\nexport const typeRoles = {\n \"display-xl\": style({\n font: \"heading-3xl\",\n fontSize: \"[66px]\",\n fontWeight: \"medium\",\n lineHeight: \"[0.98]\",\n letterSpacing: \"0.005em\",\n }),\n \"display-lg\": style({\n font: \"heading-2xl\",\n fontSize: \"[56px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.02]\",\n letterSpacing: \"0.008em\",\n }),\n \"display-md\": style({\n font: \"heading-xl\",\n fontSize: \"[40px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.08]\",\n letterSpacing: \"0.01em\",\n }),\n display: style({\n font: \"heading-lg\",\n fontSize: \"[28px]\",\n fontWeight: \"medium\",\n lineHeight: \"[1.15]\",\n letterSpacing: \"0.01em\",\n }),\n title: style({\n font: \"heading-sm\",\n fontSize: \"[20px]\",\n fontWeight: \"semi-bold\",\n lineHeight: \"[1.2]\",\n letterSpacing: \"0.01em\",\n }),\n headline: style({\n font: \"heading-2xs\",\n fontSize: \"[15px]\",\n fontWeight: \"bold\",\n lineHeight: \"[1.3]\",\n letterSpacing: \"0.01em\",\n }),\n label: style({\n font: \"heading-2xs\",\n fontSize: \"[13.5px]\",\n fontWeight: \"semi-bold\",\n lineHeight: \"[1.15]\",\n letterSpacing: \"0.01em\",\n }),\n body: style({\n font: \"body\",\n lineHeight: \"[1.55]\",\n }),\n meta: style({\n font: \"body-sm\",\n fontSize: \"[12px]\",\n lineHeight: \"[1.5]\",\n color: \"neutral-subdued\",\n }),\n micro: style({\n font: \"code-xs\",\n fontSize: \"[10px]\",\n fontWeight: \"bold\",\n lineHeight: \"[1.2]\",\n letterSpacing: \"0.1em\",\n }),\n terminal: style({\n font: \"code-xs\",\n fontSize: \"[11.5px]\",\n lineHeight: \"[1.95]\",\n }),\n button: style({\n font: \"ui\",\n fontSize: \"[13px]\",\n fontWeight: \"normal\",\n lineHeight: \"[1]\",\n }),\n} as const;\n\nexport type TypeRole = keyof typeof typeRoles;\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Content.tsx\n\n// Port of packages/@react-spectrum/s2/src/Content.tsx.\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { ElementTag } from \"@proyecto-viviana/solidaria-components\";\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport type { StyleString } from \"../style\";\nimport { type BaseContentProps, getContentDomProps, mergeUnsafeClassName } from \"./shared\";\nimport { typeRoles } from \"./type-roles\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface HeadingProps extends BaseContentProps<HTMLHeadingElement> {\n level?: number;\n}\n\n/* Heading carried NO styles of its own: `className()` below composes context styles and\n * UNSAFE_className only, so a bare <Heading> rendered at whatever type the host page\n * happened to set on h1-h4. Any heading face it appeared to have came from the consuming\n * app's own stylesheet; an installed consumer without one got nothing. This gives the\n * component a real default type role.\n *\n * The FACE comes for free: font() routes `heading` to the `display` family\n * (spectrum-theme.ts, fontFamily ternary), so every rung below resolves to the register's\n * display face instead of whatever was inherited.\n *\n * The SIZE has to vary with `level`, and previously did not. One module-level constant was\n * shared by every level, so the register's three pixel tiers — display, title, headline —\n * arrived as three identical lines and the top of the type ladder collapsed. `level` chose\n * the tag and nothing else.\n *\n * The rungs are now the register's roles VERBATIM: h1 → display, h2 → title, h3 →\n * headline, taken from the typeRoles ladder (./type-roles.ts) so the component and the\n * exported role surface can never drift apart. The roles carry the register's exact\n * metrics — 28/20/15px, the INVERTED weight ladder (500/600/700, lighter as it gets\n * bigger), the +0.01em pixel-face tracking — which the earlier nearest-ramp-rung\n * approximation here could only wave at (28.4/19.9/14, Spectrum weights, no tracking).\n *\n * h4+ deliberately share the h3 rung: the register declares three pixel tiers, not six,\n * and inventing rungs below the floor would extend a ladder the design does not have.\n *\n * The role is passed as the FIRST argument to mergeContextStyles below so it stays the\n * base layer: mergeStyles(a, b) resolves later-wins (style/runtime.ts), so Dialog/\n * Popover/ContextualHelp context styles and any local `styles` prop still override it. */\nconst headingStyles = {\n 1: typeRoles.display,\n 2: typeRoles.title,\n 3: typeRoles.headline,\n} as const;\n\nfunction headingStyleForLevel(level: number): StyleString {\n return headingStyles[level === 1 ? 1 : level === 2 ? 2 : 3];\n}\n\nexport const HeadingContext = createContext<SpectrumContextValue<HeadingProps>>(null);\n\nexport function Heading(props: HeadingProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(HeadingContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as HeadingProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"level\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const level = () => local.level ?? 3;\n const tag = () => `h${level()}` as keyof JSX.IntrinsicElements;\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n headingStyleForLevel(level()),\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <ElementTag\n tag={tag()}\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </ElementTag>\n );\n}\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Content.tsx\n\n// Port of packages/@react-spectrum/s2/src/Content.tsx.\n\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { createIsSkeleton, useInertAttribute, useSkeletonText } from \"../skeleton\";\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { type BaseContentProps, getContentDomProps, mergeUnsafeClassName } from \"./shared\";\nimport { typeRoles } from \"./type-roles\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport { joinSlotClass, useSlotValue } from \"@proyecto-viviana/solidaria-components\";\n\n/* Standalone type-role defaults (Glasselated register, mirror panel 09):\n * Text, Content and Keyboard were pure slot markers — bare elements with an\n * empty class that inherit whatever encloses them — so the register's body,\n * meta and terminal roles had no reachable carrier: an app could not ask for\n * \"prose\" or \"mono\" and get it. Each now bakes its role, but ONLY when no\n * slotted context has claimed the element (contextProps == null): inside a\n * Button, MenuItem, Card or any other composing parent, the parent's context\n * IS the styling contract — often deliberately partial so the child inherits\n * the parent's font — and a baked size there would override the host instead\n * of the page. Standalone mapping, per the register's ladder: Content → body\n * (block prose), Text → meta (inline secondary), Keyboard → terminal (mono).\n * When a context exists the default is skipped entirely, so composed\n * behavior is byte-identical to before. */\n\nexport interface TextProps extends BaseContentProps<HTMLSpanElement> {}\n\nexport const TextContext = createContext<SpectrumContextValue<TextProps>>(null);\n\nexport interface HeaderProps extends BaseContentProps<HTMLElement> {}\n\nexport const HeaderContext = createContext<SpectrumContextValue<HeaderProps>>(null);\n\nexport interface ContentProps extends BaseContentProps<HTMLDivElement> {}\n\nexport const ContentContext = createContext<SpectrumContextValue<ContentProps>>(null);\n\nexport interface FooterProps extends BaseContentProps<HTMLElement> {}\n\nexport const FooterContext = createContext<SpectrumContextValue<FooterProps>>(null);\n\nexport function Text(props: TextProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(TextContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as TextProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const slotValue = useSlotValue(() => (typeof local.slot === \"string\" ? local.slot : undefined));\n const isSkeleton = createIsSkeleton();\n const inertRef = useInertAttribute(isSkeleton);\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n const id = () => props.id ?? contextProps?.id;\n const [children, skeletonStyle] = useSkeletonText(() => local.children, unsafeStyle);\n const className = () =>\n joinSlotClass(\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n contextProps == null ? typeRoles.meta : undefined,\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \"),\n slotValue().class,\n );\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <span\n {...getContentDomProps(merged)}\n id={id()}\n ref={mergeContextRefs(contextProps?.ref, props.ref, inertRef)}\n class={className()}\n style={skeletonStyle()}\n slot={local.slot || undefined}\n data-rsp-slot={slotValue()[\"data-rsp-slot\"] ?? \"text\"}\n >\n {children()}\n </span>\n );\n}\n\nexport function Header(props: HeaderProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(HeaderContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as HeaderProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(contextProps?.styles, props.styles),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <header\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </header>\n );\n}\n\nexport function Content(props: ContentProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(ContentContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as ContentProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(\n contextProps == null ? typeRoles.body : undefined,\n mergeContextStyles(contextProps?.styles, props.styles),\n ),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <div\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </div>\n );\n}\n\nexport function Footer(props: FooterProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(FooterContext), props.slot);\n const merged = mergeProps(contextProps ?? {}, props) as FooterProps;\n const [local] = splitProps(merged, [\n \"children\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"isHidden\",\n \"slot\",\n \"ref\",\n ]);\n const className = () =>\n [\n mergeUnsafeClassName(contextProps?.UNSAFE_className, props.UNSAFE_className),\n mergeContextStyles(contextProps?.styles, props.styles),\n ]\n .filter(Boolean)\n .join(\" \");\n const unsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n if (local.isHidden) {\n return null as unknown as JSX.Element;\n }\n\n return (\n <footer\n {...getContentDomProps(merged)}\n ref={mergeContextRefs(contextProps?.ref, props.ref)}\n class={className()}\n style={unsafeStyle()}\n slot={local.slot || undefined}\n >\n {local.children}\n </footer>\n );\n}\n\nexport { Heading, HeadingContext } from \"./Heading\";\nexport type { HeadingProps } from \"./Heading\";\nexport { Keyboard, KeyboardContext } from \"./Keyboard\";\nexport type { KeyboardProps } from \"./Keyboard\";\nexport { typeRoles } from \"./type-roles\";\nexport type { TypeRole } from \"./type-roles\";\n"],"mappings":"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"}
|
package/dist/dropzone/index.d.ts
CHANGED
|
@@ -4,9 +4,14 @@ import type { StyleString } from "../style";
|
|
|
4
4
|
import type { StylesPropWithHeight, UnsafeClassName } from "../s2-internal/style-utils";
|
|
5
5
|
import { type RefLike, type SpectrumContextValue } from "../button/spectrum-context";
|
|
6
6
|
export type DropZoneSize = "S" | "M" | "L";
|
|
7
|
-
export interface DropZoneProps extends Omit<HeadlessDropZoneProps, "class" | "style" | "children" | "
|
|
7
|
+
export interface DropZoneProps extends Omit<HeadlessDropZoneProps, "class" | "style" | "children" | "onHoverStart" | "onHoverEnd" | "onHoverChange" | "slot" | "ref"> {
|
|
8
8
|
/** The content to display in the DropZone. */
|
|
9
9
|
children: JSX.Element;
|
|
10
|
+
/**
|
|
11
|
+
* Whether the DropZone refuses drops and pastes. Beyond S2, whose DropZone
|
|
12
|
+
* omits it; the headless DropZone implements it.
|
|
13
|
+
*/
|
|
14
|
+
isDisabled?: boolean;
|
|
10
15
|
/** Whether the DropZone already contains a file. Shows the replace message while dragging. */
|
|
11
16
|
isFilled?: boolean;
|
|
12
17
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dropzone/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAEL,KAAK,aAAa,IAAI,qBAAqB,EAE5C,MAAM,wCAAwC,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAExF,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAKpC,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dropzone/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAEL,KAAK,aAAa,IAAI,qBAAqB,EAE5C,MAAM,wCAAwC,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAExF,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAKpC,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,qBAAqB,EACrB,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,GAAG,eAAe,GAAG,MAAM,GAAG,KAAK,CAClG;IACC,8CAA8C;IAC9C,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gEAAgE;IAChE,MAAM,CAAC,EAAE,oBAAoB,GAAG,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC;IAChE,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC5C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,iEAA2D,CAAC;AAuExF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA+E1D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/dropzone/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/DropZone.tsx\n\n// Port of packages/@react-spectrum/s2/src/DropZone.tsx.\n\nimport { Show, createContext, createSignal, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n DropZone as HeadlessDropZone,\n type DropZoneProps as HeadlessDropZoneProps,\n type DropZoneRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { mergeProps, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport type { StylesPropWithHeight, UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides, wellScan } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type RefLike,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { IllustratedMessageContext } from \"../illustratedmessage\";\nimport { s2IntlStrings } from \"../intl\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type DropZoneSize = \"S\" | \"M\" | \"L\";\n\nexport interface DropZoneProps extends Omit<\n HeadlessDropZoneProps,\n | \"class\"\n | \"style\"\n | \"children\"\n | \"isDisabled\"\n | \"onHoverStart\"\n | \"onHoverEnd\"\n | \"onHoverChange\"\n | \"slot\"\n | \"ref\"\n> {\n /** The content to display in the DropZone. */\n children: JSX.Element;\n /** Whether the DropZone already contains a file. Shows the replace message while dragging. */\n isFilled?: boolean;\n /**\n * The message shown while dragging over a filled DropZone.\n * @default 'Drop file to replace'\n */\n replaceMessage?: string;\n /**\n * The DropZone size.\n * @default 'M'\n */\n size?: DropZoneSize;\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight | (() => StyleString | undefined);\n /** Additional CSS class name. Use only as a last resort. */\n UNSAFE_className?: UnsafeClassName | string;\n /** Additional inline styles. Use only as a last resort. */\n UNSAFE_style?: JSX.CSSProperties;\n slot?: string | null;\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport const DropZoneContext = createContext<SpectrumContextValue<DropZoneProps>>(null);\n\n/* Viviana UI v2 (Glasselated): the handoff ships no drop zone, so this row takes the\n * nearest specified sibling — the matte WELL (TerminalGlassLab.tsx:280). A drop zone is\n * a well that happens to be waiting for a file, so it gets the well fill, the well rim\n * and the well's scan dither, and keeps S2's dashed rim as the \"empty, drop here\" tell.\n * The scan is restated through `wellScan()` here rather than through\n * `control({ register: \"matte\" })` because this is a SURFACE, not a control: it has no\n * control height, font or padding ramp to inherit.\n *\n * Drop-active is the register's STRUCTURE cyan (`--status-metric`) — the drop target is\n * a boundary the drag has entered, not a reward (yellow) or a fault (red) — drawn as a\n * solid ring over a faint cyan wash so the rim reads as a hard edge and the fill only\n * hints. The wash mixes INTO `--surface-well` rather than into `transparent`: mixing\n * toward transparent drops the well ground for as long as the drag is over the zone, so\n * the surface would blink out at exactly the moment it is being pointed at.\n * Focus stays on `--border-focus` with the existing focus handling untouched. */\nconst dropzone = style<DropZoneRenderProps>(\n {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"relative\",\n fontFamily: \"sans\",\n color: \"gray-900\",\n borderStyle: {\n default: \"dashed\",\n isDropTarget: \"solid\",\n },\n backgroundColor: {\n default: \"well\",\n isDropTarget: \"[color-mix(in srgb, var(--status-metric) 12%, var(--surface-well))]\",\n },\n ...wellScan(),\n borderWidth: 1,\n borderColor: {\n default: \"well-border\",\n isDropTarget: \"[var(--status-metric)]\",\n isFocusVisible: \"[var(--border-focus)]\",\n },\n borderRadius: \"card\",\n padding: 24,\n boxSizing: \"border-box\",\n },\n getAllowedOverrides({ height: true }),\n);\n\nconst banner = style<{ size: DropZoneSize }>({\n position: \"absolute\",\n left: 0,\n right: 0,\n marginX: \"auto\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: 20,\n width: \"fit\",\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208,\n },\n },\n backgroundColor: \"accent\",\n borderRadius: \"default\",\n color: \"white\",\n fontWeight: \"bold\",\n padding: \"[calc((self(minHeight))/1.5)]\",\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport function DropZone(props: DropZoneProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(DropZoneContext), props.slot);\n const merged = mergeProps<DropZoneProps>(contextProps ?? {}, props);\n const [local, headlessProps] = splitProps(merged, [\n \"children\",\n \"isFilled\",\n \"replaceMessage\",\n \"size\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"slot\",\n \"ref\",\n \"id\",\n \"aria-describedby\",\n \"aria-details\",\n ]);\n const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n const size = () => local.size ?? \"M\";\n const [isDropTarget, setIsDropTarget] = createSignal(false, { ownedWrite: true });\n let previousIsDropTarget = false;\n const syncIsDropTarget = (nextIsDropTarget: boolean) => {\n if (previousIsDropTarget !== nextIsDropTarget) {\n previousIsDropTarget = nextIsDropTarget;\n setIsDropTarget(nextIsDropTarget);\n }\n };\n const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n const mergedUnsafeStyle = () =>\n mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n return (\n <HeadlessDropZone\n {...headlessProps}\n ref={mergeContextRefs(\n (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n props.ref,\n )}\n class={(renderProps) =>\n [\n contextProps?.UNSAFE_className,\n local.UNSAFE_className,\n dropzone(renderProps, mergedStyles()),\n ]\n .filter(Boolean)\n .join(\" \")\n }\n style={mergedUnsafeStyle()}\n slot={local.slot ?? undefined}\n >\n {(renderProps) => {\n syncIsDropTarget(renderProps.isDropTarget);\n return (\n <>\n <IllustratedMessageContext\n value={{\n isInDropZone: true,\n get isDropTarget() {\n return isDropTarget();\n },\n get size() {\n return size();\n },\n }}\n >\n {local.children}\n </IllustratedMessageContext>\n <Show when={renderProps.isDropTarget && local.isFilled}>\n <div class={banner({ size: size() })}>\n <span>\n {local.replaceMessage ?? stringFormatter().format(\"dropzone.replaceMessage\")}\n </span>\n </div>\n </Show>\n </>\n );\n }}\n </HeadlessDropZone>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8EA,MAAa,kBAAkB,cAAmD,IAAA;AAiBlF,MAAM,WAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BN,MAAM,SAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BN,SAAgB,SAAS,OAA2B;CAClD,MAAM,eAAe,uBAAuB,WAAW,eAAA,GAAkB,MAAM,IAAI;CACnF,MAAM,SAAS,aAA0B,gBAAgB,CAAC,GAAG,KAAA;CAC7D,MAAM,CAAC,OAAO,iBAAiB,WAAW,QAAQ;EAChD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,CAAA;CACD,MAAM,kBAAkB,sBAAsB,eAAe,oBAAA;CAC7D,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,CAAC,cAAc,mBAAmB,aAAa,OAAO,EAAE,YAAY,KAAK,CAAA;CAC/E,IAAI,uBAAuB;CAC3B,MAAM,oBAAoB,qBAAyB;EACjD,IAAI,yBAAyB,kBAAkB;GAC7C,uBAAuB;GACvB,gBAAgB,gBAAA;EAClB;CACF;CACA,MAAM,qBAAqB,mBAAmB,cAAc,QAAQ,MAAM,MAAM;CAChF,MAAM,0BACJ,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAKpE,IAAA,QAAK,iBACF,cAA2D,KAC5D,MAAM,GAAG;CALf,OAAO,gBAAA,YAAA,WAEC,eAFD;EAGH,IAAA,IAAA;GAEW,CAAA,OAAA,UAAA,cAAA,MAAA,QAAA,KAAA,MAFX,SAAA,OAAA,EAEW;;EAEX,QAAQ,gBACN;GACE,cAAc;GACd,MAAM;GACN,SAAS,aAAa,aAAA,CAAA;EACvB,CAAA,CACE,OAAO,OAAA,CAAA,CACP,KAAK,GAAA;EAEV,IAAA,QAAA;GAAO,OAAA,kBAAA;EAAA;EACP,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAA;EAjBjB,WAmBD,gBAAA;GACA,iBAAiB,YAAY,YAAY;GACzC,OACI,CACA,gBAAA,2BAAA;IACE,OAAO;KACL,cAAc;KACd,IAAI,eAAe;MACjB,OAAO,aAAA;KACT;KACA,IAAI,OAAO;MACT,OAAO,KAAA;KACT;IACF;IATF,IAAA,WAAA;KAWG,OAAA,MAAM;IACP;GACF,CAAA,GAAA,gBAAA,MAAA;IAAM,IAAA,OAAA;KAAM,OAAA,WAAA;MAAY,OAAA,CAAA,CAAA,YAAA;KAAsB,CAAA,CAAQ,CAAR,IAAN,MAAM,WAAlC,YAAY;IAA8B;IAAtD,IAAA,WAAA;KACE,IAAA,OAAA,eAAA,MAIE;KAHA,IAAA,QAAA,KAAA;KACE,OAAA,OAAA,YAAA;MAAC,OAAA,MAAM,kBAAkB,gBAAA,CAAA,CAAkB,OAAO,yBAAA;KAAA,CAAA,CAClD;KAHC,aAAA,YAAO,OAAO,EAAE,MAAM,KAAA,EAAO,CAAA,CAAA,IAA7B,KAAA,QAAA;MAA6B,UAAA,MAAA,KAAA,GAAA;;KADpC,OACE;IAKA;GAnBF,CAAA,CAAA;EAsBN;CACA,CAAA,CAAA;AAEN"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/dropzone/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/DropZone.tsx\n\n// Port of packages/@react-spectrum/s2/src/DropZone.tsx.\n\nimport { Show, createContext, createSignal, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n DropZone as HeadlessDropZone,\n type DropZoneProps as HeadlessDropZoneProps,\n type DropZoneRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { mergeProps, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport type { StylesPropWithHeight, UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides, wellScan } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type RefLike,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { IllustratedMessageContext } from \"../illustratedmessage\";\nimport { s2IntlStrings } from \"../intl\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type DropZoneSize = \"S\" | \"M\" | \"L\";\n\nexport interface DropZoneProps extends Omit<\n HeadlessDropZoneProps,\n \"class\" | \"style\" | \"children\" | \"onHoverStart\" | \"onHoverEnd\" | \"onHoverChange\" | \"slot\" | \"ref\"\n> {\n /** The content to display in the DropZone. */\n children: JSX.Element;\n /**\n * Whether the DropZone refuses drops and pastes. Beyond S2, whose DropZone\n * omits it; the headless DropZone implements it.\n */\n isDisabled?: boolean;\n /** Whether the DropZone already contains a file. Shows the replace message while dragging. */\n isFilled?: boolean;\n /**\n * The message shown while dragging over a filled DropZone.\n * @default 'Drop file to replace'\n */\n replaceMessage?: string;\n /**\n * The DropZone size.\n * @default 'M'\n */\n size?: DropZoneSize;\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight | (() => StyleString | undefined);\n /** Additional CSS class name. Use only as a last resort. */\n UNSAFE_className?: UnsafeClassName | string;\n /** Additional inline styles. Use only as a last resort. */\n UNSAFE_style?: JSX.CSSProperties;\n slot?: string | null;\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport const DropZoneContext = createContext<SpectrumContextValue<DropZoneProps>>(null);\n\n/* Viviana UI v2 (Glasselated): the handoff ships no drop zone, so this row takes the\n * nearest specified sibling — the matte WELL (TerminalGlassLab.tsx:280). A drop zone is\n * a well that happens to be waiting for a file, so it gets the well fill, the well rim\n * and the well's scan dither, and keeps S2's dashed rim as the \"empty, drop here\" tell.\n * The scan is restated through `wellScan()` here rather than through\n * `control({ register: \"matte\" })` because this is a SURFACE, not a control: it has no\n * control height, font or padding ramp to inherit.\n *\n * Drop-active is the register's STRUCTURE cyan (`--status-metric`) — the drop target is\n * a boundary the drag has entered, not a reward (yellow) or a fault (red) — drawn as a\n * solid ring over a faint cyan wash so the rim reads as a hard edge and the fill only\n * hints. The wash mixes INTO `--surface-well` rather than into `transparent`: mixing\n * toward transparent drops the well ground for as long as the drag is over the zone, so\n * the surface would blink out at exactly the moment it is being pointed at.\n * Focus stays on `--border-focus` with the existing focus handling untouched. */\nconst dropzone = style<DropZoneRenderProps>(\n {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"relative\",\n fontFamily: \"sans\",\n color: \"gray-900\",\n borderStyle: {\n default: \"dashed\",\n isDropTarget: \"solid\",\n },\n backgroundColor: {\n default: \"well\",\n isDropTarget: \"[color-mix(in srgb, var(--status-metric) 12%, var(--surface-well))]\",\n },\n ...wellScan(),\n borderWidth: 1,\n borderColor: {\n default: \"well-border\",\n isDropTarget: \"[var(--status-metric)]\",\n isFocusVisible: \"[var(--border-focus)]\",\n },\n borderRadius: \"card\",\n padding: 24,\n boxSizing: \"border-box\",\n },\n getAllowedOverrides({ height: true }),\n);\n\nconst banner = style<{ size: DropZoneSize }>({\n position: \"absolute\",\n left: 0,\n right: 0,\n marginX: \"auto\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: 20,\n width: \"fit\",\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208,\n },\n },\n backgroundColor: \"accent\",\n borderRadius: \"default\",\n color: \"white\",\n fontWeight: \"bold\",\n padding: \"[calc((self(minHeight))/1.5)]\",\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport function DropZone(props: DropZoneProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(DropZoneContext), props.slot);\n const merged = mergeProps<DropZoneProps>(contextProps ?? {}, props);\n const [local, headlessProps] = splitProps(merged, [\n \"children\",\n \"isFilled\",\n \"replaceMessage\",\n \"size\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"slot\",\n \"ref\",\n \"id\",\n \"aria-describedby\",\n \"aria-details\",\n ]);\n const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n const size = () => local.size ?? \"M\";\n const [isDropTarget, setIsDropTarget] = createSignal(false, { ownedWrite: true });\n let previousIsDropTarget = false;\n const syncIsDropTarget = (nextIsDropTarget: boolean) => {\n if (previousIsDropTarget !== nextIsDropTarget) {\n previousIsDropTarget = nextIsDropTarget;\n setIsDropTarget(nextIsDropTarget);\n }\n };\n const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n const mergedUnsafeStyle = () =>\n mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n return (\n <HeadlessDropZone\n {...headlessProps}\n ref={mergeContextRefs(\n (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n props.ref,\n )}\n class={(renderProps) =>\n [\n contextProps?.UNSAFE_className,\n local.UNSAFE_className,\n dropzone(renderProps, mergedStyles()),\n ]\n .filter(Boolean)\n .join(\" \")\n }\n style={mergedUnsafeStyle()}\n slot={local.slot ?? undefined}\n >\n {(renderProps) => {\n syncIsDropTarget(renderProps.isDropTarget);\n return (\n <>\n <IllustratedMessageContext\n value={{\n isInDropZone: true,\n get isDropTarget() {\n return isDropTarget();\n },\n get size() {\n return size();\n },\n }}\n >\n {local.children}\n </IllustratedMessageContext>\n <Show when={renderProps.isDropTarget && local.isFilled}>\n <div class={banner({ size: size() })}>\n <span>\n {local.replaceMessage ?? stringFormatter().format(\"dropzone.replaceMessage\")}\n </span>\n </div>\n </Show>\n </>\n );\n }}\n </HeadlessDropZone>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2EA,MAAa,kBAAkB,cAAmD,IAAA;AAiBlF,MAAM,WAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BN,MAAM,SAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BN,SAAgB,SAAS,OAA2B;CAClD,MAAM,eAAe,uBAAuB,WAAW,eAAA,GAAkB,MAAM,IAAI;CACnF,MAAM,SAAS,aAA0B,gBAAgB,CAAC,GAAG,KAAA;CAC7D,MAAM,CAAC,OAAO,iBAAiB,WAAW,QAAQ;EAChD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,CAAA;CACD,MAAM,kBAAkB,sBAAsB,eAAe,oBAAA;CAC7D,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,CAAC,cAAc,mBAAmB,aAAa,OAAO,EAAE,YAAY,KAAK,CAAA;CAC/E,IAAI,uBAAuB;CAC3B,MAAM,oBAAoB,qBAAyB;EACjD,IAAI,yBAAyB,kBAAkB;GAC7C,uBAAuB;GACvB,gBAAgB,gBAAA;EAClB;CACF;CACA,MAAM,qBAAqB,mBAAmB,cAAc,QAAQ,MAAM,MAAM;CAChF,MAAM,0BACJ,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAKpE,IAAA,QAAK,iBACF,cAA2D,KAC5D,MAAM,GAAG;CALf,OAAO,gBAAA,YAAA,WAEC,eAFD;EAGH,IAAA,IAAA;GAEW,CAAA,OAAA,UAAA,cAAA,MAAA,QAAA,KAAA,MAFX,SAAA,OAAA,EAEW;;EAEX,QAAQ,gBACN;GACE,cAAc;GACd,MAAM;GACN,SAAS,aAAa,aAAA,CAAA;EACvB,CAAA,CACE,OAAO,OAAA,CAAA,CACP,KAAK,GAAA;EAEV,IAAA,QAAA;GAAO,OAAA,kBAAA;EAAA;EACP,IAAA,OAAA;GAAM,OAAA,MAAM,QAAQ,KAAA;EAAA;EAjBjB,WAmBD,gBAAA;GACA,iBAAiB,YAAY,YAAY;GACzC,OACI,CACA,gBAAA,2BAAA;IACE,OAAO;KACL,cAAc;KACd,IAAI,eAAe;MACjB,OAAO,aAAA;KACT;KACA,IAAI,OAAO;MACT,OAAO,KAAA;KACT;IACF;IATF,IAAA,WAAA;KAWG,OAAA,MAAM;IACP;GACF,CAAA,GAAA,gBAAA,MAAA;IAAM,IAAA,OAAA;KAAM,OAAA,WAAA;MAAY,OAAA,CAAA,CAAA,YAAA;KAAsB,CAAA,CAAQ,CAAR,IAAN,MAAM,WAAlC,YAAY;IAA8B;IAAtD,IAAA,WAAA;KACE,IAAA,OAAA,eAAA,MAIE;KAHA,IAAA,QAAA,KAAA;KACE,OAAA,OAAA,YAAA;MAAC,OAAA,MAAM,kBAAkB,gBAAA,CAAA,CAAkB,OAAO,yBAAA;KAAA,CAAA,CAClD;KAHC,aAAA,YAAO,OAAO,EAAE,MAAM,KAAA,EAAO,CAAA,CAAA,IAA7B,KAAA,QAAA;MAA6B,UAAA,MAAA,KAAA,GAAA;;KADpC,OACE;IAKA;GAnBF,CAAA,CAAA;EAsBN;CACA,CAAA,CAAA;AAEN"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.jsx","names":[],"sources":["../../src/dropzone/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/DropZone.tsx\n\n// Port of packages/@react-spectrum/s2/src/DropZone.tsx.\n\nimport { Show, createContext, createSignal, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n DropZone as HeadlessDropZone,\n type DropZoneProps as HeadlessDropZoneProps,\n type DropZoneRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { mergeProps, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport type { StylesPropWithHeight, UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides, wellScan } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type RefLike,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { IllustratedMessageContext } from \"../illustratedmessage\";\nimport { s2IntlStrings } from \"../intl\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type DropZoneSize = \"S\" | \"M\" | \"L\";\n\nexport interface DropZoneProps extends Omit<\n HeadlessDropZoneProps,\n
|
|
1
|
+
{"version":3,"file":"index.jsx","names":[],"sources":["../../src/dropzone/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/DropZone.tsx\n\n// Port of packages/@react-spectrum/s2/src/DropZone.tsx.\n\nimport { Show, createContext, createSignal, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n DropZone as HeadlessDropZone,\n type DropZoneProps as HeadlessDropZoneProps,\n type DropZoneRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { mergeProps, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport type { StylesPropWithHeight, UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides, wellScan } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport {\n getSlottedContextProps,\n mergeContextRefs,\n mergeContextStyles,\n mergeContextUnsafeStyle,\n type RefLike,\n type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { IllustratedMessageContext } from \"../illustratedmessage\";\nimport { s2IntlStrings } from \"../intl\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type DropZoneSize = \"S\" | \"M\" | \"L\";\n\nexport interface DropZoneProps extends Omit<\n HeadlessDropZoneProps,\n \"class\" | \"style\" | \"children\" | \"onHoverStart\" | \"onHoverEnd\" | \"onHoverChange\" | \"slot\" | \"ref\"\n> {\n /** The content to display in the DropZone. */\n children: JSX.Element;\n /**\n * Whether the DropZone refuses drops and pastes. Beyond S2, whose DropZone\n * omits it; the headless DropZone implements it.\n */\n isDisabled?: boolean;\n /** Whether the DropZone already contains a file. Shows the replace message while dragging. */\n isFilled?: boolean;\n /**\n * The message shown while dragging over a filled DropZone.\n * @default 'Drop file to replace'\n */\n replaceMessage?: string;\n /**\n * The DropZone size.\n * @default 'M'\n */\n size?: DropZoneSize;\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight | (() => StyleString | undefined);\n /** Additional CSS class name. Use only as a last resort. */\n UNSAFE_className?: UnsafeClassName | string;\n /** Additional inline styles. Use only as a last resort. */\n UNSAFE_style?: JSX.CSSProperties;\n slot?: string | null;\n ref?: RefLike<HTMLDivElement>;\n}\n\nexport const DropZoneContext = createContext<SpectrumContextValue<DropZoneProps>>(null);\n\n/* Viviana UI v2 (Glasselated): the handoff ships no drop zone, so this row takes the\n * nearest specified sibling — the matte WELL (TerminalGlassLab.tsx:280). A drop zone is\n * a well that happens to be waiting for a file, so it gets the well fill, the well rim\n * and the well's scan dither, and keeps S2's dashed rim as the \"empty, drop here\" tell.\n * The scan is restated through `wellScan()` here rather than through\n * `control({ register: \"matte\" })` because this is a SURFACE, not a control: it has no\n * control height, font or padding ramp to inherit.\n *\n * Drop-active is the register's STRUCTURE cyan (`--status-metric`) — the drop target is\n * a boundary the drag has entered, not a reward (yellow) or a fault (red) — drawn as a\n * solid ring over a faint cyan wash so the rim reads as a hard edge and the fill only\n * hints. The wash mixes INTO `--surface-well` rather than into `transparent`: mixing\n * toward transparent drops the well ground for as long as the drag is over the zone, so\n * the surface would blink out at exactly the moment it is being pointed at.\n * Focus stays on `--border-focus` with the existing focus handling untouched. */\nconst dropzone = style<DropZoneRenderProps>(\n {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"relative\",\n fontFamily: \"sans\",\n color: \"gray-900\",\n borderStyle: {\n default: \"dashed\",\n isDropTarget: \"solid\",\n },\n backgroundColor: {\n default: \"well\",\n isDropTarget: \"[color-mix(in srgb, var(--status-metric) 12%, var(--surface-well))]\",\n },\n ...wellScan(),\n borderWidth: 1,\n borderColor: {\n default: \"well-border\",\n isDropTarget: \"[var(--status-metric)]\",\n isFocusVisible: \"[var(--border-focus)]\",\n },\n borderRadius: \"card\",\n padding: 24,\n boxSizing: \"border-box\",\n },\n getAllowedOverrides({ height: true }),\n);\n\nconst banner = style<{ size: DropZoneSize }>({\n position: \"absolute\",\n left: 0,\n right: 0,\n marginX: \"auto\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minHeight: 20,\n width: \"fit\",\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208,\n },\n },\n backgroundColor: \"accent\",\n borderRadius: \"default\",\n color: \"white\",\n fontWeight: \"bold\",\n padding: \"[calc((self(minHeight))/1.5)]\",\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport function DropZone(props: DropZoneProps): JSX.Element {\n const contextProps = getSlottedContextProps(useContext(DropZoneContext), props.slot);\n const merged = mergeProps<DropZoneProps>(contextProps ?? {}, props);\n const [local, headlessProps] = splitProps(merged, [\n \"children\",\n \"isFilled\",\n \"replaceMessage\",\n \"size\",\n \"styles\",\n \"UNSAFE_className\",\n \"UNSAFE_style\",\n \"slot\",\n \"ref\",\n \"id\",\n \"aria-describedby\",\n \"aria-details\",\n ]);\n const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n const size = () => local.size ?? \"M\";\n const [isDropTarget, setIsDropTarget] = createSignal(false, { ownedWrite: true });\n let previousIsDropTarget = false;\n const syncIsDropTarget = (nextIsDropTarget: boolean) => {\n if (previousIsDropTarget !== nextIsDropTarget) {\n previousIsDropTarget = nextIsDropTarget;\n setIsDropTarget(nextIsDropTarget);\n }\n };\n const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n const mergedUnsafeStyle = () =>\n mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n return (\n <HeadlessDropZone\n {...headlessProps}\n ref={mergeContextRefs(\n (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n props.ref,\n )}\n class={(renderProps) =>\n [\n contextProps?.UNSAFE_className,\n local.UNSAFE_className,\n dropzone(renderProps, mergedStyles()),\n ]\n .filter(Boolean)\n .join(\" \")\n }\n style={mergedUnsafeStyle()}\n slot={local.slot ?? undefined}\n >\n {(renderProps) => {\n syncIsDropTarget(renderProps.isDropTarget);\n return (\n <>\n <IllustratedMessageContext\n value={{\n isInDropZone: true,\n get isDropTarget() {\n return isDropTarget();\n },\n get size() {\n return size();\n },\n }}\n >\n {local.children}\n </IllustratedMessageContext>\n <Show when={renderProps.isDropTarget && local.isFilled}>\n <div class={banner({ size: size() })}>\n <span>\n {local.replaceMessage ?? stringFormatter().format(\"dropzone.replaceMessage\")}\n </span>\n </div>\n </Show>\n </>\n );\n }}\n </HeadlessDropZone>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2EA,MAAa,kBAAkB,cAAmD,IAAA;AAiBlF,MAAM,WAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BN,MAAM,SAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BN,SAAgB,SAAS,OAA2B;CAClD,MAAM,eAAe,uBAAuB,WAAW,eAAA,GAAkB,MAAM,IAAI;CACnF,MAAM,SAAS,aAA0B,gBAAgB,CAAC,GAAG,KAAA;CAC7D,MAAM,CAAC,OAAO,iBAAiB,WAAW,QAAQ;EAChD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,CAAA;CACD,MAAM,kBAAkB,sBAAsB,eAAe,oBAAA;CAC7D,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,CAAC,cAAc,mBAAmB,aAAa,OAAO,EAAE,YAAY,KAAK,CAAA;CAC/E,IAAI,uBAAuB;CAC3B,MAAM,oBAAoB,qBAAyB;EACjD,IAAI,yBAAyB,kBAAkB;GAC7C,uBAAuB;GACvB,gBAAgB,gBAAA;EAClB;CACF;CACA,MAAM,qBAAqB,mBAAmB,cAAc,QAAQ,MAAM,MAAM;CAChF,MAAM,0BACJ,wBAAwB,cAAc,cAAc,MAAM,YAAY;CAExE,OAAO,CACJ,eACK,eACJ,KAAK,iBACF,cAA2D,KAC5D,MAAM,GAAG,GAEX,QAAQ,gBACN;EACE,cAAc;EACd,MAAM;EACN,SAAS,aAAa,aAAA,CAAA;CACvB,CAAA,CACE,OAAO,OAAA,CAAA,CACP,KAAK,GAAA,GAEV,OAAO,kBAAA,GACP,MAAM,MAAM,QAAQ,KAAA,GACrB;QACG,gBAAA;EACA,iBAAiB,YAAY,YAAY;EACzC,OAAO,EACH;YACA,CAAC,0BACC,OAAO;GACL,cAAc;GACd,IAAI,eAAe;IACjB,OAAO,aAAA;GACT;GACA,IAAI,OAAO;IACT,OAAO,KAAA;GACT;EACF,GACD;eACE,MAAM,SAAS;YAClB,EAAE,0BAA0B;YAC5B,CAAC,KAAK,MAAM,YAAY,gBAAgB,MAAM,UAAU;cACtD,CAAC,IAAI,OAAO,OAAO,EAAE,MAAM,KAAA,EAAO,CAAA,GAAI;gBACpC,CAAC,KAAK;mBACH,MAAM,kBAAkB,gBAAA,CAAA,CAAkB,OAAO,yBAAA,EAA2B;gBAC/E,EAAE,KAAK;cACT,EAAE,IAAI;YACR,EAAE,KAAK;UACT;CAEJ,EAAE;IACJ,EAAE;AAEN"}
|