juxscript 1.1.307 → 1.1.309

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 (10) hide show
  1. package/dist/lib/components/container.d.ts +58 -0
  2. package/dist/lib/components/container.d.ts.map +1 -0
  3. package/dist/lib/components/container.js +151 -0
  4. package/dist/lib/components/input.d.ts +13 -0
  5. package/dist/lib/components/input.d.ts.map +1 -1
  6. package/dist/lib/components/input.js +47 -0
  7. package/dist/lib/index.d.ts +16 -1
  8. package/dist/lib/index.d.ts.map +1 -1
  9. package/dist/lib/index.js +17 -2
  10. package/package.json +1 -1
package/dist/lib/components/container.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ interface ContainerOptions {
2
+ layout?: 'flex' | 'grid' | 'block';
3
+ direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
4
+ wrap?: boolean;
5
+ gap?: string;
6
+ padding?: string;
7
+ align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
8
+ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
9
+ columns?: number | string;
10
+ width?: string;
11
+ height?: string;
12
+ maxWidth?: string;
13
+ minHeight?: string;
14
+ class?: string;
15
+ style?: string;
16
+ target?: string;
17
+ tag?: string;
18
+ content?: string;
19
+ [key: string]: any;
20
+ }
21
+ declare class Container {
22
+ id: string;
23
+ opts: ContainerOptions;
24
+ private _element;
25
+ constructor(id: string, options?: ContainerOptions);
26
+ private _buildStyles;
27
+ getValue(): string;
28
+ getContent(): string;
29
+ setValue(val: string): this;
30
+ setContent(val: string): this;
31
+ setClass(val: string): this;
32
+ setStyle(val: string): this;
33
+ setInnerHTML(val: string): this;
34
+ getElement(): HTMLElement;
35
+ }
36
+ /**
37
+ * Create a layout container.
38
+ *
39
+ * @example
40
+ * // Flex column (default)
41
+ * jux.container('main', { gap: '16px', padding: '24px' });
42
+ *
43
+ * // Flex row
44
+ * jux.container('toolbar', { direction: 'row', gap: '8px', align: 'center' });
45
+ *
46
+ * // Grid
47
+ * jux.container('grid', { layout: 'grid', columns: 3, gap: '16px' });
48
+ *
49
+ * // Centered page wrapper
50
+ * jux.container('page', { maxWidth: '960px', padding: '24px 16px', align: 'center' });
51
+ *
52
+ * // Nested
53
+ * jux.container('card', { gap: '8px', padding: '16px', target: 'grid' });
54
+ */
55
+ export declare function container(id: string, options?: ContainerOptions): Container;
56
+ export { Container, ContainerOptions };
57
+ export default container;
58
+ //# sourceMappingURL=container.d.ts.map
package/dist/lib/components/container.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../lib/components/container.ts"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAmBD,cAAM,SAAS;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,CAAC,QAAQ,CAAc;gBAElB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IA6CtD,OAAO,CAAC,YAAY;IAoCpB,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,WAAW;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAI/E;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACvC,eAAe,SAAS,CAAC"}
package/dist/lib/components/container.js ADDED
@@ -0,0 +1,151 @@
1
+ import generateId from '../utils/idgen.js';
2
+ import { pageState } from '../state/pageState.js';
3
+ const JUSTIFY_MAP = {
4
+ start: 'flex-start',
5
+ center: 'center',
6
+ end: 'flex-end',
7
+ between: 'space-between',
8
+ around: 'space-around',
9
+ evenly: 'space-evenly'
10
+ };
11
+ const ALIGN_MAP = {
12
+ start: 'flex-start',
13
+ center: 'center',
14
+ end: 'flex-end',
15
+ stretch: 'stretch',
16
+ baseline: 'baseline'
17
+ };
18
+ class Container {
19
+ constructor(id, options = {}) {
20
+ this.id = id || generateId();
21
+ this.opts = {
22
+ layout: 'flex',
23
+ direction: 'column',
24
+ tag: 'div',
25
+ ...options
26
+ };
27
+ this._element = document.createElement(this.opts.tag);
28
+ this._element.id = this.id;
29
+ // Classes
30
+ if (this.opts.class)
31
+ this._element.className = this.opts.class;
32
+ // Build computed style from layout options
33
+ const styles = this._buildStyles();
34
+ if (this.opts.style)
35
+ styles.push(this.opts.style);
36
+ if (styles.length)
37
+ this._element.setAttribute('style', styles.join(';'));
38
+ // Content (rare for containers, but supported)
39
+ if (this.opts.content)
40
+ this._element.textContent = this.opts.content;
41
+ // Extra attributes
42
+ for (const [key, value] of Object.entries(this.opts)) {
43
+ if ([
44
+ 'layout', 'direction', 'wrap', 'gap', 'padding', 'align', 'justify',
45
+ 'columns', 'width', 'height', 'maxWidth', 'minHeight',
46
+ 'class', 'style', 'target', 'tag', 'content'
47
+ ].includes(key))
48
+ continue;
49
+ this._element.setAttribute(`data-${key}`, String(value));
50
+ }
51
+ // Mount
52
+ const resolvedTarget = this.opts.target;
53
+ const parent = resolvedTarget
54
+ ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
55
+ : document.getElementById('app');
56
+ parent?.appendChild(this._element);
57
+ }
58
+ // ═══════════════════════════════════════════════════════════
59
+ // LAYOUT HELPERS
60
+ // ═══════════════════════════════════════════════════════════
61
+ _buildStyles() {
62
+ const s = [];
63
+ const o = this.opts;
64
+ if (o.layout === 'grid') {
65
+ s.push('display:grid');
66
+ if (o.columns) {
67
+ const cols = typeof o.columns === 'number'
68
+ ? `repeat(${o.columns}, 1fr)`
69
+ : o.columns;
70
+ s.push(`grid-template-columns:${cols}`);
71
+ }
72
+ }
73
+ else if (o.layout === 'flex') {
74
+ s.push('display:flex');
75
+ if (o.direction)
76
+ s.push(`flex-direction:${o.direction}`);
77
+ if (o.wrap)
78
+ s.push('flex-wrap:wrap');
79
+ }
80
+ else {
81
+ s.push('display:block');
82
+ }
83
+ if (o.gap)
84
+ s.push(`gap:${o.gap}`);
85
+ if (o.padding)
86
+ s.push(`padding:${o.padding}`);
87
+ if (o.align)
88
+ s.push(`align-items:${ALIGN_MAP[o.align] || o.align}`);
89
+ if (o.justify)
90
+ s.push(`justify-content:${JUSTIFY_MAP[o.justify] || o.justify}`);
91
+ if (o.width)
92
+ s.push(`width:${o.width}`);
93
+ if (o.height)
94
+ s.push(`height:${o.height}`);
95
+ if (o.maxWidth)
96
+ s.push(`max-width:${o.maxWidth}`);
97
+ if (o.minHeight)
98
+ s.push(`min-height:${o.minHeight}`);
99
+ return s;
100
+ }
101
+ // ═══════════════════════════════════════════════════════════
102
+ // PAGESTATE INTEGRATION
103
+ // ═══════════════════════════════════════════════════════════
104
+ getValue() { return this._element.textContent ?? ''; }
105
+ getContent() { return this._element.textContent ?? this.opts.content ?? ''; }
106
+ setValue(val) {
107
+ this.opts.content = val;
108
+ this._element.textContent = val;
109
+ return this;
110
+ }
111
+ setContent(val) { return this.setValue(val); }
112
+ setClass(val) {
113
+ this._element.className = val;
114
+ return this;
115
+ }
116
+ setStyle(val) {
117
+ this._element.setAttribute('style', val);
118
+ return this;
119
+ }
120
+ setInnerHTML(val) {
121
+ this._element.innerHTML = val;
122
+ return this;
123
+ }
124
+ getElement() { return this._element; }
125
+ }
126
+ /**
127
+ * Create a layout container.
128
+ *
129
+ * @example
130
+ * // Flex column (default)
131
+ * jux.container('main', { gap: '16px', padding: '24px' });
132
+ *
133
+ * // Flex row
134
+ * jux.container('toolbar', { direction: 'row', gap: '8px', align: 'center' });
135
+ *
136
+ * // Grid
137
+ * jux.container('grid', { layout: 'grid', columns: 3, gap: '16px' });
138
+ *
139
+ * // Centered page wrapper
140
+ * jux.container('page', { maxWidth: '960px', padding: '24px 16px', align: 'center' });
141
+ *
142
+ * // Nested
143
+ * jux.container('card', { gap: '8px', padding: '16px', target: 'grid' });
144
+ */
145
+ export function container(id, options = {}) {
146
+ const c = new Container(id, options);
147
+ pageState.__register(c);
148
+ return c;
149
+ }
150
+ export { Container };
151
+ export default container;
package/dist/lib/components/input.d.ts CHANGED
@@ -41,5 +41,18 @@ declare class Input {
41
41
  render(target?: string | HTMLElement): this;
42
42
  }
43
43
  export declare function input(id: string, options?: InputOptions): Input;
44
+ export declare function email(id: string, options?: InputOptions): Input;
45
+ export declare function password(id: string, options?: InputOptions): Input;
46
+ export declare function number(id: string, options?: InputOptions): Input;
47
+ export declare function tel(id: string, options?: InputOptions): Input;
48
+ export declare function url(id: string, options?: InputOptions): Input;
49
+ export declare function search(id: string, options?: InputOptions): Input;
50
+ export declare function date(id: string, options?: InputOptions): Input;
51
+ export declare function time(id: string, options?: InputOptions): Input;
52
+ export declare function datetime(id: string, options?: InputOptions): Input;
53
+ export declare function color(id: string, options?: InputOptions): Input;
54
+ export declare function range(id: string, options?: InputOptions): Input;
55
+ export declare function file(id: string, options?: InputOptions): Input;
56
+ export declare function hidden(id: string, options?: InputOptions): Input;
44
57
  export { Input, InputOptions };
45
58
  //# sourceMappingURL=input.d.ts.map
package/dist/lib/components/input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../lib/components/input.ts"],"names":[],"mappings":"AAGA,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAElK,UAAU,YAAY;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,cAAM,KAAK;IACP,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAAwD;gBAE7D,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IASlD,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAChC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACzB,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAKzD,QAAQ,IAAI,MAAM;IAIlB,QAAQ,IAAI,QAAQ,GAAG,IAAI;IAI3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAI7B,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;CAqDvC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAKnE;AAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../lib/components/input.ts"],"names":[],"mappings":"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"}
package/dist/lib/components/input.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import generateId from '../utils/idgen.js';
2
+ import niceName from '../utils/niceName.js';
2
3
  import { pageState } from '../state/pageState.js';
