@djangocfg/ui-core 2.1.159 → 2.1.161

package/README.md

@@ -1,6 +1,6 @@
 # @djangocfg/ui-core
 
-Pure React UI library with 60+ components built on Radix UI + Tailwind CSS v4.
+Pure React UI library with 65+ components built on Radix UI + Tailwind CSS v4.
 
 **No Next.js dependencies** — works with Electron, Vite, CRA, and any React environment.
 
@@ -24,8 +24,8 @@ pnpm add @djangocfg/ui-core
 
 ## Components (60+)
 
-### Forms (17)
-`Label` `Button` `ButtonLink` `Input` `Checkbox` `RadioGroup` `Select` `Textarea` `Switch` `Slider` `Combobox` `MultiSelect` `CountrySelect` `InputOTP` `PhoneInput` `Form` `Field`
+### Forms (18)
+`Label` `Button` `ButtonLink` `Input` `Checkbox` `RadioGroup` `Select` `Textarea` `Switch` `Slider` `Combobox` `MultiSelect` `CountrySelect` `LanguageSelect` `InputOTP` `PhoneInput` `Form` `Field`
 
 ### Layout (8)
 `Card` `Separator` `Skeleton` `AspectRatio` `Sticky` `ScrollArea` `Resizable` `Section`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.159",
+  "version": "2.1.161",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -76,7 +76,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.159",
+    "@djangocfg/i18n": "^2.1.161",
     "react-device-detect": "^2.2.3",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -138,9 +138,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.159",
+    "@djangocfg/i18n": "^2.1.161",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.159",
+    "@djangocfg/typescript-config": "^2.1.161",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/index.ts

@@ -23,6 +23,8 @@ export { MultiSelectPro } from './multi-select-pro';
 export type { MultiSelectProOption, MultiSelectProGroup, MultiSelectProProps, MultiSelectProRef, AnimationConfig, ResponsiveConfig } from './multi-select-pro';
 export { CountrySelect, getEmojiFlag } from './country-select';
 export type { CountrySelectProps, CountrySelectVariant, CountryOption, TCountryCode } from './country-select';
+export { LanguageSelect } from './language-select';
+export type { LanguageSelectProps, LanguageSelectVariant, LanguageOption, TLanguageCode } from './language-select';
 export { MultiSelectProAsync } from './multi-select-pro/async';
 export type { MultiSelectProAsyncProps } from './multi-select-pro/async';
 export { Switch } from './switch';
@@ -36,7 +38,7 @@ export { Separator } from './separator';
 export { Skeleton } from './skeleton';
 export { AspectRatio } from './aspect-ratio';
 export { ScrollArea, ScrollBar } from './scroll-area';
-export type { ScrollAreaHandle, ScrollAreaProps } from './scroll-area';
+export type { ScrollAreaHandle, ScrollAreaProps, ScrollAreaOrientation } from './scroll-area';
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup, useResizableDragging } from './resizable';
 export type { ResizableHandleProps, ImperativePanelHandle } from './resizable';
 export { Sticky } from './sticky';

package/src/components/language-select.story.tsx

