@korsolutions/ui 0.0.64 → 0.0.66

package/src/components/combobox/components/combobox-trigger.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from "react";
+import { StyleSheet, TextInput, type TextInputProps } from "react-native";
+import type { TextInputRef } from "../../../types/element.types";
+import { measureLayoutPosition } from "../../../utils/normalize-layout";
+import { useCombobox } from "../context";
+import type { ComboboxTriggerState } from "../types";
+
+export interface ComboboxTriggerProps {
+  placeholder?: string;
+}
+
+const calculateState = (
+  isDisabled: boolean,
+  isOpen: boolean,
+): ComboboxTriggerState => {
+  if (isDisabled) return "disabled";
+  if (isOpen) return "focused";
+  return "default";
+};
+
+export function ComboboxTrigger(props: ComboboxTriggerProps) {
+  const combobox = useCombobox();
+  const triggerRef = useRef<TextInputRef>(null);
+
+  const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
+  const selectedOption = combobox.options.find(
+    (option) => option.value === combobox.value,
+  );
+
+  const displayValue = combobox.isOpen
+    ? combobox.searchQuery
+    : selectedOption
+      ? typeof selectedOption.label === "string"
+        ? selectedOption.label
+        : selectedOption.value
+      : "";
+
+  const open = () => {
+    if (combobox.isDisabled) return;
+    combobox.setSearchQuery("");
+    requestAnimationFrame(() => {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        combobox.setTriggerPosition(layout);
+        combobox.setIsOpen(true);
+      });
+    });
+  };
+
+  useEffect(() => {
+    triggerRef.current?.setNativeProps({ text: displayValue });
+  }, [displayValue]);
+
+  useEffect(() => {
+    if (!combobox.isOpen) {
+      triggerRef.current?.blur();
+    }
+  }, [combobox.isOpen]);
+
+  const triggerStyles = combobox.styles?.trigger;
+  const composedProps: TextInputProps = {
+    ...triggerStyles?.default,
+    ...triggerStyles?.[triggerState],
+    ...props,
+    style: StyleSheet.flatten([
+      triggerStyles?.default?.style,
+      triggerStyles?.[triggerState]?.style,
+    ]),
+  };
+
+  const composedStyle = StyleSheet.flatten([
+    triggerStyles?.default?.style,
+    triggerStyles?.[triggerState]?.style,
+  ]);
+
+  return (
+    <TextInput
+      {...composedProps}
+      ref={triggerRef}
+      value={undefined}
+      onChange={undefined}
+      onChangeText={(text) => {
+        if (combobox.isDisabled) return;
+        combobox.setSearchQuery(text);
+        if (!combobox.isOpen) {
+          open();
+        }
+      }}
+      onFocus={() => {
+        if (!combobox.isOpen) {
+          open();
+        }
+      }}
+      style={composedStyle}
+    />
+  );
+}

package/src/components/combobox/context.ts

@@ -0,0 +1,40 @@
+import { createContext, type Dispatch, useContext } from "react";
+import type { LayoutRectangle } from "react-native";
+import type { LayoutPosition } from "../../hooks";
+import type { ComboboxOption, ComboboxState, ComboboxStyles } from "./types";
+
+export interface ComboboxContext {
+  value?: string;
+  onChange?: (value: string) => void;
+
+  isOpen: boolean;
+  setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+  triggerPosition: LayoutPosition;
+  setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
+  contentLayout: LayoutRectangle;
+  setContentLayout: Dispatch<React.SetStateAction<LayoutRectangle>>;
+  options: Array<ComboboxOption>;
+  setOptions: Dispatch<React.SetStateAction<Array<ComboboxOption>>>;
+
+  searchQuery: string;
+  setSearchQuery: Dispatch<React.SetStateAction<string>>;
+
+  filter: (value: string, query: string) => boolean;
+
+  isDisabled: boolean;
+
+  state: ComboboxState;
+  styles: ComboboxStyles;
+}
+
+export const ComboboxContext = createContext<ComboboxContext | undefined>(
+  undefined,
+);
+
+export const useCombobox = () => {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error("useCombobox must be used within a ComboboxProvider");
+  }
+  return context;
+};

package/src/components/combobox/index.ts

@@ -0,0 +1,26 @@
+import { ComboboxContent } from "./components/combobox-content";
+import { ComboboxEmpty } from "./components/combobox-empty";
+import { ComboboxOption } from "./components/combobox-option";
+import { ComboboxOverlay } from "./components/combobox-overlay";
+import { ComboboxPortal } from "./components/combobox-portal";
+import { ComboboxRoot } from "./components/combobox-root";
+import { ComboboxTrigger } from "./components/combobox-trigger";
+
+export const Combobox = {
+  Root: ComboboxRoot,
+  Trigger: ComboboxTrigger,
+  Portal: ComboboxPortal,
+  Overlay: ComboboxOverlay,
+  Content: ComboboxContent,
+  Option: ComboboxOption,
+  Empty: ComboboxEmpty,
+};
+
+export type { ComboboxContentProps } from "./components/combobox-content";
+export type { ComboboxEmptyProps } from "./components/combobox-empty";
+export type { ComboboxOptionProps } from "./components/combobox-option";
+export type { ComboboxOverlayProps } from "./components/combobox-overlay";
+export type { ComboboxPortalProps } from "./components/combobox-portal";
+export type { ComboboxRootProps } from "./components/combobox-root";
+export type { ComboboxTriggerProps } from "./components/combobox-trigger";
+export type { ComboboxStyles } from "./types";

package/src/components/combobox/types.ts

@@ -0,0 +1,23 @@
+import type { TextInputProps, TextStyle } from "react-native";
+import type { ComboboxContentProps } from "./components/combobox-content";
+import type { ComboboxOverlayProps } from "./components/combobox-overlay";
+import type { ComboboxRootProps } from "./components/combobox-root";
+
+export type ComboboxState = "default" | "disabled";
+export type ComboboxTriggerState = ComboboxState | "focused";
+export type ComboboxOptionState = ComboboxState | "hovered" | "selected";
+
+export interface ComboboxStyles {
+  root?: Partial<Record<ComboboxState, ComboboxRootProps["style"]>>;
+  trigger?: Partial<Record<ComboboxTriggerState, TextInputProps>>;
+  overlay?: Partial<Record<ComboboxState, ComboboxOverlayProps["style"]>>;
+  content?: Partial<Record<ComboboxState, ComboboxContentProps["style"]>>;
+  option?: Partial<Record<ComboboxOptionState, TextStyle>>;
+  empty?: Partial<Record<ComboboxState, TextStyle>>;
+}
+
+export interface ComboboxOption {
+  value: string;
+  label: React.ReactNode;
+  keywords?: string[];
+}

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

@@ -0,0 +1,102 @@
+import { Platform } from "react-native";
+import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { type ComboboxStyles } from "../types";
+
+export function useComboboxVariantDefault(): ComboboxStyles {
+  return useThemedStyles(
+    ({ colors, radius, fontFamily, fontSize }): ComboboxStyles => ({
+      root: {
+        default: {},
+        disabled: {},
+      },
+      trigger: {
+        default: {
+          placeholderTextColor: colors.mutedForeground,
+          editable: true,
+          style: {
+            borderWidth: 1,
+            borderColor: colors.border,
+            borderRadius: radius,
+            backgroundColor: colors.surface,
+            justifyContent: "center",
+            paddingVertical: 4,
+            paddingHorizontal: 16,
+            minHeight: 48,
+            fontFamily,
+            fontSize,
+            color: colors.foreground,
+            outlineWidth: 0,
+            pointerEvents: "auto",
+            ...Platform.select({
+              web: {
+                outline: "none",
+              },
+            }),
+          },
+        },
+        focused: {
+          style: {
+            borderColor: colors.primary,
+          },
+        },
+        disabled: {
+          editable: false,
+          style: {
+            backgroundColor: colors.muted,
+            color: colors.mutedForeground,
+            pointerEvents: "none",
+          },
+        },
+      },
+      overlay: {
+        default: {
+          zIndex: 999,
+        },
+        disabled: {},
+      },
+      content: {
+        default: {
+          backgroundColor: colors.surface,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          padding: 4,
+          gap: 4,
+          zIndex: 1000,
+          maxHeight: 256,
+        },
+        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",
+        },
+        disabled: {},
+      },
+    }),
+  );
+}

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

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

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from "./badge";
 export * from "./button";
 export * from "./calendar";
 export * from "./card";
+export * from "./combobox";
 export * from "./checkbox";
 export * from "./empty";
 export * from "./field";

package/src/hooks/use-organized-children.tsx

@@ -6,7 +6,7 @@ import { getElementProp } from "../utils/element-utils";
 export function useOrganizedChildren(
   children: React.ReactNode,
   textStyle: StyleProp<TextStyle> | undefined,
-  iconProps: IconProps | undefined,
+  iconProps: IconProps | undefined | null,
 ): React.ReactNode {
   const organizedChildren = useMemo(() => {
     if (typeof children === "string") {

package/dist/module/components/button/components/button-label.js

@@ -1,18 +0,0 @@
-"use strict";
-
-import { calculateComposedStyles } from "../../../utils/calculate-styles.js";
-import React from "react";
-import { Text } from "react-native";
-import { useButton } from "../context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ButtonLabel(props) {
-  const button = useButton();
-  const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
-  const isSelectable = button.state !== "disabled" && button.state !== "loading";
-  return /*#__PURE__*/_jsx(Text, {
-    selectable: isSelectable,
-    style: calculatedStyle,
-    children: props.children
-  });
-}
-//# sourceMappingURL=button-label.js.map

package/dist/module/components/button/components/button-label.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["calculateComposedStyles","React","Text","useButton","jsx","_jsx","ButtonLabel","props","button","calculatedStyle","styles","state","style","isSelectable","selectable","children"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-label.tsx"],"mappings":";;AACA,SAASA,uBAAuB,QAAQ,oCAAiC;AACzE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQvC,OAAO,SAASC,WAAWA,CAACC,KAAuB,EAAE;EACnD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,MAAMM,eAAe,GAAGT,uBAAuB,CAACQ,MAAM,CAACE,MAAM,EAAEF,MAAM,CAACG,KAAK,EAAE,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAElG,MAAMC,YAAY,GAAGL,MAAM,CAACG,KAAK,KAAK,UAAU,IAAIH,MAAM,CAACG,KAAK,KAAK,SAAS;EAE9E,oBACEN,IAAA,CAACH,IAAI;IAACY,UAAU,EAAED,YAAa;IAACD,KAAK,EAAEH,eAAgB;IAAAM,QAAA,EACpDR,KAAK,CAACQ;EAAQ,CACX,CAAC;AAEX","ignoreList":[]}

package/dist/module/components/button/components/button-root.js

@@ -1,60 +0,0 @@
-"use strict";
-
-import React, { useState } from "react";
-import { Pressable } from "react-native";
-import { ButtonContext } from "../context.js";
-import { ButtonVariants } from "../variants/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const calculateState = (props, isHovered) => {
-  if (props.isDisabled) {
-    return "disabled";
-  }
-  if (props.isLoading) {
-    return "loading";
-  }
-  if (isHovered) {
-    return "hovered";
-  }
-  return "default";
-};
-const cursorValue = state => {
-  switch (state) {
-    case "disabled":
-      return "not-allowed";
-    case "loading":
-      return "wait";
-    default:
-      return "pointer";
-  }
-};
-export function ButtonRoot(props) {
-  const variantStyles = ButtonVariants[props.variant ?? "default"]();
-  const [isHovered, setIsHovered] = useState(false);
-  const state = calculateState(props, isHovered);
-  const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], props.style];
-  const handlePress = event => {
-    if (props.isDisabled || props.isLoading) {
-      event.preventDefault();
-      return;
-    }
-    props.onPress?.(event);
-  };
-  const contextValue = {
-    state,
-    styles: variantStyles
-  };
-  return /*#__PURE__*/_jsx(ButtonContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(Pressable, {
-      ...props,
-      onPress: handlePress,
-      onHoverIn: () => setIsHovered(true),
-      onHoverOut: () => setIsHovered(false),
-      disabled: props.isDisabled,
-      style: [calculatedStyle, {
-        cursor: cursorValue(state)
-      }]
-    })
-  });
-}
-//# sourceMappingURL=button-root.js.map

package/dist/module/components/button/components/button-root.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useState","Pressable","ButtonContext","ButtonVariants","jsx","_jsx","calculateState","props","isHovered","isDisabled","isLoading","cursorValue","state","ButtonRoot","variantStyles","variant","setIsHovered","calculatedStyle","root","default","style","handlePress","event","preventDefault","onPress","contextValue","styles","Provider","value","children","onHoverIn","onHoverOut","disabled","cursor"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-root.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA+E,cAAc;AAC/G,SAASC,aAAa,QAAQ,eAAY;AAE1C,SAASC,cAAc,QAAQ,sBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY7C,MAAMC,cAAc,GAAGA,CAACC,KAAsB,EAAEC,SAAkB,KAAkB;EAClF,IAAID,KAAK,CAACE,UAAU,EAAE;IACpB,OAAO,UAAU;EACnB;EACA,IAAIF,KAAK,CAACG,SAAS,EAAE;IACnB,OAAO,SAAS;EAClB;EACA,IAAIF,SAAS,EAAE;IACb,OAAO,SAAS;EAClB;EACA,OAAO,SAAS;AAClB,CAAC;AAED,MAAMG,WAAW,GAAIC,KAAkB,IAAkB;EACvD,QAAQA,KAAK;IACX,KAAK,UAAU;MACb,OAAO,aAAa;IACtB,KAAK,SAAS;MACZ,OAAO,MAAM;IACf;MACE,OAAO,SAAS;EACpB;AACF,CAAC;AAED,OAAO,SAASC,UAAUA,CAACN,KAAsB,EAAE;EACjD,MAAMO,aAAa,GAAGX,cAAc,CAACI,KAAK,CAACQ,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC;EAClE,MAAM,CAACP,SAAS,EAAEQ,YAAY,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMY,KAAK,GAAGN,cAAc,CAACC,KAAK,EAAEC,SAAS,CAAC;EAE9C,MAAMS,eAAe,GAAG,CAACH,aAAa,CAACI,IAAI,EAAEC,OAAO,EAAEL,aAAa,CAACI,IAAI,GAAGN,KAAK,CAAC,EAAEL,KAAK,CAACa,KAAK,CAAC;EAE/F,MAAMC,WAAsC,GAAIC,KAAK,IAAK;IACxD,IAAIf,KAAK,CAACE,UAAU,IAAIF,KAAK,CAACG,SAAS,EAAE;MACvCY,KAAK,CAACC,cAAc,CAAC,CAAC;MACtB;IACF;IACAhB,KAAK,CAACiB,OAAO,GAAGF,KAAK,CAAC;EACxB,CAAC;EAED,MAAMG,YAA2B,GAAG;IAAEb,KAAK;IAAEc,MAAM,EAAEZ;EAAc,CAAC;EAEpE,oBACET,IAAA,CAACH,aAAa,CAACyB,QAAQ;IAACC,KAAK,EAAEH,YAAa;IAAAI,QAAA,eAC1CxB,IAAA,CAACJ,SAAS;MAAA,GACJM,KAAK;MACTiB,OAAO,EAAEH,WAAY;MACrBS,SAAS,EAAEA,CAAA,KAAMd,YAAY,CAAC,IAAI,CAAE;MACpCe,UAAU,EAAEA,CAAA,KAAMf,YAAY,CAAC,KAAK,CAAE;MACtCgB,QAAQ,EAAEzB,KAAK,CAACE,UAAW;MAC3BW,KAAK,EAAE,CACLH,eAAe,EACf;QACEgB,MAAM,EAAEtB,WAAW,CAACC,KAAK;MAC3B,CAAC;IACD,CACH;EAAC,CACoB,CAAC;AAE7B","ignoreList":[]}

package/dist/module/components/button/components/button-spinner.js

@@ -1,15 +0,0 @@
-"use strict";
-
-import React from "react";
-import { ActivityIndicator } from "react-native";
-import { useButton } from "../context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ButtonSpinner(props) {
-  const button = useButton();
-  const composedStyle = [button.styles?.spinner?.default?.style, button.styles?.spinner?.[button.state]?.style, props.style];
-  return /*#__PURE__*/_jsx(ActivityIndicator, {
-    style: composedStyle,
-    color: props.color
-  });
-}
-//# sourceMappingURL=button-spinner.js.map

package/dist/module/components/button/components/button-spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","ActivityIndicator","useButton","jsx","_jsx","ButtonSpinner","props","button","composedStyle","styles","spinner","default","style","state","color"],"sourceRoot":"../../../../../src","sources":["components/button/components/button-spinner.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAqE,cAAc;AAC7G,SAASC,SAAS,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOvC,OAAO,SAASC,aAAaA,CAACC,KAAyB,EAAE;EACvD,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1B,MAAMM,aAAa,GAAG,CAACD,MAAM,CAACE,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,EAAEL,MAAM,CAACE,MAAM,EAAEC,OAAO,GAAGH,MAAM,CAACM,KAAK,CAAC,EAAED,KAAK,EAAEN,KAAK,CAACM,KAAK,CAAC;EAC1H,oBAAOR,IAAA,CAACH,iBAAiB;IAACW,KAAK,EAAEJ,aAAc;IAACM,KAAK,EAAER,KAAK,CAACQ;EAAM,CAAE,CAAC;AACxE","ignoreList":[]}

package/dist/module/components/button/context.js

@@ -1,12 +0,0 @@
-"use strict";
-
-import { createContext, useContext } from "react";
-export const ButtonContext = /*#__PURE__*/createContext(undefined);
-export const useButton = () => {
-  const context = useContext(ButtonContext);
-  if (!context) {
-    throw new Error("useButton must be used within a ButtonProvider");
-  }
-  return context;
-};
-//# sourceMappingURL=context.js.map

package/dist/module/components/button/context.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createContext","useContext","ButtonContext","undefined","useButton","context","Error"],"sourceRoot":"../../../../src","sources":["components/button/context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAQjD,OAAO,MAAMC,aAAa,gBAAGF,aAAa,CAA4BG,SAAS,CAAC;AAEhF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAGJ,UAAU,CAACC,aAAa,CAAC;EACzC,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,gDAAgD,CAAC;EACnE;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}

package/dist/typescript/src/components/button/components/button-label.d.ts

@@ -1,9 +0,0 @@
-import type { TextChildren } from "../../../types/element.types";
-import React from "react";
-import { type StyleProp, type TextStyle } from "react-native";
-export interface ButtonLabelProps {
-    children?: TextChildren;
-    style?: StyleProp<TextStyle>;
-}
-export declare function ButtonLabel(props: ButtonLabelProps): React.JSX.Element;
-//# sourceMappingURL=button-label.d.ts.map

package/dist/typescript/src/components/button/components/button-label.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-label.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAYlD"}

package/dist/typescript/src/components/button/components/button-root.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-root.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAA+B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGhH,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACtC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AA0BD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAmChD"}

package/dist/typescript/src/components/button/components/button-spinner.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { type ActivityIndicatorProps, type StyleProp, type ViewStyle } from "react-native";
-export interface ButtonSpinnerProps {
-    style?: StyleProp<ViewStyle>;
-    color?: ActivityIndicatorProps["color"];
-}
-export declare function ButtonSpinner(props: ButtonSpinnerProps): React.JSX.Element;
-//# sourceMappingURL=button-spinner.d.ts.map

package/dist/typescript/src/components/button/components/button-spinner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-spinner.d.ts","sourceRoot":"","sources":["../../../../../../src/components/button/components/button-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqB,KAAK,sBAAsB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9G,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;CACzC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAItD"}

package/dist/typescript/src/components/button/context.d.ts

@@ -1,8 +0,0 @@
-import type { ButtonState, ButtonStyles } from "./types";
-export interface ButtonContext {
-    state: ButtonState;
-    styles?: ButtonStyles;
-}
-export declare const ButtonContext: import("react").Context<ButtonContext | undefined>;
-export declare const useButton: () => ButtonContext;
-//# sourceMappingURL=context.d.ts.map

package/dist/typescript/src/components/button/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,oDAAsD,CAAC;AAEjF,eAAO,MAAM,SAAS,qBAMrB,CAAC"}

package/src/components/button/components/button-label.tsx

