@ecohouse/ui 0.1.35 → 0.1.38

package/src/components/Counter/Counter.tsx

@@ -23,6 +23,8 @@ export interface CounterProps extends Omit<ViewProps, "style" | "children"> {
   max?: number;
   step?: number;
   disabled?: boolean;
+  /** Places the value before both controls for use inside input-like fields. */
+  layout?: "controls-around" | "value-first";
   style?: StyleProp<ViewStyle>;
   className?: string;
   hitSlop?: PressableProps["hitSlop"];
@@ -51,6 +53,7 @@ export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(funct
     max,
     step = 1,
     disabled = false,
+    layout = "controls-around",
     style,
     className,
     hitSlop,
@@ -78,33 +81,57 @@ export const Counter = forwardRef<ComponentRef<typeof View>, CounterProps>(funct
     onValueChange?.(next);
   };
 
-  return (
-    <View {...rest} ref={setContainerRef} style={[styles.base, style]}>
-      <Pressable
-        disabled={decrementDisabled}
-        hitSlop={hitSlop}
-        onPress={() => updateValue(resolvedValue - step)}
-        accessibilityRole="button"
-        accessibilityLabel="Decrease value"
-        accessibilityState={{ disabled: decrementDisabled }}
-        style={[styles.button, webBlurStyle, decrementDisabled && styles.buttonDisabled]}
-      >
-        <MinusIcon />
-      </Pressable>
-
-      <Text style={styles.value}>{resolvedValue}</Text>
+  const decrement = (
+    <Pressable
+      disabled={decrementDisabled}
+      hitSlop={hitSlop}
+      onPress={() => updateValue(resolvedValue - step)}
+      accessibilityRole="button"
+      accessibilityLabel="Decrease value"
+      accessibilityState={{ disabled: decrementDisabled }}
+      style={[styles.button, webBlurStyle, decrementDisabled && styles.buttonDisabled]}
+    >
+      <MinusIcon />
+    </Pressable>
+  );
+  const increment = (
+    <Pressable
+      disabled={incrementDisabled}
+      hitSlop={hitSlop}
+      onPress={() => updateValue(resolvedValue + step)}
+      accessibilityRole="button"
+      accessibilityLabel="Increase value"
+      accessibilityState={{ disabled: incrementDisabled }}
+      style={[styles.button, webBlurStyle, incrementDisabled && styles.buttonDisabled]}
+    >
+      <PlusIcon />
+    </Pressable>
+  );
+  const valueNode = (
+    <Text style={[styles.value, layout === "value-first" && styles.leadingValue]}>
+      {resolvedValue}
+    </Text>
+  );
 
-      <Pressable
-        disabled={incrementDisabled}
-        hitSlop={hitSlop}
-        onPress={() => updateValue(resolvedValue + step)}
-        accessibilityRole="button"
-        accessibilityLabel="Increase value"
-        accessibilityState={{ disabled: incrementDisabled }}
-        style={[styles.button, webBlurStyle, incrementDisabled && styles.buttonDisabled]}
-      >
-        <PlusIcon />
-      </Pressable>
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      style={[styles.base, layout === "value-first" && styles.valueFirst, style]}
+    >
+      {layout === "value-first" ? (
+        <>
+          {valueNode}
+          {decrement}
+          {increment}
+        </>
+      ) : (
+        <>
+          {decrement}
+          {valueNode}
+          {increment}
+        </>
+      )}
     </View>
   );
 });
@@ -116,6 +143,11 @@ const styles = StyleSheet.create({
     alignSelf: "flex-start",
     gap: 17,
   },
+  valueFirst: {
+    alignSelf: "stretch",
+    flex: 1,
+    gap: 6,
+  },
   button: {
     width: BUTTON_SIZE,
     height: BUTTON_SIZE,
@@ -132,4 +164,7 @@ const styles = StyleSheet.create({
     ...counterTypography,
     color: colors.white,
   },
+  leadingValue: {
+    flex: 1,
+  },
 });

package/src/components/QuantityInput/QuantityInput.stories.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { GuestsIcon } from "../../icons";
+import { QuantityInput } from "./QuantityInput";
+
+const meta = {
+  title: "Components/QuantityInput",
+  component: QuantityInput,
+  args: {
+    label: "Maximum guests",
+    icon: GuestsIcon,
+    defaultValue: 1,
+    min: 1,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof QuantityInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithError: Story = {
+  args: { error: true, hint: "Choose at least one guest" },
+};
+
+function ControlledQuantityInput() {
+  const [value, setValue] = useState(1);
+  return (
+    <QuantityInput
+      icon={GuestsIcon}
+      label="Maximum guests"
+      max={20}
+      min={1}
+      onValueChange={setValue}
+      value={value}
+    />
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledQuantityInput />,
+};

package/src/components/QuantityInput/QuantityInput.tsx

@@ -0,0 +1,153 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent, IconProps } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+import { Counter } from "../Counter";
+
+export interface QuantityInputProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  error?: boolean;
+  hint?: string;
+  showHint?: boolean;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+/** Input-like labeled quantity control with an icon and increment/decrement actions. */
+export const QuantityInput = forwardRef<ComponentRef<typeof View>, QuantityInputProps>(
+  function QuantityInput(
+    {
+      label,
+      icon: Icon,
+      iconProps,
+      iconSize = 20,
+      value,
+      defaultValue,
+      onValueChange,
+      min = 1,
+      max,
+      step = 1,
+      disabled = false,
+      error = false,
+      hint,
+      showHint = true,
+      style,
+      className,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const rootRef = useRef<ComponentRef<typeof View>>(null);
+    const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(rootRef, className?.trim() || undefined);
+
+    return (
+      <View
+        {...rest}
+        ref={setRootRef}
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ disabled }}
+        style={[styles.root, disabled && styles.disabled, style]}
+      >
+        <Text style={[styles.label, error && styles.errorText]}>{label}</Text>
+        <View style={[styles.field, error && styles.errorField]}>
+          <View style={styles.iconSlot}>
+            <Icon
+              {...iconProps}
+              color={iconProps?.color ?? (error ? colors.red : colors.grey150)}
+              size={iconSize}
+            />
+          </View>
+          <Counter
+            defaultValue={defaultValue}
+            disabled={disabled}
+            layout="value-first"
+            max={max}
+            min={min}
+            onValueChange={onValueChange}
+            step={step}
+            value={value}
+          />
+        </View>
+        {showHint && hint ? (
+          <Text style={[styles.hint, error && styles.errorText]}>{hint}</Text>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    alignSelf: "stretch",
+    flexDirection: "column",
+    gap: 8,
+    minWidth: 0,
+  },
+  label: {
+    color: colors.white,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    letterSpacing: -0.24,
+    lineHeight: 12,
+  },
+  field: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    backgroundColor: colors.grey700,
+    borderColor: colors.grey700,
+    borderRadius: 60,
+    borderWidth: 1,
+    flexDirection: "row",
+    gap: 10,
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 6,
+    paddingVertical: 5,
+  },
+  iconSlot: {
+    alignItems: "center",
+    flexShrink: 0,
+    height: 20,
+    justifyContent: "center",
+    width: 20,
+  },
+  hint: {
+    color: colors.grey100,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+  },
+  errorField: {
+    borderColor: colors.redMuted,
+  },
+  errorText: {
+    color: colors.red,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/src/components/QuantityInput/index.ts

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

package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx

@@ -52,6 +52,15 @@ type Story = StoryObj<typeof meta>;
 
 export const WithIcons: Story = {};
 
+export const IconOnly: Story = {
+  args: {
+    options: [
+      { value: "grid", label: "Grid view", icon: LayoutGridIcon, showLabel: false },
+      { value: "list", label: "List view", icon: ListViewIcon, showLabel: false },
+    ],
+  },
+};
+
 export const WithoutIcons: Story = {
   args: { options: optionsWithoutIcons, defaultValue: "first" },
 };

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -20,6 +20,8 @@ export interface SegmentedToggleOption {
   value: string;
   label: string;
   icon?: IconComponent;
+  /** Hides the visual label while retaining it as the accessible name. */
+  showLabel?: boolean;
 }
 
 export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
@@ -163,7 +165,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
         accessibilityRole="radiogroup"
       >
         {!fullWidth
-          ? options.map(({ value: optionValue, label, icon: Icon }, index) => (
+          ? options.map(({ value: optionValue, label, icon: Icon, showLabel = true }, index) => (
               <View
                 key={`${optionValue}-measurement`}
                 pointerEvents="none"
@@ -182,7 +184,9 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                 style={styles.optionMeasurement}
               >
                 {Icon ? <Icon size={ICON_SIZE} /> : null}
-                <Text style={[styles.label, styles.contentWidthLabel]}>{label}</Text>
+                {showLabel ? (
+                  <Text style={[styles.label, styles.contentWidthLabel]}>{label}</Text>
+                ) : null}
               </View>
             ))
           : null}
@@ -195,7 +199,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
             ]}
           />
         ) : null}
-        {options.map(({ value: optionValue, label, icon: Icon }, index) => {
+        {options.map(({ value: optionValue, label, icon: Icon, showLabel = true }, index) => {
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
           const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -219,16 +223,18 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
             >
               <View style={styles.optionContent}>
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
-                <Text
-                  numberOfLines={fullWidth ? 1 : undefined}
-                  style={[
-                    styles.label,
-                    !fullWidth && styles.contentWidthLabel,
-                    { color: labelColor },
-                  ]}
-                >
-                  {label}
-                </Text>
+                {showLabel ? (
+                  <Text
+                    numberOfLines={fullWidth ? 1 : undefined}
+                    style={[
+                      styles.label,
+                      !fullWidth && styles.contentWidthLabel,
+                      { color: labelColor },
+                    ]}
+                  >
+                    {label}
+                  </Text>
+                ) : null}
               </View>
             </Pressable>
           );

package/src/components/index.ts

@@ -28,12 +28,18 @@ export type { ContactInfoCardProps } from "./ContactInfoCard";
 export { AccordionItem } from "./AccordionItem";
 export type { AccordionItemProps } from "./AccordionItem";
 
+export { Accordion } from "./Accordion";
+export type { AccordionProps } from "./Accordion";
+
 export { StepList } from "./StepList";
 export type { StepListProps } from "./StepList";
 
 export { Counter } from "./Counter";
 export type { CounterProps } from "./Counter";
 
+export { QuantityInput } from "./QuantityInput";
+export type { QuantityInputProps } from "./QuantityInput";
+
 export { SegmentedToggle } from "./SegmentedToggle";
 export type { SegmentedToggleOption, SegmentedToggleProps } from "./SegmentedToggle";
 
@@ -74,6 +80,9 @@ export type { ModalProps } from "./Modal";
 export { Input } from "./Input";
 export type { InputIcon, InputProps, InputSize } from "./Input";
 
+export { AutocompleteInput } from "./AutocompleteInput";
+export type { AutocompleteInputProps, AutocompleteOption } from "./AutocompleteInput";
+
 export { VerificationCodeInput } from "./VerificationCodeInput";
 export type {
   VerificationCodeInputHandle,

package/src/icons/ArrowLeft/ArrowLeftIcon.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { ARROW_LEFT_PATH } from "./arrowLeftPath";
+
+describe("ArrowLeftIcon", () => {
+  it("uses the approved 24px path", () => {
+    expect(ARROW_LEFT_PATH).toBe(
+      "M10.1972 6.59961L4.80078 11.9994L10.1972 17.3996M4.80078 11.9965H19.202",
+    );
+  });
+});

package/src/icons/ArrowLeft/ArrowLeftIcon.tsx

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

package/src/icons/ArrowLeft/ArrowLeftIcon.web.tsx

@@ -0,0 +1,26 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { ARROW_LEFT_PATH } from "./arrowLeftPath";
+
+export function ArrowLeftIcon({ size = 24, color = colors.white, strokeWidth = 1.35 }: IconProps) {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      height={size}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d={ARROW_LEFT_PATH}
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+}
+
+export { ARROW_LEFT_PATH } from "./arrowLeftPath";

package/src/icons/ArrowLeft/arrowLeftPath.ts

@@ -0,0 +1,3 @@
+/** Full Arrow Left path — 24×24 viewBox. */
+export const ARROW_LEFT_PATH =
+  "M10.1972 6.59961L4.80078 11.9994L10.1972 17.3996M4.80078 11.9965H19.202";

package/src/icons/ArrowLeft/index.ts

@@ -0,0 +1 @@
+export { ArrowLeftIcon, ARROW_LEFT_PATH } from "./ArrowLeftIcon";

package/src/icons/CurrentLocation/CurrentLocationIcon.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { CURRENT_LOCATION_PATH } from "./currentLocationPath";
+
+describe("CurrentLocationIcon", () => {
+  it("uses the approved 19px path", () => {
+    expect(CURRENT_LOCATION_PATH).toBe(
+      "M17.4167 9.08333H14.0833M4.08333 9.08333H0.75M9.08333 4.08333V0.75M9.08333 17.4167V14.0833M15.75 9.08333C15.75 12.7652 12.7652 15.75 9.08333 15.75C5.40144 15.75 2.41667 12.7652 2.41667 9.08333C2.41667 5.40144 5.40144 2.41667 9.08333 2.41667C12.7652 2.41667 15.75 5.40144 15.75 9.08333ZM11.5833 9.08333C11.5833 10.464 10.464 11.5833 9.08333 11.5833C7.70262 11.5833 6.58333 10.464 6.58333 9.08333C6.58333 7.70262 7.70262 6.58333 9.08333 6.58333C10.464 6.58333 11.5833 7.70262 11.5833 9.08333Z",
+    );
+  });
+});

package/src/icons/CurrentLocation/CurrentLocationIcon.tsx

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

package/src/icons/CurrentLocation/CurrentLocationIcon.web.tsx

@@ -0,0 +1,30 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { CURRENT_LOCATION_PATH } from "./currentLocationPath";
+
+export function CurrentLocationIcon({
+  size = 19,
+  color = colors.primary,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <svg
+      aria-hidden
+      fill="none"
+      height={size}
+      viewBox="0 0 19 19"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d={CURRENT_LOCATION_PATH}
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+}
+
+export { CURRENT_LOCATION_PATH } from "./currentLocationPath";

package/src/icons/CurrentLocation/currentLocationPath.ts

@@ -0,0 +1,3 @@
+/** Current-location crosshair path — 19×19 viewBox. */
+export const CURRENT_LOCATION_PATH =
+  "M17.4167 9.08333H14.0833M4.08333 9.08333H0.75M9.08333 4.08333V0.75M9.08333 17.4167V14.0833M15.75 9.08333C15.75 12.7652 12.7652 15.75 9.08333 15.75C5.40144 15.75 2.41667 12.7652 2.41667 9.08333C2.41667 5.40144 5.40144 2.41667 9.08333 2.41667C12.7652 2.41667 15.75 5.40144 15.75 9.08333ZM11.5833 9.08333C11.5833 10.464 10.464 11.5833 9.08333 11.5833C7.70262 11.5833 6.58333 10.464 6.58333 9.08333C6.58333 7.70262 7.70262 6.58333 9.08333 6.58333C10.464 6.58333 11.5833 7.70262 11.5833 9.08333Z";

package/src/icons/CurrentLocation/index.ts

@@ -0,0 +1 @@
+export { CurrentLocationIcon, CURRENT_LOCATION_PATH } from "./CurrentLocationIcon";

package/src/icons/MoreHorizontal/MoreHorizontalIcon.tsx

@@ -0,0 +1,26 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MORE_HORIZONTAL_PATH } from "./moreHorizontalPath";
+
+export { MORE_HORIZONTAL_PATH } from "./moreHorizontalPath";
+
+const ASPECT_RATIO = 4 / 13;
+
+export function MoreHorizontalIcon({
+  size = 13,
+  color = colors.white,
+  strokeWidth = 2,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size * ASPECT_RATIO} viewBox="0 0 13 4" fill="none">
+      <Path
+        d={MORE_HORIZONTAL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/MoreHorizontal/MoreHorizontalIcon.web.tsx

@@ -0,0 +1,25 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MORE_HORIZONTAL_PATH } from "./moreHorizontalPath";
+
+export { MORE_HORIZONTAL_PATH } from "./moreHorizontalPath";
+
+const ASPECT_RATIO = 4 / 13;
+
+export function MoreHorizontalIcon({
+  size = 13,
+  color = colors.white,
+  strokeWidth = 2,
+}: IconProps) {
+  return (
+    <svg width={size} height={size * ASPECT_RATIO} viewBox="0 0 13 4" fill="none" aria-hidden>
+      <path
+        d={MORE_HORIZONTAL_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/MoreHorizontal/index.ts

@@ -0,0 +1 @@
+export { MoreHorizontalIcon, MORE_HORIZONTAL_PATH } from "./MoreHorizontalIcon";

package/src/icons/MoreHorizontal/moreHorizontalPath.ts

@@ -0,0 +1,2 @@
+export const MORE_HORIZONTAL_PATH =
+  "M6.33333 2.33333C6.70152 2.33333 7 2.03486 7 1.66667C7 1.29848 6.70152 1 6.33333 1C5.96514 1 5.66667 1.29848 5.66667 1.66667C5.66667 2.03486 5.96514 2.33333 6.33333 2.33333ZM11 2.33333C11.3682 2.33333 11.6667 2.03486 11.6667 1.66667C11.6667 1.29848 11.3682 1 11 1C10.6318 1 10.3333 1.29848 10.3333 1.66667C10.3333 2.03486 10.6318 2.33333 11 2.33333ZM1.66667 2.33333C2.03486 2.33333 2.33333 2.03486 2.33333 1.66667C2.33333 1.29848 2.03486 1 1.66667 1C1.29848 1 1 1.29848 1 1.66667C1 2.03486 1.29848 2.33333 1.66667 2.33333Z";

package/src/icons/TableView/TableViewIcon.tsx

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