@ikas/core 1.0.8 → 1.0.9

package/dist/index89.js

@@ -1,60 +1,171 @@
-import s from "react";
-import v from "./index153.js";
-import y from "./index143.js";
-import C from "./index154.js";
-import "./index144.js";
-import "./index145.js";
-import "./index146.js";
-import { Hue as P } from "./index147.js";
-import "./index148.js";
-import "./index149.js";
-import { ColorWrap as w } from "./index150.js";
-import "./index151.js";
-import { SliderPointer as x } from "./index166.js";
-var N = Object.assign || function(i) {
+import t from "react";
+import i from "./index161.js";
+import y from "./index151.js";
+import E from "./index162.js";
+import { Alpha as w } from "./index152.js";
+import { Checkboard as C } from "./index153.js";
+import "./index154.js";
+import { Hue as A } from "./index155.js";
+import "./index156.js";
+import { Saturation as S } from "./index157.js";
+import { ColorWrap as k } from "./index158.js";
+import "./index159.js";
+import { SketchFields as F } from "./index180.js";
+import { SketchPresetColors as B } from "./index181.js";
+var H = Object.assign || function(p) {
   for (var e = 1; e < arguments.length; e++) {
-    var t = arguments[e];
-    for (var r in t)
-      Object.prototype.hasOwnProperty.call(t, r) && (i[r] = t[r]);
+    var o = arguments[e];
+    for (var a in o)
+      Object.prototype.hasOwnProperty.call(o, a) && (p[a] = o[a]);
   }
-  return i;
-}, o = function(e) {
-  var t = e.width, r = e.height, h = e.onChange, l = e.hsl, m = e.direction, c = e.pointer, n = e.styles, d = n === void 0 ? {} : n, a = e.className, u = a === void 0 ? "" : a, p = y(C({
-    default: {
+  return p;
+}, n = function(e) {
+  var o = e.width, a = e.rgb, x = e.hex, g = e.hsv, l = e.hsl, s = e.onChange, b = e.onSwatchHover, h = e.disableAlpha, u = e.presetColors, v = e.renderers, d = e.styles, m = d === void 0 ? {} : d, c = e.className, f = c === void 0 ? "" : c, r = y(E({
+    default: H({
       picker: {
+        width: o,
+        padding: "10px 10px 0",
+        boxSizing: "initial",
+        background: "#fff",
+        borderRadius: "4px",
+        boxShadow: "0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"
+      },
+      saturation: {
+        width: "100%",
+        paddingBottom: "75%",
+        position: "relative",
+        overflow: "hidden"
+      },
+      Saturation: {
+        radius: "3px",
+        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
+      },
+      controls: {
+        display: "flex"
+      },
+      sliders: {
+        padding: "4px 0",
+        flex: "1"
+      },
+      color: {
+        width: "24px",
+        height: "24px",
+        position: "relative",
+        marginTop: "4px",
+        marginLeft: "4px",
+        borderRadius: "3px"
+      },
+      activeColor: {
+        absolute: "0px 0px 0px 0px",
+        borderRadius: "2px",
+        background: "rgba(" + a.r + "," + a.g + "," + a.b + "," + a.a + ")",
+        boxShadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
+      },
+      hue: {
+        position: "relative",
+        height: "10px",
+        overflow: "hidden"
+      },
+      Hue: {
+        radius: "2px",
+        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
+      },
+      alpha: {
         position: "relative",
-        width: t,
-        height: r
+        height: "10px",
+        marginTop: "4px",
+        overflow: "hidden"
+      },
+      Alpha: {
+        radius: "2px",
+        shadow: "inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"
+      }
+    }, m),
+    disableAlpha: {
+      color: {
+        height: "10px"
       },
       hue: {
-        radius: "2px"
+        height: "10px"
+      },
+      alpha: {
+        display: "none"
       }
     }
-  }, d)), f = function(g) {
-    return h({ a: 1, h: g.h, l: 0.5, s: 1 });
-  };
-  return s.createElement(
+  }, m), { disableAlpha: h });
+  return t.createElement(
     "div",
-    { style: p.picker, className: "hue-picker " + u },
-    s.createElement(P, N({}, p.hue, {
+    { style: r.picker, className: "sketch-picker " + f },
+    t.createElement(
+      "div",
+      { style: r.saturation },
+      t.createElement(S, {
+        style: r.Saturation,
+        hsl: l,
+        hsv: g,
+        onChange: s
+      })
+    ),
+    t.createElement(
+      "div",
+      { style: r.controls, className: "flexbox-fix" },
+      t.createElement(
+        "div",
+        { style: r.sliders },
+        t.createElement(
+          "div",
+          { style: r.hue },
+          t.createElement(A, {
+            style: r.Hue,
+            hsl: l,
+            onChange: s
+          })
+        ),
+        t.createElement(
+          "div",
+          { style: r.alpha },
+          t.createElement(w, {
+            style: r.Alpha,
+            rgb: a,
+            hsl: l,
+            renderers: v,
+            onChange: s
+          })
+        )
+      ),
+      t.createElement(
+        "div",
+        { style: r.color },
+        t.createElement(C, null),
+        t.createElement("div", { style: r.activeColor })
+      )
+    ),
+    t.createElement(F, {
+      rgb: a,
       hsl: l,
-      pointer: c,
-      onChange: f,
-      direction: m
-    }))
+      hex: x,
+      onChange: s,
+      disableAlpha: h
+    }),
+    t.createElement(B, {
+      colors: u,
+      onClick: s,
+      onSwatchHover: b
+    })
   );
 };
-o.propTypes = {
-  styles: v.object
+n.propTypes = {
+  disableAlpha: i.bool,
+  width: i.oneOfType([i.string, i.number]),
+  styles: i.object
 };
-o.defaultProps = {
-  width: "316px",
-  height: "16px",
-  direction: "horizontal",
-  pointer: x,
-  styles: {}
+n.defaultProps = {
+  disableAlpha: !1,
+  width: 200,
+  styles: {},
+  presetColors: ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]
 };
-w(o);
+k(n);
 export {
-  o as HuePicker
+  n as Sketch
 };

package/dist/index9.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),D=require("mobx-react-lite"),c=require("@ikas/ui"),x=require("./index5.cjs"),y=require("./index51.cjs"),S=require("./index52.cjs"),j=require("./index53.cjs"),k="[overflow-x:visible] [overflow-y:clip] [overflow-clip-margin:8px] [&>*]:animate-fade-in";function T(){return t.jsx("div",{className:`flex items-center justify-center w-full min-h-[320px] ${k}`,children:t.jsx(c.InlineSpinner,{level:"section"})})}function E({children:n}){return t.jsx("div",{className:`flex flex-col min-w-full ${k}`,children:n})}const w=D.observer(function(i){const{model:e,style:u,emptyStateIcon:f}=i,d=e.columnDefinitions.some(r=>r.summaryText);return t.jsx("div",{className:"ikas-datatable-rows [&_*]:box-border [&_*]:break-words",style:u,children:t.jsxs("div",{className:"min-w-full flex flex-col",children:[t.jsx(y.Row,{isHeader:!0,model:e}),e.showLoader?t.jsx(T,{}):t.jsxs(E,{children:[e.isDraggable&&t.jsx(c.DragAndDrop,{keyPath:e.idKey,droppableId:"droppable",draggableData:e.displayedData,getItemStyle:(r,a)=>a??{},isDragDisabled:r=>e.displayedColumnDefinitions.findIndex(a=>{var s;return(s=a.isDragDisabled)==null?void 0:s.call(a,r)})>-1,onDragEnd:e.onDragEnd,children:(r,a)=>t.jsx(y.Row,{rowData:r,model:e,isLast:a===e.displayedData.length-1},String(e.getRowId(r)??a))}),!e.isDraggable&&e.displayedData.map((r,a)=>t.jsx(y.Row,{rowData:r,model:e,isLast:a===e.displayedData.length-1},String(e.getRowId(r)??a))),e.isAppliedFilterOrSearchEmptyStateVisible&&t.jsx(c.EmptyState,{type:"inner",icon:f,title:e.filterNoDataTitle??x.coreTranslations.datatable.filterNoDataTitle,subTitle:e.filterNoDataDescription??x.coreTranslations.datatable.filterNoDataDescription,style:e.showEmptyRowUI?{padding:"48px 24px"}:void 0,children:e.filterNoDataButtonText&&e.onFilterNoDataButtonClick&&t.jsx(c.Button,{variant:"primary",onClick:e.onFilterNoDataButtonClick,children:e.filterNoDataButtonText})}),d&&!e.isAppliedFilterOrSearchEmptyStateVisible&&t.jsx(y.Row,{isSummary:!0,model:e})]})]})})});function v(n){let i=(n==null?void 0:n.parentElement)??null;for(;i;){const e=getComputedStyle(i);if(e.overflow==="auto"||e.overflow==="scroll"||e.overflowX==="auto"||e.overflowX==="scroll")return i;i=i.parentElement}return null}function N(n){var g;const{model:i,filterSearchStyle:e,rowsStyle:u,footerStyle:f,emptyStateIcon:d,filterSearchLeftContent:r,filterSearchRightContent:a,usePageScroll:s}=n,o=p.useRef(null),[I,h]=p.useState(!1),m=p.useCallback(()=>{if(s){const l=v(o.current);l&&h(l.scrollLeft>0)}else{const l=o.current;l&&h(l.scrollLeft>0)}},[s]);if(p.useEffect(()=>{const l=s?v(o.current):o.current;if(l)return l.addEventListener("scroll",m,{passive:!0}),()=>l.removeEventListener("scroll",m)},[m,s]),(g=i.filterManager)!=null&&g.isTabsLoading||i.showLoader&&!i.isInitialized)return t.jsx(T,{});if(!i.isInitialized)return null;if(i.isEmptyStateVisible)return t.jsx(E,{children:t.jsx(c.EmptyState,{type:"inner",icon:d,title:i.emptyTitle??x.coreTranslations.datatable.noData,subTitle:i.emptyDescription??void 0,children:i.emptyButtonText&&i.onEmptyButtonClick&&t.jsx(c.Button,{variant:"primary",onClick:i.onEmptyButtonClick,children:i.emptyButtonText})})});const b={"--datatable-sticky-shadow":I?"8px 0px 5px 0 rgba(132, 153, 193, 0.15)":"none"};return s?t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:o,className:"ikas-datatable-filter-search",style:{position:"sticky",left:0,zIndex:5},children:t.jsx(S.FilterSearch,{model:i,style:e,filterSearchLeftContent:r,filterSearchRightContent:a})}),t.jsx(w,{model:i,style:{...u,...b},emptyStateIcon:d}),t.jsx("div",{className:"ikas-datatable-footer",style:{width:"100%",position:"sticky",left:0,zIndex:4,...f},children:i.isPaginationEnabled&&t.jsx(j.Paginator,{model:i})})]}):t.jsxs("div",{ref:o,className:"ikas-datatable h-full overflow-auto",style:{height:"100%",overflow:"auto",...b},children:[t.jsx("div",{className:"ikas-datatable-filter-search sticky left-0 z-[5]",children:t.jsx(S.FilterSearch,{model:i,style:e,filterSearchLeftContent:r,filterSearchRightContent:a})}),t.jsx(w,{model:i,style:u,emptyStateIcon:d}),t.jsx("div",{className:"ikas-datatable-footer w-full sticky bottom-0 left-0",style:{position:"sticky",bottom:0,left:0,zIndex:4,...f},children:i.isPaginationEnabled&&t.jsx(j.Paginator,{model:i})})]})}const R=D.observer(N);exports.DataTable=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),D=require("mobx-react-lite"),c=require("@ikas/ui"),x=require("./index5.cjs"),y=require("./index49.cjs"),S=require("./index50.cjs"),j=require("./index51.cjs"),k="[overflow-x:visible] [overflow-y:clip] [overflow-clip-margin:8px] [&>*]:animate-fade-in";function T(){return t.jsx("div",{className:`flex items-center justify-center w-full min-h-[320px] ${k}`,children:t.jsx(c.InlineSpinner,{level:"section"})})}function E({children:n}){return t.jsx("div",{className:`flex flex-col min-w-full ${k}`,children:n})}const w=D.observer(function(i){const{model:e,style:u,emptyStateIcon:f}=i,d=e.columnDefinitions.some(r=>r.summaryText);return t.jsx("div",{className:"ikas-datatable-rows [&_*]:box-border [&_*]:break-words",style:u,children:t.jsxs("div",{className:"min-w-full flex flex-col",children:[t.jsx(y.Row,{isHeader:!0,model:e}),e.showLoader?t.jsx(T,{}):t.jsxs(E,{children:[e.isDraggable&&t.jsx(c.DragAndDrop,{keyPath:e.idKey,droppableId:"droppable",draggableData:e.displayedData,getItemStyle:(r,a)=>a??{},isDragDisabled:r=>e.displayedColumnDefinitions.findIndex(a=>{var s;return(s=a.isDragDisabled)==null?void 0:s.call(a,r)})>-1,onDragEnd:e.onDragEnd,children:(r,a)=>t.jsx(y.Row,{rowData:r,model:e,isLast:a===e.displayedData.length-1},String(e.getRowId(r)??a))}),!e.isDraggable&&e.displayedData.map((r,a)=>t.jsx(y.Row,{rowData:r,model:e,isLast:a===e.displayedData.length-1},String(e.getRowId(r)??a))),e.isAppliedFilterOrSearchEmptyStateVisible&&t.jsx(c.EmptyState,{type:"inner",icon:f,title:e.filterNoDataTitle??x.coreTranslations.datatable.filterNoDataTitle,subTitle:e.filterNoDataDescription??x.coreTranslations.datatable.filterNoDataDescription,style:e.showEmptyRowUI?{padding:"48px 24px"}:void 0,children:e.filterNoDataButtonText&&e.onFilterNoDataButtonClick&&t.jsx(c.Button,{variant:"primary",onClick:e.onFilterNoDataButtonClick,children:e.filterNoDataButtonText})}),d&&!e.isAppliedFilterOrSearchEmptyStateVisible&&t.jsx(y.Row,{isSummary:!0,model:e})]})]})})});function v(n){let i=(n==null?void 0:n.parentElement)??null;for(;i;){const e=getComputedStyle(i);if(e.overflow==="auto"||e.overflow==="scroll"||e.overflowX==="auto"||e.overflowX==="scroll")return i;i=i.parentElement}return null}function N(n){var g;const{model:i,filterSearchStyle:e,rowsStyle:u,footerStyle:f,emptyStateIcon:d,filterSearchLeftContent:r,filterSearchRightContent:a,usePageScroll:s}=n,o=p.useRef(null),[I,h]=p.useState(!1),m=p.useCallback(()=>{if(s){const l=v(o.current);l&&h(l.scrollLeft>0)}else{const l=o.current;l&&h(l.scrollLeft>0)}},[s]);if(p.useEffect(()=>{const l=s?v(o.current):o.current;if(l)return l.addEventListener("scroll",m,{passive:!0}),()=>l.removeEventListener("scroll",m)},[m,s]),(g=i.filterManager)!=null&&g.isTabsLoading||i.showLoader&&!i.isInitialized)return t.jsx(T,{});if(!i.isInitialized)return null;if(i.isEmptyStateVisible)return t.jsx(E,{children:t.jsx(c.EmptyState,{type:"inner",icon:d,title:i.emptyTitle??x.coreTranslations.datatable.noData,subTitle:i.emptyDescription??void 0,children:i.emptyButtonText&&i.onEmptyButtonClick&&t.jsx(c.Button,{variant:"primary",onClick:i.onEmptyButtonClick,children:i.emptyButtonText})})});const b={"--datatable-sticky-shadow":I?"8px 0px 5px 0 rgba(132, 153, 193, 0.15)":"none"};return s?t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:o,className:"ikas-datatable-filter-search",style:{position:"sticky",left:0,zIndex:5},children:t.jsx(S.FilterSearch,{model:i,style:e,filterSearchLeftContent:r,filterSearchRightContent:a})}),t.jsx(w,{model:i,style:{...u,...b},emptyStateIcon:d}),t.jsx("div",{className:"ikas-datatable-footer",style:{width:"100%",position:"sticky",left:0,zIndex:4,...f},children:i.isPaginationEnabled&&t.jsx(j.Paginator,{model:i})})]}):t.jsxs("div",{ref:o,className:"ikas-datatable h-full overflow-auto",style:{height:"100%",overflow:"auto",...b},children:[t.jsx("div",{className:"ikas-datatable-filter-search sticky left-0 z-[5]",children:t.jsx(S.FilterSearch,{model:i,style:e,filterSearchLeftContent:r,filterSearchRightContent:a})}),t.jsx(w,{model:i,style:u,emptyStateIcon:d}),t.jsx("div",{className:"ikas-datatable-footer w-full sticky bottom-0 left-0",style:{position:"sticky",bottom:0,left:0,zIndex:4,...f},children:i.isPaginationEnabled&&t.jsx(j.Paginator,{model:i})})]})}const R=D.observer(N);exports.DataTable=R;

