feat(eidos): shape prop on TagsInput.Item (the chip) + document universal data-shape

`<TagsInput.Item shape="cut">` — typed `shape` (rounded/continuous/cut/scoop) on the
tag chip, the case the family system was made for. Emits `data-shape` -> the
foundation rule.

Also clarified (pendiente.md): every component that spreads `{...rest}` already
accepts `data-shape="…"` directly (verified on inputs + tags), so the families are
usable everywhere today; the typed `shape` prop is ergonomic sugar on the common
surfaces (Badge / Card / Button / TagsInput.Item).

Verified: check 0 errors. Browser: real tag chip data-shape=cut -> bevel.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 6d56188fde
commit 4045e308b1

@ -6,12 +6,15 @@ Que cada componente reciba la **familia de forma** (`rounded` · `continuous` ·
como prop, además del default del tema. Diferenciador fuerte en **chips y badges**.
- ✅ **Hecho (2026-06-05)**: canon `SHAPE_FAMILIES` + tipo `ShapeFamily` en `lib/types`; prop
`shape` en **Badge · Card · Button** → emite `data-shape="{family}"` (la regla
`[data-shape]` del motor hace el resto). Ortogonal a `rounded` (magnitud); default = arco.
- ⏳ **Pendiente — extender la prop** a más superficies: inputs (text-field/number-field/
textarea/search-field), `tags-input` (los tags = chips, caso ideal de `cut`/`scoop`),
contenidos flotantes (popover/dropdown/select content). Mismo patrón de 3 ediciones
(import `ShapeFamily` + prop + `data-shape`).
`shape` en **Badge · Card · Button · TagsInput.Item** (el chip) → emite `data-shape="{family}"`
(la regla `[data-shape]` del motor hace el resto). Ortogonal a `rounded` (magnitud); default =
arco.
- 💡 **Universal hoy vía atributo**: TODO componente que difunde `{...rest}` acepta
`data-shape="cut"` directamente (verificado en inputs, tags, etc.) — la familia ya es usable en
cualquier sitio sin prop. La prop typed es solo el azúcar ergonómico de los más comunes.
- ⏳ **Pendiente — azúcar typed** en más superficies si se piden: inputs (number-field/
textarea/search-field/select), contenidos flotantes (popover/dropdown/select content). Mismo
patrón de 3 ediciones (import `ShapeFamily` + prop + `data-shape`).
- **No** aplicar familias a círculos / píldoras (avatares): las deformaría (un avatar
`continuous` se vuelve squircle, un `cut` octágono). El default de esos componentes debe
quedarse en `rounded`.

@ -2,9 +2,9 @@
import * as TagsInput from '$soma/components/tags-input';
import type { TagsInputItemProps } from './types';
let { children, ...rest }: TagsInputItemProps = $props();
let { shape, children, ...rest }: TagsInputItemProps = $props();
</script>
<TagsInput.Item {...rest}>
<TagsInput.Item data-shape={shape} {...rest}>
{@render children?.()}
</TagsInput.Item>

@ -7,7 +7,7 @@ import type {
ItemTextProps,
ProviderProps
} from '$soma/components/tags-input';
import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types';
import type { ColorRole, ControlVariant, ResponsiveProp, ShapeFamily, Size } from '$uix/eidos/lib/types';
export type TagsInputSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
export type TagsInputVariant = ControlVariant;
@ -24,7 +24,14 @@ export type TagsInputProps = ProviderProps & {
export type TagsInputControlProps = ControlProps;
export type TagsInputInputProps = InputProps;
export type TagsInputItemProps = ItemProps;
export type TagsInputItemProps = ItemProps & {
/**
* Corner shape family for the tag chip — `rounded` (arc) · `continuous` (squircle) · `cut`
* (bevel) · `scoop` (concave). Emits `data-shape`; degrades to the arc where `corner-shape`
* is unsupported. A `cut`/`scoop` tag is a strong category differentiator. @default 'rounded'
*/
shape?: ShapeFamily;
};
export type TagsInputItemTextProps = ItemTextProps;
export type TagsInputItemDeleteTriggerProps = ItemDeleteTriggerProps;
export type TagsInputClearTriggerProps = ClearTriggerProps;

Loading…
Cancel
Save

Powered by TurnKey Linux.