@licklist/design 0.78.5-dev.68 → 0.78.5-dev.69

package/dist/index.js

@@ -235,6 +235,7 @@ export { DeleteModal } from './v2/components/Modal/DeleteModal.js';
 export { FormField } from './v2/components/FormField/FormField.js';
 export { NewInput } from './v2/components/NewInput/NewInput.js';
 export { Checkbox } from './v2/components/Checkbox/Checkbox.js';
+export { InputCheckbox } from './v2/components/InputCheckbox/InputCheckbox.js';
 export { WYSIWYGEditor } from './v2/components/WYSIWYGEditor/WYSIWYGEditor.js';
 export { NewPageHeader } from './v2/components/NewPageHeader/NewPageHeader.js';
 export { SectionHeader } from './v2/components/SectionHeader/SectionHeader.js';

package/dist/v2/components/InputCheckbox/InputCheckbox.d.ts

@@ -0,0 +1,7 @@
+import React, { InputHTMLAttributes } from 'react';
+import './InputCheckbox.scss';
+export interface InputCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string | React.ReactNode;
+}
+export declare const InputCheckbox: React.ForwardRefExoticComponent<InputCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=InputCheckbox.d.ts.map

package/dist/v2/components/InputCheckbox/InputCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/InputCheckbox/InputCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAc,MAAM,OAAO,CAAA;AAC9D,OAAO,sBAAsB,CAAA;AAE7B,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;CACjC;AAED,eAAO,MAAM,aAAa,6FAazB,CAAA"}

package/dist/v2/components/InputCheckbox/InputCheckbox.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import './InputCheckbox.scss.js';
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var InputCheckbox = /*#__PURE__*/ forwardRef(function(_param, ref) {
+    var label = _param.label, _param_className = _param.className, className = _param_className === void 0 ? '' : _param_className, props = _object_without_properties(_param, [
+        "label",
+        "className"
+    ]);
+    return /*#__PURE__*/ jsxs("label", {
+        className: "input-checkbox ".concat(className),
+        children: [
+            /*#__PURE__*/ jsx("input", _object_spread({
+                ref: ref,
+                type: "checkbox",
+                className: "input-checkbox__input"
+            }, props)),
+            /*#__PURE__*/ jsx("span", {
+                className: "input-checkbox__box"
+            }),
+            label && /*#__PURE__*/ jsx("span", {
+                className: "input-checkbox__label",
+                children: label
+            })
+        ]
+    });
+});
+InputCheckbox.displayName = 'InputCheckbox';
+
+export { InputCheckbox };

package/dist/v2/components/InputCheckbox/InputCheckbox.scss.js

@@ -0,0 +1,6 @@
+import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".input-checkbox{align-items:center;cursor:pointer;display:flex;gap:6px;-webkit-user-select:none;user-select:none}.input-checkbox__input{height:0;opacity:0;position:absolute;width:0}.input-checkbox__box{background:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e2e2e2);border-radius:3px;height:16px;min-width:16px;position:relative;transition:all .15s ease;width:16px}.input-checkbox__box:after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:9px;left:4.5px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);width:5px}.input-checkbox__input:checked+.input-checkbox__box{background:var(--fill-selected,#14215a);border-color:var(--fill-selected,#14215a)}.input-checkbox__input:checked+.input-checkbox__box:after{opacity:1}.input-checkbox__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:14px}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/dist/v2/components/InputCheckbox/index.d.ts

@@ -0,0 +1,3 @@
+export { InputCheckbox } from './InputCheckbox';
+export type { InputCheckboxProps } from './InputCheckbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/components/InputCheckbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/InputCheckbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/v2/components/index.d.ts

@@ -18,6 +18,8 @@ export { NewInput } from './NewInput';
 export type { NewInputProps } from './NewInput';
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
+export { InputCheckbox } from './InputCheckbox';
+export type { InputCheckboxProps } from './InputCheckbox';
 export { WYSIWYGEditor } from './WYSIWYGEditor';
 export type { WYSIWYGEditorProps } from './WYSIWYGEditor';
 export { NewPageHeader } from './NewPageHeader';