@@ -0,0 +1,264 @@
+import { useState } from 'react';
+import { defineStory } from '@djangocfg/playground';
+import { LanguageSelect, type TLanguageCode } from './language-select';
+import { Label } from './label';
+
+export default defineStory({
+  title: 'Core/LanguageSelect',
+  component: LanguageSelect,
+  description: 'Language selector. Supports dropdown and inline variants, single and multiple selection.',
+});
+
+// ============================================================================
+// Dropdown Variants
+// ============================================================================
+
+export const SingleDropdown = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Select language</Label>
+      <LanguageSelect
+        value={value}
+        onChange={setValue}
+        placeholder="Choose a language..."
+      />
+      {value.length > 0 && (
+        <p className="text-sm text-muted-foreground">Selected: {value[0]}</p>
+      )}
+    </div>
+  );
+};
+
+export const MultipleDropdown = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Select languages</Label>
+      <LanguageSelect
+        multiple
+        value={value}
+        onChange={setValue}
+        placeholder="Choose languages..."
+      />
+      {value.length > 0 && (
+        <p className="text-sm text-muted-foreground">Selected: {value.join(', ')}</p>
+      )}
+    </div>
+  );
+};
+
+export const WithDefaultValue = () => {
+  const [value, setValue] = useState<string[]>(['en', 'es', 'fr']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Preselected languages</Label>
+      <LanguageSelect
+        multiple
+        value={value}
+        onChange={setValue}
+      />
+    </div>
+  );
+};
+
+export const WithNativeNames = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>With native names</Label>
+      <LanguageSelect
+        multiple
+        value={value}
+        onChange={setValue}
+        showNativeName
+      />
+    </div>
+  );
+};
+
+// ============================================================================
+// Inline Variants
+// ============================================================================
+
+export const InlineSingle = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Select your language</Label>
+      <LanguageSelect
+        variant="inline"
+        value={value}
+        onChange={setValue}
+        maxHeight={250}
+      />
+      {value.length > 0 && (
+        <p className="text-sm text-muted-foreground">Selected: {value[0]}</p>
+      )}
+    </div>
+  );
+};
+
+export const InlineMultiple = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Select target languages</Label>
+      <LanguageSelect
+        variant="inline"
+        multiple
+        value={value}
+        onChange={setValue}
+        maxHeight={300}
+      />
+    </div>
+  );
+};
+
+export const InlineWithNativeNames = () => {
+  const [value, setValue] = useState<string[]>(['ko', 'ja']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Languages with native names</Label>
+      <LanguageSelect
+        variant="inline"
+        multiple
+        value={value}
+        onChange={setValue}
+        showNativeName
+        maxHeight={300}
+      />
+    </div>
+  );
+};
+
+export const InlineNoSearch = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Without search</Label>
+      <LanguageSelect
+        variant="inline"
+        multiple
+        value={value}
+        onChange={setValue}
+        showSearch={false}
+        maxHeight={200}
+      />
+    </div>
+  );
+};
+
+// ============================================================================
+// Filtered Languages
+// ============================================================================
+
+const EUROPEAN_LANGUAGES: TLanguageCode[] = ['en', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'pl', 'sv', 'da', 'no', 'fi'];
+const ASIAN_LANGUAGES: TLanguageCode[] = ['zh', 'ja', 'ko', 'vi', 'th', 'id', 'ms', 'tl'];
+const TTS_SUPPORTED: TLanguageCode[] = ['en', 'es', 'fr', 'de', 'it', 'pt', 'ja', 'ko', 'zh', 'ru', 'ar', 'hi'];
+
+export const FilteredEuropean = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>European Languages only</Label>
+      <LanguageSelect
+        variant="inline"
+        multiple
+        value={value}
+        onChange={setValue}
+        allowedLanguages={EUROPEAN_LANGUAGES}
+        maxHeight={300}
+      />
+    </div>
+  );
+};
+
+export const FilteredAsian = () => {
+  const [value, setValue] = useState<string[]>([]);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Asian Languages</Label>
+      <LanguageSelect
+        multiple
+        value={value}
+        onChange={setValue}
+        allowedLanguages={ASIAN_LANGUAGES}
+        showNativeName
+      />
+    </div>
+  );
+};
+
+export const TTSSupportedLanguages = () => {
+  const [value, setValue] = useState<string[]>(['en']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>TTS Supported Languages</Label>
+      <LanguageSelect
+        value={value}
+        onChange={setValue}
+        allowedLanguages={TTS_SUPPORTED}
+        showNativeName
+      />
+      <p className="text-xs text-muted-foreground">
+        Only languages with TTS support are shown
+      </p>
+    </div>
+  );
+};
+
+// ============================================================================
+// States
+// ============================================================================
+
+export const Disabled = () => (
+  <div className="max-w-sm space-y-4">
+    <div className="space-y-2">
+      <Label>Disabled dropdown</Label>
+      <LanguageSelect
+        value={['en']}
+        onChange={() => {}}
+        disabled
+      />
+    </div>
+    <div className="space-y-2">
+      <Label>Disabled inline</Label>
+      <LanguageSelect
+        variant="inline"
+        multiple
+        value={['en', 'es']}
+        onChange={() => {}}
+        disabled
+        maxHeight={150}
+      />
+    </div>
+  </div>
+);
+
+export const MaxDisplayBadges = () => {
+  const [value, setValue] = useState<string[]>(['en', 'es', 'fr', 'de', 'it', 'pt']);
+
+  return (
+    <div className="max-w-sm space-y-2">
+      <Label>Max 2 badges displayed</Label>
+      <LanguageSelect
+        multiple
+        value={value}
+        onChange={setValue}
+        maxDisplay={2}
+      />
+    </div>
+  );
+};