@@ -1,25 +0,0 @@
-import type { TextChildren } from "../../../types/element.types";
-import { calculateComposedStyles } from "../../../utils/calculate-styles";
-import React from "react";
-import { type StyleProp, Text, type TextStyle } from "react-native";
-import { useButton } from "../context";
-
-export interface ButtonLabelProps {
-  children?: TextChildren;
-
-  style?: StyleProp<TextStyle>;
-}
-
-export function ButtonLabel(props: ButtonLabelProps) {
-  const button = useButton();
-
-  const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
-
-  const isSelectable = button.state !== "disabled" && button.state !== "loading";
-
-  return (
-    <Text selectable={isSelectable} style={calculatedStyle}>
-      {props.children}
-    </Text>
-  );
-}

package/src/components/button/components/button-root.tsx

@@ -1,76 +0,0 @@
-import React, { useState } from "react";
-import { Pressable, type CursorValue, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
-import { ButtonContext } from "../context";
-import type { ButtonState } from "../types";
-import { ButtonVariants } from "../variants";
-
-export interface ButtonRootProps extends PressableProps {
-  variant?: keyof typeof ButtonVariants;
-  children?: React.ReactNode;
-
-  isDisabled?: boolean;
-  isLoading?: boolean;
-
-  style?: StyleProp<ViewStyle>;
-}
-
-const calculateState = (props: ButtonRootProps, isHovered: boolean): ButtonState => {
-  if (props.isDisabled) {
-    return "disabled";
-  }
-  if (props.isLoading) {
-    return "loading";
-  }
-  if (isHovered) {
-    return "hovered";
-  }
-  return "default";
-};
-
-const cursorValue = (state: ButtonState): CursorValue => {
-  switch (state) {
-    case "disabled":
-      return "not-allowed" as CursorValue;
-    case "loading":
-      return "wait" as CursorValue;
-    default:
-      return "pointer";
-  }
-};
-
-export function ButtonRoot(props: ButtonRootProps) {
-  const variantStyles = ButtonVariants[props.variant ?? "default"]();
-  const [isHovered, setIsHovered] = useState(false);
-
-  const state = calculateState(props, isHovered);
-
-  const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], props.style];
-
-  const handlePress: PressableProps["onPress"] = (event) => {
-    if (props.isDisabled || props.isLoading) {
-      event.preventDefault();
-      return;
-    }
-    props.onPress?.(event);
-  };
-
-  const contextValue: ButtonContext = { state, styles: variantStyles };
-
-  return (
-    <ButtonContext.Provider value={contextValue}>
-      <Pressable
-        {...props}
-        onPress={handlePress}
-        onHoverIn={() => setIsHovered(true)}
-        onHoverOut={() => setIsHovered(false)}
-        disabled={props.isDisabled}
-        style={[
-          calculatedStyle,
-          {
-            cursor: cursorValue(state),
-          },
-        ]}
-      />
-    </ButtonContext.Provider>
-  );
-}

package/src/components/button/components/button-spinner.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { ActivityIndicator, type ActivityIndicatorProps, type StyleProp, type ViewStyle } from "react-native";
-import { useButton } from "../context";
-
-export interface ButtonSpinnerProps {
-  style?: StyleProp<ViewStyle>;
-  color?: ActivityIndicatorProps["color"];
-}
-
-export function ButtonSpinner(props: ButtonSpinnerProps) {
-  const button = useButton();
-  const composedStyle = [button.styles?.spinner?.default?.style, button.styles?.spinner?.[button.state]?.style, props.style];
-  return <ActivityIndicator style={composedStyle} color={props.color} />;
-}

package/src/components/button/context.ts

@@ -1,17 +0,0 @@
-import { createContext, useContext } from "react";
-import type { ButtonState, ButtonStyles } from "./types";
-
-export interface ButtonContext {
-  state: ButtonState;
-  styles?: ButtonStyles;
-}
-
-export const ButtonContext = createContext<ButtonContext | undefined>(undefined);
-
-export const useButton = () => {
-  const context = useContext(ButtonContext);
-  if (!context) {
-    throw new Error("useButton must be used within a ButtonProvider");
-  }
-  return context;
-};