package/dist/v2/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v2/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE/D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGzD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC1D,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAE9E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAChG,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AAG7J,OAAO,EACL,QAAQ,EACR,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,SAAS,EACV,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/v2/components/index.ts"],"names":[],"mappings":"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"}

package/dist/v2/pages/Settings/components/SidebarCustomisation.js

@@ -14,6 +14,7 @@ import '../../../components/Modal/DeleteModal.scss.js';
 import '../../../components/NewInput/NewInput.js';
 import '../../../components/FormField/FormField.js';
 import '../../../components/Checkbox/Checkbox.js';
+import '../../../components/InputCheckbox/InputCheckbox.js';
 import '../../../components/WYSIWYGEditor/WYSIWYGEditor.scss.js';
 import '../../../components/NewPageHeader/NewPageHeader.scss.js';
 import '../../../components/SectionHeader/SectionHeader.scss.js';

package/dist/v2/pages/Settings/components/SidebarNavItem.js

@@ -11,6 +11,7 @@ import '../../../components/Modal/DeleteModal.scss.js';
 import '../../../components/NewInput/NewInput.js';
 import { FormField } from '../../../components/FormField/FormField.js';
 import '../../../components/Checkbox/Checkbox.js';
+import '../../../components/InputCheckbox/InputCheckbox.js';
 import '../../../components/WYSIWYGEditor/WYSIWYGEditor.scss.js';
 import '../../../components/NewPageHeader/NewPageHeader.scss.js';
 import '../../../components/SectionHeader/SectionHeader.scss.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.68",
+  "version": "0.78.5-dev.69",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"

package/src/v2/components/InputCheckbox/InputCheckbox.scss

@@ -0,0 +1,53 @@
+.input-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__box {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    border: 1px solid var(--border-primary, #e2e2e2);
+    border-radius: 3px;
+    background: var(--surface-primary, #fff);
+    transition: all 0.15s ease;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 1px;
+      left: 4.5px;
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+  }
+
+  &__input:checked + &__box {
+    background: var(--fill-selected, #14215a);
+    border-color: var(--fill-selected, #14215a);
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &__label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-primary, #121e52);
+  }
+}

package/src/v2/components/InputCheckbox/InputCheckbox.tsx

@@ -0,0 +1,24 @@
+import React, { InputHTMLAttributes, forwardRef } from 'react'
+import './InputCheckbox.scss'
+
+export interface InputCheckboxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string | React.ReactNode
+}
+
+export const InputCheckbox = forwardRef<HTMLInputElement, InputCheckboxProps>(
+  ({ label, className = '', ...props }, ref) => (
+    <label className={`input-checkbox ${className}`}>
+      <input
+        ref={ref}
+        type="checkbox"
+        className="input-checkbox__input"
+        {...props}
+      />
+      <span className="input-checkbox__box" />
+      {label && <span className="input-checkbox__label">{label}</span>}
+    </label>
+  ),
+)
+
+InputCheckbox.displayName = 'InputCheckbox'

package/src/v2/components/InputCheckbox/index.ts

@@ -0,0 +1,2 @@
+export { InputCheckbox } from './InputCheckbox'
+export type { InputCheckboxProps } from './InputCheckbox'

package/src/v2/components/index.ts

@@ -30,6 +30,9 @@ export type { NewInputProps } from './NewInput'
 export { Checkbox } from './Checkbox'
 export type { CheckboxProps } from './Checkbox'
 
+export { InputCheckbox } from './InputCheckbox'
+export type { InputCheckboxProps } from './InputCheckbox'
+
 export { WYSIWYGEditor } from './WYSIWYGEditor'
 export type { WYSIWYGEditorProps } from './WYSIWYGEditor'