@tempomedia/antarmuka 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2026-06-18
+
+### Added
+
+Initial MVP release — rewritten from the previous Nuxt 3 kit into a React component library.
+
+- **Tooling**: Vite Library Mode (ESM + CJS + TypeScript declarations + `style.css`), Tailwind CSS v4, Storybook, Vitest + React Testing Library, ESLint + Prettier, GitHub Actions CI and tag-based publish.
+- **Core components**: `Button`, `Input`, `Textarea`, `Badge`, `Card`, `Alert`, `Spinner`, `Avatar` — each with stories, tests, `className` support, and accessibility attributes.
+- **Feature components**: `MemberzonePanel` and `Memberzone.*` Radix-based drawer primitives, `SocialMedia` — ported from the Nuxt Memberzone with the router/Nuxt coupling removed.
+- **Design tokens**: colors, typography, spacing, radius, shadows, z-index, breakpoints.
+- **Utilities**: `cn` class-merge helper; exported icon set.

package/README.md

@@ -0,0 +1,102 @@
+# @tempo/antarmuka
+
+Tempo's shared global UI component library for React products.
+
+_Antarmuka_ means "interface" in Bahasa Indonesia — this package is Tempo's shared user interface layer, providing consistent, accessible, reusable components across React-based Tempo products (TanStack Start, Next.js, Astro React, Laravel Inertia React, internal tools).
+
+Built with **React + TypeScript + Vite (Library Mode) + Tailwind CSS v4 + Storybook + Vitest**.
+
+## Installation
+
+```bash
+npm install @tempo/antarmuka
+```
+
+`react` and `react-dom` (>= 18) are peer dependencies.
+
+## Usage
+
+Import the stylesheet once at your app's entry point, then use components anywhere:
+
+```tsx
+// app entry (e.g. main.tsx)
+import '@tempo/antarmuka/styles.css'
+```
+
+```tsx
+import { Button, Input, MemberzonePanel } from '@tempo/antarmuka'
+
+export default function Page() {
+  return (
+    <form>
+      <Input label="Email" placeholder="you@tempo.co" />
+      <Button variant="primary">Submit</Button>
+    </form>
+  )
+}
+```
+
+### Memberzone (Tempo account drawer)
+
+```tsx
+import { MemberzonePanel } from '@tempo/antarmuka'
+
+<MemberzonePanel
+  user={{
+    id: 9896432,
+    fullname: 'Anjar Pratama',
+    email: 'anjar@tempo.co',
+    initial: 'An',
+    firstLetterOfName: 'A',
+    vipSubscription: false,
+    contentAccess: ['tempo_plus', 'teras_plus'],
+  }}
+  templateFor="tempo"        // or "teras"
+  ssoUrl="https://sso.tempo.co"
+  side="right"
+  onLogout={() => signOut()} // optional; falls back to an SSO logout link
+/>
+```
+
+The Memberzone is framework-agnostic: it has no router dependency. Active menu highlighting uses `window.location.pathname` by default, or pass `currentPath` explicitly.
+
+## Components
+
+| Group     | Components                                                       |
+| --------- | ---------------------------------------------------------------- |
+| Form      | `Button`, `Input`, `Textarea`                                    |
+| Display   | `Badge`, `Card`, `Alert`, `Spinner`, `Avatar`                    |
+| Feature   | `MemberzonePanel` + `Memberzone.*` primitives, `SocialMedia`     |
+
+Design tokens (`colors`, `typography`, `spacing`, `radius`, `shadows`, `zIndex`, `breakpoints`), the `cn` class-merge helper, and all icons are also exported.
+
+## Development
+
+```bash
+npm install
+npm run dev          # Storybook on http://localhost:6006
+npm run test         # Vitest
+npm run lint         # ESLint
+npm run typecheck    # tsc --noEmit
+npm run build        # build dist/ (ESM + CJS + d.ts + style.css)
+```
+
+## Publishing
+
+Publishing is automated via GitHub Actions on `v*` tags (see `.github/workflows/publish.yml`), running lint → typecheck → test → build → `npm publish --access restricted`. Requires the `NPM_TOKEN` secret.
+
+Manual publish:
+
+```bash
+npm login
+npm run build
+npm publish --access restricted
+```
+
+## Versioning
+
+This package follows [Semantic Versioning](https://semver.org/). See [CHANGELOG.md](./CHANGELOG.md).
+
+## License
+
+MIT

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,9 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+/** Accordion root. Pass `type="single"` (collapsible) or `type="multiple"`. */
+export declare const Accordion: import('react').ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: import('react').ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AccordionTrigger: import('react').ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
+    /** Hide the default chevron indicator. */
+    hideChevron?: boolean;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const AccordionContent: import('react').ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';

package/dist/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Design-system button (the Figma "Button" component).
+ *
+ * Faithful to the spec: 1px border radius, `Primary-Main` (#D61D23) fill,
+ * Small = 32px tall with 8px/12px padding and an 8px gap. Distinct from the
+ * lighter {@link Button} primitive (which uses `rounded-sm`).
+ */
+export declare const actionButtonVariants: (props?: ({
+    variant?: "primary" | "secondary" | null | undefined;
+    styleType?: "fill" | "outline" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof actionButtonVariants> {
+    /** Show a loading spinner and disable interaction. */
+    loading?: boolean;
+    /** Icon node rendered before the label. Only shown when `showIconLeft` is true. */
+    iconLeft?: ReactNode;
+    /** Icon node rendered after the label. Only shown when `showIconRight` is true. */
+    iconRight?: ReactNode;
+    /** Toggle the left icon (Figma: Show Icon Left). Default false. */
+    showIconLeft?: boolean;
+    /** Toggle the right icon (Figma: Show Icon Right). Default false. */
+    showIconRight?: boolean;
+}
+export declare const ActionButton: import('react').ForwardRefExoticComponent<ActionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/ActionButton/index.d.ts

@@ -0,0 +1 @@
+export { ActionButton, actionButtonVariants, type ActionButtonProps } from './ActionButton';

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const alertVariants: (props?: ({
+    variant?: "danger" | "success" | "info" | "warning" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    /** Optional bold title rendered above the content. */
+    title?: string;
+    /** Hide the leading status icon. */
+    hideIcon?: boolean;
+}
+export declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Alert/index.d.ts

@@ -0,0 +1 @@
+export { Alert, alertVariants, type AlertProps } from './Alert';

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    bordered?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
+    /** Image source. Falls back to initials when missing or it fails to load. */
+    src?: string;
+    /** Alt text for the image / accessible label. */
+    alt?: string;
+    /** Initials shown when no image is available. */
+    initials?: string;
+}
+export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar, avatarVariants, type AvatarProps } from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const badgeVariants: (props?: ({
+    variant?: "danger" | "default" | "neutral" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge, badgeVariants, type BadgeProps } from './Badge';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+export declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "danger" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Show a loading spinner and disable interaction. */
+    loading?: boolean;
+    /** Optional icon rendered before the label (Show Icon Left). */
+    iconLeft?: ReactNode;
+    /** Optional icon rendered after the label (Show Icon Right). */
+    iconRight?: ReactNode;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button, buttonVariants, type ButtonProps } from './Button';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,6 @@
+export type CardProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CardTitle: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLHeadingElement> & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const CardBody: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card, CardHeader, CardTitle, CardBody, CardFooter, type CardProps, } from './Card';

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,19 @@
+/** Coordinated color scheme for the two footer variants. */
+type FooterVariant = 'dark' | 'light';
+export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Color scheme. `dark` (default) uses a #212121 background; `light` uses white.
+     * For a custom background, keep a variant for contrast and override via
+     * `className` (e.g. `<Footer className="bg-[#1a1a1a]" />`).
+     */
+    variant?: FooterVariant;
+}
+/**
+ * Desktop site footer for Tempo products.
+ *
+ * Contains the editorial quote, social links, app-download badges, the Tempo
+ * media network, informational links, trust badges, and a copyright bar.
+ * Mobile uses a separate footer component.
+ */
+export declare function Footer({ className, variant, ...props }: FooterProps): import("react").JSX.Element;
+export {};

package/dist/components/Footer/index.d.ts

@@ -0,0 +1 @@
+export { Footer, type FooterProps } from './Footer';

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Brand logo — left on desktop, centered on mobile. Defaults to a Tempo placeholder. */
+    logo?: ReactNode;
+    /** Desktop navigation content rendered in the center of the bar. */
+    children?: ReactNode;
+    /** Desktop right-aligned content, e.g. the primary call-to-action button(s). */
+    actions?: ReactNode;
+    /** Pin the header to the top of the viewport (Scroll Position: Fixed). Default true. */
+    fixed?: boolean;
+    /** Mobile: click handler for the left menu / search button. */
+    onMenuClick?: () => void;
+    /** Mobile: click handler for the right user / login button. */
+    onUserClick?: () => void;
+    /** Mobile: accessible label for the menu button. */
+    menuLabel?: string;
+    /** Mobile: accessible label for the user button. */
+    userLabel?: string;
+}
+/**
+ * Responsive site header / top navigation bar.
+ *
+ * - **Mobile** (`< md`): 49px tall — logo on the left, user/login + menu/search
+ *   buttons grouped on the right; 1px bottom border (#EEEEEE), 8px/24px padding.
+ * - **Desktop** (`>= md`): 64px tall — logo, optional centered nav, right-aligned
+ *   actions; 1px bottom border (#E0E0E0), content capped at 1366px.
+ *
+ * Fixed to the top of the viewport by default.
+ */
+export declare const Header: import('react').ForwardRefExoticComponent<HeaderProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Header/index.d.ts

@@ -0,0 +1 @@
+export { Header, type HeaderProps } from './Header';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,9 @@
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Visible label rendered above the field. */
+    label?: string;
+    /** Helper text rendered below the field. */
+    helperText?: string;
+    /** Error message; when set, the field is marked invalid. */
+    error?: string;
+}
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Input/index.d.ts

@@ -0,0 +1 @@
+export { Input, type InputProps } from './Input';

package/dist/components/Memberzone/Memberzone.d.ts

@@ -0,0 +1,35 @@
+import { VariantProps } from 'class-variance-authority';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export declare const memberzoneVariants: (props?: ({
+    side?: "left" | "right" | "top" | "bottom" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type MemberzoneSide = NonNullable<VariantProps<typeof memberzoneVariants>['side']>;
+export interface MemberzoneContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof memberzoneVariants> {
+    /** Hide the built-in close (X) button. */
+    hideClose?: boolean;
+}
+/**
+ * Compound slide-in drawer built on Radix Dialog.
+ *
+ * @example
+ * <Memberzone.Root>
+ *   <Memberzone.Trigger>Open</Memberzone.Trigger>
+ *   <Memberzone.Content side="right">
+ *     <Memberzone.Header>
+ *       <Memberzone.Title>Akun</Memberzone.Title>
+ *     </Memberzone.Header>
+ *   </Memberzone.Content>
+ * </Memberzone.Root>
+ */
+export declare const Memberzone: {
+    Root: import('react').FC<DialogPrimitive.DialogProps>;
+    Trigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Close: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Portal: import('react').FC<DialogPrimitive.DialogPortalProps>;
+    Overlay: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<MemberzoneContentProps & import('react').RefAttributes<HTMLDivElement>>;
+    Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Title: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
+    Description: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
+};

package/dist/components/Memberzone/MemberzoneMenus.d.ts

@@ -0,0 +1,13 @@
+import { MemberzoneTemplate, MemberzoneMenuItem } from './types';
+export interface MemberzoneMenusProps {
+    templateFor: MemberzoneTemplate;
+    ssoUrl: string;
+    isSidebar?: boolean;
+    menuItems?: MemberzoneMenuItem[];
+    /** Active path for highlighting. Defaults to window.location.pathname. */
+    currentPath?: string;
+    /** Called when the user activates "Keluar". If omitted, an SSO logout link is used. */
+    onLogout?: () => void;
+}
+/** Account menu links + customer help + logout. Router-free (uses currentPath). */
+export declare function MemberzoneMenus({ templateFor, ssoUrl, isSidebar, menuItems, currentPath, onLogout, }: MemberzoneMenusProps): import("react").JSX.Element;

package/dist/components/Memberzone/MemberzonePanel.d.ts

@@ -0,0 +1,29 @@
+import { MemberzoneSide } from './Memberzone';
+import { MemberzoneUser, MemberzoneTemplate, MemberzoneSubscription, MemberzoneMenuItem, SocialLink } from './types';
+export interface MemberzonePanelProps {
+    user: MemberzoneUser;
+    templateFor: MemberzoneTemplate;
+    ssoUrl: string;
+    /** Side the drawer slides in from. Defaults to "right". */
+    side?: Extract<MemberzoneSide, 'left' | 'right'>;
+    subscriptions?: MemberzoneSubscription[];
+    menuItems?: MemberzoneMenuItem[];
+    socialLinks?: SocialLink[];
+    /** Active path for menu highlighting. Defaults to window.location.pathname. */
+    currentPath?: string;
+    /** Called when the user activates "Keluar" (logout). */
+    onLogout?: () => void;
+    /** Controlled open state (optional). */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Title shown in the drawer header. */
+    title?: string;
+    className?: string;
+}
+/**
+ * Tempo member account drawer: an avatar trigger that opens a slide-in panel
+ * with the user's info, subscription status, account menus, and (for Teras)
+ * social links. Framework-agnostic — no router dependency.
+ */
+export declare function MemberzonePanel({ user, templateFor, ssoUrl, side, subscriptions, menuItems, socialLinks, currentPath, onLogout, open, defaultOpen, onOpenChange, title, className, }: MemberzonePanelProps): import("react").JSX.Element;

package/dist/components/Memberzone/MemberzoneSection.d.ts

@@ -0,0 +1,18 @@
+import { MemberzoneUser, MemberzoneTemplate, MemberzoneSubscription, MemberzoneMenuItem, SocialLink } from './types';
+export interface MemberzoneSectionProps {
+    user: MemberzoneUser;
+    templateFor: MemberzoneTemplate;
+    ssoUrl: string;
+    /** When true, renders compact (no subscription panel) — e.g. inline sidebar usage. */
+    isSidebar?: boolean;
+    subscriptions?: MemberzoneSubscription[];
+    menuItems?: MemberzoneMenuItem[];
+    socialLinks?: SocialLink[];
+    /** Active path for menu highlighting. Defaults to window.location.pathname. */
+    currentPath?: string;
+    /** Called when the user activates "Keluar" (logout). */
+    onLogout?: () => void;
+    className?: string;
+}
+/** User info + subscription status + account menus. The body of the Memberzone drawer. */
+export declare function MemberzoneSection({ user, templateFor, ssoUrl, isSidebar, subscriptions, menuItems, socialLinks, currentPath, onLogout, className, }: MemberzoneSectionProps): import("react").JSX.Element;

package/dist/components/Memberzone/SocialMedia.d.ts

@@ -0,0 +1,9 @@
+import { SocialLink } from './types';
+export interface SocialMediaProps {
+    /** Heading shown above the icons. */
+    title?: string;
+    /** Social links to render. Defaults to the Teras set. */
+    links?: SocialLink[];
+}
+/** Row of social media icons (used in the Teras Memberzone template). */
+export declare function SocialMedia({ title, links }: SocialMediaProps): import("react").JSX.Element;

package/dist/components/Memberzone/defaults.d.ts

@@ -0,0 +1,7 @@
+import { MemberzoneSubscription, MemberzoneMenuItem, SocialLink } from './types';
+/** Default Tempo subscription rows (Tempo Plus, Teras, Tempo VIP). */
+export declare const defaultSubscriptions: MemberzoneSubscription[];
+/** Default account menu links. */
+export declare const defaultMenuItems: MemberzoneMenuItem[];
+/** Default Teras social media links. */
+export declare const defaultTerasSocials: SocialLink[];

package/dist/components/Memberzone/index.d.ts

@@ -0,0 +1,7 @@
+export { Memberzone, memberzoneVariants, type MemberzoneSide, type MemberzoneContentProps } from './Memberzone';
+export { MemberzonePanel, type MemberzonePanelProps } from './MemberzonePanel';
+export { MemberzoneSection, type MemberzoneSectionProps } from './MemberzoneSection';
+export { MemberzoneMenus, type MemberzoneMenusProps } from './MemberzoneMenus';
+export { SocialMedia, type SocialMediaProps } from './SocialMedia';
+export { defaultSubscriptions, defaultMenuItems, defaultTerasSocials } from './defaults';
+export type { MemberzoneUser, MemberzoneTemplate, MemberzoneSubscription, MemberzoneMenuItem, SocialLink, } from './types';

package/dist/components/Memberzone/types.d.ts

@@ -0,0 +1,39 @@
+import { ComponentType, SVGProps } from 'react';
+/** Which product the Memberzone is being rendered for. Controls ordering/menu rules. */
+export type MemberzoneTemplate = 'tempo' | 'teras';
+/** Minimal user shape required to render the Memberzone panel. */
+export interface MemberzoneUser {
+    id: number | string;
+    fullname: string;
+    email: string;
+    /** Initials shown in the large avatar (e.g. "An"). */
+    initial: string;
+    /** Single letter shown in the small trigger avatar (e.g. "A"). */
+    firstLetterOfName: string;
+    /** Whether the VIP subscription is active. */
+    vipSubscription?: boolean;
+    /** Content access keys, e.g. ["tempo_plus", "teras_plus"]. */
+    contentAccess?: string[];
+}
+/** A subscription row in the status panel. */
+export interface MemberzoneSubscription {
+    name: string;
+    link: string;
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /** content_access key used to determine active status (omitted for VIP). */
+    accessKey?: string;
+    /** Set to true to treat this row as the VIP subscription. */
+    isVip?: boolean;
+}
+/** An account menu link. */
+export interface MemberzoneMenuItem {
+    key: string;
+    label: string;
+    href: string;
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+}
+/** A social media link rendered in the Teras template. */
+export interface SocialLink {
+    name: string;
+    url: string;
+}

package/dist/components/SearchMenu/SearchInput.d.ts

@@ -0,0 +1,17 @@
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onSubmit'> {
+    /** Controlled input value. */
+    value: string;
+    /** Called on every keystroke with the new value. */
+    onValueChange?: (value: string) => void;
+    /** Called when the form is submitted (Enter or the search button). */
+    onSubmit?: (value: string) => void;
+    /** Called when the clear (×) button is pressed. Defaults to submitting an empty value. */
+    onClear?: () => void;
+}
+/**
+ * Search text field with a submit (search) button and a clear (×) button.
+ *
+ * Router-free: it surfaces `onValueChange` / `onSubmit` / `onClear` callbacks and
+ * lets the consumer decide how to navigate or fetch results.
+ */
+export declare const SearchInput: import('react').ForwardRefExoticComponent<SearchInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/SearchMenu/SearchSummary.d.ts

@@ -0,0 +1,10 @@
+export interface SearchSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Result category label, e.g. "ARTIKEL". */
+    category: string;
+    /** Number of matching results. */
+    count: number;
+    /** The search keyword that produced these results. */
+    query?: string;
+}
+/** Heading + result-count summary shown above a list of search results. */
+export declare function SearchSummary({ category, count, query, className, ...props }: SearchSummaryProps): import("react").JSX.Element;

package/dist/components/SearchMenu/SearchTabs.d.ts

@@ -0,0 +1,21 @@
+export interface SearchTab {
+    label: string;
+    /** Unique identifier; compared against `activeValue` to mark the active tab. */
+    value: string;
+    /** Optional link target. When set the tab renders as an `<a>`; otherwise a `<button>`. */
+    href?: string;
+}
+export interface SearchTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    tabs: SearchTab[];
+    /** The `value` of the currently active tab. */
+    activeValue: string;
+    /** Called with the tab `value` when a button-mode tab is clicked. */
+    onTabChange?: (value: string) => void;
+}
+/**
+ * Tab bar for the search menu (e.g. Artikel / Mingguan).
+ *
+ * Router-free: provide `href` for link tabs, or omit it and handle `onTabChange`
+ * for button tabs. The active tab is highlighted with the brand underline.
+ */
+export declare function SearchTabs({ tabs, activeValue, onTabChange, className, ...props }: SearchTabsProps): import("react").JSX.Element;

package/dist/components/SearchMenu/index.d.ts

@@ -0,0 +1,3 @@
+export { SearchInput, type SearchInputProps } from './SearchInput';
+export { SearchSummary, type SearchSummaryProps } from './SearchSummary';
+export { SearchTabs, type SearchTabsProps, type SearchTab } from './SearchTabs';

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,39 @@
+import { VariantProps } from 'class-variance-authority';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export declare const sidebarVariants: (props?: ({
+    side?: "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SidebarSide = NonNullable<VariantProps<typeof sidebarVariants>['side']>;
+export interface SidebarContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sidebarVariants> {
+    /** Hide the built-in close (X) button. */
+    hideClose?: boolean;
+}
+/**
+ * Slide-in navigation sidebar built on Radix Dialog.
+ *
+ * A generic, data-free drawer: compose the menu content (links, {@link Accordion},
+ * a search field, etc.) inside `Sidebar.Body`. Router- and fetch-agnostic.
+ *
+ * @example
+ * <Sidebar.Root>
+ *   <Sidebar.Trigger>Menu</Sidebar.Trigger>
+ *   <Sidebar.Content side="left">
+ *     <Sidebar.Header>
+ *       <Sidebar.Title>Menu</Sidebar.Title>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>…</Sidebar.Body>
+ *   </Sidebar.Content>
+ * </Sidebar.Root>
+ */
+export declare const Sidebar: {
+    Root: import('react').FC<DialogPrimitive.DialogProps>;
+    Trigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Close: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Portal: import('react').FC<DialogPrimitive.DialogPortalProps>;
+    Overlay: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<SidebarContentProps & import('react').RefAttributes<HTMLDivElement>>;
+    Header: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Title: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
+    Description: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
+    Body: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1 @@
+export { Sidebar, sidebarVariants, type SidebarSide, type SidebarContentProps } from './Sidebar';

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {
+    /** Accessible label announced to screen readers. */
+    label?: string;
+}
+export declare const Spinner: import('react').ForwardRefExoticComponent<SpinnerProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner, spinnerVariants, type SpinnerProps } from './Spinner';

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,9 @@
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Visible label rendered above the field. */
+    label?: string;
+    /** Helper text rendered below the field. */
+    helperText?: string;
+    /** Error message; when set, the field is marked invalid. */
+    error?: string;
+}
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from './Textarea';

package/dist/icons/header.d.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+/** Combined menu + search icon (from the mobile header's Menu.svg). */
+export declare function MenuSearchIcon({ className, ...props }: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+/** User / account icon (from the mobile header's User Icon.svg). */
+export declare function UserCircleIcon({ className, ...props }: SVGProps<SVGSVGElement>): import("react").JSX.Element;