@nuralyui/checkbox 0.0.5 → 0.0.6

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.
package/checkbox.style.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { css } from 'lit';
2
- import { styleVariables } from './checkbox.variables.js';
2
+ import { styleVariables } from './checkbox.style.variables.js';
3
3
  const checkBoxStyles = css `
4
4
  :host {
5
5
  display: flex;
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.style.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './checkbox.variables.js';\n\nconst checkBoxStyles = css`\n :host {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--hybrid-checkbox-gap);\n font-family: var(--hybrid-checkbox-font-family);\n color: var(--hybrid-checkbox-color);\n }\n\n :host(:not([checked]):not([indeterminate]):not([disabled])) input {\n background-color: var(--hybrid-checkbox-empty-background-color);\n border: var(--hybrid-checkbox-empty-border);\n }\n\n :host(:not([disabled])[checked]) input,\n :host(:not([disabled])[indeterminate]) input {\n background-color: var(--hybrid-checkbox-filled-background-color);\n }\n :host([disabled]) {\n color: var(--hybrid-checkbox-disabled-text-color);\n }\n :host([disabled]) input {\n background-color: var(--hybrid-checkbox-disabled-background-color);\n cursor: not-allowed;\n }\n input {\n appearance: none;\n width: var(--hybrid-checkbox-medium-width);\n height: var(--hybrid-checkbox-medium-height);\n cursor: pointer;\n position: relative;\n border-radius: var(--hybrid-checkbox-border-radius);\n }\n input:after {\n color: var(--hybrid-checkbox-symbol-color);\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -51%);\n }\n input:focus {\n border: var(--hybrid-checkbox-focus-border);\n outline: var(--hybrid-checkbox-focus-outline);\n }\n :host([size='large']) input {\n width: var(--hybrid-checkbox-large-width);\n height: var(--hybrid-checkbox-large-height);\n }\n :host([size='small']) input {\n width: var(--hybrid-checkbox-small-width);\n height: var(--hybrid-checkbox-small-height);\n }\n\n :host([indeterminate][size='medium']) input:after {\n font-size: var(--hybrid-checkbox-medium-indeterminate-size);\n }\n :host([indeterminate][size='large']) input:after {\n font-size: var(--hybrid-checkbox-large-indeterminate-size);\n }\n\n :host([indeterminate][size='small']) input:after {\n font-size: var(--hybrid-checkbox-small-indeterminate-size);\n }\n\n :host([checked]) input:after {\n border: solid;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -51%) rotate(45deg);\n content: '';\n }\n :host([checked][size='small']) input:after {\n width: var(--hybrid-checkbox-small-checked-width);\n height: var(--hybrid-checkbox-small-checked-height);\n }\n :host([checked][size='large']) input:after {\n width: var(--hybrid-checkbox-large-checked-width);\n height: var(--hybrid-checkbox-large-checked-height);\n }\n :host([checked][size='medium']) input:after {\n width: var(--hybrid-checkbox-medium-checked-width);\n height: var(--hybrid-checkbox-medium-checked-height);\n }\n\n :host([indeterminate]:not([checked])) input:after {\n content: '-';\n }\n :host(:not([checked]):not([indeterminate])) input:after {\n content: '';\n }\n`;\nexport const styles = [checkBoxStyles, styleVariables];\n"]}
1
+ {"version":3,"file":"checkbox.style.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAE7D,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './checkbox.style.variables.js';\n\nconst checkBoxStyles = css`\n :host {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--hybrid-checkbox-gap);\n font-family: var(--hybrid-checkbox-font-family);\n color: var(--hybrid-checkbox-color);\n }\n\n :host(:not([checked]):not([indeterminate]):not([disabled])) input {\n background-color: var(--hybrid-checkbox-empty-background-color);\n border: var(--hybrid-checkbox-empty-border);\n }\n\n :host(:not([disabled])[checked]) input,\n :host(:not([disabled])[indeterminate]) input {\n background-color: var(--hybrid-checkbox-filled-background-color);\n }\n :host([disabled]) {\n color: var(--hybrid-checkbox-disabled-text-color);\n }\n :host([disabled]) input {\n background-color: var(--hybrid-checkbox-disabled-background-color);\n cursor: not-allowed;\n }\n input {\n appearance: none;\n width: var(--hybrid-checkbox-medium-width);\n height: var(--hybrid-checkbox-medium-height);\n cursor: pointer;\n position: relative;\n border-radius: var(--hybrid-checkbox-border-radius);\n }\n input:after {\n color: var(--hybrid-checkbox-symbol-color);\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -51%);\n }\n input:focus {\n border: var(--hybrid-checkbox-focus-border);\n outline: var(--hybrid-checkbox-focus-outline);\n }\n :host([size='large']) input {\n width: var(--hybrid-checkbox-large-width);\n height: var(--hybrid-checkbox-large-height);\n }\n :host([size='small']) input {\n width: var(--hybrid-checkbox-small-width);\n height: var(--hybrid-checkbox-small-height);\n }\n\n :host([indeterminate][size='medium']) input:after {\n font-size: var(--hybrid-checkbox-medium-indeterminate-size);\n }\n :host([indeterminate][size='large']) input:after {\n font-size: var(--hybrid-checkbox-large-indeterminate-size);\n }\n\n :host([indeterminate][size='small']) input:after {\n font-size: var(--hybrid-checkbox-small-indeterminate-size);\n }\n\n :host([checked]) input:after {\n border: solid;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -51%) rotate(45deg);\n content: '';\n }\n :host([checked][size='small']) input:after {\n width: var(--hybrid-checkbox-small-checked-width);\n height: var(--hybrid-checkbox-small-checked-height);\n }\n :host([checked][size='large']) input:after {\n width: var(--hybrid-checkbox-large-checked-width);\n height: var(--hybrid-checkbox-large-checked-height);\n }\n :host([checked][size='medium']) input:after {\n width: var(--hybrid-checkbox-medium-checked-width);\n height: var(--hybrid-checkbox-medium-checked-height);\n }\n\n :host([indeterminate]:not([checked])) input:after {\n content: '-';\n }\n :host(:not([checked]):not([indeterminate])) input:after {\n content: '';\n }\n`;\nexport const styles = [checkBoxStyles, styleVariables];\n"]}
@@ -1,2 +1,2 @@
1
1
  export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=checkbox.variables.d.ts.map
2
+ //# sourceMappingURL=checkbox.style.variables.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox.style.variables.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAmD1B,CAAC"}
@@ -51,4 +51,4 @@ export const styleVariables = css `
51
51
  --hybrid-checkbox-color: #ffffff;
