@wireservers-ui/react-natives 0.1.0

package/src/utils/brand.ts

@@ -0,0 +1,5 @@
+/** Single source of truth for the brand color. */
+export const BRAND_COLOR = '#61DBFB';
+export const BRAND_COLOR_LIGHT = '#E8F9FE';
+export const BRAND_COLOR_DARK = '#2BA8CC';
+export const BRAND_GRADIENT = ['#0E7490', '#2BA8CC', '#61DBFB'] as const;

package/src/utils/create-context.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export function createComponentContext<T>(componentName: string) {
+  const Context = React.createContext<T | null>(null);
+
+  function useComponentContext(): T {
+    const ctx = React.useContext(Context);
+    if (!ctx) {
+      throw new Error(
+        `${componentName} compound components must be used within <${componentName}>`,
+      );
+    }
+    return ctx;
+  }
+
+  return [Context.Provider, useComponentContext, Context] as const;
+}

package/src/utils/index.ts

@@ -0,0 +1,8 @@
+export { createComponentContext } from './create-context';
+export { BRAND_COLOR, BRAND_COLOR_LIGHT, BRAND_COLOR_DARK, BRAND_GRADIENT } from './brand';
+export type {
+  SemanticColor,
+  Size,
+  ExtendedSize,
+  InteractiveState,
+} from './types';

package/src/utils/types.ts

@@ -0,0 +1,20 @@
+export type SemanticColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'error'
+  | 'success'
+  | 'warning'
+  | 'info';
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type ExtendedSize = '2xs' | Size | '2xl';
+
+export interface InteractiveState {
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+  isFocused?: boolean;
+}

package/src/visually-hidden/index.ts

@@ -0,0 +1,2 @@
+export { VisuallyHidden } from './visually-hidden';
+export type { VisuallyHiddenProps } from './types';

package/src/visually-hidden/styles.ts

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants';
+
+export const visuallyHiddenStyle = tv({
+  base: 'absolute w-px h-px overflow-hidden',
+  variants: {},
+});

package/src/visually-hidden/types.ts

@@ -0,0 +1,6 @@
+import type { View } from 'react-native';
+
+export interface VisuallyHiddenProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  children: React.ReactNode;
+}

package/src/visually-hidden/visually-hidden.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { VisuallyHiddenProps } from './types';
+import { visuallyHiddenStyle } from './styles';
+
+export const VisuallyHidden = React.forwardRef<
+  React.ElementRef<typeof View>,
+  VisuallyHiddenProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      accessibilityElementsHidden={false}
+      importantForAccessibility="yes"
+      className={visuallyHiddenStyle({ class: className })}
+      style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }}
+      {...props}
+    />
+  );
+});
+
+VisuallyHidden.displayName = 'VisuallyHidden';