3
4
  class Input {
4
5
  constructor(id, options = {}) {
@@ -10,6 +11,10 @@ class Input {
10
11
  type: 'text',
11
12
  ...options
12
13
  };
14
+ // Auto-generate label from ID if not provided
15
+ if (!this.options.label && this.id) {
16
+ this.options.label = niceName(this.id);
17
+ }
13
18
  }
14
19
  // Fluent API
15
20
  type(value) { this.options.type = value; return this; }
@@ -111,4 +116,46 @@ export function input(id, options = {}) {
111
116
  pageState.__register(inp);
112
117
  return inp;
113
118
  }
119
+ // ═══════════════════════════════════════════════════════════════
120
+ // TYPE-SPECIFIC FACTORY METHODS
121
+ // ═══════════════════════════════════════════════════════════════
122
+ export function email(id, options = {}) {
123
+ return input(id, { placeholder: 'name@example.com', autocomplete: 'email', ...options, type: 'email' });
124
+ }
125
+ export function password(id, options = {}) {
126
+ return input(id, { placeholder: '••••••••', autocomplete: 'current-password', ...options, type: 'password' });
127
+ }
128
+ export function number(id, options = {}) {
129
+ return input(id, { placeholder: '0', ...options, type: 'number' });
130
+ }
131
+ export function tel(id, options = {}) {
132
+ return input(id, { placeholder: '+1 (555) 000-0000', autocomplete: 'tel', ...options, type: 'tel' });
133
+ }
134
+ export function url(id, options = {}) {
135
+ return input(id, { placeholder: 'https://', autocomplete: 'url', ...options, type: 'url' });
136
+ }
137
+ export function search(id, options = {}) {
138
+ return input(id, { placeholder: 'Search...', ...options, type: 'search' });
139
+ }
140
+ export function date(id, options = {}) {
141
+ return input(id, { ...options, type: 'date' });
142
+ }
143
+ export function time(id, options = {}) {
144
+ return input(id, { ...options, type: 'time' });
145
+ }
146
+ export function datetime(id, options = {}) {
147
+ return input(id, { ...options, type: 'datetime-local' });
148
+ }
149
+ export function color(id, options = {}) {
150
+ return input(id, { ...options, type: 'color' });
151
+ }
152
+ export function range(id, options = {}) {
153
+ return input(id, { min: '0', max: '100', ...options, type: 'range' });
154
+ }
155
+ export function file(id, options = {}) {
156
+ return input(id, { ...options, type: 'file' });
157
+ }
158
+ export function hidden(id, options = {}) {
159
+ return input(id, { ...options, type: 'hidden' });
160
+ }
114
161
  export { Input };
package/dist/lib/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre, code } from "./components/tag.js";
2
2
  import { include } from "./components/include.js";
