@korsolutions/ui 0.0.49 → 0.0.51

package/src/components/autocomplete/autocomplete.tsx

@@ -1,34 +0,0 @@
-import { AutocompletePrimitive, type AutocompleteOption, type AutocompleteRootBaseProps } from "@/primitives";
-import React from "react";
-import { AutocompleteVariants } from "./variants";
-
-export type { AutocompleteOption };
-
-export interface AutocompleteProps extends AutocompleteRootBaseProps {
-  options: AutocompleteOption[];
-  variant?: keyof typeof AutocompleteVariants;
-  emptyMessage?: string;
-}
-
-export function Autocomplete(props: AutocompleteProps) {
-  const { options, variant = "default", emptyMessage = "No results found", ...rootProps } = props;
-  const useVariantStyles = AutocompleteVariants[variant];
-  const variantStyles = useVariantStyles();
-
-  return (
-    <AutocompletePrimitive.Root {...rootProps} styles={variantStyles}>
-      <AutocompletePrimitive.Input />
-      <AutocompletePrimitive.Portal>
-        <AutocompletePrimitive.Overlay />
-        <AutocompletePrimitive.Content>
-          {options.map((option) => (
-            <AutocompletePrimitive.Option key={option.value} value={option.value}>
-              {option.label}
-            </AutocompletePrimitive.Option>
-          ))}
-          {!options.length && <AutocompletePrimitive.Empty>{emptyMessage}</AutocompletePrimitive.Empty>}
-        </AutocompletePrimitive.Content>
-      </AutocompletePrimitive.Portal>
-    </AutocompletePrimitive.Root>
-  );
-}

package/src/components/autocomplete/variants/default.tsx

@@ -1,87 +0,0 @@
-import { type AutocompleteStyles } from "@/primitives";
-import { useThemedStyles } from "@/utils/use-themed-styles";
-
-export function useAutocompleteVariantDefault(): AutocompleteStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): AutocompleteStyles => ({
-      root: {
-        default: {},
-        focused: {},
-        disabled: {},
-      },
-      input: {
-        placeholderTextColor: colors.mutedForeground,
-        selectionColor: colors.primary,
-        default: {
-          borderWidth: 1,
-          borderColor: colors.border,
-          borderRadius: radius,
-          backgroundColor: colors.surface,
-          paddingVertical: 12,
-          paddingHorizontal: 16,
-          outlineWidth: 0,
-          fontFamily,
-          fontSize,
-          height: 48,
-          color: colors.foreground,
-        },
-        focused: {
-          borderColor: colors.primary,
-        },
-        disabled: {
-          color: colors.mutedForeground,
-          backgroundColor: colors.muted,
-        },
-      },
-      overlay: {
-        default: {},
-        focused: {},
-        disabled: {},
-      },
-      content: {
-        default: {
-          backgroundColor: colors.surface,
-          borderRadius: radius,
-          borderWidth: 1,
-          borderColor: colors.border,
-          padding: 4,
-          gap: 4,
-          maxHeight: 300,
-        },
-        focused: {},
-        disabled: {},
-      },
-      option: {
-        default: {
-          paddingVertical: 12,
-          paddingHorizontal: 16,
-          fontFamily,
-          fontSize,
-          color: colors.foreground,
-          borderRadius: radius / 2,
-        },
-        disabled: {
-          color: colors.mutedForeground,
-        },
-        selected: {
-          backgroundColor: colors.muted,
-        },
-        hovered: {
-          backgroundColor: colors.muted,
-        },
-      },
-      empty: {
-        default: {
-          paddingVertical: 12,
-          paddingHorizontal: 16,
-          fontFamily,
-          fontSize,
-          color: colors.mutedForeground,
-          textAlign: "center",
-        },
-        focused: {},
-        disabled: {},
-      },
-    })
-  );
-}

package/src/components/autocomplete/variants/index.ts

@@ -1,5 +0,0 @@
-import { useAutocompleteVariantDefault } from "./default";
-
-export const AutocompleteVariants = {
-  default: useAutocompleteVariantDefault,
-};

package/src/components/avatar/avatar.tsx

@@ -1,23 +0,0 @@
-import { AvatarPrimitive } from "@/primitives";
-import React, { useState } from "react";
-import type { ImageSource } from "react-native";
-import { AvatarVariants } from "./variants";
-
-export interface AvatarProps {
-  source?: ImageSource;
-  fallback: string;
-
-  variant?: keyof typeof AvatarVariants;
-}
-
-export function Avatar(props: AvatarProps) {
-  const useVariantStyles = AvatarVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-  const [imageError, setImageError] = useState(false);
-  return (
-    <AvatarPrimitive.Root styles={styles}>
-      {props.source && <AvatarPrimitive.Image source={props.source} onError={() => setImageError(true)} />}
-      {(!props.source || imageError) && <AvatarPrimitive.Fallback>{props.fallback}</AvatarPrimitive.Fallback>}
-    </AvatarPrimitive.Root>
-  );
-}

package/src/components/badge/badge.tsx

@@ -1,23 +0,0 @@
-import { BadgePrimitive } from "@/primitives";
-import React from "react";
-import { BadgeVariants } from "./variants";
-
-interface BadgeProps {
-  children: string;
-  variant?: keyof typeof BadgeVariants;
-  color?: string;
-}
-
-export function Badge(props: BadgeProps) {
-  const useVariantStyles = BadgeVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-
-  // Override background color if custom color is provided
-  const customStyle = props.color ? { backgroundColor: props.color } : undefined;
-
-  return (
-    <BadgePrimitive.Root styles={styles} style={customStyle}>
-      <BadgePrimitive.Label>{props.children}</BadgePrimitive.Label>
-    </BadgePrimitive.Root>
-  );
-}

package/src/components/button/button.tsx

@@ -1,27 +0,0 @@
-import { ButtonPrimitive, type ButtonPrimitiveRootProps } from "@/primitives";
-import React from "react";
-import { ButtonVariants } from "./variants";
-
-interface ButtonProps {
-  children?: string;
-
-  onPress?: ButtonPrimitiveRootProps["onPress"];
-  onLayout?: ButtonPrimitiveRootProps["onLayout"];
-  isDisabled?: boolean;
-  isLoading?: boolean;
-
-  variant?: keyof typeof ButtonVariants;
-}
-
-export function Button(props: ButtonProps) {
-  const { children, variant = "default", ...rootProps } = props;
-  const useVariantStyles = ButtonVariants[variant];
-  const variantStyles = useVariantStyles();
-
-  return (
-    <ButtonPrimitive.Root {...rootProps} styles={variantStyles}>
-      {props.isLoading && <ButtonPrimitive.Spinner />}
-      <ButtonPrimitive.Label>{props.children}</ButtonPrimitive.Label>
-    </ButtonPrimitive.Root>
-  );
-}

package/src/components/calendar/calendar.tsx

@@ -1,32 +0,0 @@
-import { CalendarPrimitive, type CalendarRootProps } from "@/primitives";
-import React from "react";
-import { CalendarVariants } from "./variants";
-
-export interface CalendarProps {
-  value?: CalendarRootProps["value"];
-  onChange?: CalendarRootProps["onChange"];
-  defaultMonth?: CalendarRootProps["defaultMonth"];
-  minDate?: CalendarRootProps["minDate"];
-  maxDate?: CalendarRootProps["maxDate"];
-  weekDays?: string[];
-
-  variant?: keyof typeof CalendarVariants;
-}
-
-export function Calendar(props: CalendarProps) {
-  const { variant = "default", weekDays, ...rootProps } = props;
-  const useVariantStyles = CalendarVariants[variant];
-  const variantStyles = useVariantStyles();
-
-  return (
-    <CalendarPrimitive.Root {...rootProps} styles={variantStyles}>
-      <CalendarPrimitive.Header>
-        <CalendarPrimitive.NavButton direction="prev" />
-        <CalendarPrimitive.Title />
-        <CalendarPrimitive.NavButton direction="next" />
-      </CalendarPrimitive.Header>
-      <CalendarPrimitive.CalendarWeekLabels weekDays={weekDays} />
-      <CalendarPrimitive.Weeks />
-    </CalendarPrimitive.Root>
-  );
-}

package/src/components/card/card.tsx

@@ -1,26 +0,0 @@
-import { CardPrimitive } from "@/primitives";
-import React from "react";
-import { CardVariants } from "./variants";
-
-interface CardProps {
-  title?: string;
-  children: React.ReactNode;
-
-  variant?: keyof typeof CardVariants;
-}
-
-export function Card(props: CardProps) {
-  const useVariantStyles = CardVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-
-  return (
-    <CardPrimitive.Root styles={styles}>
-      {!!props.title && (
-        <CardPrimitive.Header>
-          <CardPrimitive.Title>{props.title}</CardPrimitive.Title>
-        </CardPrimitive.Header>
-      )}
-      <CardPrimitive.Body>{props.children}</CardPrimitive.Body>
-    </CardPrimitive.Root>
-  );
-}

package/src/components/checkbox/checkbox.tsx

@@ -1,32 +0,0 @@
-import { CheckboxPrimitive } from "@/primitives";
-import React from "react";
-import { View } from "react-native";
-import { CheckboxVariants } from "./variants";
-
-interface CheckboxProps {
-  value: boolean;
-  onChange: (value: boolean) => void;
-  title?: string;
-  description?: string;
-  isDisabled?: boolean;
-  variant?: keyof typeof CheckboxVariants;
-}
-
-export function Checkbox(props: CheckboxProps) {
-  const { value, onChange, title, description, isDisabled, variant = "default" } = props;
-
-  const useVariantStyles = CheckboxVariants[variant];
-  const variantStyles = useVariantStyles();
-
-  return (
-    <CheckboxPrimitive.Root value={value} onChange={onChange} isDisabled={isDisabled} styles={variantStyles}>
-      <CheckboxPrimitive.Indicator />
-      {(title || description) && (
-        <View style={{ flex: 1 }}>
-          {title && <CheckboxPrimitive.Title>{title}</CheckboxPrimitive.Title>}
-          {description && <CheckboxPrimitive.Description>{description}</CheckboxPrimitive.Description>}
-        </View>
-      )}
-    </CheckboxPrimitive.Root>
-  );
-}

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -1,51 +0,0 @@
-import { DropdownMenuPrimitive } from "@/primitives";
-import React from "react";
-import { type PressableProps } from "react-native";
-import { DropdownMenuVariants } from "./variants";
-
-type DropdownMenuOption =
-  | {
-      type: "button";
-      label: string;
-      onPress: () => void;
-    }
-  | {
-      type: "divider";
-    };
-
-interface DropdownMenuProps {
-  trigger: React.ReactElement<PressableProps>;
-  options: DropdownMenuOption[];
-
-  variant?: keyof typeof DropdownMenuVariants;
-}
-
-export function DropdownMenu(props: DropdownMenuProps) {
-  const useVariantStyles = DropdownMenuVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-
-  return (
-    <DropdownMenuPrimitive.Root styles={styles}>
-      <DropdownMenuPrimitive.Trigger>{props.trigger}</DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Portal>
-        <DropdownMenuPrimitive.Overlay>
-          <DropdownMenuPrimitive.Content>
-            {props.options.map((option) => {
-              if (option.type === "button") {
-                return (
-                  <DropdownMenuPrimitive.Button onPress={option.onPress} key={option.label}>
-                    {option.label}
-                  </DropdownMenuPrimitive.Button>
-                );
-              } else if (option.type === "divider") {
-                return <DropdownMenuPrimitive.Divider key={Math.random().toString()} />;
-              } else {
-                return null;
-              }
-            })}
-          </DropdownMenuPrimitive.Content>
-        </DropdownMenuPrimitive.Overlay>
-      </DropdownMenuPrimitive.Portal>
-    </DropdownMenuPrimitive.Root>
-  );
-}

package/src/components/dropdown-menu/variants/default.tsx

@@ -1,40 +0,0 @@
-import { type DropdownMenuStyles } from "@/primitives";
-import { useThemedStyles } from "@/utils/use-themed-styles";
-
-export const useDropdownMenuVariantDefault = (): DropdownMenuStyles => {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): DropdownMenuStyles => ({
-      overlay: {
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-      },
-      content: {
-        overflow: "hidden",
-        backgroundColor: colors.surface,
-        borderRadius: radius,
-        borderWidth: 1,
-        borderColor: colors.border,
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.15,
-        shadowRadius: 12,
-        elevation: 8,
-      },
-      button: {
-        default: {
-          paddingVertical: 12,
-          paddingHorizontal: 16,
-          fontFamily: fontFamily,
-          fontSize: fontSize,
-          color: colors.foreground,
-        },
-        hovered: {
-          backgroundColor: colors.muted,
-        },
-      },
-      divider: {
-        height: 1,
-        backgroundColor: colors.border,
-      },
-    })
-  );
-};

