@visitwonders/assembly 0.1.0

package/dist/form/checkbox.css

@@ -0,0 +1,193 @@
+/* src/form/checkbox.css */
+.wrapper_eed179744 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.label-wrapper_eed179744 {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.wrapper_eed179744[data-disabled="true"] .label-wrapper_eed179744 {
+  cursor: not-allowed;
+}
+
+/* Hide native checkbox */
+.input_eed179744 {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Custom checkbox control */
+.control_eed179744 {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-surface);
+  transition: all 0.15s ease;
+}
+
+/* Sizes */
+.wrapper_eed179744[data-size="sm"] .control_eed179744 {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.wrapper_eed179744[data-size="md"] .control_eed179744 {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+}
+
+.wrapper_eed179744[data-size="lg"] .control_eed179744 {
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+}
+
+/* Hover */
+.label-wrapper_eed179744:hover .control_eed179744 {
+  border-color: var(--color-border-control-hover);
+}
+
+.wrapper_eed179744[data-disabled="true"] .label-wrapper_eed179744:hover .control_eed179744 {
+  border-color: var(--color-border-control-disabled);
+}
+
+/* Focus */
+.input_eed179744:focus-visible + .control_eed179744 {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Checked */
+.input_eed179744:checked + .control_eed179744 {
+  background-color: var(--color-bg-fill-accent);
+  border-color: var(--color-bg-fill-accent);
+}
+
+/* Checked + Hover */
+.label-wrapper_eed179744:hover .input_eed179744:checked + .control_eed179744 {
+  background-color: var(--color-bg-fill-accent-hover);
+  border-color: var(--color-bg-fill-accent-hover);
+}
+
+/* Indeterminate */
+.input_eed179744[aria-checked="mixed"] + .control_eed179744 {
+  background-color: var(--color-bg-fill-accent);
+  border-color: var(--color-bg-fill-accent);
+}
+
+/* Invalid */
+.wrapper_eed179744[data-invalid="true"] .control_eed179744 {
+  border-color: var(--color-border-critical);
+}
+
+.wrapper_eed179744[data-invalid="true"] .input_eed179744:checked + .control_eed179744 {
+  background-color: var(--color-bg-fill-critical);
+  border-color: var(--color-bg-fill-critical);
+}
+
+.wrapper_eed179744[data-invalid="true"] .input_eed179744[aria-checked="mixed"] + .control_eed179744 {
+  background-color: var(--color-bg-fill-critical);
+  border-color: var(--color-bg-fill-critical);
+}
+
+/* Disabled */
+.input_eed179744:disabled + .control_eed179744 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+.input_eed179744:disabled:checked + .control_eed179744 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+}
+
+.input_eed179744:disabled[aria-checked="mixed"] + .control_eed179744 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+}
+
+/* Disabled icon colors */
+.input_eed179744:disabled + .control_eed179744 .check-icon_eed179744,
+.input_eed179744:disabled + .control_eed179744 .indeterminate-icon_eed179744 {
+  background-color: var(--color-text-disabled);
+}
+
+/* Check icon */
+.check-icon_eed179744 {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-text-on-accent);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-size: 80%;
+  mask-position: center;
+  mask-repeat: no-repeat;
+}
+
+/* Indeterminate icon */
+.indeterminate-icon_eed179744 {
+  width: 60%;
+  height: 2px;
+  background-color: var(--color-text-on-accent);
+  border-radius: 1px;
+}
+
+/* Label */
+.label_eed179744 {
+  font-size: var(--font-size-md);
+  color: var(--color-text);
+  line-height: var(--spacing-5);
+}
+
+.wrapper_eed179744[data-size="sm"] .label_eed179744 {
+  font-size: var(--font-size-sm);
+  line-height: var(--spacing-4);
+}
+
+.wrapper_eed179744[data-size="lg"] .label_eed179744 {
+  font-size: var(--font-size-lg);
+  line-height: var(--spacing-6);
+}
+
+.label_eed179744[data-visually-hidden="true"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.wrapper_eed179744[data-disabled="true"] .label_eed179744 {
+  color: var(--color-text-disabled);
+}
+
+/* Description */
+.description_eed179744 {
+  margin-left: calc(var(--spacing-5) + var(--spacing-2));
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+}
+
+.wrapper_eed179744[data-size="sm"] .description_eed179744 {
+  margin-left: calc(var(--spacing-4) + var(--spacing-2));
+}
+
+.wrapper_eed179744[data-size="lg"] .description_eed179744 {
+  margin-left: calc(var(--spacing-6) + var(--spacing-2));
+}

package/dist/form/checkbox.js

@@ -0,0 +1,70 @@
+import "./checkbox.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+class Checkbox extends Component {
+  static {
+    g(this.prototype, "internalChecked", [tracked]);
+  }
+  #internalChecked = (i(this, "internalChecked"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
+    this.internalChecked = args.defaultChecked ?? false;
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get isControlled() {
+    return this.args.isChecked !== undefined;
+  }
+  get checked() {
+    return this.isControlled ? this.args.isChecked ?? false : this.internalChecked;
+  }
+  get ariaChecked() {
+    if (this.args.isIndeterminate) {
+      return 'mixed';
+    }
+    return this.checked ? 'true' : 'false';
+  }
+  get hasLabel() {
+    return !!this.args.label;
+  }
+  get hasDescription() {
+    return !!this.args.description;
+  }
+  /**
+  * Modifier to set the indeterminate property on the input element.
+  * The indeterminate state cannot be set via HTML attribute, only via JS property.
+  */
+  indeterminateModifier = modifier((element, [isIndeterminate]) => {
+    element.indeterminate = isIndeterminate ?? false;
+  });
+  handleChange(event) {
+    const target = event.target;
+    if (!this.isControlled) {
+      this.internalChecked = target.checked;
+    }
+  }
+  static {
+    n(this.prototype, "handleChange", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"wrapper_eed179744\" data-size={{this.size}} data-disabled={{if @isDisabled \"true\"}} data-invalid={{if @isInvalid \"true\"}} data-test-checkbox-wrapper>\n  <label class=\"label-wrapper_eed179744\">\n    <input type=\"checkbox\" class=\"input_eed179744\" id={{@id}} name={{@name}} value={{@value}} checked={{this.checked}} disabled={{@isDisabled}} required={{@isRequired}} aria-checked={{this.ariaChecked}} aria-invalid={{if @isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{@aria-describedby}} {{this.indeterminateModifier @isIndeterminate}} {{on \"change\" this.handleChange}} data-test-checkbox ...attributes />\n    <span class=\"control_eed179744\">\n      {{#if @isIndeterminate}}\n        <span class=\"indeterminate-icon_eed179744\" data-test-indeterminate-icon></span>\n      {{else if this.checked}}\n        <span class=\"check-icon_eed179744\" data-test-check-icon></span>\n      {{/if}}\n    </span>\n    {{#if (has-block)}}\n      <span class=\"label_eed179744\" data-visually-hidden={{if @isLabelHidden \"true\"}} data-test-checkbox-label>\n        {{yield}}\n      </span>\n    {{else if this.hasLabel}}\n      <span class=\"label_eed179744\" data-visually-hidden={{if @isLabelHidden \"true\"}} data-test-checkbox-label>\n        {{@label}}\n      </span>\n    {{/if}}\n  </label>\n\n  {{#if (has-block \"description\")}}\n    <div class=\"description_eed179744\" data-test-checkbox-description>\n      {{yield to=\"description\"}}\n    </div>\n  {{else if this.hasDescription}}\n    <div class=\"description_eed179744\" data-test-checkbox-description>\n      {{@description}}\n    </div>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+
+export { Checkbox as default };
+//# sourceMappingURL=checkbox.js.map

package/dist/form/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/control-css-6c81caf37fd813b36033091d5340bc70.css

@@ -0,0 +1,20 @@
+/* <inline>/src/form/control-css-6c81caf37fd813b36033091d5340bc70.css */
+
+  .assembly-control_e529e8199 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    width: 100%;
+  }
+
+  .assembly-control_e529e8199[data-orientation="horizontal"] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--spacing-6);
+  }
+
+  .assembly-control_e529e8199[data-orientation="horizontal"] .label {
+    flex-shrink: 0;
+    min-width: 120px;
+    padding-top: var(--spacing-2);
+  }

package/dist/form/control.js

@@ -0,0 +1,57 @@
+import "./control-css-6c81caf37fd813b36033091d5340bc70.css"
+import Component from '@glimmer/component';
+import { guidFor } from '@ember/object/internals';
+import { hash } from '@ember/helper';
+import Label from './label.js';
+import Input from './input.js';
+import Textarea from './textarea.js';
+import HelpText from './help-text.js';
+import ErrorMessage from './error-message.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Control extends Component {
+  id = this.args.id || guidFor(this);
+  get helpTextId() {
+    return `${this.id}-help-text`;
+  }
+  get errorMessageId() {
+    return `${this.id}-error-message`;
+  }
+  get ariaDescribedBy() {
+    return `${this.helpTextId} ${this.errorMessageId}`;
+  }
+  get orientation() {
+    return this.args.orientation ?? 'vertical';
+  }
+  get isInvalid() {
+    return this.args.isInvalid ?? false;
+  }
+  get isDisabled() {
+    return this.args.isDisabled ?? false;
+  }
+  get isRequired() {
+    return this.args.isRequired ?? false;
+  }
+  get isReadOnly() {
+    return this.args.isReadOnly ?? false;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"assembly-control_e529e8199\" data-orientation={{this.orientation}} data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if this.isDisabled \"true\" \"false\"}} data-required={{if this.isRequired \"true\" \"false\"}} data-readonly={{if this.isReadOnly \"true\" \"false\"}} data-test-form-control ...attributes>\n  {{yield (hash Label=(component Label for=this.id isRequired=this.isRequired isDisabled=this.isDisabled) Input=(component Input id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) Textarea=(component Textarea id=this.id isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly isInvalid=this.isInvalid aria-describedby=this.ariaDescribedBy) HelpText=(component HelpText id=this.helpTextId) ErrorMessage=(component ErrorMessage id=this.errorMessageId isInvalid=this.isInvalid) id=this.id isInvalid=this.isInvalid isDisabled=this.isDisabled isRequired=this.isRequired isReadOnly=this.isReadOnly)}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        Label,
+        Input,
+        Textarea,
+        HelpText,
+        ErrorMessage
+      })
+    }), this);
+  }
+}
+
+export { Control as default };
+//# sourceMappingURL=control.js.map

package/dist/form/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}