@caseparts-org/caseblocks 0.0.39 → 0.0.40

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 (41) hide show
  1. package/dist/assets/AddToCart.css +1 -0
  2. package/dist/assets/AnimatedCheckmark.css +1 -0
  3. package/dist/assets/Availability.css +1 -0
  4. package/dist/assets/Button.css +1 -1
  5. package/dist/assets/Pricing.css +1 -0
  6. package/dist/assets/Product.css +1 -0
  7. package/dist/assets/QuantityInput.css +1 -1
  8. package/dist/assets/StatefulButton.css +1 -0
  9. package/dist/atoms/Button/Button.js +21 -21
  10. package/dist/atoms/Image/Image.d.ts +21 -0
  11. package/dist/atoms/Image/Image.js +23 -0
  12. package/dist/atoms/Link/Link.d.ts +2 -1
  13. package/dist/atoms/Link/Link.js +40 -39
  14. package/dist/main-client.d.ts +11 -1
  15. package/dist/main-client.js +44 -29
  16. package/dist/main-server.d.ts +4 -0
  17. package/dist/main-server.js +22 -18
  18. package/dist/molecules/AddToCart/AddToCart.d.ts +17 -0
  19. package/dist/molecules/AddToCart/AddToCart.js +64 -0
  20. package/dist/molecules/AddToCart/AddToCart.stories.d.ts +74 -0
  21. package/dist/molecules/AddToCart/AddToCart.stories.js +106 -0
  22. package/dist/molecules/Availability/Availability.d.ts +9 -0
  23. package/dist/molecules/Availability/Availability.js +36 -0
  24. package/dist/molecules/Availability/Availability.stories.d.ts +46 -0
  25. package/dist/molecules/Availability/Availability.stories.js +119 -0
  26. package/dist/molecules/Pricing/Pricing.d.ts +6 -0
  27. package/dist/molecules/Pricing/Pricing.js +15 -0
  28. package/dist/molecules/Pricing/Pricing.stories.d.ts +43 -0
  29. package/dist/molecules/Pricing/Pricing.stories.js +49 -0
  30. package/dist/molecules/QuantityInput/QuantityInput.js +29 -29
  31. package/dist/molecules/StatefulButton/AnimatedCheckmark.d.ts +6 -0
  32. package/dist/molecules/StatefulButton/AnimatedCheckmark.js +60 -0
  33. package/dist/molecules/StatefulButton/StatefulButton.d.ts +16 -0
  34. package/dist/molecules/StatefulButton/StatefulButton.js +37 -0
  35. package/dist/molecules/StatefulButton/StatefulButton.stories.d.ts +64 -0
  36. package/dist/molecules/StatefulButton/StatefulButton.stories.js +66 -0
  37. package/dist/organisms/Product/Product.d.ts +22 -0
  38. package/dist/organisms/Product/Product.js +113 -0
  39. package/dist/organisms/Product/Product.stories.d.ts +79 -0
  40. package/dist/organisms/Product/Product.stories.js +110 -0
  41. package/package.json +1 -1
@@ -0,0 +1 @@
1
+ ._container_1xk40_1{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:var(--spacing-0-5)}
@@ -0,0 +1 @@
1
+ ._wrapper_ku95m_1{display:flex;justify-content:center;align-items:center;background-color:transparent}._checkmark__circle_ku95m_8{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:var(--circle-color, #FFF);fill:none;animation:_stroke_ku95m_1 .6s cubic-bezier(.65,0,.45,1) forwards}._checkmark_ku95m_8{border-radius:50%;display:block;stroke-width:5;stroke:var(--check-color, var(--color-brand-primary-primary-tangerine));stroke-miterlimit:10;box-shadow:inset 0 0 0 var(--circle-color, #FFF);animation:_fill_ku95m_1 .4s ease-in-out .4s forwards,_scale_ku95m_1 .3s ease-in-out .9s both}._checkmark-xxs_ku95m_27{height:var(--font-size-xxs);width:var(--font-size-xxs)}._checkmark-xs_ku95m_31{height:var(--font-size-xs);width:var(--font-size-xs)}._checkmark-sm_ku95m_35{height:var(--font-size-sm);width:var(--font-size-sm)}._checkmark-md_ku95m_39{height:var(--font-size-md);width:var(--font-size-md)}._checkmark-lg_ku95m_43{height:var(--font-size-lg);width:var(--font-size-lg)}._checkmark-xl_ku95m_47{height:var(--font-size-xl);width:var(--font-size-xl)}._checkmark__check_ku95m_52{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;animation:_stroke_ku95m_1 .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes _stroke_ku95m_1{to{stroke-dashoffset:0}}@keyframes _scale_ku95m_1{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes _fill_ku95m_1{to{box-shadow:inset 0 0 0 30px var(--circle-color, #FFF)}}
@@ -0,0 +1 @@
1
+ ._availability_jaqg4_1{font-style:italic}._availabilityLink_jaqg4_4{font-style:italic;font-size:var(--font-size-xs)}._available_jaqg4_8{color:var(--color-alerts-success)}._limited_jaqg4_11{color:var(--color-alerts-warning)}._unavailable_jaqg4_14{color:var(--color-alerts-error-warning)}
@@ -1 +1 @@
1
- ._button_17viz_1{--inset-shadow-color: var(--surface-surface-primary-btn);--inset-shadow-style: 0 0 0, inset 0 0 0 var(--spacing-0-125) var(--inset-shadow-color);transition-property:background-color,border-width,box-shadow,color;transition-duration:.1s;transition-timing-function:ease-in;padding:var(--spacing-1);border:none;cursor:pointer}._button_17viz_1:hover{box-shadow:var(--color-neutrals-neutral-2) var(--spacing-0-125) var(--spacing-0-25) var(--spacing-0-5)}._button_17viz_1:active{box-shadow:none}._button_17viz_1:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert);transition:none;cursor:default}._button_17viz_1:disabled:hover{box-shadow:none}._button-primary_17viz_36{background-color:var(--surface-surface-primary-btn);color:var(--surface-surface-primary)}._button-primary_17viz_36:active{background-color:var(--color-brand-secondary-dark-teal-blue)}._button-primary_17viz_36:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_17viz_50{background-color:var(--surface-surface-secondary-btn);border:1px solid var(--border-border-secondary-btn);color:var(--text-text-links)}._button-secondary_17viz_50:active{--inset-shadow-color: var(--surface-surface-secondary);box-shadow:var(--inset-shadow-style)}._button-secondary_17viz_50:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-secondary_17viz_50:disabled:hover{box-shadow:var(--inset-shadow-style)}._button-cta-primary_17viz_72{background-color:var(--surface-surface-call-to-action-btn);color:var(--surface-surface-primary)}._button-cta-primary_17viz_72:active{background-color:var(--surface-surface-call-to-action-btn-focus)}._button-cta-primary_17viz_72:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-tertiary_17viz_86{background-color:var(--surface-surface-tertiary-btn);color:var(--surface-surface-tertiary-btn-focus)}._button-tertiary_17viz_86:active{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-tertiary_17viz_86:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-destructive_17viz_104{background-color:var(--surface-surface-error-warning-btn);color:var(--surface-surface-primary)}._button-destructive_17viz_104:active{color:var(--surface-surface-error-warning-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--border-border-error-warning);box-shadow:var(--inset-shadow-style)}._button-destructive_17viz_104:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-size-xxs_17viz_122{min-width:var(--spacing-spacing-4xl);height:var(--spacing-spacing-sm);border-radius:var(--border-radius-xs);padding:var(--spacing-spacing-4xs) var(--spacing-spacing-4xs)}._button-size-xs_17viz_128{min-width:var(--spacing-spacing-4xl);min-height:var(--spacing-spacing-sm);line-height:var(--spacing-spacing-1xs)!important;border-radius:var(--border-radius-xs);padding:var(--spacing-spacing-4xs) var(--spacing-spacing-2xs)}._button-size-sm_17viz_135{min-width:var(--spacing-spacing-6xl);min-height:var(--spacing-spacing-md);line-height:var(--spacing-spacing-xs)!important;border-radius:var(--border-radius-sm);padding:var(--spacing-spacing-3xs) var(--spacing-0-75)}._button-size-md_17viz_142{min-width:var(--spacing-spacing-8xl);min-height:var(--spacing-spacing-lg);line-height:var(--spacing-spacing-default)!important;border-radius:var(--border-radius-sm);padding:var(--spacing-spacing-2xs) var(--spacing-spacing-default)}._button-size-lg_17viz_149{min-width:var(--spacing-spacing-10xl);min-height:var(--spacing-spacing-xl);line-height:var(--spacing-spacing-sm)!important;border-radius:var(--border-radius-sm);padding:var(--spacing-spacing-2xs) var(--spacing-spacing-default)}._button-size-xl_17viz_156{min-width:var(--spacing-spacing-12xl);min-height:var(--spacing-spacing-2xl);line-height:var(--spacing-spacing-sm)!important;border-radius:var(--border-radius-sm);padding:var(--spacing-0-75) var(--spacing-spacing-default)}
1
+ ._button_1fy9r_1{--inset-shadow-color: var(--surface-surface-primary-btn);--inset-shadow-style: 0 0 0, inset 0 0 0 var(--spacing-0-125) var(--inset-shadow-color);transition-property:background-color,border-width,box-shadow,color;transition-duration:.1s;transition-timing-function:ease-in;padding:var(--spacing-1);border:none;cursor:pointer}._button_1fy9r_1:hover{box-shadow:var(--color-neutrals-neutral-2) var(--spacing-0-125) var(--spacing-0-25) var(--spacing-0-5)}._button_1fy9r_1:active{box-shadow:none}._button_1fy9r_1:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert);transition:none;cursor:default}._button_1fy9r_1:disabled:hover{box-shadow:none}._button-primary_1fy9r_36{background-color:var(--surface-surface-primary-btn);color:var(--surface-surface-primary)}._button-primary_1fy9r_36:active{background-color:var(--color-brand-secondary-dark-teal-blue)}._button-primary_1fy9r_36:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_1fy9r_50{background-color:var(--surface-surface-secondary-btn);border:1px solid var(--border-border-secondary-btn);color:var(--text-text-links)}._button-secondary_1fy9r_50:active{--inset-shadow-color: var(--surface-surface-secondary);box-shadow:var(--inset-shadow-style)}._button-secondary_1fy9r_50:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-secondary_1fy9r_50:disabled:hover{box-shadow:var(--inset-shadow-style)}._button-cta-primary_1fy9r_72{background-color:var(--surface-surface-call-to-action-btn);color:var(--surface-surface-primary)}._button-cta-primary_1fy9r_72:active{background-color:var(--surface-surface-call-to-action-btn-focus)}._button-cta-primary_1fy9r_72:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-tertiary_1fy9r_86{background-color:var(--surface-surface-tertiary-btn);color:var(--surface-surface-tertiary-btn-focus)}._button-tertiary_1fy9r_86:active{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-tertiary_1fy9r_86:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-destructive_1fy9r_104{background-color:var(--surface-surface-error-warning-btn);color:var(--surface-surface-primary)}._button-destructive_1fy9r_104:active{color:var(--surface-surface-error-warning-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--border-border-error-warning);box-shadow:var(--inset-shadow-style)}._button-destructive_1fy9r_104:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-size-xxs_1fy9r_122{border-radius:var(--border-radius-xs);padding:var(--spacing-spacing-4xs) var(--spacing-spacing-4xs)}._button-size-xs_1fy9r_126{border-radius:var(--border-radius-xs);padding:calc(var(--spacing-spacing-4xs) - 1px) var(--spacing-spacing-2xs)}._button-size-sm_1fy9r_130{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-3xs) - 1px) var(--spacing-0-75)}._button-size-md_1fy9r_134,._button-size-lg_1fy9r_138{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-2xs) - 1px) var(--spacing-spacing-default)}._button-size-xl_1fy9r_142{border-radius:var(--border-radius-sm);padding:var(--spacing-0-75) var(--spacing-spacing-default)}
@@ -0,0 +1 @@
1
+ ._pricingInformation_u1dqz_1{display:flex;flex-direction:column;align-items:flex-end}
@@ -0,0 +1 @@
1
+ ._productCard_e649x_1{border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;display:flex;width:208px;height:296px;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._productCard_e649x_1>img{width:148px;height:148px;object-fit:contain;flex-shrink:0;margin:0 auto}._productInformation_e649x_21{display:flex;flex-direction:column;align-items:flex-start;gap:2px}._productCard_e649x_1 ._purchaseInformation_e649x_27{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._productCard_e649x_1 ._addToCart_e649x_35,._productCard_e649x_1 ._addToCartButton_e649x_38{width:100%}._productTile_e649x_43{box-sizing:border-box;width:100%;max-width:1072px;display:flex;flex-direction:row;align-items:flex-start;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);gap:var(--spacing-spacing-2xs)}._productTile_e649x_43>img{width:108px;height:108px;object-fit:contain}._productTile_e649x_43 ._topRow_e649x_64{display:grid;grid-template-columns:1fr auto;width:100%}._productTile_e649x_43 ._topRow_e649x_64 button{background-color:transparent;padding:0;margin:0;outline:none;border:none;height:min-content;width:min-content}._productTile_e649x_43 ._topRow_e649x_64 path{fill:var(--icons-icon-search)}._productTile_e649x_43 ._topRow_e649x_64 svg{padding:0}._productTile_e649x_43 ._productData_e649x_88{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:var(--spacing-spacing-2xs)}._productTile_e649x_43 ._purchase_e649x_27{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%}@media (max-width: 480px){._productTile_e649x_43 ._purchase_e649x_27{flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-3xs)}}._productTile_e649x_43 ._purchaseInformation_e649x_27{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}@media (max-width: 480px){._productTile_e649x_43 ._purchaseInformation_e649x_27{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;gap:0px}}._productTile_e649x_43 ._attributeContainer_e649x_125{margin:0;padding:0;padding-top:var(--spacing-spacing-1xs);border-top:1px solid var(--border-border-primary);width:100%;list-style:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:var(--spacing-spacing-lg);row-gap:var(--spacing-spacing-3xs)}@media (max-width: 640px){._productTile_e649x_43 ._attributeContainer_e649x_125{display:none}}._productTile_e649x_43 ._attributeContainer_e649x_125 li{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._productTile_e649x_43 ._addToCart_e649x_35{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-md)}@media (max-width: 480px){._productTile_e649x_43 ._addToCart_e649x_35{gap:var(--spacing-spacing-2xs);width:100%}}._productTile_e649x_43 ._addToCartButton_e649x_38{width:96px;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}@media (max-width: 640px){._productTile_e649x_43 ._addToCartButton_e649x_38{width:100%}}
@@ -1 +1 @@
1
- ._qty-container_19ir9_1{display:flex;flex-direction:row;align-items:center}._qty-container_19ir9_1>button{font-size:1.25rem;border:1px solid var(--color-neutrals-neutral-3);background-color:#fff;box-sizing:border-box}._qty-container_19ir9_1>input{text-align:center;font-size:18px;border:1px solid var(--color-neutrals-neutral-3);box-sizing:border-box}._qty-container_19ir9_1>input::-webkit-outer-spin-button,._qty-container_19ir9_1>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._qty-container_19ir9_1>input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}._decrease-btn_19ir9_34{position:relative;left:2px;z-index:0;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer}._increase-btn_19ir9_45{position:relative;left:-2px;z-index:0;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer}._decrease-btn_19ir9_34:disabled,._increase-btn_19ir9_45:disabled{pointer-events:none}._decrease-btn_19ir9_34:disabled svg,._increase-btn_19ir9_45:disabled svg{fill:var(--color-neutrals-neutral-4)}._button-sm_19ir9_66{width:1.5rem;height:1.5rem}._button-md_19ir9_70{width:2rem;height:2rem}._qty-input-sm_19ir9_74{width:2.5rem;height:1.5rem}._qty-input-md_19ir9_78{width:3rem;height:2rem}
1
+ ._qty-container_krcn7_1{display:flex;flex-direction:row;align-items:center}._qty-container_krcn7_1>button{font-size:1.25rem;border:1px solid var(--border-border-primary);background-color:#fff;box-sizing:border-box}._qty-container_krcn7_1>input{text-align:center;font-size:var(--font-size-md);border:1px solid var(--border-border-primary);box-sizing:border-box;outline:none}._qty-container_krcn7_1>input::-webkit-outer-spin-button,._qty-container_krcn7_1>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._qty-container_krcn7_1>input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}._decrease-btn_krcn7_35{position:relative;left:2px;z-index:0;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer}._increase-btn_krcn7_46{position:relative;left:-2px;z-index:0;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer}._decrease-btn_krcn7_35:disabled,._increase-btn_krcn7_46:disabled{pointer-events:none}._decrease-btn_krcn7_35:disabled svg,._increase-btn_krcn7_46:disabled svg{fill:var(--color-neutrals-neutral-4)}._button-sm_krcn7_67{width:1.25rem;height:1.25rem}._button-md_krcn7_71{width:2rem;height:2rem}._qty-input-sm_krcn7_75{width:2.5rem;height:1.25rem}._qty-input-md_krcn7_79{width:2.5rem;height:2rem}
@@ -0,0 +1 @@
1
+ ._statefulButton_1laml_1{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-0-5)}._statefulButton_1laml_1>p{padding:0;margin:0}
@@ -1,24 +1,24 @@
1
1
  import { jsx as b } from "react/jsx-runtime";
2
2
  import { t } from "../../Text.module-smM1g1J4.js";
3
- import { c as r } from "../../clsx-OuTLNxxd.js";
4
- import { getHideAtStyles as z } from "../HideAt.js";
5
- import '../../assets/Button.css';const m = "_button_17viz_1", o = {
3
+ import { c as i } from "../../clsx-OuTLNxxd.js";
4
+ import { getHideAtStyles as y } from "../HideAt.js";
5
+ import '../../assets/Button.css';const m = "_button_1fy9r_1", o = {
6
6
  button: m,
7
- "button-primary": "_button-primary_17viz_36",
8
- "button-secondary": "_button-secondary_17viz_50",
9
- "button-cta-primary": "_button-cta-primary_17viz_72",
10
- "button-tertiary": "_button-tertiary_17viz_86",
11
- "button-destructive": "_button-destructive_17viz_104",
12
- "button-size-xxs": "_button-size-xxs_17viz_122",
13
- "button-size-xs": "_button-size-xs_17viz_128",
14
- "button-size-sm": "_button-size-sm_17viz_135",
15
- "button-size-md": "_button-size-md_17viz_142",
16
- "button-size-lg": "_button-size-lg_17viz_149",
17
- "button-size-xl": "_button-size-xl_17viz_156"
7
+ "button-primary": "_button-primary_1fy9r_36",
8
+ "button-secondary": "_button-secondary_1fy9r_50",
9
+ "button-cta-primary": "_button-cta-primary_1fy9r_72",
10
+ "button-tertiary": "_button-tertiary_1fy9r_86",
11
+ "button-destructive": "_button-destructive_1fy9r_104",
12
+ "button-size-xxs": "_button-size-xxs_1fy9r_122",
13
+ "button-size-xs": "_button-size-xs_1fy9r_126",
14
+ "button-size-sm": "_button-size-sm_1fy9r_130",
15
+ "button-size-md": "_button-size-md_1fy9r_134",
16
+ "button-size-lg": "_button-size-lg_1fy9r_138",
17
+ "button-size-xl": "_button-size-xl_1fy9r_142"
18
18
  };
19
- function y({
19
+ function z({
20
20
  children: n,
21
- size: i,
21
+ size: r,
22
22
  variant: _,
23
23
  hideAt: s,
24
24
  className: u,
@@ -27,14 +27,14 @@ function y({
27
27
  return /* @__PURE__ */ b(
28
28
  "button",
29
29
  {
30
- className: r(
30
+ className: i(
31
31
  o.button,
32
32
  o[`button-${_}`],
33
- o[`button-size-${i}`],
33
+ o[`button-size-${r}`],
34
34
  t.text,
35
- t[`text-${i}`],
35
+ t[`text-${r}`],
36
36
  t["text-semibold"],
37
- z(s),
37
+ y(s),
38
38
  u
39
39
  ),
40
40
  ...e,
@@ -43,5 +43,5 @@ function y({
43
43
  );
44
44
  }
45
45
  export {
46
- y as Button
46
+ z as Button
47
47
  };
@@ -0,0 +1,21 @@
1
+ import { default as React, ImgHTMLAttributes } from 'react';
2
+ /**
3
+ * All standard <img> attributes.
4
+ * alt kept optional to mirror the platform, but recommended.
5
+ */
6
+ export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
7
+ alt?: string;
8
+ }
9
+ /** Signature an external image component (e.g. next/image) must satisfy */
10
+ export type ImageComponent = (_props: ImageProps) => JSX.Element;
11
+ export declare function ImageProvider({ component, children, }: {
12
+ component: ImageComponent;
13
+ children: React.ReactNode;
14
+ }): import("react/jsx-runtime").JSX.Element;
15
+ /**
16
+ * Framework‑agnostic Image.
17
+ * By default renders a plain <img>. A host app can inject (e.g.) next/image
18
+ * via <ImageProvider component={...}> so all internal usages gain optimization
19
+ * without changing design system code.
20
+ */
21
+ export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
@@ -0,0 +1,23 @@
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import s, { forwardRef as c, useContext as u } from "react";
3
+ const a = s.createContext(null);
4
+ function I({
5
+ component: t,
6
+ children: e
7
+ }) {
8
+ return /* @__PURE__ */ r(a.Provider, { value: t, children: e });
9
+ }
10
+ const f = c(function({ alt: e, ...m }, i) {
11
+ const o = u(a), n = {
12
+ alt: e,
13
+ ...m,
14
+ ref: i
15
+ // Consumers of injected Impl can optionally forward ref
16
+ };
17
+ return o ? /* @__PURE__ */ r(o, { ...n }) : /* @__PURE__ */ r("img", { ...n });
18
+ });
19
+ f.displayName = "Image";
20
+ export {
21
+ f as Image,
22
+ I as ImageProvider
23
+ };
@@ -1,6 +1,7 @@
1
1
  import { default as React } from 'react';
2
2
  import { HideAtProps } from '../HideAt';
3
3
  export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, HideAtProps {
4
+ external?: boolean;
4
5
  href: string;
5
6
  children: React.ReactNode;
6
7
  disabled?: boolean;
@@ -99,4 +100,4 @@ export declare function LinkProvider({ component, children, }: {
99
100
  * - Do not reimplement disabled logic in the injected component (already handled).
100
101
  * - If you need additional router-only props (e.g. prefetch={false}), extend in the adapter inside your app, not here.
101
102
  */
102
- export declare function Link({ href, children, disabled, hideAt, className, onClick, ...otherProps }: LinkProps): import("react/jsx-runtime").JSX.Element;
103
+ export declare function Link({ external, href, children, disabled, hideAt, className, onClick, ...otherProps }: LinkProps): import("react/jsx-runtime").JSX.Element;
@@ -1,55 +1,56 @@
1
- import { jsx as i } from "react/jsx-runtime";
2
- import f from "react";
3
- import { t as k } from "../../Text.module-smM1g1J4.js";
4
- import { c as y } from "../../clsx-OuTLNxxd.js";
5
- import { getHideAtStyles as _ } from "../HideAt.js";
6
- import '../../assets/Link.css';const g = "_link_ygp31_1", v = "_disabled_ygp31_14", m = {
7
- link: g,
8
- disabled: v
9
- }, c = f.createContext(null);
10
- function P({
11
- component: n,
1
+ import { jsx as s } from "react/jsx-runtime";
2
+ import c from "react";
3
+ import { t as y } from "../../Text.module-smM1g1J4.js";
4
+ import { c as _ } from "../../clsx-OuTLNxxd.js";
5
+ import { getHideAtStyles as g } from "../HideAt.js";
6
+ import '../../assets/Link.css';const v = "_link_ygp31_1", I = "_disabled_ygp31_14", f = {
7
+ link: v,
8
+ disabled: I
9
+ }, p = c.createContext(null);
10
+ function S({
11
+ component: a,
12
12
  children: e
13
13
  }) {
14
- return /* @__PURE__ */ i(c.Provider, { value: n, children: e });
14
+ return /* @__PURE__ */ s(p.Provider, { value: a, children: e });
15
15
  }
16
- function S({
17
- href: n,
18
- children: e,
16
+ function j({
17
+ external: a,
18
+ href: e,
19
+ children: i,
19
20
  disabled: t = !1,
20
- hideAt: p,
21
- className: u,
22
- onClick: r,
23
- ...o
21
+ hideAt: u,
22
+ className: x,
23
+ onClick: n,
24
+ ...r
24
25
  }) {
25
- const a = f.useContext(c), x = y(
26
- k["text-body"],
27
- m.link,
28
- t && m.disabled,
29
- _(p),
30
- u
26
+ const l = c.useContext(p), d = _(
27
+ y["text-body"],
28
+ f.link,
29
+ t && f.disabled,
30
+ g(u),
31
+ x
31
32
  );
32
- function d(s) {
33
+ function k(o) {
33
34
  if (t) {
34
- s.preventDefault(), s.stopPropagation();
35
+ o.preventDefault(), o.stopPropagation();
35
36
  return;
36
37
  }
37
- r == null || r(s);
38
+ n == null || n(o);
38
39
  }
39
- const l = {
40
- ...o,
41
- href: t ? "#" : n,
42
- className: x,
43
- children: e,
40
+ const m = {
41
+ ...r,
42
+ href: t ? "#" : e,
43
+ className: d,
44
+ children: i,
44
45
  disabled: t,
45
- onClick: d,
46
+ onClick: k,
46
47
  "aria-disabled": t || void 0,
47
- tabIndex: t ? -1 : o.tabIndex,
48
- role: t ? "link" : o.role
48
+ tabIndex: t ? -1 : r.tabIndex,
49
+ role: t ? "link" : r.role
49
50
  };
50
- return a ? /* @__PURE__ */ i(a, { ...l }) : /* @__PURE__ */ i("a", { ...l, children: e });
51
+ return l ? /* @__PURE__ */ s(l, { ...m }) : /* @__PURE__ */ s("a", { ...m, children: i });
51
52
  }
52
53
  export {
53
- S as Link,
54
- P as LinkProvider
54
+ j as Link,
55
+ S as LinkProvider
55
56
  };
@@ -1,6 +1,8 @@
1
1
  export * from './main-server';
2
2
  export { Link, LinkProvider } from './atoms/Link/Link';
3
3
  export type { LinkProps } from './atoms/Link/Link';
4
+ export { Image, ImageProvider } from './atoms/Image/Image';
5
+ export type { ImageProps } from './atoms/Image/Image';
4
6
  export { Tooltip } from './molecules/Tooltip/Tooltip';
5
7
  export { Account } from './molecules/Account/Account';
6
8
  export type { AccountProps } from './molecules/Account/Account';
@@ -10,8 +12,16 @@ export { Chip } from './molecules/Chip/Chip';
10
12
  export type { ChipProps } from './molecules/Chip/Chip';
11
13
  export { ToggleView } from './molecules/ToggleView/ToggleView';
12
14
  export type { ToggleViewProps, ToggleOptionProps, ToggleOptionBaseProps, } from './molecules/ToggleView/ToggleView';
15
+ export type { ShoppingCart, CartItem } from './molecules/Cart/Cart';
16
+ export type { StatefulButtonProps } from './molecules/StatefulButton/StatefulButton';
17
+ export { StatefulButton } from './molecules/StatefulButton/StatefulButton';
18
+ export type { AnimatedCheckMarkProps } from './molecules/StatefulButton/AnimatedCheckmark';
19
+ export { AnimatedCheckMark } from './molecules/StatefulButton/AnimatedCheckmark';
20
+ export type { AddToCartProps } from './molecules/AddToCart/AddToCart';
21
+ export { AddToCart } from './molecules/AddToCart/AddToCart';
13
22
  export { MainNav } from './organisms/MainNav/MainNav';
14
23
  export type { MainCategory, MainNavProps, Category } from './organisms/MainNav/MainNav';
15
24
  export { ChipSelector } from './organisms/ChipSelector/ChipSelector';
16
25
  export type { ChipSelectorProps } from './organisms/ChipSelector/ChipSelector';
17
- export type { ShoppingCart, CartItem } from './molecules/Cart/Cart';
26
+ export { Product } from './organisms/Product/Product';
27
+ export type { ProductProps, ProductView } from './organisms/Product/Product';
@@ -1,44 +1,59 @@
1
1
  import { Button as t } from "./atoms/Button/Button.js";
2
2
  import { Flex as p } from "./atoms/Flex/Flex.js";
3
- import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
4
- import { Head as n } from "./atoms/Root/Head.js";
3
+ import { Column as x, Grid as f } from "./atoms/Grid/Grid.js";
4
+ import { Head as i } from "./atoms/Root/Head.js";
5
5
  import { Icon as u } from "./atoms/Icon/Icon.js";
6
- import { Root as l } from "./atoms/Root/Root.js";
6
+ import { Root as d } from "./atoms/Root/Root.js";
7
7
  import { Separator as g } from "./atoms/Separator/Separator.js";
8
- import { Text as v } from "./atoms/Text/Text.js";
8
+ import { Text as A } from "./atoms/Text/Text.js";
9
9
  import { Input as I } from "./atoms/Input/Input.js";
10
- import { Logo as S } from "./molecules/Logo/Logo.js";
11
- import { SearchBox as k } from "./molecules/SearchBox/SearchBox.js";
10
+ import { Logo as k } from "./molecules/Logo/Logo.js";
11
+ import { SearchBox as S } from "./molecules/SearchBox/SearchBox.js";
12
12
  import { QuantityInput as B } from "./molecules/QuantityInput/QuantityInput.js";
13
- import { Link as y, LinkProvider as F } from "./atoms/Link/Link.js";
14
- import { Tooltip as H } from "./molecules/Tooltip/Tooltip.js";
15
- import { Account as N } from "./molecules/Account/Account.js";
16
- import { Avatar as Q } from "./molecules/Avatar/Avatar.js";
17
- import { Chip as V } from "./molecules/Chip/Chip.js";
18
- import { ToggleView as j } from "./molecules/ToggleView/ToggleView.js";
19
- import { MainNav as s } from "./organisms/MainNav/MainNav.js";
20
- import { ChipSelector as D } from "./organisms/ChipSelector/ChipSelector.js";
13
+ import { Availability as y } from "./molecules/Availability/Availability.js";
14
+ import { Pricing as b } from "./molecules/Pricing/Pricing.js";
15
+ import { Link as F, LinkProvider as G } from "./atoms/Link/Link.js";
16
+ import { Image as N, ImageProvider as Q } from "./atoms/Image/Image.js";
17
+ import { Tooltip as V } from "./molecules/Tooltip/Tooltip.js";
18
+ import { Account as q } from "./molecules/Account/Account.js";
19
+ import { Avatar as z } from "./molecules/Avatar/Avatar.js";
20
+ import { Chip as E } from "./molecules/Chip/Chip.js";
21
+ import { ToggleView as K } from "./molecules/ToggleView/ToggleView.js";
22
+ import { StatefulButton as U } from "./molecules/StatefulButton/StatefulButton.js";
23
+ import { AnimatedCheckMark as X } from "./molecules/StatefulButton/AnimatedCheckmark.js";
24
+ import { AddToCart as Z } from "./molecules/AddToCart/AddToCart.js";
25
+ import { MainNav as $ } from "./organisms/MainNav/MainNav.js";
26
+ import { ChipSelector as ro } from "./organisms/ChipSelector/ChipSelector.js";
27
+ import { Product as eo } from "./organisms/Product/Product.js";
21
28
  export {
22
- N as Account,
23
- Q as Avatar,
29
+ q as Account,
30
+ Z as AddToCart,
31
+ X as AnimatedCheckMark,
32
+ y as Availability,
33
+ z as Avatar,
24
34
  t as Button,
25
- V as Chip,
26
- D as ChipSelector,
27
- m as Column,
35
+ E as Chip,
36
+ ro as ChipSelector,
37
+ x as Column,
28
38
  p as Flex,
29
39
  f as Grid,
30
- n as Head,
40
+ i as Head,
31
41
  u as Icon,
42
+ N as Image,
43
+ Q as ImageProvider,
32
44
  I as Input,
33
- y as Link,
34
- F as LinkProvider,
35
- S as Logo,
36
- s as MainNav,
45
+ F as Link,
46
+ G as LinkProvider,
47
+ k as Logo,
48
+ $ as MainNav,
49
+ b as Pricing,
50
+ eo as Product,
37
51
  B as QuantityInput,
38
- l as Root,
39
- k as SearchBox,
52
+ d as Root,
53
+ S as SearchBox,
40
54
  g as Separator,
41
- v as Text,
42
- j as ToggleView,
43
- H as Tooltip
55
+ U as StatefulButton,
56
+ A as Text,
57
+ K as ToggleView,
58
+ V as Tooltip
44
59
  };
@@ -18,3 +18,7 @@ export { SearchBox } from './molecules/SearchBox/SearchBox';
18
18
  export type { SearchBoxProps } from './molecules/SearchBox/SearchBox';
19
19
  export type { QuantityInputProps } from './molecules/QuantityInput/QuantityInput';
20
20
  export { QuantityInput } from './molecules/QuantityInput/QuantityInput';
21
+ export { Availability } from './molecules/Availability/Availability';
22
+ export type { AvailabilityProps, ContactUsLinkBehavior } from './molecules/Availability/Availability';
23
+ export { Pricing } from './molecules/Pricing/Pricing';
24
+ export type { PricingProps } from './molecules/Pricing/Pricing';
@@ -1,27 +1,31 @@
1
1
  import { Button as t } from "./atoms/Button/Button.js";
2
2
  import { Flex as p } from "./atoms/Flex/Flex.js";
3
3
  import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
4
- import { Head as a } from "./atoms/Root/Head.js";
5
- import { Icon as I } from "./atoms/Icon/Icon.js";
6
- import { Root as d } from "./atoms/Root/Root.js";
7
- import { Separator as l } from "./atoms/Separator/Separator.js";
8
- import { Text as S } from "./atoms/Text/Text.js";
9
- import { Input as h } from "./atoms/Input/Input.js";
10
- import { Logo as C } from "./molecules/Logo/Logo.js";
11
- import { SearchBox as G } from "./molecules/SearchBox/SearchBox.js";
12
- import { QuantityInput as L } from "./molecules/QuantityInput/QuantityInput.js";
4
+ import { Head as i } from "./atoms/Root/Head.js";
5
+ import { Icon as u } from "./atoms/Icon/Icon.js";
6
+ import { Root as c } from "./atoms/Root/Root.js";
7
+ import { Separator as d } from "./atoms/Separator/Separator.js";
8
+ import { Text as y } from "./atoms/Text/Text.js";
9
+ import { Input as S } from "./atoms/Input/Input.js";
10
+ import { Logo as h } from "./molecules/Logo/Logo.js";
11
+ import { SearchBox as A } from "./molecules/SearchBox/SearchBox.js";
12
+ import { QuantityInput as F } from "./molecules/QuantityInput/QuantityInput.js";
13
+ import { Availability as H } from "./molecules/Availability/Availability.js";
14
+ import { Pricing as P } from "./molecules/Pricing/Pricing.js";
13
15
  export {
16
+ H as Availability,
14
17
  t as Button,
15
18
  m as Column,
16
19
  p as Flex,
17
20
  f as Grid,
18
- a as Head,
19
- I as Icon,
20
- h as Input,
21
- C as Logo,
22
- L as QuantityInput,
23
- d as Root,
24
- G as SearchBox,
25
- l as Separator,
26
- S as Text
21
+ i as Head,
22
+ u as Icon,
23
+ S as Input,
24
+ h as Logo,
25
+ P as Pricing,
26
+ F as QuantityInput,
27
+ c as Root,
28
+ A as SearchBox,
29
+ d as Separator,
30
+ y as Text
27
31
  };
@@ -0,0 +1,17 @@
1
+ import { default as React } from 'react';
2
+ export interface AddToCartProps {
3
+ itemKey: number;
4
+ initialQuantity?: number;
5
+ min?: number;
6
+ max?: number;
7
+ onQuantityChange?: (_q: number) => void;
8
+ onAdd: (_itemKey: number, _quantity: number) => void | Promise<void>;
9
+ autoHideDelayMs?: number;
10
+ showQuantity?: boolean;
11
+ className?: string;
12
+ addButtonClassName?: string;
13
+ buttonText?: string;
14
+ buttonDoneText?: string;
15
+ size?: "sm" | "md";
16
+ }
17
+ export declare function AddToCart({ itemKey, initialQuantity, min, max, onQuantityChange, onAdd, autoHideDelayMs, showQuantity, className, addButtonClassName, buttonText, buttonDoneText, size }: AddToCartProps): React.ReactElement | null;
@@ -0,0 +1,64 @@
1
+ import { jsxs as _, jsx as i } from "react/jsx-runtime";
2
+ import r from "react";
3
+ import { c as j } from "../../clsx-OuTLNxxd.js";
4
+ import { StatefulButton as v } from "../StatefulButton/StatefulButton.js";
5
+ import { QuantityInput as q } from "../QuantityInput/QuantityInput.js";
6
+ import '../../assets/AddToCart.css';const w = "_container_1xk40_1", y = {
7
+ container: w
8
+ };
9
+ function F({
10
+ itemKey: s,
11
+ initialQuantity: d = 1,
12
+ min: o = 1,
13
+ max: l,
14
+ onQuantityChange: c,
15
+ onAdd: m,
16
+ autoHideDelayMs: f = 3e3,
17
+ showQuantity: p = !0,
18
+ className: x,
19
+ addButtonClassName: T,
20
+ buttonText: b,
21
+ buttonDoneText: k,
22
+ size: a
23
+ }) {
24
+ const [u, A] = r.useState(() => {
25
+ const e = Number(d) || 1;
26
+ return e < o ? o : e;
27
+ }), [N, n] = r.useState(!1), t = r.useRef(null);
28
+ r.useEffect(() => () => {
29
+ t.current && clearTimeout(t.current);
30
+ }, []);
31
+ const R = r.useCallback((e) => {
32
+ A(e), c == null || c(e);
33
+ }, [c]), S = async () => {
34
+ s && (await m(s, u), n(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => n(!1), f));
35
+ };
36
+ return /* @__PURE__ */ _("div", { className: j(y.container, x), children: [
37
+ p && /* @__PURE__ */ i(
38
+ q,
39
+ {
40
+ quantity: u,
41
+ onQuantityChange: R,
42
+ min: o,
43
+ max: l,
44
+ size: a || "md"
45
+ }
46
+ ),
47
+ /* @__PURE__ */ i(
48
+ v,
49
+ {
50
+ size: a || "md",
51
+ variant: "cta-primary",
52
+ completed: N,
53
+ onClick: S,
54
+ text: b,
55
+ completedText: k,
56
+ disabled: !s,
57
+ className: T
58
+ }
59
+ )
60
+ ] });
61
+ }
62
+ export {
63
+ F as AddToCart
64
+ };
@@ -0,0 +1,74 @@
1
+ import { StoryObj } from '@storybook/react';
2
+ import { AddToCart, AddToCartProps } from './AddToCart';
3
+ /**
4
+ * Stories for AddToCart.
5
+ * Combines a QuantityInput and a StatefulButton.
6
+ * Internal flow:
7
+ * 1. User adjusts quantity (onQuantityChange fired).
8
+ * 2. User clicks Add (onAdd called with itemKey & quantity; can be async).
9
+ * 3. Success sets a temporary "added" state (handled internally) then auto-hides.
10
+ */
11
+ declare const meta: {
12
+ title: string;
13
+ component: typeof AddToCart;
14
+ parameters: {
15
+ layout: string;
16
+ };
17
+ argTypes: {
18
+ itemKey: {
19
+ control: "number";
20
+ description: string;
21
+ };
22
+ initialQuantity: {
23
+ control: "number";
24
+ description: string;
25
+ };
26
+ min: {
27
+ control: "number";
28
+ description: string;
29
+ };
30
+ max: {
31
+ control: "number";
32
+ description: string;
33
+ };
34
+ onQuantityChange: {
35
+ action: string;
36
+ description: string;
37
+ };
38
+ onAdd: {
39
+ description: string;
40
+ };
41
+ autoHideDelayMs: {
42
+ control: "number";
43
+ description: string;
44
+ };
45
+ showQuantity: {
46
+ control: "boolean";
47
+ description: string;
48
+ };
49
+ buttonText: {
50
+ control: "text";
51
+ description: string;
52
+ };
53
+ buttonDoneText: {
54
+ control: "text";
55
+ description: string;
56
+ };
57
+ className: {
58
+ control: "text";
59
+ };
60
+ addButtonClassName: {
61
+ control: "text";
62
+ };
63
+ };
64
+ args: AddToCartProps;
65
+ tags: string[];
66
+ };
67
+ export default meta;
68
+ type Story = StoryObj<typeof meta>;
69
+ export declare const Default: Story;
70
+ export declare const HiddenQuantity: Story;
71
+ export declare const WithMaxConstraint: Story;
72
+ export declare const CustomTexts: Story;
73
+ export declare const AsyncSlowAdd: Story;
74
+ export declare const CustomAutoHideDelay: Story;