@onereach/ui-components 8.3.1 → 8.4.0-beta.3653.0

package/dist/bundled/v2/components/OrColorPicker-a8fd02f4.js

@@ -0,0 +1,492 @@
+import { defineComponent, ref } from 'vue-demi';
+import { a as useToggle, o as onClickOutside } from './OrBottomSheetV3-a3df65d0.js';
+import { _ as __vue_component__$1, O as OrFloatingPlacements } from './OrFloating-b7306559.js';
+import { s as styleInject, n as normalizeComponent } from './OrAvatar-56c993c9.js';
+
+const red = {
+  50: '#FFEBEE',
+  100: '#FFCDD2',
+  200: '#EF9A9A',
+  300: '#E57373',
+  400: '#EF5350',
+  500: '#F44336',
+  600: '#E53935',
+  700: '#D32F2F',
+  800: '#C62828',
+  900: '#B71C1C',
+  A100: '#FF8A80',
+  A200: '#FF5252',
+  A400: '#FF1744',
+  A700: '#D50000'
+};
+const pink = {
+  50: '#FCE4EC',
+  100: '#F8BBD0',
+  200: '#F48FB1',
+  300: '#F06292',
+  400: '#EC407A',
+  500: '#E91E63',
+  600: '#D81B60',
+  700: '#C2185B',
+  800: '#AD1457',
+  900: '#880E4F',
+  A100: '#FF80AB',
+  A200: '#FF4081',
+  A400: '#F50057',
+  A700: '#C51162'
+};
+const purple = {
+  50: '#F3E5F5',
+  100: '#E1BEE7',
+  200: '#CE93D8',
+  300: '#BA68C8',
+  400: '#AB47BC',
+  500: '#9C27B0',
+  600: '#8E24AA',
+  700: '#7B1FA2',
+  800: '#6A1B9A',
+  900: '#4A148C',
+  A100: '#EA80FC',
+  A200: '#E040FB',
+  A400: '#D500F9',
+  A700: '#AA00FF'
+};
+const deepPurple = {
+  50: '#EDE7F6',
+  100: '#D1C4E9',
+  200: '#B39DDB',
+  300: '#9575CD',
+  400: '#7E57C2',
+  500: '#673AB7',
+  600: '#5E35B1',
+  700: '#512DA8',
+  800: '#4527A0',
+  900: '#311B92',
+  A100: '#B388FF',
+  A200: '#7C4DFF',
+  A400: '#651FFF',
+  A700: '#6200EA'
+};
+const indigo = {
+  50: '#E8EAF6',
+  100: '#C5CAE9',
+  200: '#9FA8DA',
+  300: '#7986CB',
+  400: '#5C6BC0',
+  500: '#3F51B5',
+  600: '#3949AB',
+  700: '#303F9F',
+  800: '#283593',
+  900: '#1A237E',
+  A100: '#8C9EFF',
+  A200: '#536DFE',
+  A400: '#3D5AFE',
+  A700: '#304FFE'
+};
+const blue = {
+  50: '#E3F2FD',
+  100: '#BBDEFB',
+  200: '#90CAF9',
+  300: '#64B5F6',
+  400: '#42A5F5',
+  500: '#2196F3',
+  600: '#1E88E5',
+  700: '#1976D2',
+  800: '#1565C0',
+  900: '#0D47A1',
+  A100: '#82B1FF',
+  A200: '#448AFF',
+  A400: '#2979FF',
+  A700: '#2962FF'
+};
+const lightBlue = {
+  50: '#E1F5FE',
+  100: '#B3E5FC',
+  200: '#81D4FA',
+  300: '#4FC3F7',
+  400: '#29B6F6',
+  500: '#03A9F4',
+  600: '#039BE5',
+  700: '#0288D1',
+  800: '#0277BD',
+  900: '#01579B',
+  A100: '#80D8FF',
+  A200: '#40C4FF',
+  A400: '#00B0FF',
+  A700: '#0091EA'
+};
+const cyan = {
+  50: '#E0F7FA',
+  100: '#B2EBF2',
+  200: '#80DEEA',
+  300: '#4DD0E1',
+  400: '#26C6DA',
+  500: '#00BCD4',
+  600: '#00ACC1',
+  700: '#0097A7',
+  800: '#00838F',
+  900: '#006064',
+  A100: '#84FFFF',
+  A200: '#18FFFF',
+  A400: '#00E5FF',
+  A700: '#00B8D4'
+};
+const teal = {
+  50: '#E0F2F1',
+  100: '#B2DFDB',
+  200: '#80CBC4',
+  300: '#4DB6AC',
+  400: '#26A69A',
+  500: '#009688',
+  600: '#00897B',
+  700: '#00796B',
+  800: '#00695C',
+  900: '#004D40',
+  A100: '#A7FFEB',
+  A200: '#64FFDA',
+  A400: '#1DE9B6',
+  A700: '#00BFA5'
+};
+const green = {
+  50: '#E8F5E9',
+  100: '#C8E6C9',
+  200: '#A5D6A7',
+  300: '#81C784',
+  400: '#66BB6A',
+  500: '#4CAF50',
+  600: '#43A047',
+  700: '#388E3C',
+  800: '#2E7D32',
+  900: '#1B5E20',
+  A100: '#B9F6CA',
+  A200: '#69F0AE',
+  A400: '#00E676',
+  A700: '#00C853'
+};
+const lightGreen = {
+  50: '#F1F8E9',
+  100: '#DCEDC8',
+  200: '#C5E1A5',
+  300: '#AED581',
+  400: '#9CCC65',
+  500: '#8BC34A',
+  600: '#7CB342',
+  700: '#689F38',
+  800: '#558B2F',
+  900: '#33691E',
+  A100: '#CCFF90',
+  A200: '#B2FF59',
+  A400: '#76FF03',
+  A700: '#64DD17'
+};
+const lime = {
+  50: '#F9FBE7',
+  100: '#F0F4C3',
+  200: '#E6EE9C',
+  300: '#DCE775',
+  400: '#D4E157',
+  500: '#CDDC39',
+  600: '#C0CA33',
+  700: '#AFB42B',
+  800: '#9E9D24',
+  900: '#827717',
+  A100: '#F4FF81',
+  A200: '#EEFF41',
+  A400: '#C6FF00',
+  A700: '#AEEA00'
+};
+const yellow = {
+  50: '#FFFDE7',
+  100: '#FFF9C4',
+  200: '#FFF59D',
+  300: '#FFF176',
+  400: '#FFEE58',
+  500: '#FFEB3B',
+  600: '#FDD835',
+  700: '#FBC02D',
+  800: '#F9A825',
+  900: '#F57F17',
+  A100: '#FFFF8D',
+  A200: '#FFFF00',
+  A400: '#FFEA00',
+  A700: '#FFD600'
+};
+const amber = {
+  50: '#FFF8E1',
+  100: '#FFECB3',
+  200: '#FFE082',
+  300: '#FFD54F',
+  400: '#FFCA28',
+  500: '#FFC107',
+  600: '#FFB300',
+  700: '#FFA000',
+  800: '#FF8F00',
+  900: '#FF6F00',
+  A100: '#FFE57F',
+  A200: '#FFD740',
+  A400: '#FFC400',
+  A700: '#FFAB00'
+};
+const orange = {
+  50: '#FFF3E0',
+  100: '#FFE0B2',
+  200: '#FFCC80',
+  300: '#FFB74D',
+  400: '#FFA726',
+  500: '#FF9800',
+  600: '#FB8C00',
+  700: '#F57C00',
+  800: '#EF6C00',
+  900: '#E65100',
+  A100: '#FFD180',
+  A200: '#FFAB40',
+  A400: '#FF9100',
+  A700: '#FF6D00'
+};
+const deepOrange = {
+  50: '#FBE9E7',
+  100: '#FFCCBC',
+  200: '#FFAB91',
+  300: '#FF8A65',
+  400: '#FF7043',
+  500: '#FF5722',
+  600: '#F4511E',
+  700: '#E64A19',
+  800: '#D84315',
+  900: '#BF360C',
+  A100: '#FF9E80',
+  A200: '#FF6E40',
+  A400: '#FF3D00',
+  A700: '#DD2C00'
+};
+const brown = {
+  50: '#EFEBE9',
+  100: '#D7CCC8',
+  200: '#BCAAA4',
+  300: '#A1887F',
+  400: '#8D6E63',
+  500: '#795548',
+  600: '#6D4C41',
+  700: '#5D4037',
+  800: '#4E342E',
+  900: '#3E2723'
+};
+const blueGrey = {
+  50: '#ECEFF1',
+  100: '#CFD8DC',
+  200: '#B0BEC5',
+  300: '#90A4AE',
+  400: '#78909C',
+  500: '#607D8B',
+  600: '#546E7A',
+  700: '#455A64',
+  800: '#37474F',
+  900: '#263238'
+};
+// export const grey = {
+//   50: '#FAFAFA',
+//   100: '#F5F5F5',
+//   200: '#EEEEEE',
+//   300: '#E0E0E0',
+//   400: '#BDBDBD',
+//   500: '#9E9E9E',
+//   600: '#757575',
+//   700: '#616161',
+//   800: '#424242',
+//   900: '#212121',
+// };
+const black = {
+  default: '#000000'
+};
+const white = {
+  default: '#FFFFFF'
+};
+var Palette = {
+  red,
+  pink,
+  purple,
+  deepPurple,
+  indigo,
+  blue,
+  lightBlue,
+  cyan,
+  teal,
+  green,
+  lightGreen,
+  lime,
+  yellow,
+  amber,
+  orange,
+  deepOrange,
+  brown,
+  blueGrey,
+  // grey,
+  black,
+  white
+};
+
+const defaultTones = ['900', '700', '500', '300', '100'];
+function defaultPalette() {
+  return Object.entries(Palette).reduce((acc, _ref) => {
+    let [color, schema] = _ref;
+    if (color === 'black' || color === 'white') {
+      acc.push([Palette[color].default]);
+    } else {
+      acc.push(defaultTones === null || defaultTones === void 0 ? void 0 : defaultTones.map(tone => schema[tone]));
+    }
+    return acc;
+  }, []);
+}
+
+var script = defineComponent({
+  name: 'OrColorPicker',
+  components: {
+    OrFloating: __vue_component__$1
+  },
+  props: {
+    palette: {
+      type: Object,
+      default: defaultPalette
+    },
+    defaultColor: {
+      type: String,
+      default: '#fff'
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: OrFloatingPlacements.BOTTOM_START
+    }
+  },
+  emits: ['select'],
+  setup() {
+    const selected = ref(null);
+    const [isActive, toggle] = useToggle(false);
+    const trigger = ref(null);
+    onClickOutside(trigger, () => {
+      if (isActive.value) toggle();
+    });
+    return {
+      trigger,
+      toggle,
+      isActive,
+      selected
+    };
+  },
+  computed: {},
+  methods: {
+    getClass(tone) {
+      return ['or-color-picker-color-it', {
+        'or-color-picker-color--white': tone === Palette.white.default
+      }];
+    },
+    handlerClick(color) {
+      this.selected = color;
+      this.$emit('select', color);
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-7932e202{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-7932e202{from{opacity:1}to{opacity:0}}.color-container[data-v-7932e202]{position:relative}.color-container .tag__color[data-v-7932e202]{width:20px;height:20px;margin-right:10px;border:var(--s-1) solid var(--c-neutral-0-darken-3);border-radius:50%;cursor:pointer}.or-color-picker-box[data-v-7932e202]{max-height:244px;max-width:312px;overflow-y:scroll;background-color:var(--c-neutral-0);box-shadow:0 2px 10px rgba(0,0,0,.12),0 2px 5px rgba(0,0,0,.16);padding:var(--s-4);display:flex;gap:var(--s-3);flex-wrap:wrap}.or-color-picker-box .or-color-picker-color-group[data-v-7932e202]{width:40px;float:left}.or-color-picker-box .or-color-picker-color-group .or-color-picker-color-it[data-v-7932e202]{box-sizing:border-box;width:40px;height:24px;cursor:pointer;margin-bottom:1px;overflow:hidden;border-radius:var(--s-1) var(--s-1) 0 0}.or-color-picker-box .or-color-picker-color-group .or-color-picker-color--white[data-v-7932e202]{border:1px solid #ddd}.or-color-picker-box .or-color-picker-color-group .or-color-picker-pick[data-v-7932e202]{fill:#fff;margin-left:8px;display:block}.or-color-picker-box .or-color-picker-color-group .or-color-picker-color--white .or-color-picker-pick[data-v-7932e202]{fill:#333}";
+styleInject(css_248z);
+
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    staticClass: "color-container"
+  }, [_c('div', {
+    ref: "trigger",
+    staticClass: "tag__color",
+    style: {
+      backgroundColor: _vm.selected || _vm.defaultColor
+    },
+    on: {
+      "click": function ($event) {
+        $event.preventDefault();
+        return _vm.toggle.apply(null, arguments);
+      }
+    }
+  }), _vm._v(" "), _vm.isActive ? _c('or-floating', {
+    attrs: {
+      "trigger": _vm.trigger,
+      "offset": 8,
+      "placement": _vm.placement,
+      "is-using-shift": "",
+      "is-using-flip": ""
+    }
+  }, [_c('div', {
+    staticClass: "or-color-picker-box"
+  }, _vm._l(_vm.palette, function (group, idx) {
+    return _c('div', {
+      key: idx,
+      staticClass: "or-color-picker-color-group"
+    }, _vm._l(group, function (color) {
+      return _c('div', {
+        key: color,
+        class: _vm.getClass(color),
+        style: {
+          background: color
+        },
+        attrs: {
+          "role": "option",
+          "aria-label": 'Color:' + color,
+          "aria-selected": color === _vm.selected,
+          "data-color": color
+        },
+        on: {
+          "click": function ($event) {
+            $event.preventDefault();
+            return _vm.handlerClick(color);
+          }
+        }
+      }, [_c('div', {
+        directives: [{
+          name: "show",
+          rawName: "v-show",
+          value: color === _vm.selected,
+          expression: "color === selected"
+        }],
+        staticClass: "or-color-picker-pick"
+      }, [_c('svg', {
+        staticStyle: {
+          "width": "24px",
+          "height": "24px"
+        },
+        attrs: {
+          "viewBox": "0 0 24 24"
+        }
+      }, [_c('path', {
+        attrs: {
+          "d": "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+        }
+      })])])]);
+    }), 0);
+  }), 0)]) : _vm._e()], 1);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-7932e202";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { Palette as P, __vue_component__ as _, purple as a, blue as b, cyan as c, deepPurple as d, lightGreen as e, lime as f, green as g, amber as h, indigo as i, deepOrange as j, brown as k, lightBlue as l, blueGrey as m, black as n, orange as o, pink as p, defaultPalette as q, red as r, teal as t, white as w, yellow as y };

package/dist/bundled/v2/components/OrCombinedInputV3/OrCombinedInput.js

@@ -1,144 +1,2 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { CombinedInput, CombinedInputControlGroup } from './styles.js';
-import __vue_component__$1 from '../OrErrorV3/OrError.js';
-import __vue_component__$2 from '../OrHintV3/OrHint.js';
-import __vue_component__$3 from '../OrLabelV3/OrLabel.js';
-import { InputBoxSize } from '../OrInputBoxV3/props.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-
-var script = defineComponent({
-  name: 'OrCombinedInput',
-  components: {
-    OrError: __vue_component__$1,
-    OrHint: __vue_component__$2,
-    OrLabel: __vue_component__$3
-  },
-  props: {
-    size: {
-      type: String,
-      default: InputBoxSize.M
-    },
-    label: {
-      type: String,
-      default: undefined
-    },
-    hint: {
-      type: String,
-      default: undefined
-    },
-    error: {
-      type: [String, Boolean],
-      default: undefined
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-combined-input-v3', ...CombinedInput]);
-    const controlGroup = computed(() => [...CombinedInputControlGroup]);
-    return {
-      root,
-      rootStyles,
-      controlGroup
-    };
-  }
-});
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('div', {
-    ref: "root",
-    class: _vm.rootStyles
-  }, [_vm.label ? [_c('OrLabel', {
-    attrs: {
-      "variant": 'input',
-      "required": _vm.required,
-      "disabled": _vm.disabled
-    },
-    scopedSlots: _vm._u([{
-      key: "addon",
-      fn: function () {
-        return [_vm._t("addon")];
-      },
-      proxy: true
-    }], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('div', {
-    class: _vm.controlGroup
-  }, [_vm._t("default", null, {
-    "size": _vm.size,
-    "error": !!_vm.error,
-    "required": _vm.required,
-    "readonly": _vm.readonly,
-    "disabled": _vm.disabled,
-    "disableDefaultStyles": _vm.disableDefaultStyles
-  })], 2), _vm._v(" "), _c('div', {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.error,
-      expression: "!error"
-    }],
-    class: ['contents']
-  }, [_vm.hint ? [_c('OrHint', {
-    attrs: {
-      "disabled": _vm.disabled
-    }
-  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")])] : _vm._e()], 2), _vm._v(" "), _c('div', {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: typeof _vm.error === 'string',
-      expression: "typeof error === 'string'"
-    }],
-    class: ['contents']
-  }, [_c('OrError', {
-    attrs: {
-      "disabled": _vm.disabled
-    }
-  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])], 1)], 2);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = undefined;
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { __vue_component__ as default };
+export { _ as default } from '../OrCombinedInputV3-385b36b7.js';
+import '../OrAvatar-56c993c9.js';

package/dist/bundled/v2/components/OrCombinedInputV3/index.js

@@ -1,2 +1,2 @@
-export { default as OrCombinedInputV3 } from './OrCombinedInput.js';
-export { InputBoxSize as CombinedInputSize } from '../OrInputBoxV3/props.js';
+export { _ as OrCombinedInputV3 } from '../OrCombinedInputV3-385b36b7.js';
+export { I as CombinedInputSize } from '../OrInputBoxV3-2ed5bb91.js';

package/dist/bundled/v2/components/OrCombinedInputV3/props.js

@@ -1 +1 @@
-export { InputBoxSize as CombinedInputSize } from '../OrInputBoxV3/props.js';
+export { I as CombinedInputSize } from '../OrInputBoxV3-2ed5bb91.js';

package/dist/bundled/v2/components/OrCombinedInputV3/styles.js

@@ -1,16 +1 @@
-const CombinedInput = [
-// Layout
-'layout-column',
-// Spacing
-'gap-xs'];
-const CombinedInputControlGroup = [
-// Layout
-'layout-row',
-// Box
-'w-full',
-// Shape (.or-input-box-v3)
-'[&_.or-input-box-v3]:first-child:rounded-r-none', '[&_.or-input-box-v3]:middle-child:rounded-none', '[&_.or-input-box-v3]:last-child:rounded-l-none',
-// Spacing (.or-input-box-v3)
-'[&_.or-input-box-v3]:first-child:mr-[-1px]', '[&_.or-input-box-v3]:middle-child:border-x-0', '[&_.or-input-box-v3]:last-child:ml-[-1px]'];
-
-export { CombinedInput, CombinedInputControlGroup };
+export { C as CombinedInput, a as CombinedInputControlGroup } from '../OrCombinedInputV3-385b36b7.js';