@filipgutica/ui 0.2.2 → 1.0.0

package/README.md

@@ -1,6 +1,6 @@
 # @filipgutica/ui
 
-A compact Vue 3 design system built on [Reka UI](https://reka-ui.com), with
+A compact Vue 3.5+ design system built on [Reka UI](https://reka-ui.com), with
 Tailwind CSS 4 tokens and safe VS Code/Open VSX color-theme normalization.
 
 ## Install
@@ -26,8 +26,10 @@ The first application-focused set includes:
 
 - `UiButton` with primary, secondary, ghost, danger, and text variants
 - `UiInput`, `UiSelect`, and `UiField` for consistent form controls
-- `UiCheckbox`, `UiBadge`, `UiAlert`, and `UiProgress` for state and feedback
-- `UiSurface` for restrained content grouping
+- `UiCheckbox`, `UiSlider`, `UiRadioCard`, and `UiRadioCardGroup` for user input
+- `UiBadge`, `UiAlert`, and `UiProgress` for state and feedback
+- `UiCard` for structured content, actions, and footer metadata
+- `UiCodeBlock` for copyable, theme-aware source snippets
 - `UiDialog`, built on Reka UI, for accessible modal interaction
 
 Place `UiInput` or `UiSelect` inside `UiField`. The field supplies the control ID
@@ -36,7 +38,7 @@ ARIA relationship.
 
 ```vue
 <template>
-  <UiButton variant="secondary" size="compact">
+  <UiButton variant="secondary" size="sm">
     Inspect evidence
   </UiButton>
 </template>
@@ -46,6 +48,58 @@ import { UiButton } from '@filipgutica/ui'
 </script>
 ```
 
+`UiButton`, `UiInput`, `UiSelect`, `UiCheckbox`, and `UiSlider` share
+`size="sm | md | lg"`
+and default to the tighter `md` density. Existing `UiButton` values remain
+compatible: `compact` retains its former compact treatment and `default` maps
+to `lg`.
+
+`UiCodeBlock` accepts source text through `code`, shows a copy action by default,
+and highlights the selected language using the active theme. It can display a
+title, line numbers, or wrapped lines; unknown languages stay readable as plain text:
+
+```vue
+<UiCodeBlock
+  title="Example.vue"
+  language="vue"
+  :code="snippet"
+  :line-numbers="true"
+/>
+```
+
+Highlighting supports Vue, JavaScript (`js`), TypeScript (`ts`), HTML, CSS,
+JSON, and Bash (`sh`/`shell`). Imported TextMate `tokenColors` are normalized
+into a shared syntax palette; language-specific overrides and font styles are
+not reproduced exactly. Themes saved before syntax support should be re-imported
+to recover their syntax colors. Existing saved themes remain usable with themed fallbacks.
+
+`UiSurface` remains exported for compatibility. New structured containers
+should use `UiCard`.
+
+## Design conventions
+
+Use a compact, Geist-inspired hierarchy: 14px for UI body text, 13px for
+secondary text, and 18px for dialog titles. Treat Open VSX/VS Code themes as
+the color authority, and use semantic tokens and package components instead of
+hard-coded provider color keys.
+Typography is package-owned through `--font-ui` and `--font-mono`; override
+these once at the application root rather than restyling each component.
+
+- Use shared control sizes `sm`, `md`, and `lg` (32px, 36px, and 44px); the
+  default is `md`. Keep layout on a 4px rhythm, with 12px, 16px, and 24px as
+  common gaps and insets.
+- Choose `UiCard` for structured content and optional actions or footer data.
+  Choose `UiRadioCardGroup` with `UiRadioCard` for one-of-many rich options;
+  choose `UiDialog` for modal tasks that need focus management.
+- Use one primary action per task, secondary buttons for supporting actions,
+  and danger styling only for destructive actions. Use `UiBadge` for a short
+  status, `UiAlert` for feedback, and `UiCodeBlock` for source code.
+- Put `UiInput` and `UiSelect` in `UiField` with a visible label. Supply help
+  text or an error when needed so the field exposes the matching ARIA relationship.
+- Keep borders quiet and skip decorative grids. Preserve visible
+  `:focus-visible` states, use 44px targets for touch-oriented actions, and provide
+  an accessible name for every interactive control.
+
 ## VS Code themes
 
 The browser-safe theme entry point parses VS Code JSON/JSONC and maps supported
@@ -79,6 +133,28 @@ redistribute theme assets remain responsible for their licenses.
   this package so applications keep a consistent design language.
 - `@filipgutica/ui/open-vsx` is Node-only. Do not import it into browser bundles.
 
+## Docs and sandbox
+
+Start the component docs and sandbox:
+
+```sh
+pnpm docs:dev
+```
+
+Build the provider-neutral static assets:
+
+```sh
+pnpm docs:build
+```
+
+The docs use hash routes, so the static assets do not require rewrite rules.
+The local Vite server also provides the same-origin `/api/open-vsx` endpoint.
+The theme picker uses this endpoint to search and import Open VSX themes.
+
+A production host must provide the same API endpoint for live Open VSX imports.
+Netlify and Amplify can use a serverless adapter. GitHub Pages needs an external
+API or a catalog of normalized themes built in advance.
+
 ## Development
 
 ```sh
@@ -90,12 +166,19 @@ Commits follow the Conventional Commits format. Releases run from `main`:
 
 - `fix:` publishes a patch release
 - `feat:` publishes a minor release
+- `feat!:` publishes a major release
 - `BREAKING CHANGE:` or `[BREAKING CHANGE]` anywhere in a commit body publishes
   a major release
 - the same markers anywhere in an associated merged PR body publish a major
   release
 
-The `release.yml` workflow publishes through npm trusted publishing with GitHub
-OIDC. Configure the npm package's trusted publisher once with user
-`filipgutica`, repository `ui`, and workflow filename `release.yml`; no npm token
-is stored in GitHub.
+The `release.yml` workflow runs on every push to `main`. When semantic-release
+finds qualifying commits, it publishes the next version to npm, creates the
+matching `v<version>` tag, and creates a GitHub Release. Configure an `NPM_TOKEN`
+Actions secret with permission to publish `@filipgutica/ui`; contributors do not
+publish locally or add a token to the repository.
+
+Before the first token-backed release, remove the package's existing trusted
+publisher in npm. The workflow retains `id-token: write` only for the provenance
+attestations enabled in `package.json`; npm registry authentication comes from
+the `NPM_TOKEN` secret.

package/dist/code-highlight-BuTmXL3w.js

@@ -0,0 +1,85 @@
+import { createHighlighterCoreSync as e } from "shiki/core";
+import { createJavaScriptRegexEngine as t } from "shiki/engine/javascript";
+//#region src/code-highlight.ts
+var n = {
+	bash: () => import("shiki/langs/bash.mjs"),
+	css: () => import("shiki/langs/css.mjs"),
+	html: () => import("shiki/langs/html.mjs"),
+	javascript: () => import("shiki/langs/javascript.mjs"),
+	json: () => import("shiki/langs/json.mjs"),
+	typescript: () => import("shiki/langs/typescript.mjs"),
+	vue: () => import("shiki/langs/vue.mjs")
+}, r = e({
+	engine: t(),
+	langs: [],
+	themes: [{
+		name: "ui-semantic",
+		fg: "var(--color-code-text)",
+		bg: "var(--color-code)",
+		settings: [
+			{
+				scope: ["comment"],
+				settings: { foreground: "var(--color-syntax-comment)" }
+			},
+			{
+				scope: ["keyword", "storage"],
+				settings: { foreground: "var(--color-syntax-keyword)" }
+			},
+			{
+				scope: ["string"],
+				settings: { foreground: "var(--color-syntax-string)" }
+			},
+			{
+				scope: ["constant.numeric", "constant.language"],
+				settings: { foreground: "var(--color-syntax-number)" }
+			},
+			{
+				scope: ["entity.name.function", "support.function"],
+				settings: { foreground: "var(--color-syntax-function)" }
+			},
+			{
+				scope: [
+					"entity.name.type",
+					"entity.name.class",
+					"support.type",
+					"support.class"
+				],
+				settings: { foreground: "var(--color-syntax-type)" }
+			},
+			{
+				scope: ["variable"],
+				settings: { foreground: "var(--color-syntax-variable)" }
+			},
+			{
+				scope: ["keyword.operator"],
+				settings: { foreground: "var(--color-syntax-operator)" }
+			},
+			{
+				scope: ["punctuation"],
+				settings: { foreground: "var(--color-syntax-punctuation)" }
+			},
+			{
+				scope: ["entity.name.tag"],
+				settings: { foreground: "var(--color-syntax-tag)" }
+			},
+			{
+				scope: ["entity.other.attribute-name"],
+				settings: { foreground: "var(--color-syntax-attribute)" }
+			}
+		]
+	}]
+}), i = async ({ code: e, language: t }) => {
+	let i = Object.entries(n).find(([e]) => e === t)?.[1];
+	if (!i) return e.split("\n").map((e) => [{ content: e }]);
+	r.getLoadedLanguages().includes(t) || await r.loadLanguage((await i()).default);
+	let a = t === "vue" && !/^\s*(?:<!--[\s\S]*?-->\s*)*<(?:template|script|style)(?=[\s>])/.test(e), o = a ? `<template>\n${e}\n</template>` : e, s = r.codeToTokens(o, {
+		lang: t,
+		theme: "ui-semantic"
+	}).tokens;
+	return (a ? s.slice(1, -1) : s).map((e) => e.map(({ content: e, color: t }) => ({
+		content: e,
+		color: t
+	})));
+};
+//#endregion
+export { i as highlightCode };

package/dist/code-highlight.d.ts

@@ -0,0 +1,6 @@
+export declare const highlightCode: ({ code, language }: {
+    code: string;
+    language: string;
+}) => Promise<{
+    content: string;
+}[][]>;

package/dist/components/UiAlert.vue.d.ts

@@ -5,9 +5,7 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<UiAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiAlertProps> & Readonly<{}>, {
-    tone: "neutral" | "info" | "success" | "warning" | "danger" | "error";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<UiAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiAlertProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/UiBadge.vue.d.ts

@@ -1,13 +1,11 @@
 export interface UiBadgeProps {
-    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'error';
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<UiBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiBadgeProps> & Readonly<{}>, {
-    tone: "neutral" | "info" | "success" | "warning" | "danger";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<UiBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiBadgeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/UiButton.vue.d.ts

@@ -1,7 +1,8 @@
+import type { UiControlSize } from '../control.js';
 export interface UiButtonProps {
     disabled?: boolean;
     loading?: boolean;
-    size?: 'default' | 'compact';
+    size?: UiControlSize | 'compact' | 'default';
     type?: 'button' | 'submit' | 'reset';
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'text';
 }
@@ -9,13 +10,7 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<UiButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiButtonProps> & Readonly<{}>, {
-    disabled: boolean;
-    loading: boolean;
-    size: "default" | "compact";
-    type: "button" | "submit" | "reset";
-    variant: "primary" | "secondary" | "ghost" | "danger" | "text";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<UiButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/UiCard.vue.d.ts

@@ -0,0 +1,19 @@
+export interface UiCardProps {
+    title?: string;
+    titleTag?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+type __VLS_Slots = {
+    actions?(): unknown;
+    default?(): unknown;
+    footer?(): unknown;
+    title?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiCardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiCheckbox.vue.d.ts

@@ -1,6 +1,8 @@
+import type { UiControlSize } from '../control.js';
 export interface UiCheckboxProps {
     disabled?: boolean;
     modelValue?: boolean;
+    size?: UiControlSize;
 }
 declare var __VLS_15: {};
 type __VLS_Slots = {} & {
@@ -10,10 +12,7 @@ declare const __VLS_base: import("vue").DefineComponent<UiCheckboxProps, {}, {},
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<UiCheckboxProps> & Readonly<{
     "onUpdate:modelValue"?: (value: boolean) => any;
-}>, {
-    disabled: boolean;
-    modelValue: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/UiCodeBlock.vue.d.ts

@@ -0,0 +1,20 @@
+export interface UiCodeBlockProps {
+    code: string;
+    language?: string;
+    title?: string;
+    copyable?: boolean;
+    lineNumbers?: boolean;
+    wrap?: boolean;
+}
+type __VLS_Slots = {
+    actions?(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiCodeBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiCodeBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiInput.vue.d.ts

@@ -1,19 +1,16 @@
+import type { UiControlSize } from '../control.js';
 export interface UiInputProps {
     disabled?: boolean;
     id?: string;
     invalid?: boolean;
     modelValue?: string;
+    size?: UiControlSize;
     type?: 'text' | 'search' | 'email' | 'password' | 'url';
 }
 declare const __VLS_export: import("vue").DefineComponent<UiInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<UiInputProps> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;
-}>, {
-    disabled: boolean;
-    type: "text" | "search" | "email" | "password" | "url";
-    modelValue: string;
-    invalid: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/UiRadioCard.vue.d.ts

@@ -0,0 +1,17 @@
+export interface UiRadioCardProps {
+    disabled?: boolean;
+    value: string;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiRadioCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiRadioCardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiRadioCardGroup.vue.d.ts

@@ -0,0 +1,27 @@
+export interface UiRadioCardGroupProps {
+    disabled?: boolean;
+    loop?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+}
+type __VLS_Props = UiRadioCardGroupProps;
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiSelect.vue.d.ts

@@ -1,8 +1,10 @@
+import type { UiControlSize } from '../control.js';
 export interface UiSelectProps {
     disabled?: boolean;
     id?: string;
     invalid?: boolean;
     modelValue?: string;
+    size?: UiControlSize;
 }
 declare var __VLS_10: {};
 type __VLS_Slots = {} & {
@@ -12,11 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<UiSelectProps, {}, {}, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<UiSelectProps> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;
-}>, {
-    disabled: boolean;
-    modelValue: string;
-    invalid: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/UiSlider.vue.d.ts

@@ -0,0 +1,18 @@
+import type { UiControlSize } from '../control.js';
+export interface UiSliderProps {
+    disabled?: boolean;
+    id?: string;
+    label: string;
+    max?: number;
+    min?: number;
+    modelValue?: number;
+    size?: UiControlSize;
+    step?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<UiSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<UiSliderProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/UiSurface.vue.d.ts

@@ -6,10 +6,7 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<UiSurfaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSurfaceProps> & Readonly<{}>, {
-    as: string;
-    padding: "none" | "compact" | "default";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<UiSurfaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSurfaceProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/control.d.ts

@@ -0,0 +1 @@
+export type UiControlSize = 'sm' | 'md' | 'lg';

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 export { default as UiButton } from './components/UiButton.vue';
 export type { UiButtonProps } from './components/UiButton.vue';
+export { default as UiCard } from './components/UiCard.vue';
+export type { UiCardProps } from './components/UiCard.vue';
+export { default as UiCodeBlock } from './components/UiCodeBlock.vue';
+export type { UiCodeBlockProps } from './components/UiCodeBlock.vue';
 export { default as UiAlert } from './components/UiAlert.vue';
 export type { UiAlertProps } from './components/UiAlert.vue';
 export { default as UiBadge } from './components/UiBadge.vue';
@@ -14,7 +18,15 @@ export { default as UiInput } from './components/UiInput.vue';
 export type { UiInputProps } from './components/UiInput.vue';
 export { default as UiProgress } from './components/UiProgress.vue';
 export type { UiProgressProps } from './components/UiProgress.vue';
+export { default as UiRadioCard } from './components/UiRadioCard.vue';
+export type { UiRadioCardProps } from './components/UiRadioCard.vue';
+export { default as UiRadioCardGroup } from './components/UiRadioCardGroup.vue';
+export type { UiRadioCardGroupProps } from './components/UiRadioCardGroup.vue';
 export { default as UiSelect } from './components/UiSelect.vue';
 export type { UiSelectProps } from './components/UiSelect.vue';
+export { default as UiSlider } from './components/UiSlider.vue';
+export type { UiSliderProps } from './components/UiSlider.vue';
+/** @deprecated Use UiCard for structured content. */
 export { default as UiSurface } from './components/UiSurface.vue';
 export type { UiSurfaceProps } from './components/UiSurface.vue';
+export type { UiControlSize } from './control.js';