@jobber/components-native 0.101.7 → 0.101.8

package/dist/docs/InputDate/InputDate.md

@@ -19,10 +19,8 @@ date.
 ```tsx
 import React from "react";
 import { InputDate } from "@jobber/components/InputDate";
-// eslint-disable-next-line import/no-deprecated
-import type { InputDateProps } from "../InputDate.types";
+import type { InputDateProps } from "@jobber/components/InputDate";
 
-// eslint-disable-next-line import/no-deprecated
 export function InputDateDisabledExample(props: InputDateProps) {
   return <InputDate placeholder="Start Date" disabled={true} {...props} />;
 }
@@ -42,7 +40,6 @@ export function InputDateInvalidExample(props: InputDateProps) {
       error="Start Date is required"
       invalid={true}
       {...props}
-      version={2}
     />
   );
 }

package/dist/docs/Select/Select.md

@@ -9,9 +9,9 @@ selected. For grouping options with section headers, use Select.OptionGroup.
 
 #### Custom grouped menu and browser support
 
-V2 remains a native `<select>` by default. To enable the enhanced grouped menu
-styling (bold section headers, edge‑to‑edge dividers and hover backgrounds), set
-the `UNSAFE_experimentalStyles` prop on `Select`.
+To enable the enhanced grouped menu styling (bold section headers, edge‑to‑edge
+dividers and hover backgrounds), set the `UNSAFE_experimentalStyles` prop on
+`Select`.
 
 * When `UNSAFE_experimentalStyles` is true and the browser supports
   `appearance: base-select` (Chromium 123+), the select renders with the
@@ -20,21 +20,19 @@ the `UNSAFE_experimentalStyles` prop on `Select`.
   the select remains native while still rendering the same `OptionGroup`
   structure.
 
-#### Option Props
-
-#### OptionGroup Props
-
 ## States
 
 ### Invalid
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { Option, Select } from "@jobber/components/Select";
 
 export function SelectInvalidExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
   return (
-    <Select invalid={true}>
+    <Select invalid={true} value={value} onChange={setValue}>
       <Option value="sad">Tony</Option>
       <Option value="old">Steve</Option>
     </Select>
@@ -45,12 +43,14 @@ export function SelectInvalidExample() {
 ### Disabled
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { Option, Select } from "@jobber/components/Select";
 
 export function SelectDisabledExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
   return (
-    <Select disabled={true}>
+    <Select disabled={true} value={value} onChange={setValue}>
       <Option value="sad">Tony</Option>
       <Option value="old">Steve</Option>
     </Select>
@@ -67,15 +67,18 @@ provides the section header text.
 ### Basic Option Groups
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { Select } from "@jobber/components/Select";
 
 export function SelectCustomOptionGroupsExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
   return (
     <Select
       placeholder="Select an option"
-      version={2}
       UNSAFE_experimentalStyles={true}
+      value={value}
+      onChange={setValue}
     >
       <Select.OptionGroup label="Team A">
         <Select.Option value="alice">Alice</Select.Option>
@@ -100,15 +103,18 @@ export function SelectCustomOptionGroupsExample() {
 ### Disabled Option Groups
 
 ```tsx
-import React from "react";
+import React, { useState } from "react";
 import { Select } from "@jobber/components/Select";
 
 export function SelectCustomOptionGroupDisabledExample() {
+  const [value, setValue] = useState<string | number | undefined>("");
+
   return (
     <Select
-      version={2}
       UNSAFE_experimentalStyles
       placeholder="Select an option"
+      value={value}
+      onChange={setValue}
     >
       <Select.OptionGroup label="Available Items">
         <Select.Option value="option1">Option 1</Select.Option>
@@ -132,7 +138,7 @@ export function SelectCustomOptionGroupDisabledExample() {
 
 ### Custom (Chromium) vs native
 
-Select (V2) is native by default. Opt into the customizable Chrome UI with
+Select is native by default. Opt into the customizable Chrome UI with
 `UNSAFE_experimentalStyles`. This enhances grouped menus in Chromium 123+ when
 the browser supports `appearance: base-select`.
 

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -11,17 +11,15 @@ The following components have a v2 implementation. **Always pass
 `version={2}`**. Never generate v1 usage for these components — v1 is
 deprecated.
 
-| Component        | Import                                                                   | v2 prop                                                                                                   |
-| ---------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
-| Autocomplete     | `import { Autocomplete } from "@jobber/components/Autocomplete"`         | `version={2}` — fully controlled, async support                                                           |
-| InputDate        | `import { InputDate } from "@jobber/components/InputDate"`               | `version={2}`                                                                                             |
-| InputEmail       | `import { InputEmail } from "@jobber/components/InputEmail"`             | `version={2}`                                                                                             |
-| InputNumber      | `import { InputNumber } from "@jobber/components/InputNumber"`           | `version={2}`                                                                                             |
-| InputPhoneNumber | `import { InputPhoneNumber } from "@jobber/components/InputPhoneNumber"` | `version={2}`                                                                                             |
-| InputText        | `import { InputText } from "@jobber/components/InputText"`               | `version={2}`                                                                                             |
-| InputTime        | `import { InputTime } from "@jobber/components/InputTime"`               | `version={2}`                                                                                             |
-| Modal            | `import { Modal } from "@jobber/components/Modal"`                       | `version={2}` — uses `Modal.Provider` composition                                                         |
-| Select           | `import { Select } from "@jobber/components/Select"`                     | `version={2}` — native `<select>`; opt into the customizable Chromium UI with `UNSAFE_experimentalStyles` |
+| Component        | Import                                                                   | v2 prop                                           |
+| ---------------- | ------------------------------------------------------------------------ | ------------------------------------------------- |
+| Autocomplete     | `import { Autocomplete } from "@jobber/components/Autocomplete"`         | `version={2}` — fully controlled, async support   |
+| InputEmail       | `import { InputEmail } from "@jobber/components/InputEmail"`             | `version={2}`                                     |
+| InputNumber      | `import { InputNumber } from "@jobber/components/InputNumber"`           | `version={2}`                                     |
+| InputPhoneNumber | `import { InputPhoneNumber } from "@jobber/components/InputPhoneNumber"` | `version={2}`                                     |
+| InputText        | `import { InputText } from "@jobber/components/InputText"`               | `version={2}`                                     |
+| InputTime        | `import { InputTime } from "@jobber/components/InputTime"`               | `version={2}`                                     |
+| Modal            | `import { Modal } from "@jobber/components/Modal"`                       | `version={2}` — uses `Modal.Provider` composition |
 
 ## Deprecated components — do not use
 
@@ -39,7 +37,6 @@ deprecated.
 | `Card`                                 | `title`                 | Use the `header` prop, or compose with `Card.Header` and `Card.Body`.                          |
 | `Toast`                                | `action`, `actionLabel` | Both will be removed in the next major version. Trigger follow-up work from outside the toast. |
 | Text inputs (`InputText` v2 etc.)      | `onEnter`               | Use `onKeyDown` or `onKeyUp` and check the key.                                                |
-| `Select` v2                            | `onEnter`               | Use `onKeyDown` or `onKeyUp`.                                                                  |
 | `FormField` (`maxLength` on v1 inputs) | `maxLength`             | Flagged in source as flawed; only kept for v1 backwards compatibility.                         |
 
 ## Import pattern
@@ -118,7 +115,6 @@ parent reads its compound children to wire up state, accessibility, and styling.
 | `Banner`                | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action`                                                                                                                                                                                                  | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`).                                                                                                                             |
 | `Card`                  | `Card.Header`, `Card.Body`                                                                                                                                                                                                                                                                   | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup.                                                                                                                                                         |
 | `Combobox`              | `Combobox.Activator`, `Combobox.Option`, `Combobox.Action`                                                                                                                                                                                                                                   | `Combobox` > optional `Combobox.Activator`, one or more `Combobox.Option`, optional `Combobox.Action`. Omitting `Combobox.Activator` renders the default activator.                                                                                                                                                          |
-| `Select` v2             | `Select.Option`, `Select.OptionGroup`                                                                                                                                                                                                                                                        | These map directly to native `<option>` and `<optgroup>`. Use `UNSAFE_experimentalStyles` to opt into the customizable Chromium UI for grouped menus.                                                                                                                                                                        |
 | `DataTable`             | `DataTable.Container`, `DataTable.Table`, `DataTable.Header`, `DataTable.HeaderCell`, `DataTable.SortableHeader`, `DataTable.Body`, `DataTable.Row`, `DataTable.Cell`, `DataTable.RowActions`, `DataTable.Actions`, `DataTable.Footer`, `DataTable.Pagination`, `DataTable.PaginationButton` | `DataTable.Footer` is a sibling of `DataTable.Body`, not a child. Place pagination outside the table (not inside the footer). For `layout="fixed"`, pass explicit widths via `style={{ width: "..." }}` on each `HeaderCell`.                                                                                                |
 | `Menu` (web composable) | `Menu.Trigger`, `Menu.Content`, `Menu.Section`, `Menu.Header`, `Menu.HeaderLabel`, `Menu.Item`, `Menu.ItemIcon`, `Menu.ItemLabel`, `Menu.Separator`                                                                                                                                          | `Menu` > `Menu.Trigger` + `Menu.Content` containing `Menu.Item`s (optionally grouped in `Menu.Section`s). Each `Menu.Item` must include `textValue` for type-ahead and screen readers.                                                                                                                                       |
 | `Page`                  | `Page.Header`, `Page.HeaderContent`, `Page.TitleBar`, `Page.Title`, `Page.Subtitle`, `Page.Intro`, `Page.Actions`, `Page.ActionPrimary`, `Page.ActionSecondary`, `Page.ActionMenu`, `Page.PrimaryButton`, `Page.SecondaryButton`, `Page.Menu`, `Page.Body`                                   | Composable `Page` API: `Page` > `Page.Header` (containing `Page.HeaderContent` with `Page.TitleBar` > `Page.Title` / `Page.Subtitle`, and `Page.Actions` with `Page.ActionPrimary` / `Page.ActionSecondary` / `Page.ActionMenu`) + `Page.Body`. The legacy props-based API (`title`, `subtitle`, `intro`, etc.) still works. |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.101.7",
+    "version": "0.101.8",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -29,7 +29,7 @@
         "./jestSetup.js"
     ],
     "scripts": {
-        "clean": "rm -rf dist/* tsconfig.tsbuildinfo",
+        "clean": "rm -rf dist/* tsconfig.build.tsbuildinfo",
         "build": "pnpm run build:clean && pnpm run compile && pnpm run build:llm-docs:bundle",
         "build:llm-docs:bundle": "pnpm run build:llm-docs:clean && pnpm run build:llm-docs:mobile",
         "build:llm-docs:mobile": "pnpm run --filter @jobber/atlantis-site generate:llm-docs -- --platform mobile --out ../components-native/dist/docs",
@@ -109,5 +109,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "1513cc5ba2285ff22a2cb3eb537a2c105e9f793b"
+    "gitHead": "6290db9d722109c8a82f97a2d0f6159beeb4ff01"
 }

package/dist/tsconfig.build.json

@@ -1,11 +1,17 @@
 {
     "extends": "./tsconfig.json",
     "compilerOptions": {
+        "moduleResolution": "bundler",
         // Exclude "@jobber/hooks" from paths to avoid building hooks from src
-        "paths": {}
+        "paths": {
+            "@jobber/components-native": [
+                "./src/index.ts"
+            ]
+        }
     },
     "exclude": [
         "*.test.*",
-        "**/*.stories.tsx"
+        "**/*.stories.tsx",
+        "src/**/docs"
     ]
 }