@colabcommerce/elements 0.9.1 → 0.9.3

package/src/components/ui/Card/index.jsx

@@ -1,90 +0,0 @@
-import cn from '@/lib/utils/cn'
-
-function Card({ className, ...props }) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn('leading-none font-semibold', className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn('px-6', className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

package/src/components/ui/Input/index.jsx

@@ -1,19 +0,0 @@
-import cn from '@/lib/utils/cn'
-
-const Input = ({ className, type, ...props }) => {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export default Input

package/src/components/ui/Input/indexInput.cy.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import Input from './index'
-
-describe('<Input />', () => {
-  it('renders', () => {
-    // see: https://on.cypress.io/mounting-react
-    cy.mount(<Input />)
-  })
-})

package/src/components/ui/LoadingPuff/index.jsx

@@ -1,10 +0,0 @@
-const LoadingPuff = ({ size = 48 }) => {
-  return (
-    <div className="flex items-center justify-center" style={{ width: size, height: size }}>
-      {/* By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL */}
-      <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#7033FFFF"><g fill="none" fill-rule="evenodd" stroke-width="2"><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /></circle><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /></circle></g></svg>
-    </div>
-  )
-}
-
-export default LoadingPuff

package/src/components/ui/Panel/index.jsx

@@ -1,23 +0,0 @@
-import cn from '@/lib/utils/cn'
-
-function Panel({
-  active,
-  children,
-  className,
-}) {
-  return (
-    <div
-      data-state={active ? "open" : "closed"}
-      className={cn(
-        "absolute inset-0",
-        "transition duration-300 ease-out will-change-transform",
-        "data-[state=closed]:pointer-events-none",
-        className
-      )}
-    >
-      <div className="w-full h-[100%]">{children}</div>
-    </div>
-  )
-}
-
-export default Panel

package/src/components/ui/PhoneNumberInput/index.jsx

@@ -1,17 +0,0 @@
-import { forwardRef } from 'react'
-import Input from '@/components/ui/Input'
-
-export const PhoneNumberInput = forwardRef(
-  ({ value, onChange, onBlur, ...props }, ref) => (
-    <Input
-      {...props}
-      ref={ref}
-      value={value ?? ''}
-      onChange={(e) => onChange(e.target.value)}
-      onBlur={onBlur}
-      className="pl-24 h-12"
-    />
-  )
-)
-
-PhoneNumberInput.displayName = 'PhoneNumberInput'

package/src/contexts/quote-form.jsx

@@ -1,94 +0,0 @@
-/*
- *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
- *  All rights reserved.
- * 
- */
-
-import { useState, useEffect, useContext, createContext } from 'react'
-import useSearchResults from '@/lib/useSearchResults'
-import useGeolocation from '@/lib/useGeolocation'
-import useStoreLocatorConfig from '@/lib/useStoreLocatorConfig'
-
-const QuoteFormContext = createContext()
-
-export const QuoteFormProvider = ({
-  organizationId,
-  locale,
-  baseUrl = '/retailers',
-  products = [],
-  filterBy = { stocked: ['sku'], available: ['sku'] },
-  children }) => {
-
-  const [stepIndex, setStepIndex] = useState(0)
-  const [selectedStoreId, setSelectedStoreId] = useState(null)
-  const [focusedStoreId, setFocusedStoreId] = useState(null)
-  const [messageStoreId, setMessageStoreId] = useState(null)
-  const [messageDialogOpen, setMessageDialogOpen] = useState(false)
-  const [searchRadius, setSearchRadius] = useState('300mi')
-  const [searchLocation, setSearchLocation] = useState(null)
-  const [useLocationType, setUseLocationType] = useState('geolocation') // 'geolocation' or 'search'
-
-  const { location: geoLocation } = useGeolocation({ autoGeoLocate: false })
-
-  // Determine which location to use based on useLocationType. If 'geolocation', use geoLocation.
-  // If 'search', use searchLocation if available, otherwise fallback to geoLocation.
-  const location = useLocationType === 'geolocation' ? geoLocation : (searchLocation || geoLocation)
-
-  const { stores, meta, isLoading: searchIsLoading, error: searchError } = useSearchResults({
-    organizationId,
-    location,
-    page: 1,
-    radius: searchRadius,
-    pageSize: 10,
-  })
-
-  const { config, isLoading: configIsLoading, error: configError } = useStoreLocatorConfig(organizationId)
-
-  const sharedState = {
-    stepIndex,
-    setStepIndex,
-    selectedStoreId,
-    setSelectedStoreId,
-    focusedStoreId,
-    setFocusedStoreId,
-    organizationId,
-    location,
-    locale,
-    stores,
-    meta,
-    searchIsLoading,
-    searchError,
-    config,
-    configIsLoading,
-    configError,
-    messageDialogOpen,
-    setMessageDialogOpen,
-    messageStoreId,
-    setMessageStoreId,
-    baseUrl,
-    searchRadius,
-    setSearchRadius,
-    searchLocation,
-    setSearchLocation,
-    useLocationType,
-    setUseLocationType,
-    products,
-    filterBy
-  }
-
-  return (
-    <QuoteFormContext.Provider value={sharedState}>
-      {children}
-    </QuoteFormContext.Provider>
-  )
-
-}
-
-export const useQuoteForm = () => {
-  // Log a warning if used outside of a QuoteFormProvider
-  const context = useContext(QuoteFormContext)
-  if (!context) {
-    console.warn('useQuoteForm must be used within a QuoteFormProvider')
-  }
-  return context
-}

package/src/contexts/store-locator.jsx

@@ -1,83 +0,0 @@
-/*
- *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
- *  All rights reserved.
- * 
- */
-
-import { useState, useEffect, useContext, createContext } from 'react'
-import useSearchResults from '@/lib/useSearchResults'
-import useGeolocation from '@/lib/useGeolocation'
-import useStoreLocatorConfig from '@/lib/useStoreLocatorConfig'
-
-const StoreLocatorContext = createContext()
-
-export const StoreLocatorProvider = ({ organizationId, locale, baseUrl = '/retailers', children }) => {
-
-  const [selectedStoreId, setSelectedStoreId] = useState(null)
-  const [focusedStoreId, setFocusedStoreId] = useState(null)
-  const [messageStoreId, setMessageStoreId] = useState(null)
-  const [messageDialogOpen, setMessageDialogOpen] = useState(false)
-  const [searchRadius, setSearchRadius] = useState('25mi')
-  const [searchLocation, setSearchLocation] = useState(null)
-  const [useLocationType, setUseLocationType] = useState('geolocation') // 'geolocation' or 'search'
-
-  const { location: geoLocation } = useGeolocation()
-
-  // Determine which location to use based on useLocationType. If 'geolocation', use geoLocation.
-  // If 'search', use searchLocation if available, otherwise fallback to geoLocation.
-  const location = useLocationType === 'geolocation' ? geoLocation : (searchLocation || geoLocation)
-
-  const { stores, meta, isLoading: searchIsLoading, error: searchError } = useSearchResults({
-    organizationId,
-    location,
-    page: 1,
-    radius: searchRadius,
-    pageSize: 10,
-  })
-
-  const { config, isLoading: configIsLoading, error: configError } = useStoreLocatorConfig(organizationId)
-
-  const sharedState = {
-    selectedStoreId,
-    setSelectedStoreId,
-    focusedStoreId,
-    setFocusedStoreId,
-    organizationId,
-    location,
-    locale,
-    stores,
-    meta,
-    searchIsLoading,
-    searchError,
-    config,
-    configIsLoading,
-    configError,
-    messageDialogOpen,
-    setMessageDialogOpen,
-    messageStoreId,
-    setMessageStoreId,
-    baseUrl,
-    searchRadius,
-    setSearchRadius,
-    searchLocation,
-    setSearchLocation,
-    useLocationType,
-    setUseLocationType,
-  }
-
-  return (
-    <StoreLocatorContext.Provider value={sharedState}>
-      {children}
-    </StoreLocatorContext.Provider>
-  )
-
-}
-
-export const useStoreLocator = () => {
-  // Log a warning if used outside of a StoreLocatorProvider
-  const context = useContext(StoreLocatorContext)
-  if (!context) {
-    console.warn('useStoreLocator must be used within a StoreLocatorProvider')
-  }
-  return context
-}

package/src/contexts/store.jsx

@@ -1,59 +0,0 @@
-/*
- *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
- *  All rights reserved.
- * 
- */
-
-import { useState, useEffect, useContext, createContext } from 'react'
-
-const StoreContext = createContext()
-
-export const StoreProvider = ({ organizationId, id, locale, baseUrl = '/retailers', initialData = null, children }) => {
-
-  const [store, setStore] = useState(initialData?.company_retailer_location || null)
-
-  useEffect(() => {
-    async function fetchStore() {
-      if (!id) {
-        setStore(null)
-        return
-      }
-
-      try {
-        const response = await fetch(`https://api.colabcommerce.com/widget_api/company_retailer_locations/${id}`)
-        if (!response.ok) {
-          throw new Error(`Error fetching retailer: ${response.statusText}`)
-        }
-        const data = await response.json()
-        setStore(data?.company_retailer_location || null)
-      } catch (error) {
-        console.error('Failed to fetch retailer:', error)
-        setStore(null)
-      }
-    }
-
-    fetchStore()
-  }, [organizationId, id, baseUrl])
-
-  const sharedState = {
-    organizationId,
-    id,
-    locale,
-    baseUrl,
-    store
-  }
-
-  return (
-    <StoreContext.Provider value={sharedState}>
-      {children}
-    </StoreContext.Provider>
-  )
-}
-
-export const useStore = () => {
-  const context = useContext(StoreContext)
-  if (context === undefined) {
-    throw new Error('useStore must be used within a StoreProvider')
-  }
-  return context
-}

package/src/contexts/translations.jsx

@@ -1,11 +0,0 @@
-import { useMemo } from "react"
-import { I18nextProvider } from "react-i18next"
-import { initLibraryI18n } from "@/i18n"
-
-export default function LibraryI18nProvider({
-  children,
-  options = {},
-}) {
-  const memoizedI18n = useMemo(() => initLibraryI18n(options), [options])
-  return <I18nextProvider i18n={memoizedI18n}>{children}</I18nextProvider>
-}

package/src/dist.css

@@ -1,229 +0,0 @@
-/* This works for build, not dev. */
-.cc {
-  @import "tailwindcss";
-  @import "react-phone-number-input/style.css";
-}
-
-@import "tw-animate-css";
-
-/* Keep this if you want to continue using `dark:` variants on descendants */
-@custom-variant dark (&:is(.cc.dark *));
-
-.cc {
-
-  --background: #fdfdfd;
-  --foreground: #000000;
-  --color-black: #000000;
-  --color-white: #ffffff;
-  --card: #fdfdfd;
-  --card-foreground: #000000;
-  --popover: #fcfcfc;
-  --popover-foreground: #000000;
-  --primary: #7033ff;
-  --primary-foreground: #ffffff;
-  --secondary: #edf0f4;
-  --secondary-foreground: #080808;
-  --muted: #f5f5f5;
-  --muted-foreground: #525252;
-  --accent: #e2ebff;
-  --accent-foreground: #1e69dc;
-  --destructive: #e54b4f;
-  --destructive-foreground: #ffffff;
-  --border: #e7e7ee;
-  --input: #ebebeb;
-  --ring: #000000;
-  --chart-1: #4ac885;
-  --chart-2: #7033ff;
-  --chart-3: #fd822b;
-  --chart-4: #3276e4;
-  --chart-5: #747474;
-  --radius: 1.4rem;
-  --sidebar: #f5f8fb;
-  --sidebar-foreground: #000000;
-  --sidebar-primary: #000000;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #ebebeb;
-  --sidebar-accent-foreground: #000000;
-  --sidebar-border: #ebebeb;
-  --sidebar-ring: #000000;
-  --shadow-x: 0px;
-  --shadow-y: 2px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.2;
-  --shadow-color: #000000;
-
-  /* PhoneInput Variables, need to be defined here as the scoping for the styles
-     doesn't work as expected otherwise */
-  --PhoneInput-color--focus: #03b2cb;
-  --PhoneInputInternationalIconPhone-opacity: .8;
-  --PhoneInputInternationalIconGlobe-opacity: .65;
-  --PhoneInputCountrySelect-marginRight: .35em;
-  --PhoneInputCountrySelectArrow-width: .3em;
-  --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
-  --PhoneInputCountrySelectArrow-borderWidth: 1px;
-  --PhoneInputCountrySelectArrow-opacity: .45;
-  --PhoneInputCountrySelectArrow-color: currentColor;
-  --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
-  --PhoneInputCountrySelectArrow-transform: rotate(45deg);
-  --PhoneInputCountryFlag-aspectRatio: 1.5;
-  --PhoneInputCountryFlag-height: 1em;
-  --PhoneInputCountryFlag-borderWidth: 1px;
-  --PhoneInputCountryFlag-borderColor: #00000080;
-  --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
-  --PhoneInputCountryFlag-backgroundColor--loading: #0000001a
-
-  /* ===== Scrollbar CSS ===== */
-  /* Firefox */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: #858585 #ffffff;
-  }
-
-  /* Chrome, Edge, and Safari */
-  *::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: #ffffff;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    background-color: #858585;
-    border-radius: 4px;
-    border: 3px solid #ffffff;
-  }
-
-  /* Phone Input Override */
-  .PhoneInputCountry {
-    @apply absolute left-8 top-0 h-12 flex items-center gap-2 px-3 bg-transparent;
-  }
-}
-
-.cc.dark {
-  --background: #1a1b1e;
-  --foreground: #f0f0f0;
-  --card: #222327;
-  --card-foreground: #f0f0f0;
-  --popover: #222327;
-  --popover-foreground: #f0f0f0;
-  --primary: #8c5cff;
-  --primary-foreground: #ffffff;
-  --secondary: #2a2c33;
-  --secondary-foreground: #f0f0f0;
-  --muted: #2a2c33;
-  --muted-foreground: #a0a0a0;
-  --accent: #1e293b;
-  --accent-foreground: #79c0ff;
-  --destructive: #f87171;
-  --destructive-foreground: #ffffff;
-  --border: #33353a;
-  --input: #33353a;
-  --ring: #8c5cff;
-  --chart-1: #4ade80;
-  --chart-2: #8c5cff;
-  --chart-3: #fca5a5;
-  --chart-4: #5993f4;
-  --chart-5: #a0a0a0;
-  --sidebar: #161618;
-  --sidebar-foreground: #f0f0f0;
-  --sidebar-primary: #8c5cff;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #2a2c33;
-  --sidebar-accent-foreground: #8c5cff;
-  --sidebar-border: #33353a;
-  --sidebar-ring: #8c5cff;
-  --shadow-x: 0px;
-  --shadow-y: 2px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.2;
-  --shadow-color: #000000;
-}
-
-.cc {
-  @theme inline {
-    /* core colors */
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-
-    /* borders & inputs */
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-
-    /* charts */
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-
-    /* sidebar */
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
-
-    /* radius */
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-
-    /* shadows (optional but nice) */
-    --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent);
-
-    --shadow: var(--shadow-md);
-    --color-shadow-color: var(--shadow-color);
-  }
-}
-
-/* Scope base styles to the wrapper (no global leakage) */
-@layer base {
-  .cc {
-    @apply bg-background text-foreground;
-  }
-
-  .cc * {
-    @apply border-border outline-ring/50;
-  }
-}

package/src/entries/QuoteForm.js

@@ -1,2 +0,0 @@
-import QuoteForm from "@/components/QuoteForm"
-export default QuoteForm

package/src/entries/Store.js

@@ -1,2 +0,0 @@
-import Store from "@/components/Store"
-export default Store

package/src/entries/StoreLocator.js

@@ -1,2 +0,0 @@
-import StoreLocator from "@/components/StoreLocator"
-export default StoreLocator

package/src/entries/StoreLocatorProvider.js

@@ -1,2 +0,0 @@
-export { StoreLocatorProvider as default } from "@/contexts/store-locator";
-export { StoreLocatorProvider } from "@/contexts/store-locator";

package/src/entries/styles.js

@@ -1,2 +0,0 @@
-import "@/dist.css"
-export { } 

package/src/entries/useStoreLocator.js

@@ -1,2 +0,0 @@
-export { useStoreLocator as default } from "@/contexts/store-locator";
-export { useStoreLocator } from "@/contexts/store-locator";