@gv-tech/ui-native 2.22.2 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.22.2",
+  "version": "2.23.0",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",

package/src/button-group.tsx

@@ -0,0 +1,30 @@
+import type { ButtonGroupBaseProps, ButtonGroupSeparatorBaseProps, ButtonGroupTextBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+// TODO: Implement proper React Native ButtonGroup logic
+function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<typeof View> & ButtonGroupBaseProps) {
+  return <View className={cn('flex flex-row', className)} {...props} />;
+}
+
+function ButtonGroupText({
+  className,
+  asChild,
+  ...props
+}: React.ComponentProps<typeof Text> & ButtonGroupTextBaseProps) {
+  return <Text className={cn('text-sm font-medium', className)} {...props} />;
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof View> & ButtonGroupSeparatorBaseProps) {
+  return <View className={cn('bg-border h-full w-px', className)} {...props} />;
+}
+
+// Stub for buttonGroupVariants to satisfy web/native shared imports if needed
+const buttonGroupVariants = () => '';
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/src/combobox.tsx

@@ -0,0 +1,125 @@
+import type {
+  ComboboxChipBaseProps,
+  ComboboxChipsBaseProps,
+  ComboboxChipsInputBaseProps,
+  ComboboxClearBaseProps,
+  ComboboxCollectionBaseProps,
+  ComboboxContentBaseProps,
+  ComboboxEmptyBaseProps,
+  ComboboxGroupBaseProps,
+  ComboboxInputBaseProps,
+  ComboboxItemBaseProps,
+  ComboboxLabelBaseProps,
+  ComboboxListBaseProps,
+  ComboboxSeparatorBaseProps,
+  ComboboxTriggerBaseProps,
+  ComboboxValueBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Combobox({ className, ...props }: React.ComponentProps<typeof View>) {
+  return (
+    <View className={cn('border-destructive/50 rounded-md border border-dashed p-4', className)} {...props}>
+      <Text className="text-destructive font-mono text-xs">Combobox (Not Implemented)</Text>
+    </View>
+  );
+}
+
+function ComboboxValue({ className, ...props }: React.ComponentProps<typeof View> & ComboboxValueBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxTrigger({ className, ...props }: React.ComponentProps<typeof View> & ComboboxTriggerBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxClear({ className, ...props }: React.ComponentProps<typeof View> & ComboboxClearBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxInput({
+  className,
+  showClear,
+  showTrigger,
+  ...props
+}: React.ComponentProps<typeof View> & ComboboxInputBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxContent({
+  className,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  anchor,
+  ...props
+}: React.ComponentProps<typeof View> & ComboboxContentBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxList({ className, ...props }: React.ComponentProps<typeof View> & ComboboxListBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxItem({ className, ...props }: React.ComponentProps<typeof View> & ComboboxItemBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof View> & ComboboxGroupBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxLabel({ className, ...props }: React.ComponentProps<typeof View> & ComboboxLabelBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxCollection({ className, ...props }: React.ComponentProps<typeof View> & ComboboxCollectionBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof View> & ComboboxEmptyBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof View> & ComboboxSeparatorBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxChips({ className, ...props }: React.ComponentProps<typeof View> & ComboboxChipsBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxChip({ className, showRemove, ...props }: React.ComponentProps<typeof View> & ComboboxChipBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function ComboboxChipsInput({ className, ...props }: React.ComponentProps<typeof View> & ComboboxChipsInputBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function useComboboxAnchor() {
+  return React.useRef(null);
+}
+
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxClear,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};

package/src/direction.tsx

@@ -0,0 +1,12 @@
+import type { DirectionProviderBaseProps } from '@gv-tech/ui-core';
+
+function DirectionProvider({ children, dir, direction }: DirectionProviderBaseProps) {
+  // RN direction is mostly handled via I18nManager
+  return <>{children}</>;
+}
+
+function useDirection() {
+  return 'ltr';
+}
+
+export { DirectionProvider, useDirection };

package/src/empty.tsx

@@ -0,0 +1,38 @@
+import type { EmptyBaseProps, EmptyMediaBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Empty({ className, ...props }: React.ComponentProps<typeof View> & EmptyBaseProps) {
+  return (
+    <View
+      className={cn(
+        'border-border flex w-full items-center justify-center rounded-xl border-2 border-dashed p-6',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<typeof View>) {
+  return <View className={cn('flex flex-col items-center gap-2', className)} {...props} />;
+}
+
+function EmptyMedia({ className, variant, ...props }: React.ComponentProps<typeof View> & EmptyMediaBaseProps) {
+  return <View className={cn('flex items-center justify-center', className)} {...props} />;
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<typeof Text>) {
+  return <Text className={cn('text-foreground text-lg font-semibold', className)} {...props} />;
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<typeof Text>) {
+  return <Text className={cn('text-muted-foreground text-center text-sm', className)} {...props} />;
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<typeof View>) {
+  return <View className={cn('mt-4 flex flex-col items-center gap-2', className)} {...props} />;
+}
+
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/src/field.tsx

@@ -0,0 +1,89 @@
+import type {
+  FieldBaseProps,
+  FieldContentBaseProps,
+  FieldDescriptionBaseProps,
+  FieldErrorBaseProps,
+  FieldGroupBaseProps,
+  FieldLabelBaseProps,
+  FieldLegendBaseProps,
+  FieldSeparatorBaseProps,
+  FieldSetBaseProps,
+  FieldTitleBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Field({ className, orientation, ...props }: React.ComponentProps<typeof View> & FieldBaseProps) {
+  return <View className={cn('flex flex-col gap-2', className)} {...props} />;
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<typeof View> & FieldContentBaseProps) {
+  return <View className={cn('flex flex-col', className)} {...props} />;
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<typeof Text> & FieldDescriptionBaseProps) {
+  return <Text className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+function FieldError({
+  className,
+  errors,
+  children,
+  ...props
+}: React.ComponentProps<typeof Text> & FieldErrorBaseProps) {
+  const message = children || (errors && errors[0]?.message);
+  if (!message) {
+    return null;
+  }
+  return (
+    <Text className={cn('text-destructive text-sm', className)} {...props}>
+      {message}
+    </Text>
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<typeof View> & FieldGroupBaseProps) {
+  return <View className={cn('flex flex-col gap-4', className)} {...props} />;
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Text> & FieldLabelBaseProps) {
+  return <Text className={cn('text-sm font-medium', className)} {...props} />;
+}
+
+function FieldLegend({ className, variant, ...props }: React.ComponentProps<typeof Text> & FieldLegendBaseProps) {
+  return <Text className={cn('font-medium', variant === 'label' ? 'text-sm' : 'text-base', className)} {...props} />;
+}
+
+function FieldSeparator({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof View> & FieldSeparatorBaseProps) {
+  return (
+    <View className={cn('bg-border my-2 h-px', className)} {...props}>
+      {children ? <Text className="bg-background absolute px-2 text-xs">{children}</Text> : null}
+    </View>
+  );
+}
+
+function FieldSet({ className, ...props }: React.ComponentProps<typeof View> & FieldSetBaseProps) {
+  return <View className={cn('flex flex-col gap-4', className)} {...props} />;
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<typeof Text> & FieldTitleBaseProps) {
+  return <Text className={cn('text-sm font-medium', className)} {...props} />;
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+};

package/src/index.ts

@@ -327,3 +327,111 @@ export {
   TableOfContentsHeading,
   TableOfContentsList,
 } from './table-of-contents';
+
+// Button Group
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './button-group';
+
+// Direction
+export { DirectionProvider, useDirection } from './direction';
+
+// Empty
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty';
+
+// Spinner
+export { Spinner } from './spinner';
+
+// Field
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from './field';
+
+// Input Group
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from './input-group';
+
+// Native Select
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './native-select';
+
+// Kbd
+export { Kbd, KbdGroup } from './kbd';
+
+// Item
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from './item';
+
+// Combobox
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxClear,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+} from './combobox';
+
+// Input OTP
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp';
+
+// Sidebar
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from './sidebar';

package/src/input-group.tsx

@@ -0,0 +1,54 @@
+import type {
+  InputGroupAddonBaseProps,
+  InputGroupBaseProps,
+  InputGroupButtonBaseProps,
+  InputGroupInputBaseProps,
+  InputGroupTextareaBaseProps,
+  InputGroupTextBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, TextInput, View } from 'react-native';
+import { Button } from './button';
+import { cn } from './lib/utils';
+
+function InputGroup({ className, ...props }: React.ComponentProps<typeof View> & InputGroupBaseProps) {
+  return <View className={cn('border-input flex flex-row items-center rounded-md border', className)} {...props} />;
+}
+
+function InputGroupAddon({ className, align, ...props }: React.ComponentProps<typeof View> & InputGroupAddonBaseProps) {
+  return <View className={cn('p-2', className)} {...props} />;
+}
+
+function InputGroupButton({
+  className,
+  type,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof Button> & InputGroupButtonBaseProps) {
+  return (
+    <Button
+      variant={variant as React.ComponentProps<typeof Button>['variant']}
+      size={size as React.ComponentProps<typeof Button>['size']}
+      className={className}
+      {...(props as Record<string, unknown>)}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<typeof Text> & InputGroupTextBaseProps) {
+  return <Text className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<typeof TextInput> & InputGroupInputBaseProps) {
+  return <TextInput className={cn('text-foreground flex-1 px-3 py-2', className)} {...props} />;
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<typeof TextInput> & InputGroupTextareaBaseProps) {
+  return <TextInput multiline className={cn('text-foreground flex-1 px-3 py-2', className)} {...props} />;
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/src/input-otp.tsx

@@ -0,0 +1,34 @@
+import type {
+  InputOTPBaseProps,
+  InputOTPGroupBaseProps,
+  InputOTPSeparatorBaseProps,
+  InputOTPSlotBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof View> & InputOTPBaseProps) {
+  return (
+    <View
+      className={cn('border-destructive/50 rounded-md border border-dashed p-4', containerClassName, className)}
+      {...props}
+    >
+      <Text className="text-destructive font-mono text-xs">InputOTP (Not Implemented)</Text>
+    </View>
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<typeof View> & InputOTPGroupBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function InputOTPSlot({ className, index, ...props }: React.ComponentProps<typeof View> & InputOTPSlotBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function InputOTPSeparator({ className, ...props }: React.ComponentProps<typeof View> & InputOTPSeparatorBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/src/item.tsx

@@ -0,0 +1,74 @@
+import type {
+  ItemActionsBaseProps,
+  ItemBaseProps,
+  ItemContentBaseProps,
+  ItemDescriptionBaseProps,
+  ItemFooterBaseProps,
+  ItemGroupBaseProps,
+  ItemHeaderBaseProps,
+  ItemMediaBaseProps,
+  ItemSeparatorBaseProps,
+  ItemTitleBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Item({ className, variant, size, ...props }: React.ComponentProps<typeof View> & ItemBaseProps) {
+  return (
+    <View className={cn('flex flex-row flex-wrap items-center gap-2 rounded-lg border p-3', className)} {...props} />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<typeof View> & ItemActionsBaseProps) {
+  return <View className={cn('flex flex-row items-center gap-2', className)} {...props} />;
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<typeof View> & ItemContentBaseProps) {
+  return <View className={cn('flex flex-1 flex-col gap-1', className)} {...props} />;
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<typeof Text> & ItemDescriptionBaseProps) {
+  return <Text className={cn('text-muted-foreground text-sm', className)} {...props} />;
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<typeof View> & ItemFooterBaseProps) {
+  return <View className={cn('flex w-full flex-row items-center justify-between gap-2', className)} {...props} />;
+}
+
+function ItemGroup({ className, ...props }: React.ComponentProps<typeof View> & ItemGroupBaseProps) {
+  return <View className={cn('flex flex-col gap-4', className)} {...props} />;
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<typeof View> & ItemHeaderBaseProps) {
+  return <View className={cn('flex w-full flex-row items-center justify-between gap-2', className)} {...props} />;
+}
+
+function ItemMedia({ className, variant, ...props }: React.ComponentProps<typeof View> & ItemMediaBaseProps) {
+  return <View className={cn('flex shrink-0 items-center justify-center gap-2', className)} {...props} />;
+}
+
+function ItemSeparator({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<typeof View> & ItemSeparatorBaseProps) {
+  return <View className={cn('bg-border my-2 h-px w-full', className)} {...props} />;
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<typeof Text> & ItemTitleBaseProps) {
+  return <Text className={cn('text-sm font-medium', className)} {...props} />;
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};

package/src/kbd.tsx

@@ -0,0 +1,16 @@
+import type { KbdBaseProps, KbdGroupBaseProps } from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function Kbd({ className, ...props }: React.ComponentProps<typeof Text> & KbdBaseProps) {
+  return (
+    <Text className={cn('bg-muted text-muted-foreground rounded-sm px-1 font-mono text-xs', className)} {...props} />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<typeof View> & KbdGroupBaseProps) {
+  return <View className={cn('flex flex-row items-center gap-1', className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };

package/src/native-select.tsx

@@ -0,0 +1,30 @@
+import type {
+  NativeSelectBaseProps,
+  NativeSelectOptGroupBaseProps,
+  NativeSelectOptionBaseProps,
+} from '@gv-tech/ui-core';
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { cn } from './lib/utils';
+
+function NativeSelect({ className, size, ...props }: React.ComponentProps<typeof View> & NativeSelectBaseProps) {
+  // Native select relies on @react-native-picker/picker, providing shim
+  return (
+    <View className={cn('border-input rounded-md border p-2', className)} {...props}>
+      <Text className="text-muted-foreground">Select Not Implemented (Use Picker)</Text>
+    </View>
+  );
+}
+
+function NativeSelectOption({ className, ...props }: React.ComponentProps<typeof View> & NativeSelectOptionBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & NativeSelectOptGroupBaseProps) {
+  return <View className={className} {...props} />;
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };