@spaceinvoices/react-ui 0.4.10 → 0.4.12

package/src/components/taxes/tax-list-table/locales/nb.ts

@@ -0,0 +1,17 @@
+export default {
+  Name: "Navn",
+  "Tax Rates": "Avgiftssatser",
+  Created: "Opprettet",
+  Default: "Standard",
+  "Unnamed Tax": "Unnamed Tax",
+  "Open menu": "Åpne menyen",
+  Actions: "Handlinger",
+  "Copy tax ID": "Copy tax ID",
+  "View tax": "View tax",
+  "Your list is empty": "Your tax list is empty",
+  "Get started by creating your first entry": "Get started by creating your first tax",
+  "No results found": "No taxes found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/taxes/tax-list-table/locales/sk.ts

@@ -0,0 +1,17 @@
+export default {
+  Name: "Meno",
+  "Tax Rates": "Daňové sadzby",
+  Created: "Vytvorené",
+  Default: "Predvolená",
+  "Unnamed Tax": "Unnamed Tax",
+  "Open menu": "Otvoriť menu",
+  Actions: "Akcie",
+  "Copy tax ID": "Copy tax ID",
+  "View tax": "View tax",
+  "Your list is empty": "Your tax list is empty",
+  "Get started by creating your first entry": "Get started by creating your first tax",
+  "No results found": "No taxes found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/taxes/tax-list-table/locales/sv.ts

@@ -0,0 +1,17 @@
+export default {
+  Name: "Namn",
+  "Tax Rates": "Skattesatser",
+  Created: "Skapad",
+  Default: "Standard",
+  "Unnamed Tax": "Unnamed Tax",
+  "Open menu": "Öppna menyn",
+  Actions: "Åtgärder",
+  "Copy tax ID": "Copy tax ID",
+  "View tax": "View tax",
+  "Your list is empty": "Your tax list is empty",
+  "Get started by creating your first entry": "Get started by creating your first tax",
+  "No results found": "No taxes found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/taxes/tax-list-table/tax-list-table.tsx

@@ -1,11 +1,15 @@
 import type { Tax } from "@spaceinvoices/js-sdk";
-import { withTableTranslations } from "../../table/locales";
+import { taxes } from "@spaceinvoices/js-sdk";
+import { Percent } from "lucide-react";
+import { useMemo } from "react";
+import { Badge } from "@/ui/components/ui/badge";
+import { Button } from "@/ui/components/ui/button";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
-import { useSDK } from "@/ui/providers/sdk-provider";
 import { DataTable } from "../../table/data-table";
 import { useTableFetch } from "../../table/hooks/use-table-fetch";
-import type { ListTableProps, TableQueryParams } from "../../table/types";
+import { withTableTranslations } from "../../table/locales";
+import type { Column, ListTableProps, TableQueryParams } from "../../table/types";
 import { TAXES_CACHE_KEY } from "../taxes.hooks";
 import de from "./locales/de";
 import en from "./locales/en";
@@ -17,8 +21,7 @@ import nl from "./locales/nl";
 import pl from "./locales/pl";
 import pt from "./locales/pt";
 import sl from "./locales/sl";
-import TaxListHeader from "./tax-list-header";
-import TaxListRow from "./tax-list-row";
+import TaxListRowActions from "./tax-list-row-actions";
 
 const translations = withTableTranslations({
   en,
@@ -49,25 +52,56 @@ export default function TaxListTable({
   ...i18nProps
 }: TaxListTableProps) {
   const t = createTranslation({ translations, ...i18nProps });
-  const { sdk } = useSDK();
-
   const handleFetch = useTableFetch((params: TableQueryParams) => {
-    if (!sdk) throw new Error("SDK not initialized");
-    return sdk.taxes.list(params as any);
+    return taxes.list(params as any);
   }, entityId);
 
+  const columns: Column<Tax>[] = useMemo(
+    () => [
+      {
+        id: "name",
+        header: t("Name"),
+        sort: true,
+        cell: (tax) => (
+          <div className="flex items-center gap-2">
+            <Button variant="link" className="py-0 underline" onClick={() => onRowClick?.(tax)}>
+              <Percent className="h-4 w-4 flex-shrink-0" />
+              {tax.name || t("Unnamed Tax")}
+            </Button>
+            {tax.is_default && (
+              <Badge variant="secondary" className="text-xs">
+                {t("Default")}
+              </Badge>
+            )}
+          </div>
+        ),
+      },
+      {
+        id: "tax_rates",
+        header: t("Tax Rates"),
+        cell: (tax) => (tax.tax_rates?.length ? tax.tax_rates.map((rate) => `${rate.rate}%`).join(", ") : "-"),
+      },
+      {
+        id: "created_at",
+        header: t("Created"),
+        sort: {
+          defaultDirection: "desc",
+        },
+        cell: (tax) => new Date(tax.created_at).toLocaleDateString(),
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (tax) => <TaxListRowActions tax={tax} onView={onView} t={t} />,
+      },
+    ],
+    [t, onRowClick, onView],
+  );
+
   return (
     <DataTable
-      columns={[
-        { id: "name", header: t("Name") },
-        { id: "tax_rates", header: t("Tax Rates") },
-        { id: "created_at", header: t("Created") },
-        { id: "actions", header: "", align: "right" },
-      ]}
-      renderRow={(tax) => (
-        <TaxListRow tax={tax} key={tax.id} onRowClick={(tax) => onRowClick?.(tax)} onView={onView} t={t} />
-      )}
-      renderHeader={() => <TaxListHeader t={t} />}
+      columns={columns}
       queryParams={queryParams}
       resourceName="tax"
       cacheKey={TAXES_CACHE_KEY}

package/src/components/taxes/taxes.hooks.ts

@@ -1,7 +1,12 @@
-import type { CreateTaxBody, PaginatedResponse, Tax, UpdateTaxBody } from "@spaceinvoices/js-sdk";
-import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { type CreateTaxBody, type PaginatedResponse, type Tax, taxes, type UpdateTaxBody } from "@spaceinvoices/js-sdk";
+import {
+  type UseMutationOptions,
+  type UseQueryOptions,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import { createResourceHooks } from "../../hooks/create-resource-hooks";
-import { useSDK } from "../../providers/sdk-provider";
 
 export const TAXES_CACHE_KEY = "taxes";
 
@@ -11,12 +16,50 @@ const {
   useDeleteResource: useDeleteTax,
   useRestoreResource: useRestoreTax,
   usePermanentDeleteResource: usePermanentDeleteTax,
-} = createResourceHooks<Tax, CreateTaxBody, UpdateTaxBody>("taxes", TAXES_CACHE_KEY, {
-  restoreMethodName: "restoreTax",
-  permanentDeleteMethodName: "permanentDeleteTax",
-});
+} = createResourceHooks<Tax, CreateTaxBody, UpdateTaxBody>(
+  {
+    create: taxes.create,
+    update: taxes.update,
+    delete: taxes.delete,
+    restore: taxes.restoreTax,
+    permanentDelete: taxes.permanentDeleteTax,
+  },
+  TAXES_CACHE_KEY,
+);
 
-export { useCreateTax, useUpdateTax, useDeleteTax, useRestoreTax, usePermanentDeleteTax };
+export { useCreateTax, useDeleteTax, usePermanentDeleteTax, useRestoreTax, useUpdateTax };
+
+type ReplaceTaxVariables = {
+  id: string;
+  data: CreateTaxBody;
+};
+
+export function useReplaceTax(
+  options: {
+    entityId?: string | null;
+    onSuccess?: (data: Tax, variables: ReplaceTaxVariables, context: unknown) => void;
+    onError?: (error: Error, variables: ReplaceTaxVariables, context: unknown) => void;
+    mutationOptions?: Omit<
+      UseMutationOptions<Tax, Error, ReplaceTaxVariables, unknown>,
+      "mutationFn" | "onSuccess" | "onError"
+    >;
+  } = {},
+) {
+  const queryClient = useQueryClient();
+
+  return useMutation<Tax, Error, ReplaceTaxVariables>({
+    mutationFn: async ({ id, data }) => taxes.replaceTax(id, data, { entity_id: options.entityId ?? undefined }),
+    onSuccess: (data, variables, context) => {
+      queryClient.invalidateQueries({ queryKey: [TAXES_CACHE_KEY] });
+      queryClient.invalidateQueries({ queryKey: [TAXES_CACHE_KEY, variables.id, options.entityId] });
+      options.onSuccess?.(data, variables, context);
+    },
+    onError: (error, variables, context) => {
+      options.onError?.(error, variables, context);
+    },
+    ...options.mutationOptions,
+  });
+}
 
 /**
  * Hook to fetch all taxes for an entity
@@ -25,16 +68,14 @@ export function useListTaxes(
   entityId: string,
   options?: Omit<UseQueryOptions<PaginatedResponse<Tax>, Error>, "queryKey" | "queryFn">,
 ) {
-  const { sdk } = useSDK();
-
   return useQuery({
     queryKey: [TAXES_CACHE_KEY, entityId],
     queryFn: () =>
-      sdk.taxes.list({
+      taxes.list({
         entity_id: entityId,
         limit: 100,
       }),
-    enabled: !!sdk && !!entityId,
+    enabled: !!entityId,
     ...options,
   });
 }

package/src/components/ui/badge.tsx

@@ -14,7 +14,7 @@ const badgeVariants = cva(
         destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
         outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary-readable underline-offset-4 hover:underline",
       },
     },
     defaultVariants: {

package/src/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
         destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-        link: "text-primary underline-offset-4 hover:underline",
+        link: "text-primary-readable underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",

package/src/components/ui/drawer.tsx

@@ -51,7 +51,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "bg-background flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50",
+          "bg-background fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=bottom]:pb-[calc(max(1rem,env(safe-area-inset-bottom))+4.5rem)] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content",
           className
         )}
         {...props}
@@ -77,7 +77,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-footer"
-      className={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+      className={cn("mt-auto flex flex-col gap-2 p-4 pb-[max(1rem,env(safe-area-inset-bottom))]", className)}
       {...props}
     />
   )

package/src/components/ui/form.tsx

@@ -6,16 +6,96 @@ import { Slot } from "@radix-ui/react-slot"
 import {
   Controller,
   type ControllerProps,
+  type FieldErrors,
   type FieldPath,
   type FieldValues,
   FormProvider,
+  type UseFormReturn,
   useFormContext,
 } from "react-hook-form"
 
 import { cn } from "@/ui/lib/utils"
 import { Label } from "@/ui/components/ui/label"
+import { getValidationLocale, translateZodValidationMessage } from "@/ui/lib/zod-validation-message"
 
-const Form = FormProvider
+const ValidationLocaleContext = React.createContext<string | undefined>(undefined)
+
+type FormProps = UseFormReturn<any> & {
+  children: React.ReactNode
+  locale?: string
+}
+
+function Form({ locale, ...props }: FormProps) {
+  const { watch, getFieldState, clearErrors, trigger } = props
+
+  React.useEffect(() => {
+    const subscription = watch((_value, { name, type }) => {
+      if (!name || type !== "change") return
+
+      const fieldState = getFieldState(name)
+      if (!fieldState.error) return
+
+      // Manual/setError flows should clear immediately once the user edits the field again.
+      if (fieldState.error.type === "manual" || fieldState.error.type === "submit" || fieldState.error.type === "eslog") {
+        clearErrors(name)
+        return
+      }
+
+      void trigger(name)
+    })
+
+    return () => subscription.unsubscribe()
+  }, [watch, getFieldState, clearErrors, trigger])
+
+  return (
+    <ValidationLocaleContext.Provider value={locale}>
+      <FormProvider {...props} />
+    </ValidationLocaleContext.Provider>
+  )
+}
+
+function scrollFormToFirstError(form: HTMLFormElement | null) {
+  if (!form) return
+
+  const scrollToInvalidField = () => {
+    const errorTarget = form.querySelector<HTMLElement>('[data-form-error-summary="true"], [aria-invalid="true"]')
+    if (!errorTarget) return
+
+    errorTarget.scrollIntoView({ behavior: "smooth", block: "center" })
+
+    if (errorTarget.matches('[aria-invalid="true"]') && typeof errorTarget.focus === "function") {
+      errorTarget.focus({ preventScroll: true })
+    }
+  }
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(scrollToInvalidField)
+  })
+}
+
+function collectFormErrorPaths(errors: FieldErrors<FieldValues>, prefix = ""): string[] {
+  const paths: string[] = []
+
+  for (const [key, value] of Object.entries(errors)) {
+    if (!value) continue
+
+    const nextPrefix = prefix ? `${prefix}.${key}` : key
+    if (key === "root") {
+      paths.push(nextPrefix)
+      continue
+    }
+
+    if (typeof value === "object") {
+      if ("message" in value || "type" in value || "ref" in value) {
+        paths.push(nextPrefix)
+      }
+
+      paths.push(...collectFormErrorPaths(value as FieldErrors<FieldValues>, nextPrefix))
+    }
+  }
+
+  return [...new Set(paths)]
+}
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
@@ -135,8 +215,11 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
 }
 
 function FormMessage({ className, children, ...props }: React.ComponentProps<"p">) {
+  const validationLocale = React.useContext(ValidationLocaleContext)
   const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : children
+  const body = error
+    ? translateZodValidationMessage(String(error?.message ?? ""), getValidationLocale(validationLocale))
+    : children
 
   if (!body) {
     return null
@@ -154,6 +237,37 @@ function FormMessage({ className, children, ...props }: React.ComponentProps<"p"
   )
 }
 
+function FormRoot({ className, ...props }: React.ComponentProps<"form">) {
+  const { formState } = useFormContext()
+  const formRef = React.useRef<HTMLFormElement>(null)
+  const lastSubmitCountRef = React.useRef(0)
+  const hasScrolledForSubmitRef = React.useRef(false)
+  const errorPaths = React.useMemo(() => collectFormErrorPaths(formState.errors), [formState.errors])
+
+  React.useEffect(() => {
+    if (formState.submitCount !== lastSubmitCountRef.current) {
+      lastSubmitCountRef.current = formState.submitCount
+      hasScrolledForSubmitRef.current = false
+    }
+
+    if (!formState.isSubmitted || errorPaths.length === 0 || hasScrolledForSubmitRef.current) {
+      return
+    }
+
+    hasScrolledForSubmitRef.current = true
+    scrollFormToFirstError(formRef.current)
+  }, [errorPaths.length, formState.isSubmitted, formState.submitCount])
+
+  return (
+    <form
+      ref={formRef}
+      data-slot="form-root"
+      className={className}
+      {...props}
+    />
+  )
+}
+
 export {
   useFormField,
   Form,
@@ -163,4 +277,6 @@ export {
   FormDescription,
   FormMessage,
   FormField,
+  FormRoot,
+  scrollFormToFirstError,
 }

package/src/components/ui/progress.tsx

@@ -7,17 +7,19 @@ function Progress({
   className,
   ...props
 }: ProgressPrimitive.Root.Props & { className?: string }) {
+  const normalizedValue = Math.min(Math.max(value ?? 0, 0), 100)
+
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      value={value}
+      value={normalizedValue}
       className={cn("relative w-full overflow-hidden rounded-full bg-primary/20", className)}
       {...props}
     >
-      <ProgressPrimitive.Track>
+      <ProgressPrimitive.Track className="block h-full w-full">
         <ProgressPrimitive.Indicator
-          className="h-full bg-primary transition-all duration-500 ease-in-out"
-          style={{ width: `${value ?? 0}%` }}
+          className="progress-indicator-shimmer block h-full rounded-full transition-all duration-500 ease-in-out"
+          style={{ width: `${normalizedValue}%` }}
         />
       </ProgressPrimitive.Track>
     </ProgressPrimitive.Root>

package/src/components/ui/select.tsx

@@ -6,7 +6,97 @@ import { Select as SelectPrimitive } from "@base-ui/react/select"
 import { cn } from "@/ui/lib/utils"
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
-const Select = SelectPrimitive.Root
+type RegisteredSelectItem = {
+  id: symbol
+  label: React.ReactNode
+  value: unknown
+}
+
+type SelectItemsContextValue = {
+  removeItem: (id: symbol) => void
+  upsertItem: (item: RegisteredSelectItem) => void
+}
+
+const SelectItemsContext = React.createContext<SelectItemsContextValue | null>(null)
+
+function getSelectItemText(node: React.ReactNode): string {
+  if (node == null || typeof node === "boolean") {
+    return ""
+  }
+
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node)
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getSelectItemText).join(" ")
+  }
+
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {
+    return getSelectItemText(node.props.children)
+  }
+
+  return ""
+}
+
+function Select<Value, Multiple extends boolean | undefined = false>({
+  children,
+  items,
+  ...props
+}: SelectPrimitive.Root.Props<Value, Multiple>) {
+  const [registeredItems, setRegisteredItems] = React.useState<RegisteredSelectItem[]>([])
+
+  const upsertItem = React.useCallback((item: RegisteredSelectItem) => {
+    setRegisteredItems((current) => {
+      const existingIndex = current.findIndex((entry) => entry.id === item.id)
+
+      if (existingIndex === -1) {
+        return [...current, item]
+      }
+
+      const existingItem = current[existingIndex]
+      if (existingItem.value === item.value && existingItem.label === item.label) {
+        return current
+      }
+
+      const next = current.slice()
+      next[existingIndex] = item
+      return next
+    })
+  }, [])
+
+  const removeItem = React.useCallback((id: symbol) => {
+    setRegisteredItems((current) => current.filter((item) => item.id !== id))
+  }, [])
+
+  const contextValue = React.useMemo<SelectItemsContextValue>(
+    () => ({ removeItem, upsertItem }),
+    [removeItem, upsertItem]
+  )
+
+  const resolvedItems = React.useMemo(() => {
+    if (items) {
+      return items
+    }
+
+    if (registeredItems.length === 0) {
+      return undefined
+    }
+
+    return registeredItems.map(({ label, value }) => ({ label, value }))
+  }, [items, registeredItems])
+
+  return (
+    <SelectItemsContext.Provider value={contextValue}>
+      <SelectPrimitive.Root
+        {...props}
+        items={resolvedItems as SelectPrimitive.Root.Props<Value, Multiple>["items"]}
+      >
+        {children}
+      </SelectPrimitive.Root>
+    </SelectItemsContext.Provider>
+  )
+}
 
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
@@ -118,11 +208,38 @@ function SelectLabel({
 function SelectItem({
   className,
   children,
+  label,
+  value = null,
   ...props
 }: SelectPrimitive.Item.Props) {
+  const itemsContext = React.useContext(SelectItemsContext)
+  const itemId = React.useRef(Symbol("select-item"))
+  const derivedLabel = getSelectItemText(children).replace(/\s+/g, " ").trim()
+  const resolvedLabel = label ?? (derivedLabel.length > 0 ? derivedLabel : undefined)
+
+  React.useEffect(() => {
+    if (!itemsContext || !resolvedLabel) {
+      return undefined
+    }
+
+    const nextItem = {
+      id: itemId.current,
+      label: resolvedLabel,
+      value,
+    }
+
+    itemsContext.upsertItem(nextItem)
+
+    return () => {
+      itemsContext.removeItem(itemId.current)
+    }
+  }, [itemsContext, resolvedLabel, value])
+
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
+      label={resolvedLabel}
+      value={value}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className

package/src/components/ui/sidebar.tsx

@@ -149,6 +149,7 @@ function SidebarProvider({
           {
             "--sidebar-width": SIDEBAR_WIDTH,
             "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            "--sidebar-shell-offset": "0px",
             ...style,
           } as React.CSSProperties
         }
@@ -244,8 +245,8 @@ function Sidebar({
         className={cn(
           "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
           side === "left"
-            ? "left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]"
-            : "right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]",
+            ? "left-[var(--sidebar-shell-offset)] group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-shell-offset)-var(--sidebar-width))]"
+            : "right-[var(--sidebar-shell-offset)] group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-shell-offset)-var(--sidebar-width))]",
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"