npm - @snowcone-app/ui - Versions diffs - 0.1.43 → 0.2.1 - Mend

@snowcone-app/ui 0.1.43 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (196) hide show

package/CHANGELOG.md +32 -0
package/README.md +18 -4
package/dist/index.cjs +5 -2
package/dist/index.cjs.map +1 -1
package/dist/index.js +5 -2
package/dist/index.js.map +1 -1
package/package.json +9 -5
package/src/components/CanvasIsolationBoundary.tsx +202 -0
package/src/components/LoadingOverlayPrism.tsx +251 -0
package/src/composed/AddToCart.tsx +229 -0
package/src/composed/ArtAlignment.tsx +703 -0
package/src/composed/ArtSelector.tsx +290 -0
package/src/composed/ArtworkCustomizer.tsx +212 -0
package/src/composed/CanvasEditor.tsx +79 -0
package/src/composed/ColorPicker.tsx +111 -0
package/src/composed/CurrentSelectionDisplay.tsx +86 -0
package/src/composed/HeroProductImage.tsx +1079 -0
package/src/composed/Lightbox.index.ts +2 -0
package/src/composed/Lightbox.tsx +230 -0
package/src/composed/PlacementClipShapeSelector.tsx +88 -0
package/src/composed/PlacementTabs.tsx +179 -0
package/src/composed/ProductCard.tsx +298 -0
package/src/composed/ProductGallery.tsx +54 -0
package/src/composed/ProductImage.tsx +129 -0
package/src/composed/ProductList.tsx +147 -0
package/src/composed/ProductOptions.tsx +305 -0
package/src/composed/RealtimeMockup.tsx +121 -0
package/src/composed/TileCount.tsx +348 -0
package/src/composed/carousels/HeroCarousel.tsx +240 -0
package/src/composed/carousels/MobileProductCarousel.tsx +1002 -0
package/src/composed/carousels/index.ts +11 -0
package/src/composed/carousels/types.ts +58 -0
package/src/composed/grids/MasonryGrid.tsx +238 -0
package/src/composed/grids/index.ts +9 -0
package/src/composed/search/CurrentRefinements.tsx +80 -0
package/src/composed/search/Filters.tsx +49 -0
package/src/composed/search/FiltersButton.tsx +57 -0
package/src/composed/search/FiltersDrawer.tsx +375 -0
package/src/composed/search/ProductGrid.tsx +118 -0
package/src/composed/search/ProductHit.tsx +56 -0
package/src/composed/search/SearchBox.tsx +109 -0
package/src/composed/search/SearchProvider.tsx +136 -0
package/src/composed/search/facetConfig.ts +16 -0
package/src/composed/search/index.ts +22 -0
package/src/composed/search/meilisearchAdapter.ts +20 -0
package/src/composed/search/types.ts +22 -0
package/src/composed/zoom/EnhancedImageViewer.tsx +505 -0
package/src/composed/zoom/ResponsiveZoom.tsx +134 -0
package/src/composed/zoom/ZoomOverlay.tsx +194 -0
package/src/composed/zoom/index.ts +12 -0
package/src/composed/zoom/types.ts +12 -0
package/src/design-system/ColorPalette.tsx +126 -0
package/src/design-system/ColorSwatch.tsx +49 -0
package/src/design-system/DesignSystemPage.tsx +130 -0
package/src/design-system/ThemeSwitcher.tsx +181 -0
package/src/design-system/TypographyScale.tsx +106 -0
package/src/design-system/index.ts +5 -0
package/src/ecommerce/stories/HeroProductImage.stories.tsx +66 -0
package/src/ecommerce/stories/PDPHeroGallery.stories.tsx +105 -0
package/src/ecommerce/stories/PDPInfoPanel.stories.tsx +472 -0
package/src/ecommerce/stories/PDPLayout.stories.tsx +365 -0
package/src/hooks/useBrand.ts +41 -0
package/src/hooks/useCanvasContext.ts +127 -0
package/src/hooks/useDeviceDetection.ts +64 -0
package/src/hooks/useFocusTrap.ts +70 -0
package/src/hooks/useImagePreloader.ts +268 -0
package/src/hooks/useImageTransition.ts +608 -0
package/src/hooks/usePlacementsProcessor.ts +74 -0
package/src/hooks/useProductGallery.ts +193 -0
package/src/hooks/useProductPage.ts +467 -0
package/src/hooks/useRenderGuard.ts +96 -0
package/src/hooks/useScrollDirection.ts +196 -0
package/src/hooks/viewport/index.ts +25 -0
package/src/hooks/viewport/useContainerWidth.ts +59 -0
package/src/hooks/viewport/useMediaQuery.ts +52 -0
package/src/hooks/viewport/useResponsiveImageCap.ts +149 -0
package/src/hooks/viewport/useViewportDimensions.ts +135 -0
package/src/hooks/viewport/useWideMonitorMode.ts +150 -0
package/src/hooks/visibility/index.ts +15 -0
package/src/hooks/visibility/observerPool.ts +150 -0
package/src/index.ts +240 -0
package/src/layouts/hero-zoom/HeroShrinkLayout.tsx +209 -0
package/src/layouts/hero-zoom/HeroZoomLayout.tsx +351 -0
package/src/layouts/hero-zoom/index.ts +30 -0
package/src/layouts/hero-zoom/stories/HeroZoomLayout.stories.tsx +350 -0
package/src/layouts/hero-zoom/types.ts +113 -0
package/src/layouts/hero-zoom/useHeroZoomScales.ts +156 -0
package/src/layouts/index.ts +9 -0
package/src/layouts/pdp/EdgeBlurBox.tsx +210 -0
package/src/layouts/pdp/ImageBlurExtension.tsx +215 -0
package/src/layouts/pdp/ImageEdgeBlur.tsx +215 -0
package/src/layouts/pdp/PDPLayout.tsx +246 -0
package/src/layouts/pdp/SimpleImageBlur.tsx +140 -0
package/src/layouts/pdp/index.ts +40 -0
package/src/lib/env.ts +15 -0
package/src/lib/locale.ts +167 -0
package/src/lib/router.tsx +46 -0
package/src/lib/utils.ts +6 -0
package/src/lightbox/README.md +77 -0
package/src/next/index.tsx +26 -0
package/src/patterns/MockupPriorityProvider.tsx +1014 -0
package/src/patterns/Product.tsx +850 -0
package/src/patterns/ProductPageProvider.tsx +224 -0
package/src/patterns/RealtimeProvider.tsx +1162 -0
package/src/patterns/ShopProvider.tsx +603 -0
package/src/personalization/PersonalizationBridge.tsx +235 -0
package/src/personalization/PersonalizationContext.ts +29 -0
package/src/personalization/PersonalizationInputs.tsx +110 -0
package/src/personalization/PersonalizationProvider.tsx +407 -0
package/src/personalization/canvas-stub.d.ts +22 -0
package/src/personalization/index.ts +43 -0
package/src/personalization/types.ts +48 -0
package/src/personalization/usePersonalization.ts +32 -0
package/src/personalization/usePersonalizationShimmer.ts +159 -0
package/src/personalization/utils.ts +59 -0
package/src/primitives/BrandLogo.tsx +65 -0
package/src/primitives/BrandName.tsx +51 -0
package/src/primitives/Button.tsx +123 -0
package/src/primitives/ColorSwatch.tsx +221 -0
package/src/primitives/DragHintAnimation.tsx +190 -0
package/src/primitives/EdgeSwipeGuards.tsx +60 -0
package/src/primitives/FloatingActionGroup.tsx +176 -0
package/src/primitives/ProductPrice.tsx +171 -0
package/src/primitives/ProgressiveBlur.tsx +295 -0
package/src/primitives/ThemeToggle.tsx +125 -0
package/src/primitives/__tests__/story-coverage.test.ts +98 -0
package/src/primitives/accordion.tsx +280 -0
package/src/primitives/badge.tsx +137 -0
package/src/primitives/card.tsx +61 -0
package/src/primitives/checkbox.tsx +56 -0
package/src/primitives/collapsible.tsx +51 -0
package/src/primitives/drawer.tsx +828 -0
package/src/primitives/dropdown-menu.tsx +197 -0
package/src/primitives/fieldset.tsx +73 -0
package/src/primitives/index.ts +138 -0
package/src/primitives/input.tsx +91 -0
package/src/primitives/kbd.tsx +130 -0
package/src/primitives/label.tsx +20 -0
package/src/primitives/link.tsx +182 -0
package/src/primitives/popover.tsx +80 -0
package/src/primitives/radio-group.tsx +79 -0
package/src/primitives/scroll-fade.tsx +159 -0
package/src/primitives/select.tsx +170 -0
package/src/primitives/separator.tsx +25 -0
package/src/primitives/slider.tsx +221 -0
package/src/primitives/spinner.tsx +72 -0
package/src/primitives/stories/Accordion.stories.tsx +121 -0
package/src/primitives/stories/Badge.stories.tsx +221 -0
package/src/primitives/stories/Button.stories.tsx +185 -0
package/src/primitives/stories/Card.stories.tsx +171 -0
package/src/primitives/stories/Checkbox.stories.tsx +214 -0
package/src/primitives/stories/Collapsible.stories.tsx +230 -0
package/src/primitives/stories/Drawer.stories.tsx +378 -0
package/src/primitives/stories/DropdownMenu.stories.tsx +182 -0
package/src/primitives/stories/Fieldset.stories.tsx +212 -0
package/src/primitives/stories/Input.stories.tsx +172 -0
package/src/primitives/stories/Kbd.stories.tsx +183 -0
package/src/primitives/stories/Label.stories.tsx +98 -0
package/src/primitives/stories/Link.stories.tsx +260 -0
package/src/primitives/stories/Popover.stories.tsx +178 -0
package/src/primitives/stories/RadioGroup.stories.tsx +205 -0
package/src/primitives/stories/Select.stories.tsx +222 -0
package/src/primitives/stories/Separator.stories.tsx +134 -0
package/src/primitives/stories/Slider.stories.tsx +203 -0
package/src/primitives/stories/Spinner.stories.tsx +142 -0
package/src/primitives/stories/Surface.stories.tsx +257 -0
package/src/primitives/stories/Switch.stories.tsx +131 -0
package/src/primitives/stories/Tabs.stories.tsx +275 -0
package/src/primitives/stories/TextField.stories.tsx +139 -0
package/src/primitives/stories/Textarea.stories.tsx +148 -0
package/src/primitives/stories/Tooltip.stories.tsx +119 -0
package/src/primitives/surface.tsx +86 -0
package/src/primitives/switch.tsx +35 -0
package/src/primitives/tabs.tsx +206 -0
package/src/primitives/text-field.tsx +84 -0
package/src/primitives/textarea.tsx +50 -0
package/src/primitives/tooltip.tsx +58 -0
package/src/services/CanvasExportService.ts +518 -0
package/src/styles/base.css +380 -0
package/src/styles/defaults.css +280 -0
package/src/styles/globals.css +1242 -0
package/src/styles/index.css +17 -0
package/src/styles/ne-themes.css +4740 -0
package/src/styles/tailwind.css +11 -0
package/src/styles/tokens.css +117 -0
package/src/styles/utilities.css +188 -0
package/src/themes/apply-theme.ts +449 -0
package/src/themes/getThemeStyles.ts +454 -0
package/src/themes/index.ts +48 -0
package/src/themes/oklch-theme.ts +283 -0
package/src/themes/presets.ts +989 -0
package/src/themes/types.ts +386 -0
package/src/themes/useTheme.tsx +450 -0
package/src/utils/dev-warnings.ts +161 -0
package/src/utils/devWarnings.ts +153 -0
package/dist/styles.css +0 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,37 @@
 # Changelog
+## 0.2.1
+### Patch Changes
+- [#609](https://github.com/snowcone-app/snowcone-monorepo/pull/609) [`a858719`](https://github.com/snowcone-app/snowcone-monorepo/commit/a85871910d0e48111b12636c32560b568a057291) Thanks [@kevinsproles](https://github.com/kevinsproles)! - HeroProductImage now shows a pulsing loading skeleton until the first mockup image has actually painted, instead of a blank white area while the render is fetched.
+## 0.2.0
+### Minor Changes
+- [#600](https://github.com/snowcone-app/snowcone-monorepo/pull/600) [`3349e6c`](https://github.com/snowcone-app/snowcone-monorepo/commit/3349e6cd6bc1cfa2e1b44bcbb5199eb2aa7dfc81) Thanks [@kevinsproles](https://github.com/kevinsproles)! - BREAKING: the zero-config prebuilt stylesheet is removed. `@snowcone-app/ui/styles.css` (compiled `dist/styles.css`) and the `.app-modern` theme-variable scope no longer exist — the package's unscoped compiled Tailwind utilities could collide with a host app's own classes, and the prebuilt sheet contradicted the primary host-compiled consumption mode.
+  The single supported setup is a **Tailwind v4 host** that compiles ui's styles:
+  ```css
+  /* app/globals.css — your Tailwind v4 entry */
+  @import "@snowcone-app/ui/styles/globals.css"; /* Tailwind + theme tokens + ui @source */
+  @source '../app/**/*.{js,ts,jsx,tsx}'; /* scan your own code too */
+  ```
+  ```ts
+  // next.config.ts
+  const nextConfig = { transpilePackages: ["@snowcone-app/ui"] };
+  ```
+  The published package now ships its `src/` (so the Tailwind `@source` scan and style imports work from npm) and exports `./styles/globals.css`, `./styles/defaults.css`, `./styles/base.css`, and `./styles/utilities.css`. Theme variables live on `:root` (dark on `.dark`) — no wrapper class. Full story: https://developers.snowcone.app/shop-setup
+### Patch Changes
+- Updated dependencies [[`b04c995`](https://github.com/snowcone-app/snowcone-monorepo/commit/b04c995d0a115760341f8b51f1ecbfb01deb8d6b), [`2adb836`](https://github.com/snowcone-app/snowcone-monorepo/commit/2adb836ef477809747d64053d55a84cfa166df9a)]:
+  - @snowcone-app/sdk@0.12.0
 ## 0.1.43
 ### Patch Changes

package/README.md CHANGED Viewed

@@ -121,16 +121,30 @@ const pattern: SeamlessPattern = { type: 'pattern', src: 'https://…/p.jpg', ti
 Components use Tailwind CSS with semantic theme tokens (`bg-background`,
 `text-foreground`, `bg-primary`, `border-border`, …), so they inherit your theme.
-**Tailwind v4** must be told to scan the package for class names:
+The package requires a **Tailwind v4** host: your app compiles the styles, with
+ui's source as an extra `@source`. Import ui's stylesheet (it brings in
+Tailwind, the theme tokens, and an `@source` for the package's own components)
+and add an `@source` for your own code:
 ```css
 /* app/globals.css */
-@import "tailwindcss";
+@import "@snowcone-app/ui/styles/globals.css";
 @source "../app/**/*.{js,ts,jsx,tsx}";
-@source "../node_modules/@snowcone-app/ui/src/**/*.{js,ts,jsx,tsx}";
 ```
-(The `@snowcone-app/cli init` command writes this for you.)
+In Next.js, also transpile the package (it ships TypeScript source for the
+Tailwind scan):
+```ts
+// next.config.ts
+const nextConfig = {
+  transpilePackages: ["@snowcone-app/ui"],
+};
+```
+For dark mode, toggle the `dark` class on an ancestor (e.g. `<html
+class="dark">`). To customize the theme, override the CSS variables (declared
+on `:root`) in your own stylesheet after the import.
 ## Development with mock data

package/dist/index.cjs CHANGED Viewed

@@ -10088,6 +10088,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
   const [prevUrl, setPrevUrl] = (0, import_react44.useState)(null);
   const [showNew, setShowNew] = (0, import_react44.useState)(false);
   const [renderedUrl, setRenderedUrl] = (0, import_react44.useState)(displayUrl);
+  const [firstImageLoaded, setFirstImageLoaded] = (0, import_react44.useState)(false);
   const prevDisplayUrlRef = (0, import_react44.useRef)(displayUrl);
   const signHintShownRef = (0, import_react44.useRef)(false);
   (0, import_react44.useEffect)(() => {
@@ -10167,6 +10168,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
       style,
       "data-hero-image": "true",
       children: [
+        !firstImageLoaded && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "absolute inset-0 bg-muted-foreground/20 animate-pulse" }),
         renderedUrl && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "img",
           {
@@ -10179,6 +10181,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
             fetchPriority: "high",
             onClick,
             onLoad: () => {
+              setFirstImageLoaded(true);
               if (!onLoadCalledRef.current && onLoad) {
                 onLoadCalledRef.current = true;
                 onLoad();
@@ -10186,6 +10189,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
               onUrlGeneratedRef.current?.(renderedUrl);
             },
             onError: () => {
+              setFirstImageLoaded(true);
               onError?.();
               if (process.env.NODE_ENV !== "production" && !signHintShownRef.current && renderedUrl && /\/[A-Za-z0-9]+\?/.test(renderedUrl) && !/[?&]signature=/.test(renderedUrl)) {
                 signHintShownRef.current = true;
@@ -10211,8 +10215,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
             },
             onTransitionEnd: handleCrossfadeEnd
           }
-        ),
-        !renderedUrl && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "absolute inset-0 bg-zinc-200" })
+        )
       ]
     }
   );