52
52
  }
53
53
  `;
54
- //# sourceMappingURL=checkbox.variables.js.map
54
+ //# sourceMappingURL=checkbox.style.variables.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox.style.variables.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n /* Light theme defaults */\n --hybrid-checkbox-filled-background-color: #161616;\n --hybrid-checkbox-color: #000000;\n --hybrid-checkbox-empty-background-color: #ffffff;\n --hybrid-checkbox-disabled-background-color: #c6c6c6;\n --hybrid-checkbox-disabled-text-color: #c6c6c6;\n --hybrid-checkbox-empty-border: 1px solid #161616;\n --hybrid-checkbox-symbol-color: #ffffff;\n --hybrid-checkbox-focus-border: 2px solid #ffffff;\n --hybrid-checkbox-focus-outline: 2px solid #0f62fe;\n --hybrid-checkbox-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-checkbox-border-radius: 1px;\n --hybrid-checkbox-gap: 5px;\n\n /* Size variables */\n --hybrid-checkbox-medium-width: 20px;\n --hybrid-checkbox-medium-height: 20px;\n --hybrid-checkbox-small-width: 15px;\n --hybrid-checkbox-small-height: 15px;\n --hybrid-checkbox-large-width: 25px;\n --hybrid-checkbox-large-height: 25px;\n\n --hybrid-checkbox-small-indeterminate-size: 10px;\n --hybrid-checkbox-large-indeterminate-size: 18px;\n --hybrid-checkbox-medium-indeterminate-size: 13px;\n\n --hybrid-checkbox-small-checked-width: 2px;\n --hybrid-checkbox-small-checked-height: 7px;\n --hybrid-checkbox-medium-checked-width: 3px;\n --hybrid-checkbox-medium-checked-height: 9px;\n --hybrid-checkbox-large-checked-width: 4px;\n --hybrid-checkbox-large-checked-height: 10px;\n }\n\n /* Dark theme overrides using data-theme attribute */\n input[data-theme=\"dark\"] {\n --hybrid-checkbox-empty-border: 1px solid #ffffff;\n --hybrid-checkbox-empty-background-color: #161616;\n --hybrid-checkbox-filled-background-color: #ffffff;\n --hybrid-checkbox-symbol-color: #161616;\n --hybrid-checkbox-focus-outline: 2px solid #ffffff;\n --hybrid-checkbox-focus-border: 2px solid #161616;\n --hybrid-checkbox-disabled-background-color: #6f6f6f;\n --hybrid-checkbox-disabled-text-color: #6f6f6f;\n }\n\n :host([data-theme=\"dark\"]) {\n --hybrid-checkbox-color: #ffffff;\n }\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/checkbox",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.variables.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAmD1B,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.variables.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDhC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n /* Light theme defaults */\n --hybrid-checkbox-filled-background-color: #161616;\n --hybrid-checkbox-color: #000000;\n --hybrid-checkbox-empty-background-color: #ffffff;\n --hybrid-checkbox-disabled-background-color: #c6c6c6;\n --hybrid-checkbox-disabled-text-color: #c6c6c6;\n --hybrid-checkbox-empty-border: 1px solid #161616;\n --hybrid-checkbox-symbol-color: #ffffff;\n --hybrid-checkbox-focus-border: 2px solid #ffffff;\n --hybrid-checkbox-focus-outline: 2px solid #0f62fe;\n --hybrid-checkbox-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-checkbox-border-radius: 1px;\n --hybrid-checkbox-gap: 5px;\n\n /* Size variables */\n --hybrid-checkbox-medium-width: 20px;\n --hybrid-checkbox-medium-height: 20px;\n --hybrid-checkbox-small-width: 15px;\n --hybrid-checkbox-small-height: 15px;\n --hybrid-checkbox-large-width: 25px;\n --hybrid-checkbox-large-height: 25px;\n\n --hybrid-checkbox-small-indeterminate-size: 10px;\n --hybrid-checkbox-large-indeterminate-size: 18px;\n --hybrid-checkbox-medium-indeterminate-size: 13px;\n\n --hybrid-checkbox-small-checked-width: 2px;\n --hybrid-checkbox-small-checked-height: 7px;\n --hybrid-checkbox-medium-checked-width: 3px;\n --hybrid-checkbox-medium-checked-height: 9px;\n --hybrid-checkbox-large-checked-width: 4px;\n --hybrid-checkbox-large-checked-height: 10px;\n }\n\n /* Dark theme overrides using data-theme attribute */\n input[data-theme=\"dark\"] {\n --hybrid-checkbox-empty-border: 1px solid #ffffff;\n --hybrid-checkbox-empty-background-color: #161616;\n --hybrid-checkbox-filled-background-color: #ffffff;\n --hybrid-checkbox-symbol-color: #161616;\n --hybrid-checkbox-focus-outline: 2px solid #ffffff;\n --hybrid-checkbox-focus-border: 2px solid #161616;\n --hybrid-checkbox-disabled-background-color: #6f6f6f;\n --hybrid-checkbox-disabled-text-color: #6f6f6f;\n }\n\n :host([data-theme=\"dark\"]) {\n --hybrid-checkbox-color: #ffffff;\n }\n`;\n"]}