You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
1.2 KiB
34 lines
1.2 KiB
<script lang="ts">
|
|
/**
|
|
* `<IntentIcon>` — picks the canonical glyph for an Intent (or
|
|
* the loading glyph when `loading=true`) from the doctrinal map in
|
|
* `intent.ts`. Forwards every other `<Icon>` prop, so consumers get
|
|
* size / strokeWidth / color / aria controls without re-wiring them.
|
|
*
|
|
* Use this anywhere a UI surface needs to show "what kind of thing
|
|
* is this": toast status disc, dialog confirmation badge, field
|
|
* validation glyph, banner ribbon, etc. Editing the mapping in
|
|
* `intent.ts` re-themes them all in one place.
|
|
*/
|
|
import type { Intent } from '$uix/intent';
|
|
import type { IconProps } from './types';
|
|
import { INTENT_ICON, LOADING_ICON } from './intent';
|
|
|
|
type Props = Omit<IconProps, 'children'> & {
|
|
/** Canonical Intent driving the glyph choice. */
|
|
intent: Intent;
|
|
/**
|
|
* When true, renders the loading glyph instead of the intent
|
|
* glyph. The animation (spin) is the consumer recipe's job —
|
|
* style it via `[data-loading] [data-icon]` or similar.
|
|
* @default false
|
|
*/
|
|
loading?: boolean;
|
|
};
|
|
|
|
let { intent, loading = false, ...rest }: Props = $props();
|
|
const Glyph = $derived(loading ? LOADING_ICON : INTENT_ICON[intent]);
|
|
</script>
|
|
|
|
<Glyph {...rest} />
|