package/src/components/language-select.tsx

@@ -0,0 +1,406 @@
+"use client"
+
+import { Check, ChevronsUpDown, Search, X } from 'lucide-react';
+import * as React from 'react';
+import { languages, type TLanguageCode } from 'countries-list';
+
+import { cn } from '../lib/utils';
+import { Badge } from './badge';
+import { Button } from './button';
+import { Checkbox } from './checkbox';
+import {
+  Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
+} from './command';
+import { Input } from './input';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { ScrollArea } from './scroll-area';
+
+export interface LanguageOption {
+  code: TLanguageCode;
+  name: string;
+  native: string;
+}
+
+export type LanguageSelectVariant = 'dropdown' | 'inline';
+
+export interface LanguageSelectProps {
+  /** Selected language codes (ISO 639-1) */
+  value?: string[];
+  /** Callback when selection changes */
+  onChange?: (value: string[]) => void;
+  /** Allow multiple selection */
+  multiple?: boolean;
+  /** Display variant: dropdown (popover) or inline (scrollable list) */
+  variant?: LanguageSelectVariant;
+  /** Placeholder text (default: "Select language...") */
+  placeholder?: string;
+  /** Search placeholder text (default: "Search...") */
+  searchPlaceholder?: string;
+  /** Empty results text (default: "No languages found") */
+  emptyText?: string;
+  /** Additional CSS class */
+  className?: string;
+  /** Disable the component */
+  disabled?: boolean;
+  /** Max badges to display (for multiple dropdown mode) */
+  maxDisplay?: number;
+  /** Custom language name resolver (for i18n) */
+  getLanguageName?: (code: TLanguageCode) => string;
+  /** Show native name alongside translated name */
+  showNativeName?: boolean;
+  /** Filter to specific language codes */
+  allowedLanguages?: TLanguageCode[];
+  /** Exclude specific language codes */
+  excludedLanguages?: TLanguageCode[];
+  /** Max height for inline variant */
+  maxHeight?: number;
+  /** Show search input */
+  showSearch?: boolean;
+  /** Custom label for selected count (receives count as param). Example: (count) => `${count} selected` */
+  selectedCountLabel?: (count: number) => string;
+  /** Custom label for "more items" badge (receives count as param). Example: (count) => `+${count} more` */
+  moreItemsLabel?: (count: number) => string;
+}
+
+/**
+ * Language Select component
+ *
+ * Supports:
+ * - Single and multiple selection
+ * - Dropdown (popover) and inline (scrollable list) variants
+ * - Custom language name translations via getLanguageName prop
+ * - Language filtering via allowedLanguages/excludedLanguages
+ *
+ * Uses ISO 639-1 language codes.
+ *
+ * @example Single dropdown
+ * ```tsx
+ * <LanguageSelect
+ *   value={language ? [language] : []}
+ *   onChange={(codes) => setLanguage(codes[0])}
+ * />
+ * ```
+ *
+ * @example Multiple dropdown
+ * ```tsx
+ * <LanguageSelect
+ *   multiple
+ *   value={languages}
+ *   onChange={setLanguages}
+ * />
+ * ```
+ *
+ * @example Inline list with checkboxes
+ * ```tsx
+ * <LanguageSelect
+ *   variant="inline"
+ *   multiple
+ *   value={languages}
+ *   onChange={setLanguages}
+ *   maxHeight={300}
+ * />
+ * ```
+ *
+ * @example With i18n translations
+ * ```tsx
+ * <LanguageSelect
+ *   value={value}
+ *   onChange={onChange}
+ *   getLanguageName={(code) => i18nLanguages.getName(code, locale)}
+ * />
+ * ```
+ */
+export function LanguageSelect({
+  value = [],
+  onChange,
+  multiple = false,
+  variant = 'dropdown',
+  placeholder,
+  searchPlaceholder,
+  emptyText,
+  className,
+  disabled = false,
+  maxDisplay = 3,
+  getLanguageName,
+  showNativeName = false,
+  allowedLanguages,
+  excludedLanguages,
+  maxHeight = 300,
+  showSearch = true,
+  selectedCountLabel = (count: number) => `${count} selected`,
+  moreItemsLabel = (count: number) => `+${count} more`,
+}: LanguageSelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState("")
+
+  // Resolve defaults
+  const resolvedPlaceholder = placeholder ?? 'Select language...'
+  const resolvedSearchPlaceholder = searchPlaceholder ?? 'Search...'
+  const resolvedEmptyText = emptyText ?? 'No languages found'
+
+  // Build language options
+  const allLanguages = React.useMemo<LanguageOption[]>(() => {
+    let codes = Object.keys(languages) as TLanguageCode[];
+
+    // Apply filters
+    if (allowedLanguages?.length) {
+      codes = codes.filter(code => allowedLanguages.includes(code));
+    }
+    if (excludedLanguages?.length) {
+      codes = codes.filter(code => !excludedLanguages.includes(code));
+    }
+
+    return codes
+      .map((code) => ({
+        code,
+        name: getLanguageName?.(code) ?? languages[code].name,
+        native: languages[code].native,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [getLanguageName, allowedLanguages, excludedLanguages]);
+
+  const selectedLanguages = React.useMemo(
+    () => allLanguages.filter((l) => value.includes(l.code)),
+    [allLanguages, value]
+  )
+
+  const filteredLanguages = React.useMemo(() => {
+    if (!search) return allLanguages
+    const searchLower = search.toLowerCase()
+    return allLanguages.filter(
+      (l) =>
+        l.name.toLowerCase().includes(searchLower) ||
+        l.native.toLowerCase().includes(searchLower) ||
+        l.code.toLowerCase().includes(searchLower)
+    )
+  }, [allLanguages, search])
+
+  const handleSelect = React.useCallback((code: string) => {
+    if (multiple) {
+      const newValue = value.includes(code)
+        ? value.filter((v) => v !== code)
+        : [...value, code]
+      onChange?.(newValue)
+    } else {
+      onChange?.([code])
+      if (variant === 'dropdown') {
+        setOpen(false)
+      }
+    }
+  }, [multiple, value, onChange, variant])
+
+  const handleRemove = React.useCallback((code: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange?.(value.filter((v) => v !== code))
+  }, [value, onChange])
+
+  // Inline variant
+  if (variant === 'inline') {
+    return (
+      <div className={cn("space-y-3", className)}>
+        {/* Search input */}
+        {showSearch && (
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder={resolvedSearchPlaceholder}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+              disabled={disabled}
+            />
+          </div>
+        )}
+
+        {/* Selected count */}
+        {multiple && selectedLanguages.length > 0 && (
+          <p className="text-sm text-muted-foreground">
+            {selectedCountLabel(selectedLanguages.length)}
+          </p>
+        )}
+
+        {/* Language list */}
+        <ScrollArea style={{ height: maxHeight }} className="rounded-md border">
+          <div className="p-1">
+            {filteredLanguages.length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-4">
+                {resolvedEmptyText}
+              </p>
+            ) : (
+              filteredLanguages.map((language) => {
+                const isSelected = value.includes(language.code);
+                return (
+                  <label
+                    key={language.code}
+                    className={cn(
+                      'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer',
+                      'hover:bg-accent/50 transition-colors',
+                      isSelected && 'bg-primary/5',
+                      disabled && 'opacity-50 cursor-not-allowed',
+                    )}
+                  >
+                    {multiple ? (
+                      <Checkbox
+                        checked={isSelected}
+                        onCheckedChange={() => !disabled && handleSelect(language.code)}
+                        disabled={disabled}
+                      />
+                    ) : (
+                      <div className={cn(
+                        "h-4 w-4 rounded-full border-2 flex items-center justify-center",
+                        isSelected ? "border-primary bg-primary" : "border-muted-foreground"
+                      )}>
+                        {isSelected && <div className="h-2 w-2 rounded-full bg-primary-foreground" />}
+                      </div>
+                    )}
+                    <div className="flex flex-col flex-1 min-w-0">
+                      <span className={cn('text-sm', isSelected && 'font-medium')}>
+                        {language.name}
+                      </span>
+                      {showNativeName && language.native !== language.name && (
+                        <span className="text-xs text-muted-foreground">
+                          {language.native}
+                        </span>
+                      )}
+                    </div>
+                    <span className="text-xs text-muted-foreground uppercase">
+                      {language.code}
+                    </span>
+                  </label>
+                );
+              })
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    );
+  }
+
+  // Dropdown variant
+  const displayValue = React.useMemo(() => {
+    if (selectedLanguages.length === 0) {
+      return <span className="text-muted-foreground">{resolvedPlaceholder}</span>
+    }
+
+    if (!multiple && selectedLanguages.length === 1) {
+      const language = selectedLanguages[0]!;
+      return (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground uppercase">{language.code}</span>
+          <span>{language.name}</span>
+        </div>
+      );
+    }
+
+    const displayed = selectedLanguages.slice(0, maxDisplay)
+    const remaining = selectedLanguages.length - maxDisplay
+
+    return (
+      <div className="flex flex-wrap gap-1">
+        {displayed.map((language) => (
+          <Badge
+            key={language.code}
+            variant="secondary"
+            className="mr-1 text-xs"
+          >
+            <span className="mr-1 text-muted-foreground uppercase">{language.code}</span>
+            {language.name}
+            <button
+              className="ml-1 rounded-full hover:bg-muted-foreground/20"
+              onClick={(e) => handleRemove(language.code, e)}
+              disabled={disabled}
+              aria-label={`Remove ${language.name}`}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </Badge>
+        ))}
+        {remaining > 0 && (
+          <Badge variant="outline" className="text-xs">
+            {moreItemsLabel(remaining)}
+          </Badge>
+        )}
+      </div>
+    )
+  }, [selectedLanguages, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel])
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(isOpen) => {
+        setOpen(isOpen)
+        if (!isOpen) {
+          setSearch("")
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "w-full justify-between min-h-10 h-auto py-2",
+            className
+          )}
+          disabled={disabled}
+        >
+          <div className="flex-1 text-left overflow-hidden">
+            {displayValue}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+        <Command shouldFilter={false} className="flex flex-col">
+          <CommandInput
+            placeholder={resolvedSearchPlaceholder}
+            className="shrink-0"
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList className="max-h-[300px] overflow-y-auto">
+            {filteredLanguages.length === 0 ? (
+              <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
+            ) : (
+              <CommandGroup>
+                {filteredLanguages.map((language) => {
+                  const isSelected = value.includes(language.code)
+                  return (
+                    <CommandItem
+                      key={language.code}
+                      value={language.code}
+                      onSelect={() => handleSelect(language.code)}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4 shrink-0",
+                          isSelected ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      <div className="flex flex-col flex-1 min-w-0">
+                        <span className="truncate">{language.name}</span>
+                        {showNativeName && language.native !== language.name && (
+                          <span className="text-xs text-muted-foreground truncate">
+                            {language.native}
+                          </span>
+                        )}
+                      </div>
+                      <span className="text-xs text-muted-foreground uppercase ml-2">
+                        {language.code}
+                      </span>
+                    </CommandItem>
+                  )
+                })}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+// Re-export types for convenience
+export type { TLanguageCode } from 'countries-list';

package/src/components/scroll-area.story.tsx

@@ -36,7 +36,7 @@ export const Vertical = () => (
 );
 
 export const Horizontal = () => (
-  <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+  <ScrollArea className="w-96 whitespace-nowrap rounded-md border" orientation="horizontal">
     <div className="flex w-max space-x-4 p-4">
       {works.map((work) => (
         <figure key={work.artist} className="shrink-0">
@@ -52,12 +52,11 @@ export const Horizontal = () => (
         </figure>
       ))}
     </div>
-    <ScrollBar orientation="horizontal" />
   </ScrollArea>
 );
 
 export const Both = () => (
-  <ScrollArea className="h-72 w-72 rounded-md border">
+  <ScrollArea className="h-72 w-72 rounded-md border" orientation="both">
     <div className="p-4">
       {Array.from({ length: 20 }).map((_, i) => (
         <div key={i} className="whitespace-nowrap py-2">
@@ -65,7 +64,6 @@ export const Both = () => (
         </div>
       ))}
     </div>
-    <ScrollBar orientation="horizontal" />
   </ScrollArea>
 );
 
@@ -110,3 +108,47 @@ export const Chat = () => (
     </ScrollArea>
   </div>
 );
+
+const filters = [
+  'All', 'Electronics', 'Clothing', 'Home & Garden', 'Sports', 'Books',
+  'Toys', 'Beauty', 'Automotive', 'Health', 'Food', 'Music', 'Movies'
+];
+
+export const HorizontalFilterTabs = () => (
+  <div className="max-w-sm">
+    <ScrollArea className="w-full" orientation="horizontal">
+      <div className="flex gap-2 pb-2">
+        {filters.map((filter) => (
+          <button
+            key={filter}
+            className="px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap bg-muted text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {filter}
+          </button>
+        ))}
+      </div>
+    </ScrollArea>
+    <p className="text-xs text-muted-foreground mt-2">
+      Scroll horizontally to see more filters
+    </p>
+  </div>
+);
+
+export const HorizontalChips = () => (
+  <div className="max-w-xs">
+    <p className="text-sm font-medium mb-2">Selected tags:</p>
+    <ScrollArea className="w-full" orientation="horizontal">
+      <div className="flex gap-1 pb-2">
+        {['React', 'TypeScript', 'Tailwind', 'Next.js', 'Radix UI', 'Zustand', 'TanStack Query'].map((tag) => (
+          <span
+            key={tag}
+            className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-primary/10 text-primary whitespace-nowrap"
+          >
+            {tag}
+            <button className="hover:bg-primary/20 rounded-full p-0.5">×</button>
+          </span>
+        ))}
+      </div>
+    </ScrollArea>
+  </div>
+);

package/src/components/scroll-area.tsx

@@ -20,16 +20,20 @@ export interface ScrollAreaHandle {
   getViewport: () => HTMLDivElement | null;
 }
 
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+
 export interface ScrollAreaProps
   extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
   /** Ref to access the viewport element directly */
   viewportRef?: React.RefObject<HTMLDivElement | null>;
   /** Additional className for the viewport */
   viewportClassName?: string;
+  /** Scroll orientation: vertical (default), horizontal, or both */
+  orientation?: ScrollAreaOrientation;
 }
 
 const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
-  ({ className, children, viewportRef, viewportClassName, ...props }, ref) => {
+  ({ className, children, viewportRef, viewportClassName, orientation = 'vertical', ...props }, ref) => {
     const internalViewportRef = React.useRef<HTMLDivElement>(null);
     const actualViewportRef = viewportRef || internalViewportRef;
 
@@ -59,6 +63,9 @@ const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
       getViewport: () => actualViewportRef.current,
     }), [actualViewportRef]);
 
+    const showVerticalBar = orientation === 'vertical' || orientation === 'both';
+    const showHorizontalBar = orientation === 'horizontal' || orientation === 'both';
+
     return (
       <ScrollAreaPrimitive.Root
         className={cn("relative overflow-hidden", className)}
@@ -70,7 +77,8 @@ const ScrollArea = React.forwardRef<ScrollAreaHandle, ScrollAreaProps>(
         >
           {children}
         </ScrollAreaPrimitive.Viewport>
-        <ScrollBar />
+        {showVerticalBar && <ScrollBar orientation="vertical" />}
+        {showHorizontalBar && <ScrollBar orientation="horizontal" />}
         <ScrollAreaPrimitive.Corner />
       </ScrollAreaPrimitive.Root>
     );