package/src/components/dropdown-menu/variants/index.ts

@@ -1,5 +0,0 @@
-import { useDropdownMenuVariantDefault } from "./default";
-
-export const DropdownMenuVariants = {
-  default: useDropdownMenuVariantDefault,
-};

package/src/components/empty/empty.tsx

@@ -1,26 +0,0 @@
-import { EmptyPrimitive } from "@/primitives";
-import React from "react";
-import { EmptyVariants } from "./variants";
-
-export interface EmptyProps {
-  children?: React.ReactNode;
-  media?: React.ReactNode;
-  title: string;
-  description?: string;
-
-  variant?: keyof typeof EmptyVariants;
-}
-
-export function Empty(props: EmptyProps) {
-  const useVariantStyles = EmptyVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-
-  return (
-    <EmptyPrimitive.Root styles={styles}>
-      {!!props.media && <EmptyPrimitive.Media>{props.media}</EmptyPrimitive.Media>}
-      <EmptyPrimitive.Title>{props.title}</EmptyPrimitive.Title>
-      {props.description && <EmptyPrimitive.Description>{props.description}</EmptyPrimitive.Description>}
-      {props.children}
-    </EmptyPrimitive.Root>
-  );
-}

package/src/components/field/field.tsx

@@ -1,27 +0,0 @@
-import { FieldPrimitive } from "@/primitives";
-import React from "react";
-import { FieldVariants } from "./variants";
-
-export interface FieldProps {
-  children: React.ReactNode;
-  id?: string;
-  label?: string;
-  description?: string;
-  error?: string;
-
-  variant?: keyof typeof FieldVariants;
-}
-
-export function Field(props: FieldProps) {
-  const useVariantStyles = FieldVariants[props.variant || "default"];
-  const variantStyles = useVariantStyles();
-
-  return (
-    <FieldPrimitive.Root styles={variantStyles}>
-      {props.label && <FieldPrimitive.Label for={props.id}>{props.label}</FieldPrimitive.Label>}
-      {props.description && <FieldPrimitive.Description>{props.description}</FieldPrimitive.Description>}
-      {props.children}
-      {props.error && <FieldPrimitive.Error>{props.error}</FieldPrimitive.Error>}
-    </FieldPrimitive.Root>
-  );
-}

package/src/components/popover/popover.tsx

@@ -1,50 +0,0 @@
-import type { PopoverTriggerRef } from "@/primitives";
-import { PopoverPrimitive, usePopover } from "@/primitives";
-import React, { forwardRef } from "react";
-import { type PressableProps } from "react-native";
-import { PopoverVariants } from "./variants";
-
-interface PopoverChildrenProps {
-  close: () => void;
-}
-
-export interface PopoverProps {
-  children: ((props: PopoverChildrenProps) => React.ReactNode) | React.ReactNode;
-  trigger: React.ReactElement<PressableProps>;
-  closeOnOverlayPress?: boolean;
-
-  variant?: keyof typeof PopoverVariants;
-}
-
-const PopoverContentComponent = (props: { children: PopoverProps["children"] }) => {
-  const popover = usePopover();
-  if (typeof props.children === "function") {
-    return (
-      <PopoverPrimitive.Content>
-        {props.children({
-          close: () => popover.setIsOpen(false),
-        })}
-      </PopoverPrimitive.Content>
-    );
-  }
-  return <PopoverPrimitive.Content>{props.children}</PopoverPrimitive.Content>;
-};
-
-const PopoverComponent = forwardRef<PopoverTriggerRef, PopoverProps>((props, ref) => {
-  const useVariantStyles = PopoverVariants[props.variant || "default"];
-  const styles = useVariantStyles();
-
-  return (
-    <PopoverPrimitive.Root styles={styles}>
-      <PopoverPrimitive.Trigger ref={ref}>{props.trigger}</PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Overlay closeOnPress={props.closeOnOverlayPress} />
-        <PopoverContentComponent>{props.children}</PopoverContentComponent>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  );
-});
-
-PopoverComponent.displayName = "Popover";
-
-export const Popover = PopoverComponent;