3
- import { input } from "./components/input.js";
3
+ import { input, email, password, number, tel, url, search, date, time, datetime, color, range, file, hidden } from "./components/input.js";
4
4
  import { select } from "./components/select.js";
5
5
  import { radio } from "./components/radio.js";
6
6
  import { checkbox, checkboxGroup } from "./components/checkbox.js";
@@ -15,6 +15,7 @@ import { list } from "./components/list.js";
15
15
  import { tabs } from "./components/tabs.js";
16
16
  import { button, btn } from "./components/button.js";
17
17
  import { link, a } from "./components/link.js";
18
+ import { container } from "./components/container.js";
18
19
  export declare const jux: {
19
20
  tag: typeof tag;
20
21
  div: typeof div;
@@ -30,6 +31,19 @@ export declare const jux: {
30
31
  code: typeof code;
31
32
  include: typeof include;
32
33
  input: typeof input;
34
+ email: typeof email;
35
+ password: typeof password;
36
+ number: typeof number;
37
+ tel: typeof tel;
38
+ url: typeof url;
39
+ search: typeof search;
40
+ date: typeof date;
41
+ time: typeof time;
42
+ datetime: typeof datetime;
43
+ color: typeof color;
44
+ range: typeof range;
45
+ file: typeof file;
46
+ hidden: typeof hidden;
33
47
  select: typeof select;
34
48
  radio: typeof radio;
35
49
  checkbox: typeof checkbox;
@@ -46,6 +60,7 @@ export declare const jux: {
46
60
  btn: typeof btn;
47
61
  link: typeof link;
48
62
  a: typeof a;
63
+ container: typeof container;
49
64
  };
50
65
  export { pageState };
51
66
  //# sourceMappingURL=index.d.ts.map
package/dist/lib/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAE/C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Bf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
package/dist/lib/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre, code } from "./components/tag.js";
2
2
  import { include } from "./components/include.js";
3
- import { input } from "./components/input.js";
3
+ import { input, email, password, number, tel, url, search, date, time, datetime, color, range, file, hidden } from "./components/input.js";
4
4
  import { select } from "./components/select.js";
5
5
  import { radio } from "./components/radio.js";
6
6
  import { checkbox, checkboxGroup } from "./components/checkbox.js";
@@ -15,6 +15,7 @@ import { list } from "./components/list.js";
15
15
  import { tabs } from "./components/tabs.js";
16
16
  import { button, btn } from "./components/button.js";
17
17
  import { link, a } from "./components/link.js";
18
+ import { container } from "./components/container.js";
18
19
  export const jux = {
19
20
  tag,
20
21
  div,
@@ -25,6 +26,19 @@ export const jux = {
25
26
  code,
26
27
  include,
27
28
  input,
29
+ email,
30
+ password,
31
+ number,
32
+ tel,
33
+ url,
34
+ search,
35
+ date,
36
+ time,
37
+ datetime,
38
+ color,
39
+ range,
40
+ file,
41
+ hidden,
28
42
  select,
29
43
  radio,
30
44
  checkbox,
@@ -40,7 +54,8 @@ export const jux = {
40
54
  button,
41
55
  btn,
42
56
  link,
43
- a
57
+ a,
58
+ container
44
59
  };
45
60
  export { pageState };
46
61
  jux.watch = pageState.__watch;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.307",
3
+ "version": "1.1.309",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "./dist/lib/index.js",