@vygruppen/spor-react 2.3.1 → 2.3.4

package/dist/index.d.ts

@@ -10,7 +10,6 @@ import { DateValue } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { AriaDatePickerProps, AriaDateRangePickerProps, AriaPositionProps, AriaListBoxOptions } from 'react-aria';
 import { TimeValue } from '@react-types/datepicker';
-import * as _leile_lobo_t from '@leile/lobo-t';
 import { SelectState, ListState } from 'react-stately';
 export { Item as SelectItem } from 'react-stately';
 import * as _chakra_ui_theme_tools_dist_component from '@chakra-ui/theme-tools/dist/component';
@@ -505,17 +504,69 @@ declare enum Language {
     Swedish = "sv",
     English = "en"
 }
-declare const LanguageProvider: React.Provider<Language>;
-declare const useTranslation: () => {
-    t: _leile_lobo_t.TFunc<typeof Language>;
-    language: Language;
-};
-type LanguageObject = {
-    [key in Language]: string;
+type TranslationObject = {
+    [key in Language]: string | React__default.ReactElement;
 };
-type LanguageFunction = (...args: (string | number)[]) => LanguageObject;
+type TranslationFunction = (...args: Array<string | number>) => TranslationObject;
+type Translation = TranslationObject | TranslationFunction;
 type Translations = {
-    [key: string]: LanguageObject | LanguageFunction;
+    [key: string]: Translation | Translations;
+};
+type LanguageProviderProps = {
+    language: Language;
+    children: React__default.ReactElement;
+};
+/**
+ * A language provider component.
+ *
+ * This component should wrap your entire application. It will provide the language to all components that use it.
+ *
+ * This is done by the SporProvider component, so most likely, you won't need to use it directly, unless you want to use a specific language for a specific part of your application.
+ *
+ * ```tsx
+ * import { LanguageProvider, Language } from "@vygruppen/spor-react";
+ *
+ * const App = () => {
+ *   return (
+ *     <LanguageProvider language={Language.NorwegianBokmal}>
+ *       <Routes />
+ *     </LanguageProvider>
+ *   );
+ * }
+ * ```
+ *
+ */
+declare function LanguageProvider({ language, children, }: LanguageProviderProps): React__default.JSX.Element;
+/**
+ * A hook that returns translation utilities. Typically used to translate text.
+ *
+ * ```tsx
+ * const Example = () => {
+ *   const { t } = useTranslation();
+ *   return <p>{t(texts.greeting)}</p>;
+ * }
+ * const texts = {
+ *   greeting: {
+ *     nb: "Hei",
+ *     nn: "Hei",
+ *     sv: "Hej",
+ *     en: "Hello",
+ *   }
+ * }
+ * ```
+ *
+ * You can also use it to fetch the current language:
+ *
+ * ```tsx
+ * const Example = () => {
+ *   const { language } = useTranslation();
+ *   return <p>{language}</p>;
+ * };
+ * ```
+ */
+declare function useTranslation(): {
+    readonly t: (text: TranslationObject) => string;
+    readonly language: Language;
 };
 /** Utility function that creates type safe text objects with useTranslation
  *
@@ -526,6 +577,14 @@ type Translations = {
  *   nn: "Døme",
  *   sv: "Exempel",
  *   en: "Example",
+ *  },
+ *  another: {
+ *    example: {
+ *      nb: <strong>Eksempel</strong>,
+ *      nn: <strong>Døme</strong>,
+ *      sv: <strong>Exempel</strong>,
+ *      en: <strong>Example</strong>,
+ *    }
  *  }
  * })
  * ```
@@ -692,7 +751,7 @@ type NumericStepperProps = {
     maxValue?: number;
     /** Whether the stepper is disabled or not */
     isDisabled?: boolean;
-} & BoxProps;
+} & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
  * Allows you to choose a given integer value, like for example the number of
@@ -1006,7 +1065,7 @@ type CountryCodeAndPhoneNumber = {
     countryCode: string;
     nationalNumber: string;
 };
-type PhoneNumberInputProps = BoxProps & {
+type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
     /** The root name.
      *
      * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively