@mhmo91/schmancy 0.4.39 → 0.4.41

package/ai/date-range.md

@@ -14,6 +14,7 @@
   required?                                             // Mark as required field
   placeholder?="string"                                 // Placeholder text (default: "Select date range")
   clearable?                                            // Show clear button (default: true)
+  step?="day|week|month|year|number"                    // Navigation step (auto-detects if not set)
   @change=${handler}>                                   // Fires when range changes
 </schmancy-date-range>
 
@@ -87,6 +88,23 @@ interface DateRangeChangeEvent {
   .dateTo="${{ label: 'Period End', value: endDate }}"
   @change="${(e) => updateDashboard(e.detail)}"
 ></schmancy-date-range>
+
+// 7. Fixed step navigation (calendar dialog disabled)
+<schmancy-date-range
+  step="week"
+  .dateFrom="${{ label: 'Week Start', value: weekStart }}"
+  .dateTo="${{ label: 'Week End', value: weekEnd }}"
+  minDate="2024-01-01"
+  maxDate="2024-12-31"
+  @change="${(e) => console.log('Week changed:', e.detail)}"
+></schmancy-date-range>
+
+// 8. Custom day step navigation
+<schmancy-date-range
+  .step="${7}"  // Navigate by 7 days
+  .dateFrom="${{ label: 'From', value: startDate }}"
+  .dateTo="${{ label: 'To', value: endDate }}"
+></schmancy-date-range>
 ```
 
 ## Related Components
@@ -110,9 +128,17 @@ The component includes intelligent presets organized by time period:
 **Hours** (datetime-local only): Last 12/24 Hours
 
 ### Smart Navigation Features
-- Arrow buttons intelligently shift ranges based on detected period type
+- Arrow buttons intelligently shift ranges based on detected period type or step property
+- Auto-detects appropriate step when not specified:
+  - Full year range → shifts by year
+  - Full month range → shifts by month  
+  - Full week range → shifts by week
+  - Single day → shifts by 1 day
+  - Custom range → shifts by range duration
+- When step is provided, calendar dialog becomes read-only (not disabled)
 - Preserves full period boundaries (weeks start on Monday, months on 1st)
 - Automatically detects and maintains preset selections
+- Respects min/max date boundaries during navigation
 - Keyboard shortcuts for power users
 
 ### Keyboard Shortcuts

package/ai/store.md

@@ -120,6 +120,21 @@ const getFilteredTodos = createSelector(
     }
   }
 );
+// 4. Using @select decorator in components
+import { select } from '@mhmo91/schmancy';
+
+@customElement('my-component')
+class MyComponent extends LitElement {
+  // Auto-subscribes to store state
+  @select(store, state => state.count)
+  count!: number;
+  
+  // With options
+  @select(store, state => state.user, { required: false })
+  user?: User;
+  
+  // The component will automatically update when these values change
+}
 ```
 
 ## Related Components
@@ -171,6 +186,22 @@ store.update(state => {
 });
 ```
 
+### @select Decorator
+The `@select` decorator connects component properties to store state with automatic subscription management:
+
+```typescript
+@select(store, selectorFn, options?)
+```
+
+Options:
+- `required: boolean` (default: true) - Wait for non-undefined value before calling connectedCallback
+- `updateOnly: boolean` - Only trigger updates, don't set property value
+- `deepClone: boolean` - Use structuredClone for deep cloning values
+- `equals: (a, b) => boolean` - Custom equality function
+- `debug: boolean` - Enable debug logging
+
+The decorator ensures `connectedCallback` is called only once, even with multiple @select decorators.
+
 ### Common Use Cases
 
 1. **Application theme state**

package/dist/ai/date-range.md

@@ -14,6 +14,7 @@
   required?                                             // Mark as required field
   placeholder?="string"                                 // Placeholder text (default: "Select date range")
   clearable?                                            // Show clear button (default: true)
+  step?="day|week|month|year|number"                    // Navigation step (auto-detects if not set)
   @change=${handler}>                                   // Fires when range changes
 </schmancy-date-range>
 
@@ -87,6 +88,23 @@ interface DateRangeChangeEvent {
   .dateTo="${{ label: 'Period End', value: endDate }}"
   @change="${(e) => updateDashboard(e.detail)}"
 ></schmancy-date-range>
+
+// 7. Fixed step navigation (calendar dialog disabled)
+<schmancy-date-range
+  step="week"
+  .dateFrom="${{ label: 'Week Start', value: weekStart }}"
+  .dateTo="${{ label: 'Week End', value: weekEnd }}"
+  minDate="2024-01-01"
+  maxDate="2024-12-31"
+  @change="${(e) => console.log('Week changed:', e.detail)}"
+></schmancy-date-range>
+
+// 8. Custom day step navigation
+<schmancy-date-range
+  .step="${7}"  // Navigate by 7 days
+  .dateFrom="${{ label: 'From', value: startDate }}"
+  .dateTo="${{ label: 'To', value: endDate }}"
+></schmancy-date-range>
 ```
 
 ## Related Components
@@ -110,9 +128,17 @@ The component includes intelligent presets organized by time period:
 **Hours** (datetime-local only): Last 12/24 Hours
 
 ### Smart Navigation Features
-- Arrow buttons intelligently shift ranges based on detected period type
+- Arrow buttons intelligently shift ranges based on detected period type or step property
+- Auto-detects appropriate step when not specified:
+  - Full year range → shifts by year
+  - Full month range → shifts by month  
+  - Full week range → shifts by week
+  - Single day → shifts by 1 day
+  - Custom range → shifts by range duration
+- When step is provided, calendar dialog becomes read-only (not disabled)
 - Preserves full period boundaries (weeks start on Monday, months on 1st)
 - Automatically detects and maintains preset selections
+- Respects min/max date boundaries during navigation
 - Keyboard shortcuts for power users
 
 ### Keyboard Shortcuts

package/dist/ai/store.md

@@ -120,6 +120,21 @@ const getFilteredTodos = createSelector(
     }
   }
 );
+// 4. Using @select decorator in components
+import { select } from '@mhmo91/schmancy';
+
+@customElement('my-component')
+class MyComponent extends LitElement {
+  // Auto-subscribes to store state
+  @select(store, state => state.count)
+  count!: number;
+  
+  // With options
+  @select(store, state => state.user, { required: false })
+  user?: User;
+  
+  // The component will automatically update when these values change
+}
 ```
 
 ## Related Components
@@ -171,6 +186,22 @@ store.update(state => {
 });
 ```
 
+### @select Decorator
+The `@select` decorator connects component properties to store state with automatic subscription management:
+
+```typescript
+@select(store, selectorFn, options?)
+```
+
+Options:
+- `required: boolean` (default: true) - Wait for non-undefined value before calling connectedCallback
+- `updateOnly: boolean` - Only trigger updates, don't set property value
+- `deepClone: boolean` - Use structuredClone for deep cloning values
+- `equals: (a, b) => boolean` - Custom equality function
+- `debug: boolean` - Enable debug logging
+
+The decorator ensures `connectedCallback` is called only once, even with multiple @select decorators.
+
 ### Common Use Cases
 
 1. **Application theme state**

package/dist/{avatar-sXepW60q.cjs → avatar-B3sAx50a.cjs}

@@ -1,4 +1,4 @@
-"use strict";const l=require("lit"),o=require("lit/decorators.js"),s=require("rxjs");require("./animated-text-CtXY3MHV.cjs");const $=require("./area.component-DQ_erV9e.cjs");require("./autocomplete-PHnzqAII.cjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const _=require("./tailwind.mixin-DVKI3qb9.cjs"),D=require("./ripple-C2BHbhcS.cjs");require("./boat-B_xZilsk.cjs"),require("./spinner-CV62BBoF.cjs"),require("./icon-button-9V68mzcL.cjs"),require("./media-CIuTybvD.cjs"),require("./checkbox-BAuVXvYL.cjs"),require("./chips-Dg2otqDI.cjs"),require("./circular-progress-DZUJU-z3.cjs"),require("./code-preview-CYHNaPek.cjs"),require("./payment-card-form-ccF9dfGC.cjs");const p=require("./types.cjs"),d=require("./provide-BxZ2kn_p.cjs"),b=require("./litElement.mixin-B01R2oT7.cjs"),m=require("./consume-edta5ng5.cjs");require("./date-range-CJq5E8y0.cjs"),require("./date-range-inline-Czq1wHs1.cjs"),require("./delay-FgtrEHdo.cjs"),require("./dialog-content-ClfiDTji.cjs"),require("./dialog-service-BZZK8N6A.cjs"),require("./divider-2yg9r1tF.cjs"),require("./dropdown-content-DJ4CA3ug.cjs"),require("./timezone-UBBApQoU.cjs"),require("./form-Dpokur4M.cjs"),require("./icon-mhchC8Qw.cjs"),require("./input-DzNoI9qU.cjs"),require("./flex-DWnX0ZPR.cjs"),require("./list-DRbkWHho.cjs"),require("./menu-DEbZxoXr.cjs");const W=require("lit/directives/when.js");require("./notification-service-B6nHqzq5.cjs"),require("./option-BPmOG_Hw.cjs"),require("./progress-BqZ7yHQe.cjs"),require("./radio-button-WmbuT_YW.cjs"),require("./index-DyJ0oDpR.cjs"),require("./select-CPnSionr.cjs"),require("./sheet-Cn9heAk0.cjs");const A=require("./sheet.service-CNz7lXHC.cjs");require("./slider-DBNoXRWS.cjs"),require("./schmancy-steps-container-CjAsrjKf.cjs"),require("./context-object-K_1gDFu-.cjs");const N=require("rxjs/operators");require("./surface-ClfeUI6q.cjs"),require("./table-Rqnb4AJl.cjs"),require("./tabs-compatibility-B1bE7hSG.cjs"),require("./textarea-Dlnyyrbq.cjs"),require("./theme-button-Cao8AH8r.cjs"),require("./tooltip-WpE4e-fO.cjs"),require("./tree-Dn0t7MUR.cjs"),require("./typewriter-DwLZUKKQ.cjs"),require("./typography-BhCrqK_b.cjs");const i=require("./theme.interface-Xg5Zi46a.cjs");var X=Object.defineProperty,H=Object.getOwnPropertyDescriptor,g=(e,t,n,a)=>{for(var c,r=a>1?void 0:a?H(t,n):t,h=e.length-1;h>=0;h--)(c=e[h])&&(r=(a?c(t,n,r):c(r))||r);return a&&r&&X(t,n,r),r};exports.SchmancyBadgeV2=class extends _.TailwindElement(l.css`
+"use strict";const l=require("lit"),o=require("lit/decorators.js"),s=require("rxjs");require("./animated-text-CtXY3MHV.cjs");const $=require("./area.component-DQ_erV9e.cjs");require("./autocomplete-PHnzqAII.cjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const _=require("./tailwind.mixin-DVKI3qb9.cjs"),D=require("./ripple-C2BHbhcS.cjs");require("./boat-B_xZilsk.cjs"),require("./spinner-CV62BBoF.cjs"),require("./icon-button-9V68mzcL.cjs"),require("./media-CIuTybvD.cjs"),require("./checkbox-BAuVXvYL.cjs"),require("./chips-Dg2otqDI.cjs"),require("./circular-progress-DZUJU-z3.cjs"),require("./code-preview-CYHNaPek.cjs"),require("./payment-card-form-ccF9dfGC.cjs");const p=require("./types.cjs"),d=require("./provide-BxZ2kn_p.cjs"),b=require("./litElement.mixin-B01R2oT7.cjs"),m=require("./consume-edta5ng5.cjs");require("./date-range-Bd0bZ5EG.cjs"),require("./date-range-inline-Czq1wHs1.cjs"),require("./delay-FgtrEHdo.cjs"),require("./dialog-content-ClfiDTji.cjs"),require("./dialog-service-BZZK8N6A.cjs"),require("./divider-2yg9r1tF.cjs"),require("./dropdown-content-DJ4CA3ug.cjs"),require("./timezone-UBBApQoU.cjs"),require("./form-Dpokur4M.cjs"),require("./icon-mhchC8Qw.cjs"),require("./input-DzNoI9qU.cjs"),require("./flex-DWnX0ZPR.cjs"),require("./list-DRbkWHho.cjs"),require("./menu-DEbZxoXr.cjs");const W=require("lit/directives/when.js");require("./notification-service-B6nHqzq5.cjs"),require("./option-BPmOG_Hw.cjs"),require("./progress-BqZ7yHQe.cjs"),require("./radio-button-WmbuT_YW.cjs"),require("./index-DyJ0oDpR.cjs"),require("./select-CPnSionr.cjs"),require("./sheet-Cn9heAk0.cjs");const A=require("./sheet.service-CNz7lXHC.cjs");require("./slider-DBNoXRWS.cjs"),require("./schmancy-steps-container-CjAsrjKf.cjs"),require("./context-object-K_1gDFu-.cjs");const N=require("rxjs/operators");require("./surface-ClfeUI6q.cjs"),require("./table-Rqnb4AJl.cjs"),require("./tabs-compatibility-B1bE7hSG.cjs"),require("./textarea-Dlnyyrbq.cjs"),require("./theme-button-Cao8AH8r.cjs"),require("./tooltip-WpE4e-fO.cjs"),require("./tree-Dn0t7MUR.cjs"),require("./typewriter-DwLZUKKQ.cjs"),require("./typography-BhCrqK_b.cjs");const i=require("./theme.interface-Xg5Zi46a.cjs");var X=Object.defineProperty,H=Object.getOwnPropertyDescriptor,g=(e,t,n,a)=>{for(var c,r=a>1?void 0:a?H(t,n):t,h=e.length-1;h>=0;h--)(c=e[h])&&(r=(a?c(t,n,r):c(r))||r);return a&&r&&X(t,n,r),r};exports.SchmancyBadgeV2=class extends _.TailwindElement(l.css`
 	:host {
 		display: inline-flex;
 	}
@@ -202,4 +202,4 @@
 		`}getColorAttributes(){const e={primary:{bgColor:i.SchmancyTheme.sys.color.primary.container,color:i.SchmancyTheme.sys.color.primary.onContainer},secondary:{bgColor:i.SchmancyTheme.sys.color.secondary.container,color:i.SchmancyTheme.sys.color.secondary.onContainer},tertiary:{bgColor:i.SchmancyTheme.sys.color.tertiary.container,color:i.SchmancyTheme.sys.color.tertiary.onContainer},success:{bgColor:i.SchmancyTheme.sys.color.success.container,color:i.SchmancyTheme.sys.color.success.onContainer},error:{bgColor:i.SchmancyTheme.sys.color.error.container,color:i.SchmancyTheme.sys.color.error.onContainer},neutral:{bgColor:i.SchmancyTheme.sys.color.surface.container,color:i.SchmancyTheme.sys.color.surface.on}};return D.color(e[this.color])}renderStatusIndicator(){const e={online:i.SchmancyTheme.sys.color.success.default,offline:i.SchmancyTheme.sys.color.surface.onVariant,busy:i.SchmancyTheme.sys.color.error.default,away:i.SchmancyTheme.sys.color.tertiary.default},t={"absolute bottom-0 right-0 rounded-full border-2 border-surface-default":!0,[{xs:"w-1.5 h-1.5",sm:"w-2 h-2",md:"w-2.5 h-2.5",lg:"w-3 h-3",xl:"w-4 h-4"}[this.size]]:!0};return l.html`
 			<div class="${this.classMap(t)}" style="background-color: ${e[this.status]};"></div>
 		`}},u([o.property({type:String})],exports.SchmancyAvatar.prototype,"initials",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"src",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"icon",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"size",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"color",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"shape",2),u([o.property({type:Boolean})],exports.SchmancyAvatar.prototype,"bordered",2),u([o.property({type:String})],exports.SchmancyAvatar.prototype,"status",2),exports.SchmancyAvatar=u([o.customElement("schmancy-avatar")],exports.SchmancyAvatar),exports.$drawer=Q,exports.HereMorty=B,exports.SchmancyContentDrawerID=I,exports.SchmancyContentDrawerMaxHeight=k,exports.SchmancyContentDrawerMinWidth=M,exports.SchmancyContentDrawerSheetMode=q,exports.SchmancyContentDrawerSheetState=j,exports.SchmancyDrawerNavbarMode=O,exports.SchmancyDrawerNavbarState=z,exports.WhereAreYouRicky=P,exports.schmancyContentDrawer=V,exports.schmancyNavDrawer=R,exports.teleport=x;
-//# sourceMappingURL=avatar-sXepW60q.cjs.map
+//# sourceMappingURL=avatar-B3sAx50a.cjs.map