@ecohouse/ui 0.1.4 → 0.1.6

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -0,0 +1,221 @@
+import { forwardRef, useEffect, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent } from "../../icons";
+import { colors, segmentedToggleTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface SegmentedToggleOption {
+  value: string;
+  label: string;
+  icon?: IconComponent;
+}
+
+export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
+  options: readonly [SegmentedToggleOption, SegmentedToggleOption];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const ICON_SIZE = 20;
+const ANIMATION_DURATION = 200;
+
+export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
+  function SegmentedToggle(
+    {
+      options,
+      value,
+      defaultValue = options[0].value,
+      onValueChange,
+      fullWidth = true,
+      disabled = false,
+      style,
+      className,
+      hitSlop,
+      onLayout,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const selectedValue = isControlled ? value : uncontrolledValue;
+    const selectedIndex = Math.max(
+      0,
+      options.findIndex(({ value: optionValue }) => optionValue === selectedValue),
+    );
+    const resolvedClassName = className?.trim() || undefined;
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const progress = useRef(new Animated.Value(selectedIndex)).current;
+    const [contentWidths, setContentWidths] = useState<[number, number]>([0, 0]);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
+    const widestContentWidth = Math.max(...contentWidths);
+    const contentBasedOptionWidth = widestContentWidth > 0 ? widestContentWidth + 24 * 2 : 0;
+    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const indicatorTranslateX = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, optionWidth + 4],
+    });
+
+    useApplyWebClassName(containerRef, resolvedClassName);
+
+    useEffect(() => {
+      const animation = Animated.timing(progress, {
+        toValue: selectedIndex,
+        duration: ANIMATION_DURATION,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      });
+
+      animation.start();
+      return () => animation.stop();
+    }, [progress, selectedIndex]);
+
+    const selectOption = (nextValue: string) => {
+      if (disabled || nextValue === selectedValue) return;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        onLayout={(event) => {
+          const nextWidth = event.nativeEvent.layout.width;
+          setContainerWidth((currentWidth) =>
+            currentWidth === nextWidth ? currentWidth : nextWidth,
+          );
+          onLayout?.(event);
+        }}
+        style={[
+          styles.base,
+          fullWidth ? styles.fullWidth : styles.contentWidth,
+          disabled && styles.disabled,
+          style,
+        ]}
+        accessibilityRole="radiogroup"
+      >
+        {optionWidth > 0 ? (
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.activeIndicator,
+              { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] },
+            ]}
+          />
+        ) : null}
+        {options.map(({ value: optionValue, label, icon: Icon }, index) => {
+          const selected = optionValue === selectedValue;
+          const iconColor = selected ? colors.primary : colors.whiteAlpha20;
+          const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
+
+          return (
+            <Pressable
+              key={optionValue}
+              onPress={() => selectOption(optionValue)}
+              disabled={disabled}
+              hitSlop={hitSlop}
+              accessibilityRole="radio"
+              accessibilityLabel={label}
+              accessibilityState={{ selected, disabled }}
+              style={[
+                styles.option,
+                fullWidth ? styles.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth },
+              ]}
+            >
+              <View
+                onLayout={(event) => {
+                  const nextWidth = event.nativeEvent.layout.width;
+                  setContentWidths((currentWidths) => {
+                    if (currentWidths[index] === nextWidth) return currentWidths;
+                    const nextWidths: [number, number] = [currentWidths[0], currentWidths[1]];
+                    nextWidths[index] = nextWidth;
+                    return nextWidths;
+                  });
+                }}
+                style={styles.optionContent}
+              >
+                {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
+                <Text numberOfLines={1} style={[styles.label, { color: labelColor }]}>
+                  {label}
+                </Text>
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  base: {
+    height: 44,
+    flexDirection: "row",
+    padding: 4,
+    gap: 4,
+    borderRadius: 60,
+    backgroundColor: colors.grey700,
+    overflow: "hidden",
+  },
+  fullWidth: {
+    width: "100%",
+    alignSelf: "stretch",
+  },
+  contentWidth: {
+    alignSelf: "flex-start",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  option: {
+    zIndex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 24,
+    borderRadius: 60,
+  },
+  optionContent: {
+    maxWidth: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  optionFullWidth: {
+    flex: 1,
+    minWidth: 0,
+  },
+  activeIndicator: {
+    position: "absolute",
+    top: 4,
+    left: 4,
+    height: 36,
+    backgroundColor: colors.grey600,
+    borderRadius: 60,
+  },
+  label: {
+    ...segmentedToggleTypography,
+    flexShrink: 1,
+  },
+});

package/src/components/SegmentedToggle/index.ts

@@ -0,0 +1,2 @@
+export { SegmentedToggle } from "./SegmentedToggle";
+export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";

package/src/components/StatCard/StatCard.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { UsersAltIcon } from "../../icons";
+import { StatCard } from "./StatCard";
+
+const meta = {
+  title: "Components/StatCard",
+  component: StatCard,
+  args: {
+    label: "Label",
+    icon: UsersAltIcon,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof StatCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/StatCard/StatCard.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent } from "../../icons";
+import { colors, statCardTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface StatCardProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  icon: IconComponent;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const ICON_SIZE = 28;
+
+export const StatCard = forwardRef<ComponentRef<typeof View>, StatCardProps>(function StatCard(
+  { label, icon: Icon, style, className, accessibilityLabel, ...rest },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const resolvedClassName = className?.trim() || undefined;
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+  useApplyWebClassName(containerRef, resolvedClassName);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      style={[styles.base, style]}
+      accessibilityRole="text"
+      accessibilityLabel={accessibilityLabel ?? label}
+    >
+      <Icon size={ICON_SIZE} color={colors.white} />
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  base: {
+    width: 204.5,
+    minHeight: 114,
+    padding: 24,
+    gap: 16,
+    borderRadius: 20,
+    backgroundColor: colors.grey750,
+  },
+  label: {
+    ...statCardTypography,
+    color: colors.whiteAlpha86,
+  },
+});

package/src/components/StatCard/index.ts

@@ -0,0 +1,2 @@
+export { StatCard } from "./StatCard";
+export type { StatCardProps } from "./StatCard";

package/src/components/index.ts

@@ -1,12 +1,32 @@
 export { Avatar } from "./Avatar";
 export type { AvatarProps, AvatarMenuItem } from "./Avatar";
 
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeVariant } from "./Badge";
+
+export { Counter } from "./Counter";
+export type { CounterProps } from "./Counter";
+
+export { SegmentedToggle } from "./SegmentedToggle";
+export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";
+
+export { StatCard } from "./StatCard";
+export type { StatCardProps } from "./StatCard";
+
 export { Button } from "./Button";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
 
 export { Checkbox } from "./Checkbox";
 export type { CheckboxProps, CheckboxVariant } from "./Checkbox";
 
+export { DatePicker } from "./DatePicker";
+export type {
+  DatePickerProps,
+  DatePickerSingleProps,
+  DatePickerRangeProps,
+  DateRange,
+} from "./DatePicker";
+
 export { Input } from "./Input";
 export type { InputProps, InputSize } from "./Input";
 

package/src/icons/CalendarOutline/CalendarOutlineIcon.tsx

@@ -0,0 +1,25 @@
+import Svg, { Path } from "react-native-svg";
+import { CALENDAR_OUTLINE_PATH } from "./calendarOutlinePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CALENDAR_OUTLINE_PATH } from "./calendarOutlinePath";
+
+/** Native — react-native-svg (peer dependency). */
+export function CalendarOutlineIcon({
+  size = 20,
+  color = colors.primary,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={CALENDAR_OUTLINE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/CalendarOutline/CalendarOutlineIcon.web.tsx

@@ -0,0 +1,31 @@
+import { CALENDAR_OUTLINE_PATH } from "./calendarOutlinePath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function CalendarOutlineIcon({
+  size = 20,
+  color = colors.primary,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CALENDAR_OUTLINE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CALENDAR_OUTLINE_PATH } from "./calendarOutlinePath";

package/src/icons/CalendarOutline/calendarOutlinePath.ts

@@ -0,0 +1,3 @@
+/** Plain calendar icon path (no checkmark badge) — 16×16 viewBox. */
+export const CALENDAR_OUTLINE_PATH =
+  "M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M2 6.66668H14M5.2 2.66668H10.8C11.9201 2.66668 12.4802 2.66668 12.908 2.88466C13.2843 3.07641 13.5903 3.38237 13.782 3.7587C14 4.18652 14 4.74657 14 5.86668V11.4667C14 12.5868 14 13.1468 13.782 13.5747C13.5903 13.951 13.2843 14.2569 12.908 14.4487C12.4802 14.6667 11.9201 14.6667 10.8 14.6667H5.2C4.0799 14.6667 3.51984 14.6667 3.09202 14.4487C2.71569 14.2569 2.40973 13.951 2.21799 13.5747C2 13.1468 2 12.5868 2 11.4667V5.86668C2 4.74657 2 4.18652 2.21799 3.7587C2.40973 3.38237 2.71569 3.07641 3.09202 2.88466C3.51984 2.66668 4.0799 2.66668 5.2 2.66668Z";

package/src/icons/CalendarOutline/index.ts

@@ -0,0 +1 @@
+export { CalendarOutlineIcon, CALENDAR_OUTLINE_PATH } from "./CalendarOutlineIcon";

package/src/icons/ChevronLeft/ChevronLeftIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { CHEVRON_LEFT_PATH } from "./chevronLeftPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CHEVRON_LEFT_PATH } from "./chevronLeftPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function ChevronLeftIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={CHEVRON_LEFT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ChevronLeft/ChevronLeftIcon.web.tsx

@@ -0,0 +1,27 @@
+import { CHEVRON_LEFT_PATH } from "./chevronLeftPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ChevronLeftIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHEVRON_LEFT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CHEVRON_LEFT_PATH } from "./chevronLeftPath";

package/src/icons/ChevronLeft/chevronLeftPath.ts

@@ -0,0 +1,2 @@
+/** Chevron left path — 20×20 viewBox. */
+export const CHEVRON_LEFT_PATH = "M12.5 15L7.5 10L12.5 5";

package/src/icons/ChevronLeft/index.ts

@@ -0,0 +1 @@
+export { ChevronLeftIcon, CHEVRON_LEFT_PATH } from "./ChevronLeftIcon";

package/src/icons/Minus/MinusIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MINUS_PATH } from "./minusPath";
+
+export { MINUS_PATH } from "./minusPath";
+
+export function MinusIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={MINUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Minus/MinusIcon.web.tsx

@@ -0,0 +1,19 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MINUS_PATH } from "./minusPath";
+
+export { MINUS_PATH } from "./minusPath";
+
+export function MinusIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d={MINUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/Minus/index.ts

@@ -0,0 +1 @@
+export { MinusIcon, MINUS_PATH } from "./MinusIcon";

package/src/icons/Minus/minusPath.ts

@@ -0,0 +1 @@
+export const MINUS_PATH = "M3.33337 8H12.6667";

package/src/icons/Plus/PlusIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { PLUS_PATH } from "./plusPath";
+
+export { PLUS_PATH } from "./plusPath";
+
+export function PlusIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={PLUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Plus/PlusIcon.web.tsx

@@ -0,0 +1,19 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { PLUS_PATH } from "./plusPath";
+
+export { PLUS_PATH } from "./plusPath";
+
+export function PlusIcon({ size = 16, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d={PLUS_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/Plus/index.ts

@@ -0,0 +1 @@
+export { PlusIcon, PLUS_PATH } from "./PlusIcon";

package/src/icons/Plus/plusPath.ts

@@ -0,0 +1 @@
+export const PLUS_PATH = "M8.00004 3.33325V12.6666M3.33337 7.99992H12.6667";

package/src/icons/Sidebar/SidebarIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { SIDEBAR_PATH } from "./sidebarPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { SIDEBAR_PATH } from "./sidebarPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function SidebarIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={SIDEBAR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Sidebar/SidebarIcon.web.tsx

@@ -0,0 +1,27 @@
+import { SIDEBAR_PATH } from "./sidebarPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function SidebarIcon({ size = 20, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={SIDEBAR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { SIDEBAR_PATH } from "./sidebarPath";

package/src/icons/Sidebar/index.ts

@@ -0,0 +1 @@
+export { SidebarIcon, SIDEBAR_PATH } from "./SidebarIcon";

package/src/icons/Sidebar/sidebarPath.ts

@@ -0,0 +1,3 @@
+/** Sidebar icon path — 20×20 viewBox. */
+export const SIDEBAR_PATH =
+  "M12.5 2.5V17.5M6.5 2.5H13.5C14.9001 2.5 15.6002 2.5 16.135 2.77248C16.6054 3.01217 16.9878 3.39462 17.2275 3.86502C17.5 4.3998 17.5 5.09987 17.5 6.5V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V6.5C2.5 5.09987 2.5 4.3998 2.77248 3.86502C3.01217 3.39462 3.39462 3.01217 3.86502 2.77248C4.3998 2.5 5.09987 2.5 6.5 2.5Z";

package/src/icons/UsersAlt/UsersAltIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { USERS_ALT_PATH } from "./usersAltPath";
+
+export { USERS_ALT_PATH } from "./usersAltPath";
+
+export function UsersAltIcon({ size = 28, color = colors.white }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 28 28" fill="none">
+      <Path d={USERS_ALT_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/UsersAlt/UsersAltIcon.web.tsx

@@ -0,0 +1,13 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { USERS_ALT_PATH } from "./usersAltPath";
+
+export { USERS_ALT_PATH } from "./usersAltPath";
+
+export function UsersAltIcon({ size = 28, color = colors.white }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 28 28" fill="none" aria-hidden>
+      <path d={USERS_ALT_PATH} fill={color} />
+    </svg>
+  );
+}

package/src/icons/UsersAlt/index.ts

@@ -0,0 +1 @@
+export { UsersAltIcon, USERS_ALT_PATH } from "./UsersAltIcon";

package/src/icons/UsersAlt/usersAltPath.ts

@@ -0,0 +1,2 @@
+export const USERS_ALT_PATH =
+  "M14.35 14.2566C14.9725 13.7177 15.4718 13.0513 15.814 12.3024C16.1562 11.5536 16.3333 10.7399 16.3333 9.91659C16.3333 8.36949 15.7187 6.88576 14.6248 5.7918C13.5308 4.69783 12.0471 4.08325 10.5 4.08325C8.95289 4.08325 7.46916 4.69783 6.3752 5.7918C5.28124 6.88576 4.66666 8.36949 4.66666 9.91659C4.66665 10.7399 4.84376 11.5536 5.18597 12.3024C5.52818 13.0513 6.02748 13.7177 6.64999 14.2566C5.01682 14.9961 3.6312 16.1904 2.6588 17.6966C1.6864 19.2027 1.16837 20.9571 1.16666 22.7499C1.16666 23.0593 1.28957 23.3561 1.50837 23.5749C1.72716 23.7937 2.0239 23.9166 2.33332 23.9166C2.64274 23.9166 2.93949 23.7937 3.15828 23.5749C3.37707 23.3561 3.49999 23.0593 3.49999 22.7499C3.49999 20.8934 4.23749 19.1129 5.55024 17.8002C6.863 16.4874 8.64347 15.7499 10.5 15.7499C12.3565 15.7499 14.137 16.4874 15.4497 17.8002C16.7625 19.1129 17.5 20.8934 17.5 22.7499C17.5 23.0593 17.6229 23.3561 17.8417 23.5749C18.0605 23.7937 18.3572 23.9166 18.6667 23.9166C18.9761 23.9166 19.2728 23.7937 19.4916 23.5749C19.7104 23.3561 19.8333 23.0593 19.8333 22.7499C19.8316 20.9571 19.3136 19.2027 18.3412 17.6966C17.3688 16.1904 15.9832 14.9961 14.35 14.2566ZM10.5 13.4166C9.80775 13.4166 9.13107 13.2113 8.55549 12.8267C7.97992 12.4421 7.53132 11.8955 7.26641 11.256C7.0015 10.6164 6.93219 9.9127 7.06724 9.23377C7.20229 8.55484 7.53563 7.9312 8.02512 7.44171C8.5146 6.95223 9.13824 6.61889 9.81717 6.48384C10.4961 6.34879 11.1998 6.4181 11.8394 6.68301C12.4789 6.94791 13.0255 7.39652 13.4101 7.97209C13.7947 8.54766 14 9.22435 14 9.91659C14 10.8448 13.6312 11.7351 12.9749 12.3915C12.3185 13.0478 11.4282 13.4166 10.5 13.4166ZM21.8633 13.7899C22.61 12.9491 23.0977 11.9105 23.2678 10.799C23.4378 9.68748 23.2831 8.55051 22.822 7.52492C22.361 6.49933 21.6134 5.62885 20.6692 5.01825C19.725 4.40764 18.6244 4.08295 17.5 4.08325C17.1906 4.08325 16.8938 4.20617 16.675 4.42496C16.4562 4.64375 16.3333 4.9405 16.3333 5.24992C16.3333 5.55934 16.4562 5.85608 16.675 6.07488C16.8938 6.29367 17.1906 6.41659 17.5 6.41659C18.4282 6.41659 19.3185 6.78533 19.9749 7.44171C20.6312 8.09809 21 8.98833 21 9.91659C20.9983 10.5294 20.8358 11.131 20.5287 11.6612C20.2216 12.1915 19.7807 12.6319 19.25 12.9383C19.077 13.038 18.9325 13.1805 18.8304 13.3521C18.7283 13.5237 18.6719 13.7186 18.6667 13.9183C18.6618 14.1163 18.7074 14.3123 18.7993 14.4879C18.8911 14.6634 19.0262 14.8127 19.1917 14.9216L19.6467 15.2249L19.7983 15.3066C21.2046 15.9736 22.391 17.0286 23.2178 18.3473C24.0446 19.666 24.4773 21.1935 24.465 22.7499C24.465 23.0593 24.5879 23.3561 24.8067 23.5749C25.0255 23.7937 25.3222 23.9166 25.6317 23.9166C25.9411 23.9166 26.2378 23.7937 26.4566 23.5749C26.6754 23.3561 26.7983 23.0593 26.7983 22.7499C26.8079 20.9596 26.3594 19.1965 25.4957 17.6283C24.632 16.0601 23.3816 14.7388 21.8633 13.7899Z";