package/dist/index9.js

@@ -3,9 +3,9 @@ import { useRef as R, useState as B, useCallback as F, useEffect as P } from "re
 import { observer as x } from "mobx-react-lite";
 import { DragAndDrop as z, EmptyState as k, Button as I, InlineSpinner as j } from "@ikas/ui";
 import { coreTranslations as y } from "./index5.js";
-import { Row as m } from "./index51.js";
-import { FilterSearch as S } from "./index52.js";
-import { Paginator as D } from "./index53.js";
+import { Row as m } from "./index49.js";
+import { FilterSearch as S } from "./index50.js";
+import { Paginator as D } from "./index51.js";
 const E = "[overflow-x:visible] [overflow-y:clip] [overflow-clip-margin:8px] [&>*]:animate-fade-in";
 function N() {
   return /* @__PURE__ */ i(

package/dist/index90.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),g=require("./index143.cjs"),h=require("./index154.cjs"),m=require("./index155.cjs");require("./index144.cjs");require("./index145.cjs");const n=require("./index146.cjs");require("./index147.cjs");const E=require("./index148.cjs");require("./index149.cjs");const f=require("./index150.cjs");require("./index151.cjs");var b=function(i){var o=i.onChange,p=i.hex,r=i.rgb,s=i.styles,u=s===void 0?{}:s,x=i.className,c=x===void 0?"":x,e=g.default(h({default:{material:{width:"98px",height:"98px",padding:"16px",fontFamily:"Roboto"},HEXwrap:{position:"relative"},HEXinput:{width:"100%",marginTop:"12px",fontSize:"15px",color:"#333",padding:"0px",border:"0px",borderBottom:"2px solid "+p,outline:"none",height:"30px"},HEXlabel:{position:"absolute",top:"0px",left:"0px",fontSize:"11px",color:"#999999",textTransform:"capitalize"},Hex:{style:{}},RGBwrap:{position:"relative"},RGBinput:{width:"100%",marginTop:"12px",fontSize:"15px",color:"#333",padding:"0px",border:"0px",borderBottom:"1px solid #eee",outline:"none",height:"30px"},RGBlabel:{position:"absolute",top:"0px",left:"0px",fontSize:"11px",color:"#999999",textTransform:"capitalize"},split:{display:"flex",marginRight:"-10px",paddingTop:"11px"},third:{flex:"1",paddingRight:"10px"}}},u)),a=function(l,d){l.hex?m.isValidHex(l.hex)&&o({hex:l.hex,source:"hex"},d):(l.r||l.g||l.b)&&o({r:l.r||r.r,g:l.g||r.g,b:l.b||r.b,source:"rgb"},d)};return t.createElement(E.Raised,{styles:u},t.createElement("div",{style:e.material,className:"material-picker "+c},t.createElement(n.EditableInput,{style:{wrap:e.HEXwrap,input:e.HEXinput,label:e.HEXlabel},label:"hex",value:p,onChange:a}),t.createElement("div",{style:e.split,className:"flexbox-fix"},t.createElement("div",{style:e.third},t.createElement(n.EditableInput,{style:{wrap:e.RGBwrap,input:e.RGBinput,label:e.RGBlabel},label:"r",value:r.r,onChange:a})),t.createElement("div",{style:e.third},t.createElement(n.EditableInput,{style:{wrap:e.RGBwrap,input:e.RGBinput,label:e.RGBlabel},label:"g",value:r.g,onChange:a})),t.createElement("div",{style:e.third},t.createElement(n.EditableInput,{style:{wrap:e.RGBwrap,input:e.RGBinput,label:e.RGBlabel},label:"b",value:r.b,onChange:a})))))};f.ColorWrap(b);exports.Material=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),d=require("./index161.cjs"),p=require("./index151.cjs"),h=require("./index162.cjs");require("./index152.cjs");require("./index153.cjs");require("./index154.cjs");const q=require("./index155.cjs");require("./index156.cjs");require("./index157.cjs");const y=require("./index158.cjs");require("./index159.cjs");const S=require("./index182.cjs"),m=require("./index183.cjs");var s=function(e){var i=e.hsl,l=e.onChange,o=e.pointer,n=e.styles,u=n===void 0?{}:n,a=e.className,c=a===void 0?"":a,t=p.default(h({default:{hue:{height:"12px",position:"relative"},Hue:{radius:"2px"}}},u));return r.createElement("div",{style:t.wrap||{},className:"slider-picker "+c},r.createElement("div",{style:t.hue},r.createElement(q.Hue,{style:t.Hue,hsl:i,pointer:o,onChange:l})),r.createElement("div",{style:t.swatches},r.createElement(S.SliderSwatches,{hsl:i,onClick:l})))};s.propTypes={styles:d.object};s.defaultProps={pointer:m.SliderPointer,styles:{}};y.ColorWrap(s);exports.Slider=s;

package/dist/index90.js

@@ -1,142 +1,57 @@
 import t from "react";
-import b from "./index143.js";
-import g from "./index154.js";
-import { isValidHex as c } from "./index155.js";
-import "./index144.js";
-import "./index145.js";
-import { EditableInput as o } from "./index146.js";
-import "./index147.js";
-import { Raised as u } from "./index148.js";
-import "./index149.js";
-import { ColorWrap as f } from "./index150.js";
-import "./index151.js";
-var y = function(r) {
-  var p = r.onChange, n = r.hex, i = r.rgb, s = r.styles, m = s === void 0 ? {} : s, x = r.className, h = x === void 0 ? "" : x, e = b(g({
+import c from "./index161.js";
+import d from "./index151.js";
+import h from "./index162.js";
+import "./index152.js";
+import "./index153.js";
+import "./index154.js";
+import { Hue as u } from "./index155.js";
+import "./index156.js";
+import "./index157.js";
+import { ColorWrap as f } from "./index158.js";
+import "./index159.js";
+import { SliderSwatches as y } from "./index182.js";
+import { SliderPointer as S } from "./index183.js";
+var o = function(e) {
+  var s = e.hsl, i = e.onChange, p = e.pointer, l = e.styles, a = l === void 0 ? {} : l, m = e.className, n = m === void 0 ? "" : m, r = d(h({
     default: {
-      material: {
-        width: "98px",
-        height: "98px",
-        padding: "16px",
-        fontFamily: "Roboto"
-      },
-      HEXwrap: {
+      hue: {
+        height: "12px",
         position: "relative"
       },
-      HEXinput: {
-        width: "100%",
-        marginTop: "12px",
-        fontSize: "15px",
-        color: "#333",
-        padding: "0px",
-        border: "0px",
-        borderBottom: "2px solid " + n,
-        outline: "none",
-        height: "30px"
-      },
-      HEXlabel: {
-        position: "absolute",
-        top: "0px",
-        left: "0px",
-        fontSize: "11px",
-        color: "#999999",
-        textTransform: "capitalize"
-      },
-      Hex: {
-        style: {}
-      },
-      RGBwrap: {
-        position: "relative"
-      },
-      RGBinput: {
-        width: "100%",
-        marginTop: "12px",
-        fontSize: "15px",
-        color: "#333",
-        padding: "0px",
-        border: "0px",
-        borderBottom: "1px solid #eee",
-        outline: "none",
-        height: "30px"
-      },
-      RGBlabel: {
-        position: "absolute",
-        top: "0px",
-        left: "0px",
-        fontSize: "11px",
-        color: "#999999",
-        textTransform: "capitalize"
-      },
-      split: {
-        display: "flex",
-        marginRight: "-10px",
-        paddingTop: "11px"
-      },
-      third: {
-        flex: "1",
-        paddingRight: "10px"
+      Hue: {
+        radius: "2px"
       }
     }
-  }, m)), a = function(l, d) {
-    l.hex ? c(l.hex) && p({
-      hex: l.hex,
-      source: "hex"
-    }, d) : (l.r || l.g || l.b) && p({
-      r: l.r || i.r,
-      g: l.g || i.g,
-      b: l.b || i.b,
-      source: "rgb"
-    }, d);
-  };
+  }, a));
   return t.createElement(
-    u,
-    { styles: m },
+    "div",
+    { style: r.wrap || {}, className: "slider-picker " + n },
+    t.createElement(
+      "div",
+      { style: r.hue },
+      t.createElement(u, {
+        style: r.Hue,
+        hsl: s,
+        pointer: p,
+        onChange: i
+      })
+    ),
     t.createElement(
       "div",
-      { style: e.material, className: "material-picker " + h },
-      t.createElement(o, {
-        style: { wrap: e.HEXwrap, input: e.HEXinput, label: e.HEXlabel },
-        label: "hex",
-        value: n,
-        onChange: a
-      }),
-      t.createElement(
-        "div",
-        { style: e.split, className: "flexbox-fix" },
-        t.createElement(
-          "div",
-          { style: e.third },
-          t.createElement(o, {
-            style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
-            label: "r",
-            value: i.r,
-            onChange: a
-          })
-        ),
-        t.createElement(
-          "div",
-          { style: e.third },
-          t.createElement(o, {
-            style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
-            label: "g",
-            value: i.g,
-            onChange: a
-          })
-        ),
-        t.createElement(
-          "div",
-          { style: e.third },
-          t.createElement(o, {
-            style: { wrap: e.RGBwrap, input: e.RGBinput, label: e.RGBlabel },
-            label: "b",
-            value: i.b,
-            onChange: a
-          })
-        )
-      )
+      { style: r.swatches },
+      t.createElement(y, { hsl: s, onClick: i })
     )
   );
 };
-f(y);
+o.propTypes = {
+  styles: c.object
+};
+o.defaultProps = {
+  pointer: S,
+  styles: {}
+};
+f(o);
 export {
-  y as Material
+  o as Slider
 };

package/dist/index91.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),l=require("./index153.cjs"),d=require("./index143.cjs"),f=require("./index154.cjs");require("./index144.cjs");require("./index145.cjs");require("./index146.cjs");const x=require("./index147.cjs");require("./index148.cjs");const b=require("./index149.cjs"),g=require("./index150.cjs");require("./index151.cjs");const y=require("./index167.cjs"),m=require("./index168.cjs"),v=require("./index169.cjs"),h=require("./index170.cjs"),P=require("./index171.cjs");var w=(function(){function o(e,s){for(var r=0;r<s.length;r++){var n=s[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(e,s,r){return s&&o(e.prototype,s),r&&o(e,r),e}})();function E(o,e){if(!(o instanceof e))throw new TypeError("Cannot call a class as a function")}function q(o,e){if(!o)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e&&(typeof e=="object"||typeof e=="function")?e:o}function C(o,e){if(typeof e!="function"&&e!==null)throw new TypeError("Super expression must either be null or a function, not "+typeof e);o.prototype=Object.create(e&&e.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(o,e):o.__proto__=e)}var a=(function(o){C(e,o);function e(s){E(this,e);var r=q(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return r.state={currentColor:s.hex},r}return w(e,[{key:"render",value:function(){var r=this.props,n=r.styles,c=n===void 0?{}:n,p=r.className,u=p===void 0?"":p,i=d.default(f({default:{picker:{background:"#DCDCDC",borderRadius:"4px",boxShadow:"0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15)",boxSizing:"initial",width:"513px"},head:{backgroundImage:"linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%)",borderBottom:"1px solid #B1B1B1",boxShadow:"inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02)",height:"23px",lineHeight:"24px",borderRadius:"4px 4px 0 0",fontSize:"13px",color:"#4D4D4D",textAlign:"center"},body:{padding:"15px 15px 0",display:"flex"},saturation:{width:"256px",height:"256px",position:"relative",border:"2px solid #B3B3B3",borderBottom:"2px solid #F0F0F0",overflow:"hidden"},hue:{position:"relative",height:"256px",width:"19px",marginLeft:"10px",border:"2px solid #B3B3B3",borderBottom:"2px solid #F0F0F0"},controls:{width:"180px",marginLeft:"10px"},top:{display:"flex"},previews:{width:"60px"},actions:{flex:"1",marginLeft:"20px"}}},c));return t.createElement("div",{style:i.picker,className:"photoshop-picker "+u},t.createElement("div",{style:i.head},this.props.header),t.createElement("div",{style:i.body,className:"flexbox-fix"},t.createElement("div",{style:i.saturation},t.createElement(b.Saturation,{hsl:this.props.hsl,hsv:this.props.hsv,pointer:m.PhotoshopPointerCircle,onChange:this.props.onChange})),t.createElement("div",{style:i.hue},t.createElement(x.Hue,{direction:"vertical",hsl:this.props.hsl,pointer:v.PhotoshopPointerCircle,onChange:this.props.onChange})),t.createElement("div",{style:i.controls},t.createElement("div",{style:i.top,className:"flexbox-fix"},t.createElement("div",{style:i.previews},t.createElement(P.PhotoshopPreviews,{rgb:this.props.rgb,currentColor:this.state.currentColor})),t.createElement("div",{style:i.actions},t.createElement(h.PhotoshopButton,{label:"OK",onClick:this.props.onAccept,active:!0}),t.createElement(h.PhotoshopButton,{label:"Cancel",onClick:this.props.onCancel}),t.createElement(y.PhotoshopPicker,{onChange:this.props.onChange,rgb:this.props.rgb,hsv:this.props.hsv,hex:this.props.hex}))))))}}]),e})(t.Component);a.propTypes={header:l.string,styles:l.object};a.defaultProps={header:"Color Picker",styles:{}};g.ColorWrap(a);exports.Photoshop=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),r=require("./index161.cjs"),q=require("./index151.cjs"),G=require("./index165.cjs"),S=require("./index162.cjs"),e=require("./index166.cjs");require("./index152.cjs");require("./index153.cjs");require("./index154.cjs");require("./index155.cjs");const f=require("./index156.cjs");require("./index157.cjs");const k=require("./index158.cjs");require("./index159.cjs");const O=require("./index184.cjs");var i=function(l){var c=l.width,o=l.height,p=l.onChange,d=l.onSwatchHover,g=l.colors,h=l.hex,u=l.styles,y=u===void 0?{}:u,s=l.className,b=s===void 0?"":s,t=q.default(S({default:{picker:{width:c,height:o},overflow:{height:o,overflowY:"scroll"},body:{padding:"16px 0 6px 16px"},clear:{clear:"both"}}},y)),w=function(m,v){return p({hex:m,source:"hex"},v)};return n.createElement("div",{style:t.picker,className:"swatches-picker "+b},n.createElement(f.Raised,null,n.createElement("div",{style:t.overflow},n.createElement("div",{style:t.body},G(g,function(a){return n.createElement(O.SwatchesGroup,{key:a.toString(),group:a,active:h,onClick:w,onSwatchHover:d})}),n.createElement("div",{style:t.clear})))))};i.propTypes={width:r.oneOfType([r.string,r.number]),height:r.oneOfType([r.string,r.number]),colors:r.arrayOf(r.arrayOf(r.string)),styles:r.object};i.defaultProps={width:320,height:240,colors:[[e.red[900],e.red[700],e.red[500],e.red[300],e.red[100]],[e.pink[900],e.pink[700],e.pink[500],e.pink[300],e.pink[100]],[e.purple[900],e.purple[700],e.purple[500],e.purple[300],e.purple[100]],[e.deepPurple[900],e.deepPurple[700],e.deepPurple[500],e.deepPurple[300],e.deepPurple[100]],[e.indigo[900],e.indigo[700],e.indigo[500],e.indigo[300],e.indigo[100]],[e.blue[900],e.blue[700],e.blue[500],e.blue[300],e.blue[100]],[e.lightBlue[900],e.lightBlue[700],e.lightBlue[500],e.lightBlue[300],e.lightBlue[100]],[e.cyan[900],e.cyan[700],e.cyan[500],e.cyan[300],e.cyan[100]],[e.teal[900],e.teal[700],e.teal[500],e.teal[300],e.teal[100]],["#194D33",e.green[700],e.green[500],e.green[300],e.green[100]],[e.lightGreen[900],e.lightGreen[700],e.lightGreen[500],e.lightGreen[300],e.lightGreen[100]],[e.lime[900],e.lime[700],e.lime[500],e.lime[300],e.lime[100]],[e.yellow[900],e.yellow[700],e.yellow[500],e.yellow[300],e.yellow[100]],[e.amber[900],e.amber[700],e.amber[500],e.amber[300],e.amber[100]],[e.orange[900],e.orange[700],e.orange[500],e.orange[300],e.orange[100]],[e.deepOrange[900],e.deepOrange[700],e.deepOrange[500],e.deepOrange[300],e.deepOrange[100]],[e.brown[900],e.brown[700],e.brown[500],e.brown[300],e.brown[100]],[e.blueGrey[900],e.blueGrey[700],e.blueGrey[500],e.blueGrey[300],e.blueGrey[100]],["#000000","#525252","#969696","#D9D9D9","#FFFFFF"]],styles:{}};k.ColorWrap(i);exports.Swatches=i;