@adea-ai/ui 0.130.4 → 0.131.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -0
- package/dist/components/composites/appearance-editor/accent-swatch-groups.d.ts +7 -0
- package/dist/components/composites/appearance-editor/accent-swatch-groups.d.ts.map +1 -1
- package/dist/components/composites/appearance-editor/accent-swatch-groups.js +39 -13
- package/dist/components/composites/appearance-editor/accent-swatch-groups.js.map +1 -1
- package/dist/components/composites/appearance-editor/appearance-choices.d.ts.map +1 -1
- package/dist/components/composites/appearance-editor/appearance-choices.js +222 -116
- package/dist/components/composites/appearance-editor/appearance-choices.js.map +1 -1
- package/dist/components/composites/appearance-editor/appearance-editor.d.ts.map +1 -1
- package/dist/components/composites/appearance-editor/appearance-editor.js +6 -1
- package/dist/components/composites/appearance-editor/appearance-editor.js.map +1 -1
- package/dist/components/composites/appearance-editor/appearance-types.d.ts +22 -3
- package/dist/components/composites/appearance-editor/appearance-types.d.ts.map +1 -1
- package/dist/components/ui/accordion/accordion.d.ts.map +1 -1
- package/dist/components/ui/accordion/accordion.js +1 -1
- package/dist/components/ui/accordion/accordion.js.map +1 -1
- package/dist/components/ui/radio-group/radio-group.d.ts +3 -1
- package/dist/components/ui/radio-group/radio-group.d.ts.map +1 -1
- package/dist/components/ui/radio-group/radio-group.js +3 -1
- package/dist/components/ui/radio-group/radio-group.js.map +1 -1
- package/dist/lib/accent-presets.d.ts +7 -0
- package/dist/lib/accent-presets.d.ts.map +1 -1
- package/dist/lib/accent-presets.js +2 -2
- package/dist/lib/accent-presets.js.map +1 -1
- package/dist/lib/theme-projection.d.ts +23 -0
- package/dist/lib/theme-projection.d.ts.map +1 -0
- package/dist/lib/theme-projection.js +48 -0
- package/dist/lib/theme-projection.js.map +1 -0
- package/dist/lib/theme-records.d.ts +2 -0
- package/dist/lib/theme-records.d.ts.map +1 -1
- package/dist/lib/theme-records.js.map +1 -1
- package/dist/r/lib.json +5 -0
- package/dist/r/registry.json +5 -0
- package/dist/r/src/components/composites/appearance-editor/accent-swatch-groups.tsx +44 -10
- package/dist/r/src/components/composites/appearance-editor/appearance-choices.tsx +158 -80
- package/dist/r/src/components/composites/appearance-editor/appearance-editor.tsx +7 -2
- package/dist/r/src/components/composites/appearance-editor/appearance-types.ts +22 -3
- package/dist/r/src/components/ui/accordion/accordion.tsx +5 -1
- package/dist/r/src/components/ui/radio-group/radio-group.tsx +10 -2
- package/dist/r/src/lib/accent-presets.ts +8 -0
- package/dist/r/src/lib/theme-projection.ts +52 -0
- package/dist/r/src/lib/theme-records.ts +3 -0
- package/package.json +1 -1
- package/registry.json +5 -0
- package/src/components/composites/appearance-editor/accent-swatch-groups.tsx +44 -10
- package/src/components/composites/appearance-editor/appearance-choices.tsx +158 -80
- package/src/components/composites/appearance-editor/appearance-editor.tsx +7 -2
- package/src/components/composites/appearance-editor/appearance-types.ts +22 -3
- package/src/components/ui/accordion/accordion.tsx +5 -1
- package/src/components/ui/radio-group/radio-group.tsx +10 -2
- package/src/lib/accent-presets.ts +8 -0
- package/src/lib/theme-projection.ts +52 -0
- package/src/lib/theme-records.ts +3 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","For","Show","isThemeAccentId","AccentSwatchGroups","AppearanceEditorProps","ThemeMiniature","ThemeMiniatureSplit","MODES","value","label","const","SURFACES","ModeChoices","props","_$createComponent","draft","mode","disabled","saving","orientation","onChange","option","find","candidate","children","each","Item","data-mode","ItemInput","ItemLabel","_el$","_tmpl$","_$insert","when","fallback","theme","_$memo","lightTheme","darkTheme","light","dark","_el$2","_tmpl$2","isCustomAccent","accent","accentOptions","some","id","AccentChoices","resolvedAppearance","accentSelection","showThemeDefault","showThemeDefaultAccent","labelEntries","presets","filter","customAccentValue","accentEntryStyle","themeDefaultColor","colors","_el$4","_tmpl$5","showCustomAccentCaption","_tmpl$4","_el$3","_tmpl$3","data-accent-option","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo"],"sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n// Pinned mode-card, accent-swatch, and glass-chip composition. Kobalte replaces\n// the app port's manual roving focus; it does not replace the donor hierarchy.\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { For, Show } from 'solid-js'\nimport { isThemeAccentId } from '#lib/theme-accents'\nimport { AccentSwatchGroups } from './accent-swatch-groups'\nimport type { AppearanceEditorProps } from './appearance-types'\nimport { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'\n\nconst MODES = [\n { value: 'system', label: 'System' },\n { value: 'light', label: 'Light' },\n { value: 'dark', label: 'Dark' },\n] as const\nconst SURFACES = [\n { value: 'theme', label: 'Theme default' },\n { value: 'frosted', label: 'Frosted' },\n { value: 'opaque', label: 'Opaque' },\n] as const\nexport function ModeChoices(props: AppearanceEditorProps) {\n return (\n <Radio\n value={props.draft.mode}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Appearance mode\"\n onChange={(mode) => {\n const option = MODES.find((candidate) => candidate.value === mode)\n if (option) props.onChange({ mode: option.value })\n }}\n class=\"grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3\"\n >\n <For each={MODES}>\n {(option) => (\n <Radio.Item\n value={option.value}\n data-mode={option.value}\n class=\"min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n <span class=\"block h-20 w-full\">\n <Show\n when={option.value === 'system'}\n fallback={\n <ThemeMiniature\n theme={option.value === 'light' ? props.lightTheme : props.darkTheme}\n />\n }\n >\n <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />\n </Show>\n </span>\n <span>{option.label}</span>\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n </Radio>\n )\n}\n\n/**\n * Whether the draft accent is the host's custom colour: not the theme default,\n * not a preset, and not a theme accent id. A theme accent id counts as known even\n * when the current pair cannot offer it — it is a stored role, not a colour the\n * user typed, and showing it in the custom field would invite editing `ansi-blue`.\n */\nexport function isCustomAccent(props: AppearanceEditorProps): boolean {\n const accent = props.draft.accent\n return (\n accent !== 'theme' &&\n !props.accentOptions.some((option) => option.id === accent) &&\n !isThemeAccentId(accent)\n )\n}\n\nexport function AccentChoices(props: AppearanceEditorProps) {\n // The resolved appearance decides which side of a preset pair — and which\n // theme accent — the swatches paint, so the row previews each choice as the\n // user will see it.\n const resolvedAppearance = () =>\n props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode\n const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)\n const showThemeDefault = () => props.showThemeDefaultAccent ?? true\n // The named-chip style feeds the same resolved preset list to both entries:\n // \"Theme default\" leads only when the host has not folded it into a preset.\n const labelEntries = () => {\n const presets = props.accentOptions.filter((option) => option.id !== 'theme')\n return showThemeDefault() ? [{ id: 'theme', label: 'Theme default' }, ...presets] : presets\n }\n return (\n <Radio\n value={accentSelection()}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Accent\"\n class=\"flex flex-col items-start gap-3\"\n onChange={(accent) =>\n props.onChange({\n accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n })\n }\n >\n <Show\n when={(props.accentEntryStyle ?? 'swatches') === 'labels'}\n fallback={\n <>\n <AccentSwatchGroups\n accentOptions={props.accentOptions}\n resolvedAppearance={resolvedAppearance()}\n showThemeDefault={showThemeDefault()}\n themeDefaultColor={\n resolvedAppearance() === 'light'\n ? props.lightTheme.colors.accent\n : props.darkTheme.colors.accent\n }\n />\n <div class=\"flex flex-col gap-1\">\n <Show when={props.showCustomAccentCaption ?? true}>\n <span class=\"text-xs font-medium text-muted-foreground\">Custom</span>\n </Show>\n <Radio.Item value=\"custom\">\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n Custom\n </Radio.ItemLabel>\n </Radio.Item>\n </div>\n </>\n }\n >\n {/* The named-chip style: one grid, every choice a labelled control,\n including the custom colour — nothing to caption from above. */}\n <div class=\"grid grid-cols-2 gap-2 sm:grid-cols-3\" data-accent-grid>\n <For each={labelEntries()}>\n {(option) => (\n <Radio.Item value={option.id} class=\"min-w-0\" data-accent-option={option.id}>\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n {option.label}\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n <Radio.Item value=\"custom\" class=\"min-w-0\">\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n Custom\n </Radio.ItemLabel>\n </Radio.Item>\n </div>\n </Show>\n </Radio>\n )\n}\n\nexport function GlassChoices(props: AppearanceEditorProps) {\n return (\n <Radio\n value={props.draft.surface}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Glass\"\n class=\"flex flex-wrap gap-1\"\n onChange={(surface) => {\n const option = SURFACES.find((candidate) => candidate.value === surface)\n if (option) props.onChange({ surface: option.value })\n }}\n >\n <For each={SURFACES}>\n {(option) => (\n <Radio.Item\n value={option.value}\n disabled={option.value === 'frosted' && !props.surfaceCapability.frosted}\n class=\"rounded-md focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n {option.label}\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n </Radio>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"appearance-choices.js","names":["RadioGroup","Radio","Monitor","Moon","Sun","For","Show","isThemeAccentId","Button","Input","AccentSwatchGroups","AppearanceEditorProps","ThemeMiniature","ThemeMiniatureSplit","MODES","value","label","const","SURFACES","MODE_ICONS","system","light","dark","ModeChoices","props","_$createComponent","draft","mode","disabled","saving","orientation","onChange","option","find","candidate","children","each","Icon","Item","data-mode","ItemInput","ItemLabel","_el$","_tmpl$","_$insert","when","fallback","theme","_$memo","lightTheme","darkTheme","showModeIcons","_el$3","_tmpl$3","_el$2","_tmpl$2","isCustomAccent","accent","accentOptions","some","id","AccentChoices","resolvedAppearance","accentSelection","showThemeDefault","showThemeDefaultAccent","entryStyle","accentEntryStyle","themeDefaultColor","colors","labelEntries","presets","filter","colorPicker","HTMLInputElement","openCustomColor","showPicker","click","customAccentValue","_el$6","_tmpl$7","showCustomAccentCaption","_tmpl$6","_el$5","_tmpl$5","data-accent-option","_el$4","_tmpl$4","layout","type","variant","size","aria-pressed","onClick","ref","element","tabIndex","test","event","currentTarget","GlassChoices","surface","surfaceCapability","frosted","_$createComponent","Radio","_$memo"],"sources":["../../../../src/components/composites/appearance-editor/appearance-choices.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n// Pinned mode-card, accent-swatch, and glass-chip composition. Kobalte replaces\n// the app port's manual roving focus; it does not replace the donor hierarchy.\nimport { RadioGroup as Radio } from '@kobalte/core/radio-group'\nimport { Monitor, Moon, Sun } from 'lucide-solid'\nimport { For, Show } from 'solid-js'\nimport { isThemeAccentId } from '#lib/theme-accents'\nimport { Button } from '../../ui/button/button'\nimport { Input } from '../../ui/input/input'\nimport { AccentSwatchGroups } from './accent-swatch-groups'\nimport type { AppearanceEditorProps } from './appearance-types'\nimport { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'\n\nconst MODES = [\n { value: 'system', label: 'System' },\n { value: 'light', label: 'Light' },\n { value: 'dark', label: 'Dark' },\n] as const\nconst SURFACES = [\n { value: 'theme', label: 'Theme default' },\n { value: 'frosted', label: 'Frosted' },\n { value: 'opaque', label: 'Opaque' },\n] as const\nconst MODE_ICONS = { system: Monitor, light: Sun, dark: Moon } as const\n\nexport function ModeChoices(props: AppearanceEditorProps) {\n return (\n <Radio\n value={props.draft.mode}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Appearance mode\"\n onChange={(mode) => {\n const option = MODES.find((candidate) => candidate.value === mode)\n if (option) props.onChange({ mode: option.value })\n }}\n class=\"grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3\"\n >\n <For each={MODES}>\n {(option) => {\n const Icon = MODE_ICONS[option.value]\n return (\n <Radio.Item\n value={option.value}\n data-mode={option.value}\n class=\"min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n <span class=\"block h-20 w-full\">\n <Show\n when={option.value === 'system'}\n fallback={\n <ThemeMiniature\n theme={option.value === 'light' ? props.lightTheme : props.darkTheme}\n />\n }\n >\n <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />\n </Show>\n </span>\n {/* The glyph names the axis beside the miniature, so the cards read\n like ThemeModeToggle without losing the previews. */}\n <Show when={props.showModeIcons} fallback={<span>{option.label}</span>}>\n <span class=\"flex items-center justify-center gap-1.5\">\n <Icon aria-hidden=\"true\" class=\"size-3.5\" />\n {option.label}\n </span>\n </Show>\n </Radio.ItemLabel>\n </Radio.Item>\n )\n }}\n </For>\n </Radio>\n )\n}\n\n/**\n * Whether the draft accent is the host's custom colour: not the theme default,\n * not a preset, and not a theme accent id. A theme accent id counts as known even\n * when the current pair cannot offer it — it is a stored role, not a colour the\n * user typed, and showing it in the custom field would invite editing `ansi-blue`.\n */\nexport function isCustomAccent(props: AppearanceEditorProps): boolean {\n const accent = props.draft.accent\n return (\n accent !== 'theme' &&\n !props.accentOptions.some((option) => option.id === accent) &&\n !isThemeAccentId(accent)\n )\n}\n\nexport function AccentChoices(props: AppearanceEditorProps) {\n // The resolved appearance decides which side of a preset pair — and which\n // theme accent — the swatches paint, so the row previews each choice as the\n // user will see it.\n const resolvedAppearance = () =>\n props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode\n const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)\n const showThemeDefault = () => props.showThemeDefaultAccent ?? true\n const entryStyle = () => props.accentEntryStyle ?? 'swatches'\n const themeDefaultColor = () =>\n resolvedAppearance() === 'light'\n ? props.lightTheme.colors.accent\n : props.darkTheme.colors.accent\n // The named-chip style feeds the same resolved preset list to both entries:\n // \"Theme default\" leads only when the host has not folded it into a preset.\n const labelEntries = () => {\n const presets = props.accentOptions.filter((option) => option.id !== 'theme')\n return showThemeDefault() ? [{ id: 'theme', label: 'Theme default' }, ...presets] : presets\n }\n // The `row` style's Custom entry is a button that opens the native colour\n // selector, so the draft only changes once a colour is chosen there. The\n // input stays in the tree for the selector to anchor to and for the value a\n // saved hex restores.\n let colorPicker: HTMLInputElement | undefined\n const openCustomColor = () => {\n if (!colorPicker || props.saving) return\n if (typeof colorPicker.showPicker === 'function') colorPicker.showPicker()\n else colorPicker.click()\n }\n return (\n <Show\n when={entryStyle() === 'row'}\n fallback={\n <Radio\n value={accentSelection()}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Accent\"\n class=\"flex flex-col items-start gap-3\"\n onChange={(accent) =>\n props.onChange({\n accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,\n })\n }\n >\n <Show\n when={entryStyle() === 'labels'}\n fallback={\n <>\n <AccentSwatchGroups\n accentOptions={props.accentOptions}\n resolvedAppearance={resolvedAppearance()}\n showThemeDefault={showThemeDefault()}\n themeDefaultColor={themeDefaultColor()}\n />\n <div class=\"flex flex-col gap-1\">\n <Show when={props.showCustomAccentCaption ?? true}>\n <span class=\"text-xs font-medium text-muted-foreground\">Custom</span>\n </Show>\n <Radio.Item value=\"custom\">\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n Custom\n </Radio.ItemLabel>\n </Radio.Item>\n </div>\n </>\n }\n >\n {/* The named-chip style: one grid, every choice a labelled control,\n including the custom colour — nothing to caption from above. */}\n <div class=\"grid grid-cols-2 gap-2 sm:grid-cols-3\" data-accent-grid>\n <For each={labelEntries()}>\n {(option) => (\n <Radio.Item value={option.id} class=\"min-w-0\" data-accent-option={option.id}>\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n {option.label}\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n <Radio.Item value=\"custom\" class=\"min-w-0\">\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary\">\n Custom\n </Radio.ItemLabel>\n </Radio.Item>\n </div>\n </Show>\n </Radio>\n }\n >\n <div class=\"flex w-full min-w-0 items-center gap-2\" data-accent-choices>\n <Radio\n value={accentSelection()}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Accent\"\n class=\"min-w-0 flex-1\"\n onChange={(accent) => props.onChange({ accent })}\n >\n <AccentSwatchGroups\n accentOptions={props.accentOptions}\n resolvedAppearance={resolvedAppearance()}\n showThemeDefault={showThemeDefault()}\n themeDefaultColor={themeDefaultColor()}\n layout=\"row\"\n />\n </Radio>\n <Button\n type=\"button\"\n variant=\"outline\"\n size=\"sm\"\n disabled={props.saving}\n aria-pressed={isCustomAccent(props)}\n onClick={openCustomColor}\n >\n Custom\n </Button>\n <Input\n ref={(element) => {\n colorPicker = element\n }}\n type=\"color\"\n // `w-px` beats the Input's own `w-full`: an absolutely positioned\n // full-width input sized the sheet's scroll width.\n class=\"sr-only w-px\"\n tabIndex={-1}\n aria-label=\"Custom accent color\"\n value={\n /^#[0-9a-f]{6}$/i.test(props.draft.accent)\n ? props.draft.accent\n : (props.customAccentValue ?? '#000000')\n }\n disabled={props.saving}\n onChange={(event) => props.onChange({ accent: event.currentTarget.value })}\n />\n </div>\n </Show>\n )\n}\n\nexport function GlassChoices(props: AppearanceEditorProps) {\n return (\n <Radio\n value={props.draft.surface}\n disabled={props.saving}\n orientation=\"horizontal\"\n aria-label=\"Glass\"\n class=\"flex flex-wrap gap-1\"\n onChange={(surface) => {\n const option = SURFACES.find((candidate) => candidate.value === surface)\n if (option) props.onChange({ surface: option.value })\n }}\n >\n <For each={SURFACES}>\n {(option) => (\n <Radio.Item\n value={option.value}\n disabled={option.value === 'frosted' && !props.surfaceCapability.frosted}\n class=\"rounded-md focus-within:ring-3 focus-within:ring-ring/50\"\n >\n <Radio.ItemInput />\n <Radio.ItemLabel class=\"flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\">\n {option.label}\n </Radio.ItemLabel>\n </Radio.Item>\n )}\n </For>\n </Radio>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-editor.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAIvF;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kCAuJ5D;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,qBAAqB,kCA6CnE;AAED;;4EAE4E;AAC5E,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"appearance-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-editor.tsx"],"names":[],"mappings":"AAqDA,OAAO,KAAK,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAIvF;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kCAuJ5D;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,qBAAqB,kCA6CnE;AAED;;4EAE4E;AAC5E,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kCAsC9D"}
|
|
@@ -343,9 +343,14 @@ function AppearancePopover(props) {
|
|
|
343
343
|
get children() {
|
|
344
344
|
return [createComponent(SheetTrigger, {
|
|
345
345
|
as: ActionButton,
|
|
346
|
-
variant
|
|
346
|
+
get variant() {
|
|
347
|
+
return props.triggerVariant === "toolbar" ? "toolbar" : "ghost";
|
|
348
|
+
},
|
|
347
349
|
size: "icon-sm",
|
|
348
350
|
tooltip: "Open appearance settings",
|
|
351
|
+
get tooltipIcon() {
|
|
352
|
+
return memo(() => props.triggerVariant === "toolbar")() ? createComponent(Palette, { "aria-hidden": "true" }) : void 0;
|
|
353
|
+
},
|
|
349
354
|
"aria-label": "Appearance settings",
|
|
350
355
|
get children() {
|
|
351
356
|
return createComponent(Palette, {});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance-editor.js","names":["EyeOff","Palette","PanelsTopLeft","SlidersHorizontal","Show","createSignal","createUniqueId","cn","ActionButton","Button","Input","AppearanceFontSettingsGroup","DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS","Switch","Sheet","SheetBody","SheetContent","SheetDescription","SheetFooter","SheetHeader","SheetTitle","SheetTrigger","AppearanceEditorProps","AppearancePopoverProps","ModeChoices","AccentChoices","GlassChoices","isCustomAccent","SettingsRow","TerminalRow","ThemeRow","AppearanceEditor","props","errorId","custom","accentDescription","draft","accent","preset","accentOptions","find","option","id","label","offered","themeAccentOptions","toLowerCase","glassDescription","surface","surfaceCapability","themeDefaultDescription","_el$","_tmpl$6","_el$3","firstChild","_$insert","_$createComponent","when","recoveryNotice","children","_el$2","_tmpl$","appearance","selectedId","lightThemeId","preview","lightTheme","themes","disabled","saving","onSelect","onChange","darkThemeId","darkTheme","terminalThemeId","undefined","_$memo","resolvedAppearance","title","icon","description","_el$4","_tmpl$3","_el$5","_$setAttribute","value","aria-invalid","customAccentError","aria-describedby","onInput","event","currentTarget","_el$6","_tmpl$2","fontSettingsPlacement","settings","fonts","menuPortalMount","frosted","reason","_el$7","_tmpl$4","checked","reduceTransparency","onManageThemes","type","size","variant","onClick","hideActions","_el$8","_tmpl$5","AppearanceEditorActions","_$effect","_$className","class","saveReasonId","_el$9","_tmpl$8","_el$1","_el$10","saveDisabledReason","_el$0","_tmpl$7","onReset","onCancel","aria-busy","onSave","AppearancePopover","setMenuPortalMount","HTMLElement","open","onOpenChange","onOpen","onDismiss","as","tooltip","side","closeLabel","ref","_$mergeProps","_$createComponent","_$memo","_$className","_$mergeProps"],"sources":["../../../../src/components/composites/appearance-editor/appearance-editor.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/*\n * Composition substantially translated from Zeron settings/appearance.rs and\n * settings/widgets.rs, pinned at 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59,\n * preserving Adea's existing appearance-surface.tsx port: System/Light/Dark\n * miniatures, compact independent theme rows, accent swatches and helper copy,\n * glass chips, and theme library affordance. Kobalte replaces the port's manual\n * radio keyboard model. The controlled draft and explicit action ports replace\n * GPUI globals and app-specific storage/native authority. Save/Cancel/Reset and\n * custom accent/reduced-transparency are accepted Adea divergences (#425).\n */\nimport { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from 'lucide-solid'\nimport { Show, createSignal, createUniqueId } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { ActionButton } from '../action-button'\nimport { Button } from '../../ui/button/button'\nimport { Input } from '../../ui/input/input'\nimport { AppearanceFontSettingsGroup } from './font-settings-group'\nimport { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '#lib/appearance-font-settings'\n\nimport { Switch } from '../../ui/switch/switch'\nimport {\n Sheet,\n SheetBody,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from '../../ui/sheet/sheet'\nimport type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'\nimport { ModeChoices, AccentChoices, GlassChoices, isCustomAccent } from './appearance-choices'\nimport { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'\n\n/**\n * A live editor whose persistence and preview authority belong to its host.\n * No ThemeProvider is required, and no catalogue, renderer engine or storage is\n * imported. Hosts normalize unknown IDs and custom colors, report recovery,\n * snapshot on open, preview on changes, commit on Save, and restore on dismissal.\n * Both theme rows remain mounted when mode changes. Density remains outside the\n * accepted appearance surface; typeface settings are shared and host-persisted.\n */\nexport function AppearanceEditor(props: AppearanceEditorProps) {\n const errorId = createUniqueId()\n const custom = () => isCustomAccent(props)\n const accentDescription = () => {\n if (props.draft.accent === 'theme') return \"Theme default · Uses the palette's intended color.\"\n const preset = props.accentOptions.find((option) => option.id === props.draft.accent)\n if (preset) return `${preset.label} · Controls, glyphs, selections, code, and activity.`\n if (custom()) return 'Custom · Controls, glyphs, selections, code, and activity.'\n const offered = props.themeAccentOptions?.find((option) => option.id === props.draft.accent)\n // A stored theme accent survives a theme switch by id; when the new pair\n // cannot offer that slot the host falls back to the theme's own primary,\n // and the description says so rather than naming a colour not on screen.\n return offered\n ? `Theme ${offered.label.toLowerCase()} · The theme's own color, on controls and activity.`\n : \"Theme default · This theme does not carry that accent, so it uses the palette's intended color.\"\n }\n const glassDescription = () =>\n props.draft.surface === 'opaque'\n ? 'Solid surfaces for every theme.'\n : props.draft.surface === 'frosted'\n ? 'Theme-colored glass where supported.'\n : (props.surfaceCapability.themeDefaultDescription ?? \"Uses this theme's default surface.\")\n return (\n <div data-appearance-editor class={cn('min-w-0', props.class)}>\n <Show when={props.recoveryNotice}>\n <p role=\"status\" class=\"px-4 py-2 text-sm text-muted-foreground\">\n {props.recoveryNotice}\n </p>\n </Show>\n <ModeChoices {...props} />\n <div class=\"divide-y divide-border rounded-lg border\">\n <ThemeRow\n appearance=\"light\"\n selectedId={props.draft.lightThemeId}\n preview={props.lightTheme}\n themes={props.themes}\n disabled={props.saving}\n onSelect={(lightThemeId) => props.onChange({ lightThemeId })}\n />\n <ThemeRow\n appearance=\"dark\"\n selectedId={props.draft.darkThemeId}\n preview={props.darkTheme}\n themes={props.themes}\n disabled={props.saving}\n onSelect={(darkThemeId) => props.onChange({ darkThemeId })}\n />\n {/* The row exists only when the host carries a terminal preference:\n the draft field is the show/hide switch, so the editor can never\n render a terminal row that writes nothing. */}\n <Show when={props.draft.terminalThemeId !== undefined}>\n <TerminalRow\n selectedId={props.draft.terminalThemeId ?? 'theme'}\n preview={props.resolvedAppearance === 'dark' ? props.darkTheme : props.lightTheme}\n themes={props.themes}\n disabled={props.saving}\n onSelect={(terminalThemeId) => props.onChange({ terminalThemeId })}\n />\n </Show>\n <SettingsRow title=\"Accent\" icon={<SlidersHorizontal />} description={accentDescription()}>\n <AccentChoices {...props} />\n </SettingsRow>\n <Show when={custom()}>\n <div class=\"px-4 py-3\">\n <label class=\"mb-2 block text-xs font-medium\" for={`${errorId}-input`}>\n Custom accent\n </label>\n <Input\n id={`${errorId}-input`}\n value={props.draft.accent}\n disabled={props.saving}\n aria-invalid={!!props.customAccentError}\n aria-describedby={props.customAccentError ? errorId : undefined}\n onInput={(event) => props.onChange({ accent: event.currentTarget.value })}\n />\n <Show when={props.customAccentError}>\n <p id={errorId} role=\"alert\" class=\"mt-1 text-xs text-foreground\">\n {props.customAccentError}\n </p>\n </Show>\n </div>\n </Show>\n {/* Inline, the typefaces read as one more palette choice; `end` hands\n the closing slot to them for hosts whose order is palette and\n surface first, text last. */}\n <Show when={props.fontSettingsPlacement !== 'end'}>\n <AppearanceFontSettingsGroup\n settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}\n menuPortalMount={props.menuPortalMount}\n disabled={props.saving}\n onChange={(fonts) => props.onChange({ fonts })}\n />\n </Show>\n <SettingsRow title=\"Glass\" icon={<PanelsTopLeft />} description={glassDescription()}>\n <GlassChoices {...props} />\n </SettingsRow>\n <Show when={!props.surfaceCapability.frosted && props.surfaceCapability.reason}>\n <p role=\"status\" class=\"px-4 py-2 text-xs text-muted-foreground\">\n {props.surfaceCapability.reason}\n </p>\n </Show>\n <SettingsRow\n title=\"Reduce transparency\"\n icon={<EyeOff />}\n description=\"Prefer solid surfaces, including during live preview.\"\n >\n <Switch\n checked={props.draft.reduceTransparency}\n disabled={props.saving}\n onChange={(reduceTransparency: boolean) => props.onChange({ reduceTransparency })}\n aria-label=\"Reduce transparency\"\n />\n </SettingsRow>\n <SettingsRow\n title=\"Theme library\"\n icon={<Palette />}\n description={\n props.onManageThemes\n ? 'Manage themes through the application.'\n : 'Theme import is unavailable.'\n }\n >\n <Button\n type=\"button\"\n size=\"sm\"\n variant=\"outline\"\n disabled={!props.onManageThemes || props.saving}\n onClick={() => props.onManageThemes?.()}\n >\n Manage themes\n </Button>\n </SettingsRow>\n <Show when={props.fontSettingsPlacement === 'end'}>\n <AppearanceFontSettingsGroup\n settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}\n menuPortalMount={props.menuPortalMount}\n disabled={props.saving}\n onChange={(fonts) => props.onChange({ fonts })}\n />\n </Show>\n </div>\n <Show when={!props.hideActions}>\n {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the\n editor scrolls with its host panel, and actions parked at the bottom\n of a long form were unreachable without scrolling past every row. */}\n <div class=\"sticky bottom-0 z-10 mt-2 border-t bg-background px-4 py-3\">\n <AppearanceEditorActions {...props} />\n </div>\n </Show>\n </div>\n )\n}\n\n/**\n * Reset, Cancel and Save, with the reason Save is unavailable. Rendered by the\n * editor itself, or — with `hideActions` — by a host that pins them in its own\n * footer, as `AppearancePopover` does.\n */\nexport function AppearanceEditorActions(props: AppearanceEditorProps) {\n const saveReasonId = createUniqueId()\n return (\n <div class=\"flex w-full flex-col gap-2\">\n <Show when={props.saveDisabledReason}>\n <p id={saveReasonId} role=\"status\" class=\"text-xs text-muted-foreground\">\n {props.saveDisabledReason}\n </p>\n </Show>\n {/* `global-appearance-editor-actions` lets these buttons grow with the UI\n font preference, like the rest of Appearance's own controls. */}\n <div class=\"global-appearance-editor-actions flex flex-wrap items-center gap-2\">\n <Button\n type=\"button\"\n size=\"sm\"\n variant=\"ghost\"\n disabled={props.saving}\n onClick={() => props.onReset()}\n >\n Reset\n </Button>\n <div class=\"ml-auto flex gap-2\">\n <Button\n type=\"button\"\n size=\"sm\"\n variant=\"outline\"\n disabled={props.saving}\n onClick={() => props.onCancel()}\n >\n Cancel\n </Button>\n <Button\n type=\"button\"\n size=\"sm\"\n disabled={props.saving || !!props.customAccentError || !!props.saveDisabledReason}\n aria-busy={props.saving}\n aria-describedby={props.saveDisabledReason ? saveReasonId : undefined}\n onClick={() => props.onSave()}\n >\n {props.saving ? 'Saving…' : 'Save'}\n </Button>\n </div>\n </div>\n </div>\n )\n}\n\n/** The editor in an inset Sheet docked beside the main view: the body scrolls and\n * Reset/Cancel/Save sit in the panel's full-width footer, always reachable.\n * Dismissal (Escape, the close button, an outside click) is `onDismiss`. */\nexport function AppearancePopover(props: AppearancePopoverProps) {\n const [menuPortalMount, setMenuPortalMount] = createSignal<HTMLElement>()\n\n return (\n <Sheet open={props.open} onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}>\n {/* The trigger is an icon-only action, so it explains itself through the\n shared ActionButton's tooltip (keyboard focus included) rather than a\n bare aria-label. */}\n <SheetTrigger\n as={ActionButton}\n variant=\"ghost\"\n size=\"icon-sm\"\n tooltip=\"Open appearance settings\"\n aria-label=\"Appearance settings\"\n >\n <Palette />\n </SheetTrigger>\n <SheetContent side=\"end\" closeLabel=\"Close appearance settings\" ref={setMenuPortalMount}>\n <SheetHeader>\n <SheetTitle>Appearance</SheetTitle>\n <SheetDescription>\n Changes preview immediately. Save keeps them; Cancel restores the previous appearance.\n </SheetDescription>\n </SheetHeader>\n <SheetBody>\n <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} hideActions />\n </SheetBody>\n <SheetFooter>\n <AppearanceEditorActions {...props} />\n </SheetFooter>\n </SheetContent>\n </Sheet>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"appearance-editor.js","names":["EyeOff","Palette","PanelsTopLeft","SlidersHorizontal","Show","createSignal","createUniqueId","cn","ActionButton","Button","Input","AppearanceFontSettingsGroup","DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS","Switch","Sheet","SheetBody","SheetContent","SheetDescription","SheetFooter","SheetHeader","SheetTitle","SheetTrigger","AppearanceEditorProps","AppearancePopoverProps","ModeChoices","AccentChoices","GlassChoices","isCustomAccent","SettingsRow","TerminalRow","ThemeRow","AppearanceEditor","props","errorId","custom","accentDescription","draft","accent","preset","accentOptions","find","option","id","label","offered","themeAccentOptions","toLowerCase","glassDescription","surface","surfaceCapability","themeDefaultDescription","_el$","_tmpl$6","_el$3","firstChild","_$insert","_$createComponent","when","recoveryNotice","children","_el$2","_tmpl$","appearance","selectedId","lightThemeId","preview","lightTheme","themes","disabled","saving","onSelect","onChange","darkThemeId","darkTheme","terminalThemeId","undefined","_$memo","resolvedAppearance","title","icon","description","_el$4","_tmpl$3","_el$5","_$setAttribute","value","aria-invalid","customAccentError","aria-describedby","onInput","event","currentTarget","_el$6","_tmpl$2","fontSettingsPlacement","settings","fonts","menuPortalMount","frosted","reason","_el$7","_tmpl$4","checked","reduceTransparency","onManageThemes","type","size","variant","onClick","hideActions","_el$8","_tmpl$5","AppearanceEditorActions","_$effect","_$className","class","saveReasonId","_el$9","_tmpl$8","_el$1","_el$10","saveDisabledReason","_el$0","_tmpl$7","onReset","onCancel","aria-busy","onSave","AppearancePopover","setMenuPortalMount","HTMLElement","open","onOpenChange","onOpen","onDismiss","as","triggerVariant","tooltip","tooltipIcon","side","closeLabel","ref","_$mergeProps","_$createComponent","_$memo","_$className","_$mergeProps"],"sources":["../../../../src/components/composites/appearance-editor/appearance-editor.tsx"],"sourcesContent":["/*\n * MIT License\n *\n * Copyright (c) 2026 Wing\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n/*\n * Composition substantially translated from Zeron settings/appearance.rs and\n * settings/widgets.rs, pinned at 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59,\n * preserving Adea's existing appearance-surface.tsx port: System/Light/Dark\n * miniatures, compact independent theme rows, accent swatches and helper copy,\n * glass chips, and theme library affordance. Kobalte replaces the port's manual\n * radio keyboard model. The controlled draft and explicit action ports replace\n * GPUI globals and app-specific storage/native authority. Save/Cancel/Reset and\n * custom accent/reduced-transparency are accepted Adea divergences (#425).\n */\nimport { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from 'lucide-solid'\nimport { Show, createSignal, createUniqueId } from 'solid-js'\nimport { cn } from '#lib/utils'\nimport { ActionButton } from '../action-button'\nimport { Button } from '../../ui/button/button'\nimport { Input } from '../../ui/input/input'\nimport { AppearanceFontSettingsGroup } from './font-settings-group'\nimport { DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS } from '#lib/appearance-font-settings'\n\nimport { Switch } from '../../ui/switch/switch'\nimport {\n Sheet,\n SheetBody,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from '../../ui/sheet/sheet'\nimport type { AppearanceEditorProps, AppearancePopoverProps } from './appearance-types'\nimport { ModeChoices, AccentChoices, GlassChoices, isCustomAccent } from './appearance-choices'\nimport { SettingsRow, TerminalRow, ThemeRow } from './appearance-rows'\n\n/**\n * A live editor whose persistence and preview authority belong to its host.\n * No ThemeProvider is required, and no catalogue, renderer engine or storage is\n * imported. Hosts normalize unknown IDs and custom colors, report recovery,\n * snapshot on open, preview on changes, commit on Save, and restore on dismissal.\n * Both theme rows remain mounted when mode changes. Density remains outside the\n * accepted appearance surface; typeface settings are shared and host-persisted.\n */\nexport function AppearanceEditor(props: AppearanceEditorProps) {\n const errorId = createUniqueId()\n const custom = () => isCustomAccent(props)\n const accentDescription = () => {\n if (props.draft.accent === 'theme') return \"Theme default · Uses the palette's intended color.\"\n const preset = props.accentOptions.find((option) => option.id === props.draft.accent)\n if (preset) return `${preset.label} · Controls, glyphs, selections, code, and activity.`\n if (custom()) return 'Custom · Controls, glyphs, selections, code, and activity.'\n const offered = props.themeAccentOptions?.find((option) => option.id === props.draft.accent)\n // A stored theme accent survives a theme switch by id; when the new pair\n // cannot offer that slot the host falls back to the theme's own primary,\n // and the description says so rather than naming a colour not on screen.\n return offered\n ? `Theme ${offered.label.toLowerCase()} · The theme's own color, on controls and activity.`\n : \"Theme default · This theme does not carry that accent, so it uses the palette's intended color.\"\n }\n const glassDescription = () =>\n props.draft.surface === 'opaque'\n ? 'Solid surfaces for every theme.'\n : props.draft.surface === 'frosted'\n ? 'Theme-colored glass where supported.'\n : (props.surfaceCapability.themeDefaultDescription ?? \"Uses this theme's default surface.\")\n return (\n <div data-appearance-editor class={cn('min-w-0', props.class)}>\n <Show when={props.recoveryNotice}>\n <p role=\"status\" class=\"px-4 py-2 text-sm text-muted-foreground\">\n {props.recoveryNotice}\n </p>\n </Show>\n <ModeChoices {...props} />\n <div class=\"divide-y divide-border rounded-lg border\">\n <ThemeRow\n appearance=\"light\"\n selectedId={props.draft.lightThemeId}\n preview={props.lightTheme}\n themes={props.themes}\n disabled={props.saving}\n onSelect={(lightThemeId) => props.onChange({ lightThemeId })}\n />\n <ThemeRow\n appearance=\"dark\"\n selectedId={props.draft.darkThemeId}\n preview={props.darkTheme}\n themes={props.themes}\n disabled={props.saving}\n onSelect={(darkThemeId) => props.onChange({ darkThemeId })}\n />\n {/* The row exists only when the host carries a terminal preference:\n the draft field is the show/hide switch, so the editor can never\n render a terminal row that writes nothing. */}\n <Show when={props.draft.terminalThemeId !== undefined}>\n <TerminalRow\n selectedId={props.draft.terminalThemeId ?? 'theme'}\n preview={props.resolvedAppearance === 'dark' ? props.darkTheme : props.lightTheme}\n themes={props.themes}\n disabled={props.saving}\n onSelect={(terminalThemeId) => props.onChange({ terminalThemeId })}\n />\n </Show>\n <SettingsRow title=\"Accent\" icon={<SlidersHorizontal />} description={accentDescription()}>\n <AccentChoices {...props} />\n </SettingsRow>\n <Show when={custom()}>\n <div class=\"px-4 py-3\">\n <label class=\"mb-2 block text-xs font-medium\" for={`${errorId}-input`}>\n Custom accent\n </label>\n <Input\n id={`${errorId}-input`}\n value={props.draft.accent}\n disabled={props.saving}\n aria-invalid={!!props.customAccentError}\n aria-describedby={props.customAccentError ? errorId : undefined}\n onInput={(event) => props.onChange({ accent: event.currentTarget.value })}\n />\n <Show when={props.customAccentError}>\n <p id={errorId} role=\"alert\" class=\"mt-1 text-xs text-foreground\">\n {props.customAccentError}\n </p>\n </Show>\n </div>\n </Show>\n {/* Inline, the typefaces read as one more palette choice; `end` hands\n the closing slot to them for hosts whose order is palette and\n surface first, text last. */}\n <Show when={props.fontSettingsPlacement !== 'end'}>\n <AppearanceFontSettingsGroup\n settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}\n menuPortalMount={props.menuPortalMount}\n disabled={props.saving}\n onChange={(fonts) => props.onChange({ fonts })}\n />\n </Show>\n <SettingsRow title=\"Glass\" icon={<PanelsTopLeft />} description={glassDescription()}>\n <GlassChoices {...props} />\n </SettingsRow>\n <Show when={!props.surfaceCapability.frosted && props.surfaceCapability.reason}>\n <p role=\"status\" class=\"px-4 py-2 text-xs text-muted-foreground\">\n {props.surfaceCapability.reason}\n </p>\n </Show>\n <SettingsRow\n title=\"Reduce transparency\"\n icon={<EyeOff />}\n description=\"Prefer solid surfaces, including during live preview.\"\n >\n <Switch\n checked={props.draft.reduceTransparency}\n disabled={props.saving}\n onChange={(reduceTransparency: boolean) => props.onChange({ reduceTransparency })}\n aria-label=\"Reduce transparency\"\n />\n </SettingsRow>\n <SettingsRow\n title=\"Theme library\"\n icon={<Palette />}\n description={\n props.onManageThemes\n ? 'Manage themes through the application.'\n : 'Theme import is unavailable.'\n }\n >\n <Button\n type=\"button\"\n size=\"sm\"\n variant=\"outline\"\n disabled={!props.onManageThemes || props.saving}\n onClick={() => props.onManageThemes?.()}\n >\n Manage themes\n </Button>\n </SettingsRow>\n <Show when={props.fontSettingsPlacement === 'end'}>\n <AppearanceFontSettingsGroup\n settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}\n menuPortalMount={props.menuPortalMount}\n disabled={props.saving}\n onChange={(fonts) => props.onChange({ fonts })}\n />\n </Show>\n </div>\n <Show when={!props.hideActions}>\n {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the\n editor scrolls with its host panel, and actions parked at the bottom\n of a long form were unreachable without scrolling past every row. */}\n <div class=\"sticky bottom-0 z-10 mt-2 border-t bg-background px-4 py-3\">\n <AppearanceEditorActions {...props} />\n </div>\n </Show>\n </div>\n )\n}\n\n/**\n * Reset, Cancel and Save, with the reason Save is unavailable. Rendered by the\n * editor itself, or — with `hideActions` — by a host that pins them in its own\n * footer, as `AppearancePopover` does.\n */\nexport function AppearanceEditorActions(props: AppearanceEditorProps) {\n const saveReasonId = createUniqueId()\n return (\n <div class=\"flex w-full flex-col gap-2\">\n <Show when={props.saveDisabledReason}>\n <p id={saveReasonId} role=\"status\" class=\"text-xs text-muted-foreground\">\n {props.saveDisabledReason}\n </p>\n </Show>\n {/* `global-appearance-editor-actions` lets these buttons grow with the UI\n font preference, like the rest of Appearance's own controls. */}\n <div class=\"global-appearance-editor-actions flex flex-wrap items-center gap-2\">\n <Button\n type=\"button\"\n size=\"sm\"\n variant=\"ghost\"\n disabled={props.saving}\n onClick={() => props.onReset()}\n >\n Reset\n </Button>\n <div class=\"ml-auto flex gap-2\">\n <Button\n type=\"button\"\n size=\"sm\"\n variant=\"outline\"\n disabled={props.saving}\n onClick={() => props.onCancel()}\n >\n Cancel\n </Button>\n <Button\n type=\"button\"\n size=\"sm\"\n disabled={props.saving || !!props.customAccentError || !!props.saveDisabledReason}\n aria-busy={props.saving}\n aria-describedby={props.saveDisabledReason ? saveReasonId : undefined}\n onClick={() => props.onSave()}\n >\n {props.saving ? 'Saving…' : 'Save'}\n </Button>\n </div>\n </div>\n </div>\n )\n}\n\n/** The editor in an inset Sheet docked beside the main view: the body scrolls and\n * Reset/Cancel/Save sit in the panel's full-width footer, always reachable.\n * Dismissal (Escape, the close button, an outside click) is `onDismiss`. */\nexport function AppearancePopover(props: AppearancePopoverProps) {\n const [menuPortalMount, setMenuPortalMount] = createSignal<HTMLElement>()\n\n return (\n <Sheet open={props.open} onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}>\n {/* The trigger is an icon-only action, so it explains itself through the\n shared ActionButton's tooltip (keyboard focus included) rather than a\n bare aria-label. `toolbar` also holds the pressed rung while Kobalte\n marks the trigger `data-expanded`, and repeats the glyph in the\n tooltip like the other toolbar actions. */}\n <SheetTrigger\n as={ActionButton}\n variant={props.triggerVariant === 'toolbar' ? 'toolbar' : 'ghost'}\n size=\"icon-sm\"\n tooltip=\"Open appearance settings\"\n tooltipIcon={\n props.triggerVariant === 'toolbar' ? <Palette aria-hidden=\"true\" /> : undefined\n }\n aria-label=\"Appearance settings\"\n >\n <Palette />\n </SheetTrigger>\n <SheetContent side=\"end\" closeLabel=\"Close appearance settings\" ref={setMenuPortalMount}>\n <SheetHeader>\n <SheetTitle>Appearance</SheetTitle>\n <SheetDescription>\n Changes preview immediately. Save keeps them; Cancel restores the previous appearance.\n </SheetDescription>\n </SheetHeader>\n <SheetBody>\n <AppearanceEditor {...props} menuPortalMount={menuPortalMount()} hideActions />\n </SheetBody>\n <SheetFooter>\n <AppearanceEditorActions {...props} />\n </SheetFooter>\n </SheetContent>\n </Sheet>\n )\n}\n"],"mappings":"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"}
|
|
@@ -69,10 +69,16 @@ export type AppearanceEditorProps = {
|
|
|
69
69
|
fontSettingsPlacement?: 'inline' | 'end';
|
|
70
70
|
/**
|
|
71
71
|
* How the accent row renders its choices. `swatches` — the default — paints
|
|
72
|
-
* each choice as a colour circle
|
|
73
|
-
* chip
|
|
72
|
+
* each choice as a colour circle in a wrapping grid, with Custom as one more
|
|
73
|
+
* chip. `labels` renders every choice as a named chip, for hosts whose accent
|
|
74
|
+
* contract is textual rather than chromatic. `row` draws the circles in ONE
|
|
75
|
+
* equally spaced line, which holds at a narrow panel width where the grid
|
|
76
|
+
* would wrap, and turns Custom into a button that opens the native colour
|
|
77
|
+
* selector: choosing a colour there is the only thing that changes the draft,
|
|
78
|
+
* so dismissing the selector leaves the accent as it was. The caption flag
|
|
79
|
+
* has no effect on `row`, which has nothing to caption.
|
|
74
80
|
*/
|
|
75
|
-
accentEntryStyle?: 'swatches' | 'labels';
|
|
81
|
+
accentEntryStyle?: 'swatches' | 'labels' | 'row';
|
|
76
82
|
/**
|
|
77
83
|
* Whether the accent row leads with a "Theme default" swatch. Default on.
|
|
78
84
|
* Hosts whose default accent already is one of the catalogue presets pass
|
|
@@ -85,10 +91,23 @@ export type AppearanceEditorProps = {
|
|
|
85
91
|
* caption reads as a second "Custom" label on the control.
|
|
86
92
|
*/
|
|
87
93
|
showCustomAccentCaption?: boolean;
|
|
94
|
+
/**
|
|
95
|
+
* Whether each mode card names its axis with a sun, moon or monitor glyph
|
|
96
|
+
* beside the label, as `ThemeModeToggle` does. Default off.
|
|
97
|
+
*/
|
|
98
|
+
showModeIcons?: boolean;
|
|
88
99
|
};
|
|
89
100
|
export type AppearancePopoverProps = AppearanceEditorProps & {
|
|
90
101
|
open: boolean;
|
|
91
102
|
onOpen: () => void;
|
|
92
103
|
onDismiss: () => void;
|
|
104
|
+
/**
|
|
105
|
+
* The trigger's treatment. `ghost` — the default — is a quiet icon action.
|
|
106
|
+
* `toolbar` is the variant for a control that opens a surface: it holds the
|
|
107
|
+
* pressed rung while the sheet is open, so the one control that owns the
|
|
108
|
+
* visible sheet never reads like its idle neighbours, and its tooltip repeats
|
|
109
|
+
* the palette glyph the other toolbar actions carry.
|
|
110
|
+
*/
|
|
111
|
+
triggerVariant?: 'ghost' | 'toolbar';
|
|
93
112
|
};
|
|
94
113
|
//# sourceMappingURL=appearance-types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance-types.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAC/E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA;AAEjF,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IACjC,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,4BAA4B,CAAA;IACpC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAC,CAAA;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,eAAe,CAAA;IACtB,8EAA8E;IAC9E,UAAU,EAAE,SAAS,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAA;IACpC,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACnD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,uBAAuB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1F,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,6EAA6E;IAC7E,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IACxC
|
|
1
|
+
{"version":3,"file":"appearance-types.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/appearance-editor/appearance-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAC/E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA;AAEjF,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IACjC,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,4BAA4B,CAAA;IACpC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAC,CAAA;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,eAAe,CAAA;IACtB,8EAA8E;IAC9E,UAAU,EAAE,SAAS,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,kBAAkB,EAAE,OAAO,GAAG,MAAM,CAAA;IACpC,MAAM,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IACnD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,uBAAuB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1F,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,6EAA6E;IAC7E,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IACxC;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAA;IAChD;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,GAAG;IAC3D,IAAI,EAAE,OAAO,CAAA;IACb,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACrC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAEvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,kCAGvE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,kCAQhF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAEvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,kCAGvE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,kCAQhF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCA4BtF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,kCAOtF"}
|
|
@@ -34,7 +34,7 @@ function AccordionTrigger(props) {
|
|
|
34
34
|
"class": "flex",
|
|
35
35
|
get children() {
|
|
36
36
|
return createComponent(Accordion.Trigger, mergeProps({ get ["class"]() {
|
|
37
|
-
return cn("flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium", "transition-colors ease-out outline-none", "hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "disabled:pointer-events-none disabled:opacity-50", local.class);
|
|
37
|
+
return cn("group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium", "transition-colors ease-out outline-none", "hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "disabled:pointer-events-none disabled:opacity-50", local.class);
|
|
38
38
|
} }, rest, { get children() {
|
|
39
39
|
return [memo(() => local.children), createComponent(ChevronDown, {
|
|
40
40
|
"class": "text-muted-foreground size-4 shrink-0 transition-transform ease-out group-data-[expanded]/accordion:rotate-180",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","names":["Accordion","KobalteAccordion","ChevronDown","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","AccordionItem","Item","AccordionTrigger","Trigger","Header","children","_$memo","AccordionContent","Content","_el$","_tmpl$","_$insert","Accordion","_$createComponent","KobalteAccordion","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/accordion/accordion.tsx"],"sourcesContent":["import { Accordion as KobalteAccordion } from '@kobalte/core/accordion'\nimport { ChevronDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Accordion.\n *\n * A list of collapsible sections. `collapsible` (the default) lets the user\n * close the open section; without it one section is always open, which is what\n * a settings page usually wants and a FAQ usually does not.\n *\n * The trigger is a real button with `aria-expanded` and the panel is\n * `aria-labelledby` the trigger, so the relationship survives even when the\n * panel is empty.\n */\nexport function Accordion(props: ComponentProps<typeof KobalteAccordion>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteAccordion class={cn('flex w-full flex-col', local.class)} {...rest} />\n}\n\nexport function AccordionItem(props: ComponentProps<typeof KobalteAccordion.Item>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteAccordion.Item\n class={cn('border-b border-border last:border-b-0', local.class)}\n {...rest}\n />\n )\n}\n\nexport function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.Trigger>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteAccordion.Header class=\"flex\">\n <KobalteAccordion.Trigger\n class={cn(\n 'flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',\n 'transition-colors ease-out outline-none',\n 'hover:text-foreground',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n 'disabled:pointer-events-none disabled:opacity-50',\n local.class\n )}\n {...rest}\n >\n {local.children}\n <ChevronDown\n class=\"text-muted-foreground size-4 shrink-0 transition-transform ease-out group-data-[expanded]/accordion:rotate-180\"\n aria-hidden=\"true\"\n />\n </KobalteAccordion.Trigger>\n </KobalteAccordion.Header>\n )\n}\n\nexport function AccordionContent(props: ComponentProps<typeof KobalteAccordion.Content>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteAccordion.Content class={cn('overflow-hidden text-sm', local.class)} {...rest}>\n <div class=\"pt-0 pb-3\">{props.children}</div>\n </KobalteAccordion.Content>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgBA,YAAUM,OAAgD;CACxE,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQR,WAAgBS,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,wBAAwBE,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AACnF;AAEA,SAAgBI,cAAcN,OAAqD;CACjF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBY,MAAIH,WAAA,EAAA,KAAA,WAAA;EAAA,OACbL,GAAG,0CAA0CE,MAAMI,KAAK;CAAC,EAAA,GAC5DH,IAAI,CAAA;AAGd;AAEA,SAAgBM,iBAAiBR,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGR,UAAiBe,QAAM;EAAA,SAAA;EAAA,IAAAC,WAAA;GAAA,OAAAR,gBACrBR,UAAiBc,SAAOL,WAAA,EAAA,KAAA,WAAA;IAAA,OAChBL,
|
|
1
|
+
{"version":3,"file":"accordion.js","names":["Accordion","KobalteAccordion","ChevronDown","ComponentProps","splitProps","cn","props","local","rest","_$createComponent","_$mergeProps","class","AccordionItem","Item","AccordionTrigger","Trigger","Header","children","_$memo","AccordionContent","Content","_el$","_tmpl$","_$insert","Accordion","_$createComponent","KobalteAccordion","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/accordion/accordion.tsx"],"sourcesContent":["import { Accordion as KobalteAccordion } from '@kobalte/core/accordion'\nimport { ChevronDown } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Accordion.\n *\n * A list of collapsible sections. `collapsible` (the default) lets the user\n * close the open section; without it one section is always open, which is what\n * a settings page usually wants and a FAQ usually does not.\n *\n * The trigger is a real button with `aria-expanded` and the panel is\n * `aria-labelledby` the trigger, so the relationship survives even when the\n * panel is empty.\n */\nexport function Accordion(props: ComponentProps<typeof KobalteAccordion>) {\n const [local, rest] = splitProps(props, ['class'])\n return <KobalteAccordion class={cn('flex w-full flex-col', local.class)} {...rest} />\n}\n\nexport function AccordionItem(props: ComponentProps<typeof KobalteAccordion.Item>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteAccordion.Item\n class={cn('border-b border-border last:border-b-0', local.class)}\n {...rest}\n />\n )\n}\n\nexport function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.Trigger>) {\n const [local, rest] = splitProps(props, ['class', 'children'])\n\n return (\n <KobalteAccordion.Header class=\"flex\">\n <KobalteAccordion.Trigger\n class={cn(\n // `group/accordion` is what the chevron's `group-data-[expanded]/accordion`\n // reads. Kobalte puts `data-expanded` on this trigger, not on the item, so\n // the trigger is the group; without the class the rotation selector has no\n // ancestor to match and the chevron never turns.\n 'group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',\n 'transition-colors ease-out outline-none',\n 'hover:text-foreground',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n 'disabled:pointer-events-none disabled:opacity-50',\n local.class\n )}\n {...rest}\n >\n {local.children}\n <ChevronDown\n class=\"text-muted-foreground size-4 shrink-0 transition-transform ease-out group-data-[expanded]/accordion:rotate-180\"\n aria-hidden=\"true\"\n />\n </KobalteAccordion.Trigger>\n </KobalteAccordion.Header>\n )\n}\n\nexport function AccordionContent(props: ComponentProps<typeof KobalteAccordion.Content>) {\n const [local, rest] = splitProps(props, ['class'])\n return (\n <KobalteAccordion.Content class={cn('overflow-hidden text-sm', local.class)} {...rest}>\n <div class=\"pt-0 pb-3\">{props.children}</div>\n </KobalteAccordion.Content>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgBA,YAAUM,OAAgD;CACxE,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQR,WAAgBS,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,wBAAwBE,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AACnF;AAEA,SAAgBI,cAAcN,OAAqD;CACjF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBY,MAAIH,WAAA,EAAA,KAAA,WAAA;EAAA,OACbL,GAAG,0CAA0CE,MAAMI,KAAK;CAAC,EAAA,GAC5DH,IAAI,CAAA;AAGd;AAEA,SAAgBM,iBAAiBR,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAG,gBACGR,UAAiBe,QAAM;EAAA,SAAA;EAAA,IAAAC,WAAA;GAAA,OAAAR,gBACrBR,UAAiBc,SAAOL,WAAA,EAAA,KAAA,WAAA;IAAA,OAChBL,GAKL,qGACA,2CACA,yBACA,oFACA,oDACAE,MAAMI,KACR;GAAC,EAAA,GACGH,MAAI,EAAA,IAAAS,WAAA;IAAA,OAAA,CAAAC,WAEPX,MAAMU,QAAQ,GAAAR,gBACdP,aAAW;KAAA,SAAA;KAAA,eAAA;IAAA,CAAA,CAAA;GAAA,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAOpB;AAEA,SAAgBiB,iBAAiBb,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQJ,WAAWE,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGR,UAAiBmB,SAAOV,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAG,2BAA2BE,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAS,WAAA;EAAA,IAAAI,OAAAC,OAAA;EAAAC,OAAAF,YAC3Df,MAAMW,QAAQ;EAAA,OAAAI;CAAA,EAAA,CAAA,CAAA;AAG5C"}
|
|
@@ -26,7 +26,9 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
|
|
|
26
26
|
* `card` draws the option as a bordered, selectable card — for a choice
|
|
27
27
|
* whose options need a sentence each (a source type, a sync budget), where a
|
|
28
28
|
* bare radio row reads as a form field rather than a decision. The whole card
|
|
29
|
-
* is the hit target, and the selected card takes the primary edge.
|
|
29
|
+
* is the hit target, and the selected card takes the primary edge. The radio,
|
|
30
|
+
* `media` and text centre on one axis; the default variant keeps the radio on
|
|
31
|
+
* the first line of its label.
|
|
30
32
|
*/
|
|
31
33
|
variant?: 'default' | 'card';
|
|
32
34
|
/** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,eA+BzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAKnD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,iBAAiB,CAAC,eA+BzE;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAChF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,iFAAiF;IACjF,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACpB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAuFxD"}
|
|
@@ -94,7 +94,9 @@ function RadioGroupItem(props) {
|
|
|
94
94
|
return local.title;
|
|
95
95
|
},
|
|
96
96
|
get ["class"]() {
|
|
97
|
-
return cn("group/radio flex
|
|
97
|
+
return cn("group/radio flex gap-2.5", {
|
|
98
|
+
"items-start": !card(),
|
|
99
|
+
"items-center": card(),
|
|
98
100
|
"relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card": card(),
|
|
99
101
|
"has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle": card()
|
|
100
102
|
}, local.class);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","JSX","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","variant","media","Element","RadioGroupItem","card","data-variant","undefined","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'id',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby',\n 'aria-invalid',\n 'aria-errormessage',\n ])\n const field = useFormFieldControl('group', {\n id: local.id,\n 'aria-label': local['aria-label'],\n 'aria-labelledby': local['aria-labelledby'],\n 'aria-describedby': local['aria-describedby'],\n 'aria-invalid': local['aria-invalid'],\n 'aria-errormessage': local['aria-errormessage'],\n })\n return (\n <KobalteRadioGroup\n data-slot=\"radio-group\"\n id={field?.id ?? local.id}\n aria-label={local['aria-label']}\n aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n class={cn('grid gap-2', local.class)}\n {...rest}\n />\n )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n controlClass?: string\n /**\n * The option's visible label. A radio with no accessible name is unreachable\n * by a screen reader and by voice control, so supply this, a labelled child,\n * `aria-label`, or `aria-labelledby`.\n */\n label?: string\n description?: string\n /**\n * `card` draws the option as a bordered, selectable card — for a choice\n * whose options need a sentence each (a source type, a sync budget), where a\n * bare radio row reads as a form field rather than a decision. The whole card\n * is the hit target, and the selected card takes the primary edge.\n */\n variant?: 'default' | 'card'\n /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */\n media?: JSX.Element\n}\n\n/**\n * A card option's label stretches an invisible layer over the whole card, so a\n * click anywhere on it — padding, media, description — selects the option\n * through the label's native association with the radio input. Wrapping the\n * card in a `<label>` would nest the item's own label inside another.\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'controlClass',\n 'label',\n 'description',\n 'variant',\n 'media',\n 'children',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby',\n 'aria-invalid',\n 'aria-busy',\n 'title',\n ])\n const card = () => local.variant === 'card'\n\n return (\n <KobalteRadioGroup.Item\n data-slot=\"radio-group-item\"\n data-variant={card() ? 'card' : undefined}\n title={local.title}\n class={cn(\n 'group/radio flex items-start gap-2.5',\n {\n 'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':\n card(),\n 'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':\n card(),\n },\n local.class\n )}\n {...rest}\n >\n <KobalteRadioGroup.ItemInput\n aria-label={local['aria-label']}\n aria-labelledby={local['aria-labelledby']}\n aria-describedby={local['aria-describedby']}\n aria-invalid={local['aria-invalid']}\n aria-busy={local['aria-busy']}\n title={local.title}\n />\n <KobalteRadioGroup.ItemControl\n class={cn(\n 'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n 'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n 'data-[checked]:border-primary data-[checked]:text-primary',\n 'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n 'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n local.controlClass\n )}\n >\n <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n <Circle class=\"size-2 fill-current\" />\n </KobalteRadioGroup.ItemIndicator>\n </KobalteRadioGroup.ItemControl>\n {local.media ? (\n <span data-slot=\"radio-group-item-media\" class=\"flex shrink-0 items-center\">\n {local.media}\n </span>\n ) : null}\n {local.children ?? (\n <div class=\"grid gap-0.5 leading-none\">\n {local.label ? (\n <KobalteRadioGroup.ItemLabel\n class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}\n >\n {local.label}\n </KobalteRadioGroup.ItemLabel>\n ) : null}\n {local.description ? (\n <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n {local.description}\n </KobalteRadioGroup.ItemDescription>\n ) : null}\n </div>\n )}\n </KobalteRadioGroup.Item>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","JSX","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","variant","media","Element","RadioGroupItem","card","data-variant","undefined","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'id',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby',\n 'aria-invalid',\n 'aria-errormessage',\n ])\n const field = useFormFieldControl('group', {\n id: local.id,\n 'aria-label': local['aria-label'],\n 'aria-labelledby': local['aria-labelledby'],\n 'aria-describedby': local['aria-describedby'],\n 'aria-invalid': local['aria-invalid'],\n 'aria-errormessage': local['aria-errormessage'],\n })\n return (\n <KobalteRadioGroup\n data-slot=\"radio-group\"\n id={field?.id ?? local.id}\n aria-label={local['aria-label']}\n aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n class={cn('grid gap-2', local.class)}\n {...rest}\n />\n )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n controlClass?: string\n /**\n * The option's visible label. A radio with no accessible name is unreachable\n * by a screen reader and by voice control, so supply this, a labelled child,\n * `aria-label`, or `aria-labelledby`.\n */\n label?: string\n description?: string\n /**\n * `card` draws the option as a bordered, selectable card — for a choice\n * whose options need a sentence each (a source type, a sync budget), where a\n * bare radio row reads as a form field rather than a decision. The whole card\n * is the hit target, and the selected card takes the primary edge. The radio,\n * `media` and text centre on one axis; the default variant keeps the radio on\n * the first line of its label.\n */\n variant?: 'default' | 'card'\n /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */\n media?: JSX.Element\n}\n\n/**\n * A card option's label stretches an invisible layer over the whole card, so a\n * click anywhere on it — padding, media, description — selects the option\n * through the label's native association with the radio input. Wrapping the\n * card in a `<label>` would nest the item's own label inside another.\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n const [local, rest] = splitProps(props, [\n 'class',\n 'controlClass',\n 'label',\n 'description',\n 'variant',\n 'media',\n 'children',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby',\n 'aria-invalid',\n 'aria-busy',\n 'title',\n ])\n const card = () => local.variant === 'card'\n\n return (\n <KobalteRadioGroup.Item\n data-slot=\"radio-group-item\"\n data-variant={card() ? 'card' : undefined}\n title={local.title}\n class={cn(\n 'group/radio flex gap-2.5',\n {\n 'items-start': !card(),\n // A card centres its radio, media and text on one axis. Top alignment\n // is right for a bare row, where the radio sits on the label's first\n // line, but in a card the media is taller than that line, so a\n // top-aligned radio floats above the icon and the label beside it.\n 'items-center': card(),\n 'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':\n card(),\n 'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':\n card(),\n },\n local.class\n )}\n {...rest}\n >\n <KobalteRadioGroup.ItemInput\n aria-label={local['aria-label']}\n aria-labelledby={local['aria-labelledby']}\n aria-describedby={local['aria-describedby']}\n aria-invalid={local['aria-invalid']}\n aria-busy={local['aria-busy']}\n title={local.title}\n />\n <KobalteRadioGroup.ItemControl\n class={cn(\n 'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n 'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n 'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n 'data-[checked]:border-primary data-[checked]:text-primary',\n 'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n 'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n local.controlClass\n )}\n >\n <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n <Circle class=\"size-2 fill-current\" />\n </KobalteRadioGroup.ItemIndicator>\n </KobalteRadioGroup.ItemControl>\n {local.media ? (\n <span data-slot=\"radio-group-item-media\" class=\"flex shrink-0 items-center\">\n {local.media}\n </span>\n ) : null}\n {local.children ?? (\n <div class=\"grid gap-0.5 leading-none\">\n {local.label ? (\n <KobalteRadioGroup.ItemLabel\n class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}\n >\n {local.label}\n </KobalteRadioGroup.ItemLabel>\n ) : null}\n {local.description ? (\n <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n {local.description}\n </KobalteRadioGroup.ItemDescription>\n ) : null}\n </div>\n )}\n </KobalteRadioGroup.Item>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A preset by id (`blue`), or `undefined` for `theme`, a theme-carried accent or an
|
|
3
|
+
* unknown id. The catalogue's own lookup, re-exported rather than copied so a host's
|
|
4
|
+
* stored-preference reader resolves an id exactly as the catalogue does without
|
|
5
|
+
* importing `lib/themes`.
|
|
6
|
+
*/
|
|
7
|
+
export { getAccent } from '@adea-ai/themes';
|
|
1
8
|
/**
|
|
2
9
|
* The accent axis.
|
|
3
10
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accent-presets.d.ts","sourceRoot":"","sources":["../../src/lib/accent-presets.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,SAAS,YAAY,EAQ/C,CAAA;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,mDAAU,CAAA"}
|
|
1
|
+
{"version":3,"file":"accent-presets.d.ts","sourceRoot":"","sources":["../../src/lib/accent-presets.ts"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAA;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,SAAS,YAAY,EAQ/C,CAAA;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,mDAAU,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ACCENTS } from "@adea-ai/themes";
|
|
1
|
+
import { ACCENTS, getAccent } from "@adea-ai/themes";
|
|
2
2
|
//#region src/lib/accent-presets.ts
|
|
3
3
|
var accentPresets = Object.freeze([{
|
|
4
4
|
id: "theme",
|
|
@@ -15,6 +15,6 @@ var accentPresets = Object.freeze([{
|
|
|
15
15
|
*/
|
|
16
16
|
var accents = ACCENTS;
|
|
17
17
|
//#endregion
|
|
18
|
-
export { accentPresets, accents };
|
|
18
|
+
export { accentPresets, accents, getAccent };
|
|
19
19
|
|
|
20
20
|
//# sourceMappingURL=accent-presets.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accent-presets.js","names":[],"sources":["../../src/lib/accent-presets.ts"],"sourcesContent":["import { ACCENTS } from '@adea-ai/themes'\n\n/*\n * Its own module so the theme provider's start-up path (the stored-preference reader\n * and the boot script both need the preset ids) does not import the token manifest in\n * `tokens.ts`, which is 20 KB of documentation data a provider never reads.\n * `tokens.ts` re-exports `accentPresets` and `AccentPreset`, and `themes.ts` re-exports\n * `accents`, so every existing import keeps working.\n */\n\n/**\n * The accent axis.\n *\n * adea's accent presets, as a selection rather than a constant. `theme` is the\n * default and means \"the variant's own primary\" — monochrome in adea's palette —\n * and each named preset overrides the interactive roles through the\n * `[data-accent]` blocks in `theme.css`.\n *\n * These are the same six presets `accentPresets` exports in adea's own\n * `appearance.ts`, and the values match. A consumer's appearance picker and the\n * workshop's theme toolbar read this one list, so the two cannot disagree about\n * what a preset is called or what colour it is.\n */\nexport type AccentPreset = {\n /** The `data-accent` value. `theme` is the variant's own primary. */\n id: string\n label: string\n /** What the preset is for, in the gallery and in a picker. */\n description: string\n /** The accent as it appears in the light theme. Absent for `theme`. */\n light?: string\n /** The accent as it appears in the dark theme. Absent for `theme`. */\n dark?: string\n}\n\nexport const accentPresets: readonly AccentPreset[] = Object.freeze([\n {\n id: 'theme',\n label: 'Theme',\n description:\n \"The variant's own primary. Neutral in adea's palette, so the interface stays monochrome.\",\n },\n ...ACCENTS,\n])\n\n/**\n * The six brand accent presets, in the order a picker should show them: the list\n * `accentPresets` carries after its own `theme` entry.\n *\n * Here and not beside the theme table in `lib/themes.ts` (which re-exports it, so\n * `@adea-ai/ui/lib/themes` still has it) because a bundler places a module whole, and\n * a host that wants only the list should not ship the 34-theme catalogue with it.\n */\nexport const accents = ACCENTS\n"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"accent-presets.js","names":[],"sources":["../../src/lib/accent-presets.ts"],"sourcesContent":["import { ACCENTS } from '@adea-ai/themes'\n\n/*\n * Its own module so the theme provider's start-up path (the stored-preference reader\n * and the boot script both need the preset ids) does not import the token manifest in\n * `tokens.ts`, which is 20 KB of documentation data a provider never reads.\n * `tokens.ts` re-exports `accentPresets` and `AccentPreset`, and `themes.ts` re-exports\n * `accents`, so every existing import keeps working.\n */\n\n/**\n * A preset by id (`blue`), or `undefined` for `theme`, a theme-carried accent or an\n * unknown id. The catalogue's own lookup, re-exported rather than copied so a host's\n * stored-preference reader resolves an id exactly as the catalogue does without\n * importing `lib/themes`.\n */\nexport { getAccent } from '@adea-ai/themes'\n\n/**\n * The accent axis.\n *\n * adea's accent presets, as a selection rather than a constant. `theme` is the\n * default and means \"the variant's own primary\" — monochrome in adea's palette —\n * and each named preset overrides the interactive roles through the\n * `[data-accent]` blocks in `theme.css`.\n *\n * These are the same six presets `accentPresets` exports in adea's own\n * `appearance.ts`, and the values match. A consumer's appearance picker and the\n * workshop's theme toolbar read this one list, so the two cannot disagree about\n * what a preset is called or what colour it is.\n */\nexport type AccentPreset = {\n /** The `data-accent` value. `theme` is the variant's own primary. */\n id: string\n label: string\n /** What the preset is for, in the gallery and in a picker. */\n description: string\n /** The accent as it appears in the light theme. Absent for `theme`. */\n light?: string\n /** The accent as it appears in the dark theme. Absent for `theme`. */\n dark?: string\n}\n\nexport const accentPresets: readonly AccentPreset[] = Object.freeze([\n {\n id: 'theme',\n label: 'Theme',\n description:\n \"The variant's own primary. Neutral in adea's palette, so the interface stays monochrome.\",\n },\n ...ACCENTS,\n])\n\n/**\n * The six brand accent presets, in the order a picker should show them: the list\n * `accentPresets` carries after its own `theme` entry.\n *\n * Here and not beside the theme table in `lib/themes.ts` (which re-exports it, so\n * `@adea-ai/ui/lib/themes` still has it) because a bundler places a module whole, and\n * a host that wants only the list should not ship the 34-theme catalogue with it.\n */\nexport const accents = ACCENTS\n"],"mappings":";;AA2CA,IAAa,gBAAyC,OAAO,OAAO,CAClE;CACE,IAAI;CACJ,OAAO;CACP,aACE;AACJ,GACA,GAAG,OACL,CAAC;;;;;;;;;AAUD,IAAa,UAAU"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type AccentPreset, type AdeaTheme, type AdeaThemeRecord } from '@adea-ai/themes';
|
|
2
|
+
export { editorRolesHex, syntaxRolesHex } from '@adea-ai/themes';
|
|
3
|
+
export { oklchToHex, parseColor as parseOklchColor } from '@adea-ai/themes/oklch';
|
|
4
|
+
export { shadcnDestructiveProjection, shadcnVariables } from '@adea-ai/themes/adapters/shadcn';
|
|
5
|
+
export { toXtermTheme } from '@adea-ai/themes/adapters/xterm';
|
|
6
|
+
/**
|
|
7
|
+
* The default theme of an appearance as a canonical record: the roles an imported
|
|
8
|
+
* theme falls back to for anything its file does not carry.
|
|
9
|
+
*
|
|
10
|
+
* `defaultVariantFor` is the same theme as a runtime variant; a record keeps the
|
|
11
|
+
* catalogue's own roles (`surfaceActive`, `textSubtle`, the ANSI ramp) that a variant
|
|
12
|
+
* folds together.
|
|
13
|
+
*/
|
|
14
|
+
export declare function defaultThemeRecord(appearance: 'light' | 'dark'): AdeaThemeRecord;
|
|
15
|
+
/**
|
|
16
|
+
* The accents a light/dark pair of records carries itself, beside the presets.
|
|
17
|
+
*
|
|
18
|
+
* For a host whose pair is not in the catalogue — an imported theme — where
|
|
19
|
+
* `themeAccentsFor` (which looks the pair up by id) cannot answer. A slot is offered
|
|
20
|
+
* only when both themes clear the catalogue's accent floors.
|
|
21
|
+
*/
|
|
22
|
+
export declare function themeAccentsForRecords(light: AdeaTheme, dark: AdeaTheme): readonly AccentPreset[];
|
|
23
|
+
//# sourceMappingURL=theme-projection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-projection.d.ts","sourceRoot":"","sources":["../../src/lib/theme-projection.ts"],"names":[],"mappings":"AAkBA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChE,OAAO,EAAE,UAAU,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACjF,OAAO,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAE7D;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,GAAG,eAAe,CAEhF;AAED;;;;;;GAMG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,GAAG,SAAS,YAAY,EAAE,CAEjG"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { editorRolesHex, syntaxRolesHex, themeAccentPresets } from "@adea-ai/themes";
|
|
2
|
+
import { oklchToHex, parseColor as parseOklchColor } from "@adea-ai/themes/oklch";
|
|
3
|
+
import { shadcnDestructiveProjection, shadcnVariables } from "@adea-ai/themes/adapters/shadcn";
|
|
4
|
+
import adeaDark from "@adea-ai/themes/themes/adea-dark";
|
|
5
|
+
import adeaLight from "@adea-ai/themes/themes/adea-light";
|
|
6
|
+
import { toXtermTheme } from "@adea-ai/themes/adapters/xterm";
|
|
7
|
+
//#region src/lib/theme-projection.ts
|
|
8
|
+
/**
|
|
9
|
+
* What a host needs to turn a canonical theme record into the values it stores.
|
|
10
|
+
*
|
|
11
|
+
* Adea imports user themes: a file is validated, repaired toward the readable floor,
|
|
12
|
+
* and projected onto the hex values the host persists. That projection is the
|
|
13
|
+
* catalogue's own (`shadcnVariables`, the xterm adapter, the editor roles), so it is
|
|
14
|
+
* re-exported here and the host depends on this package alone for it — the pin
|
|
15
|
+
* between this package and `@adea-ai/themes` cannot drift from the host's.
|
|
16
|
+
*
|
|
17
|
+
* Its own module, with no catalogue data and no definition of its own beyond the two
|
|
18
|
+
* default records, so that:
|
|
19
|
+
*
|
|
20
|
+
* - a host's start-up path never reaches it (it is for an importer loaded on demand);
|
|
21
|
+
* - `lib/themes.ts`, which holds the 34-theme table, is not the place a host has to
|
|
22
|
+
* import from to get a record-shaped helper.
|
|
23
|
+
*/
|
|
24
|
+
/**
|
|
25
|
+
* The default theme of an appearance as a canonical record: the roles an imported
|
|
26
|
+
* theme falls back to for anything its file does not carry.
|
|
27
|
+
*
|
|
28
|
+
* `defaultVariantFor` is the same theme as a runtime variant; a record keeps the
|
|
29
|
+
* catalogue's own roles (`surfaceActive`, `textSubtle`, the ANSI ramp) that a variant
|
|
30
|
+
* folds together.
|
|
31
|
+
*/
|
|
32
|
+
function defaultThemeRecord(appearance) {
|
|
33
|
+
return appearance === "dark" ? adeaDark : adeaLight;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* The accents a light/dark pair of records carries itself, beside the presets.
|
|
37
|
+
*
|
|
38
|
+
* For a host whose pair is not in the catalogue — an imported theme — where
|
|
39
|
+
* `themeAccentsFor` (which looks the pair up by id) cannot answer. A slot is offered
|
|
40
|
+
* only when both themes clear the catalogue's accent floors.
|
|
41
|
+
*/
|
|
42
|
+
function themeAccentsForRecords(light, dark) {
|
|
43
|
+
return themeAccentPresets(light, dark);
|
|
44
|
+
}
|
|
45
|
+
//#endregion
|
|
46
|
+
export { defaultThemeRecord, editorRolesHex, oklchToHex, parseOklchColor, shadcnDestructiveProjection, shadcnVariables, syntaxRolesHex, themeAccentsForRecords, toXtermTheme };
|
|
47
|
+
|
|
48
|
+
//# sourceMappingURL=theme-projection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-projection.js","names":[],"sources":["../../src/lib/theme-projection.ts"],"sourcesContent":["/**\n * What a host needs to turn a canonical theme record into the values it stores.\n *\n * Adea imports user themes: a file is validated, repaired toward the readable floor,\n * and projected onto the hex values the host persists. That projection is the\n * catalogue's own (`shadcnVariables`, the xterm adapter, the editor roles), so it is\n * re-exported here and the host depends on this package alone for it — the pin\n * between this package and `@adea-ai/themes` cannot drift from the host's.\n *\n * Its own module, with no catalogue data and no definition of its own beyond the two\n * default records, so that:\n *\n * - a host's start-up path never reaches it (it is for an importer loaded on demand);\n * - `lib/themes.ts`, which holds the 34-theme table, is not the place a host has to\n * import from to get a record-shaped helper.\n */\nimport adeaDark from '@adea-ai/themes/themes/adea-dark'\nimport adeaLight from '@adea-ai/themes/themes/adea-light'\nimport {\n themeAccentPresets,\n type AccentPreset,\n type AdeaTheme,\n type AdeaThemeRecord,\n} from '@adea-ai/themes'\n\nexport { editorRolesHex, syntaxRolesHex } from '@adea-ai/themes'\nexport { oklchToHex, parseColor as parseOklchColor } from '@adea-ai/themes/oklch'\nexport { shadcnDestructiveProjection, shadcnVariables } from '@adea-ai/themes/adapters/shadcn'\nexport { toXtermTheme } from '@adea-ai/themes/adapters/xterm'\n\n/**\n * The default theme of an appearance as a canonical record: the roles an imported\n * theme falls back to for anything its file does not carry.\n *\n * `defaultVariantFor` is the same theme as a runtime variant; a record keeps the\n * catalogue's own roles (`surfaceActive`, `textSubtle`, the ANSI ramp) that a variant\n * folds together.\n */\nexport function defaultThemeRecord(appearance: 'light' | 'dark'): AdeaThemeRecord {\n return appearance === 'dark' ? adeaDark : adeaLight\n}\n\n/**\n * The accents a light/dark pair of records carries itself, beside the presets.\n *\n * For a host whose pair is not in the catalogue — an imported theme — where\n * `themeAccentsFor` (which looks the pair up by id) cannot answer. A slot is offered\n * only when both themes clear the catalogue's accent floors.\n */\nexport function themeAccentsForRecords(light: AdeaTheme, dark: AdeaTheme): readonly AccentPreset[] {\n return themeAccentPresets(light, dark)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,mBAAmB,YAA+C;CAChF,OAAO,eAAe,SAAS,WAAW;AAC5C;;;;;;;;AASA,SAAgB,uBAAuB,OAAkB,MAA0C;CACjG,OAAO,mBAAmB,OAAO,IAAI;AACvC"}
|
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
*/
|
|
16
16
|
import { type AdeaThemeRecord } from '@adea-ai/themes';
|
|
17
17
|
import type { ThemeVariant } from './themes';
|
|
18
|
+
/** The catalogue's canonical theme shapes, for a host that holds records and no catalogue. */
|
|
19
|
+
export type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes';
|
|
18
20
|
/**
|
|
19
21
|
* The design system's view of one catalogue record, built in full and at once.
|
|
20
22
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-records.d.ts","sourceRoot":"","sources":["../../src/lib/theme-records.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAML,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAKV,YAAY,EACb,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"theme-records.d.ts","sourceRoot":"","sources":["../../src/lib/theme-records.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAML,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAA;AAExB,OAAO,KAAK,EAKV,YAAY,EACb,MAAM,UAAU,CAAA;AAEjB,8FAA8F;AAC9F,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAuGjE;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CActE;AAoBD;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAkB1E"}
|