package/src/components/progress/progress.tsx

@@ -1,23 +0,0 @@
-import { ProgressPrimitive } from "@/primitives";
-import React from "react";
-import { ProgressVariants } from "./variants";
-
-interface ProgressProps {
-  value?: number;
-  max?: number;
-  variant?: keyof typeof ProgressVariants;
-  indicatorColor?: string;
-}
-
-export function Progress(props: ProgressProps) {
-  const { value = 0, max = 100, variant = "default", indicatorColor } = props;
-
-  const useVariantStyles = ProgressVariants[variant];
-  const variantStyles = useVariantStyles();
-
-  return (
-    <ProgressPrimitive.Root value={value} max={max} styles={variantStyles}>
-      <ProgressPrimitive.Indicator style={indicatorColor ? { backgroundColor: indicatorColor } : undefined} />
-    </ProgressPrimitive.Root>
-  );
-}

package/src/components/select/select.tsx

@@ -1,35 +0,0 @@
-import { SelectPrimitive, type SelectRootBaseProps } from "@/primitives";
-import React from "react";
-import { SelectVariants } from "./variants";
-
-export interface SelectOption<T> {
-  value: T;
-  label: string;
-}
-
-export interface SelectProps<T> extends SelectRootBaseProps {
-  options: SelectOption<T>[];
-  variant?: keyof typeof SelectVariants;
-}
-
-export function Select<T>(props: SelectProps<T>) {
-  const useVariantStyles = SelectVariants[props.variant ?? "default"];
-  const variantStyles = useVariantStyles();
-  return (
-    <SelectPrimitive.Root {...props} styles={variantStyles}>
-      <SelectPrimitive.Trigger>
-        <SelectPrimitive.Value />
-      </SelectPrimitive.Trigger>
-      <SelectPrimitive.Portal>
-        <SelectPrimitive.Overlay />
-        <SelectPrimitive.Content>
-          {props.options.map((option) => (
-            <SelectPrimitive.Option key={String(option.value)} value={String(option.value)}>
-              {option.label}
-            </SelectPrimitive.Option>
-          ))}
-        </SelectPrimitive.Content>
-      </SelectPrimitive.Portal>
-    </SelectPrimitive.Root>
-  );
-}

package/src/components/tabs/tabs.tsx

@@ -1,49 +0,0 @@
-import { TabsPrimitive } from "@/primitives";
-import React, { useState } from "react";
-import { TabsVariants } from "./variants";
-
-export interface Tab<T> {
-  value: T;
-  label: string;
-  disabled?: boolean;
-}
-
-interface TabsProps<T> {
-  tabs: Tab<T>[];
-  defaultValue?: T;
-  value?: T;
-  onChange?: (value: T) => void;
-  variant?: keyof typeof TabsVariants;
-}
-
-export function Tabs<T>(props: TabsProps<T>) {
-  const { tabs, defaultValue, value: controlledValue, onChange, variant = "default" } = props;
-
-  const initialValue = defaultValue ?? tabs[0]?.value ?? ("" as T);
-  const [uncontrolledValue, setUncontrolledValue] = useState(initialValue);
-  const value = controlledValue ?? uncontrolledValue;
-
-  const handleValueChange = (newValue: T) => {
-    if (controlledValue === undefined) {
-      setUncontrolledValue(newValue);
-    }
-    onChange?.(newValue);
-  };
-
-  const useVariantStyles = TabsVariants[variant];
-  const variantStyles = useVariantStyles();
-
-  return (
-    <TabsPrimitive.Root value={String(value)} onChange={(newValue) => handleValueChange(newValue as T)} styles={variantStyles}>
-      <TabsPrimitive.List>
-        {tabs.map((tab) => (
-          <TabsPrimitive.Trigger key={String(tab.value)} value={String(tab.value)} isDisabled={tab.disabled}>
-            <TabsPrimitive.TriggerText value={String(tab.value)} isDisabled={tab.disabled}>
-              {tab.label}
-            </TabsPrimitive.TriggerText>
-          </TabsPrimitive.Trigger>
-        ))}
-      </TabsPrimitive.List>
-    </TabsPrimitive.Root>
-  );
-}