@sk-web-gui/core 0.1.88 → 0.1.90

package/dist/esm/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["buttonSolid","colors","_extends","reduce","styles","color","buttonOutline","buttonGhost","buttonLight","buttonLink","module","exports","Button","transitionProperty","borderRadius","minHeight","maxHeight","fontSize","width","height","minWidth","maxWidth"],"sources":["../../../src/components/button.js"],"sourcesContent":["function buttonSolid(colors) {\r\n  return {\r\n    '&-solid': {\r\n      //\"@apply text-\": {},\r\n      '@apply font-semibold border border-gray-stroke': {},\r\n      '@apply text-body bg-white': {},\r\n      /* hover */\r\n      '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},\r\n      /* keyboard active */\r\n      '&.active': {\r\n        '@apply text-white bg-hover border-primary-active': {},\r\n        /* dark */\r\n        '@apply dark:border-hover dark:bg-neutral-600': {},\r\n      },\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:border-primary': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-black': {},\r\n      /* active */\r\n      '@apply active:bg-hover active:text-white': {},\r\n\r\n      /* dark mode */\r\n      '@apply dark:border-neutral-600': {},\r\n      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},\r\n      /* dark focus */\r\n      '@apply dark:focus-visible:border-primary-500': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            //[`@apply border-${color}`]: {},\r\n            [`@apply text-white bg-${color}`]: {},\r\n            // hover\r\n            [`@apply hover:text-white hover:bg-${color}-active`]: {},\r\n            // keyboard active\r\n            '&.active': {\r\n              [`@apply text-white bg-${color}-active`]: {},\r\n            },\r\n\r\n            [`@apply active:text-white active:bg-${color}-active`]: {},\r\n            [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},\r\n\r\n            // focus\r\n            //[`@apply focus-visible:bg-${color}-700`]: {},\r\n            //[`@apply focus-visible:border-${color}-500`]: {},\r\n            //[`@apply focus-visible:ring-${color}-500`]: {},\r\n            // active\r\n            //[`@apply active:bg-${color}-600`]: {},\r\n            // dark mode\r\n            //[`@apply dark:border-${color}-500`]: {},\r\n            //[`@apply dark:bg-${color}-600`]: {},\r\n            // dark hover\r\n            //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},\r\n            // dark focus\r\n            //[`@apply dark:focus-visible:border-${color}-500`]: {},\r\n            //[`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n            // dark active\r\n            //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n\r\n      \"&[data-color='primary']\": {\r\n        '@apply border-primary hover:border-primary-active': {},\r\n        '&.active': {\r\n          '@apply border-primary-active': {},\r\n        },\r\n      },\r\n\r\n      '&.btn': {\r\n        '&-disabled': {\r\n          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},\r\n          '&.active': {\r\n            '@apply border-gray-stroke': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonOutline(colors) {\r\n  return {\r\n    '&-outline': {\r\n      '@apply font-semibold border border-gray-stroke': {},\r\n      '@apply text-body bg-transparent': {},\r\n      /* hover */\r\n      '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},\r\n      /* keyboard active */\r\n      '&.active': {\r\n        '@apply text-white bg-primary-active border-primary-active': {},\r\n        /* dark keyboard active */\r\n        '@apply dark:border-neutral-300 dark:bg-neutral-700': {},\r\n      },\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:border-primary-500': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      /* active */\r\n      '@apply active:bg-neutral-200': {},\r\n      /* dark mode */\r\n      '@apply dark:border-neutral-600': {},\r\n      '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n      /* dark focus */\r\n      '@apply dark:focus-visible:border-primary-500': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply border-current`]: {},\r\n            [`@apply text-${color}-600 bg-transparent`]: {},\r\n            /* hover */\r\n            [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},\r\n            /* keyboard active */\r\n            '&.active': {\r\n              [`@apply text-white bg-${color}-active border-${color}-active`]: {},\r\n\r\n              /* dark keyboard active */\r\n              [`@apply dark:bg-${color}-200`]: {},\r\n              [`@apply dark:bg-opacity-15`]: {},\r\n            },\r\n            /* focus */\r\n            [`@apply focus-visible:border-${color}-500`]: {},\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            /* active */\r\n            [`@apply active:bg-${color}-100`]: {},\r\n            /* dark mode */\r\n            [`@apply dark:border-${color}-200`]: {},\r\n            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n            [`@apply dark:border-${color}-300`]: {},\r\n            /* dark hover */\r\n            [`@apply dark:hover:bg-${color}-200`]: {},\r\n            [`@apply dark:hover:bg-opacity-15`]: {},\r\n            /* dark focus */\r\n            [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n            [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n            /* dark active */\r\n            [`@apply dark:active:bg-${color}-200`]: {},\r\n            [`@apply dark:active:bg-opacity-25`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n\r\n      '&.btn': {\r\n        '&-disabled': {\r\n          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},\r\n          '&.active': {\r\n            '@apply border-gray-stroke': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonGhost(colors) {\r\n  return {\r\n    '&-ghost': {\r\n      '@apply text-body bg-transparent': {},\r\n      '@apply hover:bg-neutral-100': {},\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      /* active */\r\n      '@apply active:bg-neutral-200': {},\r\n      /* dark mode */\r\n      '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply text-${color}-600`]: {},\r\n            [`@apply hover:bg-${color}-50`]: {},\r\n            /* focus */\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            [`@apply active:bg-${color}-100`]: {},\r\n            // dark colors\r\n            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n            [`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},\r\n            [`@apply dark:hover:bg-opacity-15`]: {},\r\n            [`@apply dark:active:bg-${color}-200`]: {},\r\n            [`@apply dark:active:bg-opacity-25`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonLight(colors) {\r\n  return {\r\n    '&-light': {\r\n      '@apply shadow-sm': {},\r\n      '@apply border border-transparent': {},\r\n      '@apply text-body bg-neutral-100': {},\r\n      /* hover */\r\n      '@apply hover:bg-neutral-200': {},\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:border-primary-500': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      /* active */\r\n      '@apply active:bg-neutral-300': {},\r\n      /* dark mode */\r\n      '@apply dark:border-transparent': {},\r\n      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:bg-neutral-600': {},\r\n      /* dark focus */\r\n      '@apply dark:focus-visible:border-primary-500': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-600': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply text-${color}-600 bg-${color}-50`]: {},\r\n            /* hover */\r\n            [`@apply hover:bg-${color}-100`]: {},\r\n            /* focus */\r\n            [`@apply focus-visible:border-${color}-500`]: {},\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            /* active */\r\n            [`@apply active:bg-${color}-200`]: {},\r\n            /* dark mode */\r\n            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},\r\n            [`@apply dark:bg-opacity-15`]: {},\r\n            /* dark hover */\r\n            [`@apply dark:hover:bg-${color}-500`]: {},\r\n            [`@apply dark:hover:bg-opacity-25`]: {},\r\n            /* dark focus */\r\n            [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n            [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n            /* dark active */\r\n            [`@apply dark:active:bg-${color}-500`]: {},\r\n            [`@apply dark:active:bg-opacity-30`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonLink(colors) {\r\n  return {\r\n    '&-link': {\r\n      '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n      '&.active': {\r\n        '@apply underline': {},\r\n      },\r\n      '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      // dark colors\r\n      '@apply dark:text-neutral-200': {},\r\n      '@apply dark:active:text-neutral-500': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply text-${color}-600 active:text-${color}-700`]: {},\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            // dark colors\r\n            [`@apply dark:text-${color}-200`]: {},\r\n            [`@apply dark:active:text-${color}-500`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nmodule.exports = Button = (colors) => ({\r\n  '.btn': {\r\n    '@apply relative': {},\r\n    '@apply m-0': {},\r\n    '@apply px-[3.2rem]': {},\r\n    '@apply py-0': {},\r\n    '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n    '@apply font-medium leading-tight': {},\r\n    transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n    '@apply\tduration-75 ease-out': {},\r\n    '@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},\r\n    '@apply focus-visible:outline-none': {},\r\n\r\n    \"&[data-rounded='true']\": {\r\n      borderRadius: '3.2rem',\r\n    },\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      '@apply text-xs': {},\r\n      minHeight: '4rem',\r\n      maxHeight: '4rem',\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply text-sm': {},\r\n      minHeight: '4.4rem',\r\n      maxHeight: '4.4rem',\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply text-base': {},\r\n      minHeight: '4.8rem',\r\n      maxHeight: '4.8rem',\r\n    },\r\n    '&-fit-content': {\r\n      '@apply p-0': {},\r\n      fontSize: 'inherit',\r\n    },\r\n\r\n    // State\r\n\r\n    '&-disabled': {\r\n      '@apply disabled:shadow-none disabled:cursor-not-allowed': {},\r\n      '@apply disabled:text-gray disabled:bg-gray-light !important': {},\r\n    },\r\n    '.MuiSvgIcon-root': {\r\n      fontSize: '1.5em',\r\n      width: '1em',\r\n      height: '1em',\r\n    },\r\n\r\n    // variants\r\n    ...buttonSolid(colors),\r\n    ...buttonOutline(colors),\r\n    //...buttonGhost(colors),\r\n    //...buttonLight(colors),\r\n    ...buttonLink(colors),\r\n  },\r\n  '.btn-has-icon': {\r\n    '&-left .MuiSvgIcon-root': {\r\n      '@apply mr-sm': {},\r\n    },\r\n    '&-right .MuiSvgIcon-root': {\r\n      '@apply ml-sm': {},\r\n    },\r\n  },\r\n  '[data-icon=true]': {\r\n    '@apply p-0': {},\r\n    \"&[data-rounded='true']\": {\r\n      '@apply rounded-full': {},\r\n    },\r\n    '&.btn-sm': {\r\n      minWidth: '4rem',\r\n      maxWidth: '4rem',\r\n    },\r\n\r\n    '&.btn-md': {\r\n      minWidth: '4.4rem',\r\n      maxWidth: '4.4rem',\r\n    },\r\n\r\n    '&.btn-lg': {\r\n      minWidth: '4.8rem',\r\n      maxWidth: '4.8rem',\r\n    },\r\n    '.btn-has-icon': {\r\n      '&-left .MuiSvgIcon-root': {\r\n        '@apply mr-0': {},\r\n      },\r\n      '&-right .MuiSvgIcon-root': {\r\n        '@apply ml-0': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":["buttonSolid","colors","_extends","reduce","styles","color","buttonOutline","buttonGhost","buttonLink","module","exports","Button","transitionProperty","borderRadius","minHeight","maxHeight","fontSize","width","height","minWidth","maxWidth"],"sources":["../../../src/components/button.js"],"sourcesContent":["function buttonSolid(colors) {\r\n  return {\r\n    '&-solid': {\r\n      //\"@apply text-\": {},\r\n      '@apply font-semibold border border-gray-stroke': {},\r\n      '@apply text-body bg-white': {},\r\n      /* hover */\r\n      '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},\r\n      /* keyboard active */\r\n      '&.active': {\r\n        '@apply text-white bg-hover border-primary-active': {},\r\n        /* dark */\r\n        '@apply dark:border-hover dark:bg-neutral-600': {},\r\n      },\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:border-primary': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-black': {},\r\n      /* active */\r\n      '@apply active:bg-hover active:text-white': {},\r\n\r\n      /* dark mode */\r\n      '@apply dark:border-neutral-600': {},\r\n      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},\r\n      /* dark focus */\r\n      '@apply dark:focus-visible:border-primary-500': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-900 dark:active:border-neutral-600': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            //[`@apply border-${color}`]: {},\r\n            [`@apply text-white bg-${color}`]: {},\r\n            // hover\r\n            [`@apply hover:text-white hover:bg-${color}-active`]: {},\r\n            // keyboard active\r\n            '&.active': {\r\n              [`@apply text-white bg-${color}-active`]: {},\r\n            },\r\n\r\n            [`@apply active:text-white active:bg-${color}-active`]: {},\r\n            [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},\r\n\r\n            // focus\r\n            //[`@apply focus-visible:bg-${color}-700`]: {},\r\n            //[`@apply focus-visible:border-${color}-500`]: {},\r\n            //[`@apply focus-visible:ring-${color}-500`]: {},\r\n            // active\r\n            //[`@apply active:bg-${color}-600`]: {},\r\n            // dark mode\r\n            //[`@apply dark:border-${color}-500`]: {},\r\n            //[`@apply dark:bg-${color}-600`]: {},\r\n            // dark hover\r\n            //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},\r\n            // dark focus\r\n            //[`@apply dark:focus-visible:border-${color}-500`]: {},\r\n            //[`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n            // dark active\r\n            //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n\r\n      \"&[data-color='primary']\": {\r\n        '@apply border-primary hover:border-primary-active': {},\r\n        '&.active': {\r\n          '@apply border-primary-active': {},\r\n        },\r\n      },\r\n\r\n      '&.btn': {\r\n        '&-disabled, &[aria-disabled=\"true\"]': {\r\n          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},\r\n          '&.active': {\r\n            '@apply border-gray-stroke': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonOutline(colors) {\r\n  return {\r\n    '&-outline': {\r\n      '@apply font-semibold border border-gray-stroke': {},\r\n      '@apply text-body bg-transparent': {},\r\n      /* hover */\r\n      '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},\r\n      /* keyboard active */\r\n      '&.active': {\r\n        '@apply text-white bg-primary-active border-primary-active': {},\r\n        /* dark keyboard active */\r\n        '@apply dark:border-neutral-300 dark:bg-neutral-700': {},\r\n      },\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:border-primary-500': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      /* active */\r\n      '@apply active:bg-neutral-200': {},\r\n      /* dark mode */\r\n      '@apply dark:border-neutral-600': {},\r\n      '@apply dark:text-neutral-100 dark:bg-transparent': {},\r\n      /* dark hover */\r\n      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},\r\n      /* dark focus */\r\n      '@apply dark:focus-visible:border-primary-500': {},\r\n      /* dark active */\r\n      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-600': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply border-current`]: {},\r\n            [`@apply text-${color}-600 bg-transparent`]: {},\r\n            /* hover */\r\n            [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},\r\n            /* keyboard active */\r\n            '&.active': {\r\n              [`@apply text-white bg-${color}-active border-${color}-active`]: {},\r\n\r\n              /* dark keyboard active */\r\n              [`@apply dark:bg-${color}-200`]: {},\r\n              [`@apply dark:bg-opacity-15`]: {},\r\n            },\r\n            /* focus */\r\n            [`@apply focus-visible:border-${color}-500`]: {},\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            /* active */\r\n            [`@apply active:bg-${color}-100`]: {},\r\n            /* dark mode */\r\n            [`@apply dark:border-${color}-200`]: {},\r\n            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},\r\n            [`@apply dark:border-${color}-300`]: {},\r\n            /* dark hover */\r\n            [`@apply dark:hover:bg-${color}-200`]: {},\r\n            [`@apply dark:hover:bg-opacity-15`]: {},\r\n            /* dark focus */\r\n            [`@apply dark:focus-visible:border-${color}-500`]: {},\r\n            [`@apply dark:focus-visible:ring-${color}-500`]: {},\r\n            /* dark active */\r\n            [`@apply dark:active:bg-${color}-200`]: {},\r\n            [`@apply dark:active:bg-opacity-25`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n\r\n      '&.btn': {\r\n        '&-disabled, &[aria-disabled=\"true\"]': {\r\n          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},\r\n          '&.active': {\r\n            '@apply border-gray-stroke': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonGhost(colors) {\r\n  return {\r\n    '&-ghost': {\r\n      /* focus */\r\n      '@apply focus-visible:z-base': {},\r\n      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            /* focus */\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nfunction buttonLink(colors) {\r\n  return {\r\n    '&-link': {\r\n      '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},\r\n      '&.active': {\r\n        '@apply underline': {},\r\n      },\r\n      '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},\r\n      // dark colors\r\n      '@apply dark:text-neutral-200': {},\r\n      '@apply dark:active:text-neutral-500': {},\r\n\r\n      ...colors.reduce(\r\n        (styles, color) => ({\r\n          ...styles,\r\n          [`&[data-color=\"${color}\"]`]: {\r\n            [`@apply text-${color}-600 active:text-${color}-700`]: {},\r\n            [`@apply focus-visible:ring-${color}-500`]: {},\r\n            // dark colors\r\n            [`@apply dark:text-${color}-200`]: {},\r\n            [`@apply dark:active:text-${color}-500`]: {},\r\n          },\r\n        }),\r\n        {}\r\n      ),\r\n    },\r\n  };\r\n}\r\n\r\nmodule.exports = Button = (colors) => ({\r\n  '.btn': {\r\n    '@apply relative': {},\r\n    '@apply m-0': {},\r\n    '@apply px-[3.2rem]': {},\r\n    '@apply py-0': {},\r\n    '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},\r\n    '@apply font-medium leading-tight': {},\r\n    transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',\r\n    '@apply\tduration-75 ease-out': {},\r\n    '@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},\r\n    '@apply focus-visible:outline-none': {},\r\n\r\n    \"&[data-rounded='true']\": {\r\n      borderRadius: '3.2rem',\r\n    },\r\n\r\n    // sizing\r\n    '&-sm': {\r\n      '@apply text-xs': {},\r\n      minHeight: '4rem',\r\n      maxHeight: '4rem',\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply text-sm': {},\r\n      minHeight: '4.4rem',\r\n      maxHeight: '4.4rem',\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply text-base': {},\r\n      minHeight: '4.8rem',\r\n      maxHeight: '4.8rem',\r\n    },\r\n    '&-fit-content': {\r\n      '@apply p-0': {},\r\n      fontSize: 'inherit',\r\n    },\r\n\r\n    // State\r\n\r\n    '&-disabled, &[aria-disabled=\"true\"]': {\r\n      '@apply shadow-none disabled:shadow-none disabled:cursor-not-allowed cursor-not-allowed': {},\r\n      '@apply disabled:text-gray text-gray disabled:bg-gray-light bg-gray-light !important': {},\r\n    },\r\n    '.MuiSvgIcon-root': {\r\n      fontSize: '1.5em',\r\n      width: '1em',\r\n      height: '1em',\r\n    },\r\n\r\n    // variants\r\n    ...buttonSolid(colors),\r\n    ...buttonOutline(colors),\r\n    ...buttonGhost(colors),\r\n    ...buttonLink(colors),\r\n  },\r\n  '.btn-has-icon': {\r\n    '&-left .MuiSvgIcon-root': {\r\n      '@apply mr-sm': {},\r\n    },\r\n    '&-right .MuiSvgIcon-root': {\r\n      '@apply ml-sm': {},\r\n    },\r\n  },\r\n  '[data-icon=true]': {\r\n    '@apply p-0': {},\r\n    \"&[data-rounded='true']\": {\r\n      '@apply rounded-full': {},\r\n    },\r\n    '&.btn-sm': {\r\n      minWidth: '4rem',\r\n      maxWidth: '4rem',\r\n    },\r\n\r\n    '&.btn-md': {\r\n      minWidth: '4.4rem',\r\n      maxWidth: '4.4rem',\r\n    },\r\n\r\n    '&.btn-lg': {\r\n      minWidth: '4.8rem',\r\n      maxWidth: '4.8rem',\r\n    },\r\n    '.btn-has-icon': {\r\n      '&-left .MuiSvgIcon-root': {\r\n        '@apply mr-0': {},\r\n      },\r\n      '&-right .MuiSvgIcon-root': {\r\n        '@apply ml-0': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"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"}

package/dist/esm/components/pagination.js

@@ -37,7 +37,7 @@ module.exports = Pagination = () => ({
         '@apply opacity-50 cursor-default': {}
       },
       "&[disabled='false']": {
-        '&-label, &-icon': {
+        '.sk-pagination-prevNextButton-label, .sk-pagination-prevNextButton-icon': {
           '@apply cursor-pointer': {}
         }
       },

package/dist/esm/components/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":["module","exports","Pagination","width","height","fontSize"],"sources":["../../../src/components/pagination.js"],"sourcesContent":["module.exports = Pagination = () => ({\r\n  '.sk-pagination': {\r\n    '@apply select-none': {},\r\n\r\n    '&-sm': {\r\n      '@apply text-xs': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply text-lg': {},\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply text-xl': {},\r\n    },\r\n\r\n    '&-list': {\r\n      '@apply flex items-center': {},\r\n    },\r\n    '.form-select-wrapper': {\r\n      '@apply w-fit': {},\r\n    },\r\n    '&-pageLabel': {\r\n      '@apply cursor-pointer m-sm box-content': {},\r\n      width: '1.5em',\r\n      height: '1.75em',\r\n\r\n      \"&[aria-current='true']\": {\r\n        '@apply border-primary border-b cursor-default text-primary': {},\r\n      },\r\n    },\r\n\r\n    '&-prevNextButton': {\r\n      '@apply text-body ml-4 my-sm inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},\r\n      height: '1.75em',\r\n\r\n      '&[data-reverse=true]': {\r\n        '@apply mr-4 ml-0 flex-row-reverse': {},\r\n\r\n        '.pagination-prevNextButton-label': {\r\n          '@apply mr-sm ml-0': {},\r\n        },\r\n      },\r\n\r\n      '&[disabled]': {\r\n        '@apply opacity-50 cursor-default': {},\r\n      },\r\n\r\n      \"&[disabled='false']\": {\r\n        '&-label, &-icon': {\r\n          '@apply cursor-pointer': {},\r\n        },\r\n      },\r\n\r\n      '&-label': {\r\n        '@apply hidden sm:inline ml-sm leading-none': {},\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply m-1 leading-none flex items-center': {},\r\n\r\n        '.MuiSvgIcon-root': {\r\n          fontSize: '1em',\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-ellipsis': {\r\n      '@apply inline-block w-16 text-center': {},\r\n    },\r\n    '&.fit-content': {\r\n      '@apply w-full max-w-full': {},\r\n      '.sk-pagination-list': {\r\n        '@apply w-full flex justify-between': {},\r\n        '&-item': {\r\n          '@apply px-0  flex-shrink grow text-center': {},\r\n          '&.ellipsis': {\r\n            '@apply flex-shrink grow-0': {},\r\n          },\r\n          '&.prev-next': {\r\n            '@apply flex-shrink grow-0': {},\r\n          },\r\n          '.sk-pagination-pageLabel': {\r\n            '@apply w-full max-w-[1.5em] mx-xs': {},\r\n          },\r\n        },\r\n      },\r\n      '.form-select-wrapper': {\r\n        '@apply w-full': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,UAAU,GAAGA,CAAA,MAAO;EACnC,gBAAgB,EAAE;IAChB,oBAAoB,EAAE,CAAC,CAAC;IAExB,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,QAAQ,EAAE;MACR,0BAA0B,EAAE,CAAC;IAC/B,CAAC;IACD,sBAAsB,EAAE;MACtB,cAAc,EAAE,CAAC;IACnB,CAAC;IACD,aAAa,EAAE;MACb,wCAAwC,EAAE,CAAC,CAAC;MAC5CC,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,QAAQ;MAEhB,wBAAwB,EAAE;QACxB,4DAA4D,EAAE,CAAC;MACjE;IACF,CAAC;IAED,kBAAkB,EAAE;MAClB,kGAAkG,EAAE,CAAC,CAAC;MACtGA,MAAM,EAAE,QAAQ;MAEhB,sBAAsB,EAAE;QACtB,mCAAmC,EAAE,CAAC,CAAC;QAEvC,kCAAkC,EAAE;UAClC,mBAAmB,EAAE,CAAC;QACxB;MACF,CAAC;MAED,aAAa,EAAE;QACb,kCAAkC,EAAE,CAAC;MACvC,CAAC;MAED,qBAAqB,EAAE;QACrB,iBAAiB,EAAE;UACjB,uBAAuB,EAAE,CAAC;QAC5B;MACF,CAAC;MAED,SAAS,EAAE;QACT,4CAA4C,EAAE,CAAC;MACjD,CAAC;MAED,QAAQ,EAAE;QACR,2CAA2C,EAAE,CAAC,CAAC;QAE/C,kBAAkB,EAAE;UAClBC,QAAQ,EAAE;QACZ;MACF;IACF,CAAC;IAED,YAAY,EAAE;MACZ,sCAAsC,EAAE,CAAC;IAC3C,CAAC;IACD,eAAe,EAAE;MACf,0BAA0B,EAAE,CAAC,CAAC;MAC9B,qBAAqB,EAAE;QACrB,oCAAoC,EAAE,CAAC,CAAC;QACxC,QAAQ,EAAE;UACR,2CAA2C,EAAE,CAAC,CAAC;UAC/C,YAAY,EAAE;YACZ,2BAA2B,EAAE,CAAC;UAChC,CAAC;UACD,aAAa,EAAE;YACb,2BAA2B,EAAE,CAAC;UAChC,CAAC;UACD,0BAA0B,EAAE;YAC1B,mCAAmC,EAAE,CAAC;UACxC;QACF;MACF,CAAC;MACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,CAAC;MACpB;IACF;EACF;AACF,CAAC,CAAC"}
+{"version":3,"file":"pagination.js","names":["module","exports","Pagination","width","height","fontSize"],"sources":["../../../src/components/pagination.js"],"sourcesContent":["module.exports = Pagination = () => ({\r\n  '.sk-pagination': {\r\n    '@apply select-none': {},\r\n\r\n    '&-sm': {\r\n      '@apply text-xs': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '@apply text-lg': {},\r\n    },\r\n\r\n    '&-lg': {\r\n      '@apply text-xl': {},\r\n    },\r\n\r\n    '&-list': {\r\n      '@apply flex items-center': {},\r\n    },\r\n    '.form-select-wrapper': {\r\n      '@apply w-fit': {},\r\n    },\r\n    '&-pageLabel': {\r\n      '@apply cursor-pointer m-sm box-content': {},\r\n      width: '1.5em',\r\n      height: '1.75em',\r\n\r\n      \"&[aria-current='true']\": {\r\n        '@apply border-primary border-b cursor-default text-primary': {},\r\n      },\r\n    },\r\n\r\n    '&-prevNextButton': {\r\n      '@apply text-body ml-4 my-sm inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},\r\n      height: '1.75em',\r\n\r\n      '&[data-reverse=true]': {\r\n        '@apply mr-4 ml-0 flex-row-reverse': {},\r\n\r\n        '.pagination-prevNextButton-label': {\r\n          '@apply mr-sm ml-0': {},\r\n        },\r\n      },\r\n\r\n      '&[disabled]': {\r\n        '@apply opacity-50 cursor-default': {},\r\n      },\r\n\r\n      \"&[disabled='false']\": {\r\n        '.sk-pagination-prevNextButton-label, .sk-pagination-prevNextButton-icon': {\r\n          '@apply cursor-pointer': {},\r\n        },\r\n      },\r\n\r\n      '&-label': {\r\n        '@apply hidden sm:inline ml-sm leading-none': {},\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply m-1 leading-none flex items-center': {},\r\n\r\n        '.MuiSvgIcon-root': {\r\n          fontSize: '1em',\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-ellipsis': {\r\n      '@apply inline-block w-16 text-center': {},\r\n    },\r\n    '&.fit-content': {\r\n      '@apply w-full max-w-full': {},\r\n      '.sk-pagination-list': {\r\n        '@apply w-full flex justify-between': {},\r\n        '&-item': {\r\n          '@apply px-0  flex-shrink grow text-center': {},\r\n          '&.ellipsis': {\r\n            '@apply flex-shrink grow-0': {},\r\n          },\r\n          '&.prev-next': {\r\n            '@apply flex-shrink grow-0': {},\r\n          },\r\n          '.sk-pagination-pageLabel': {\r\n            '@apply w-full max-w-[1.5em] mx-xs': {},\r\n          },\r\n        },\r\n      },\r\n      '.form-select-wrapper': {\r\n        '@apply w-full': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,UAAU,GAAGA,CAAA,MAAO;EACnC,gBAAgB,EAAE;IAChB,oBAAoB,EAAE,CAAC,CAAC;IAExB,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,MAAM,EAAE;MACN,gBAAgB,EAAE,CAAC;IACrB,CAAC;IAED,QAAQ,EAAE;MACR,0BAA0B,EAAE,CAAC;IAC/B,CAAC;IACD,sBAAsB,EAAE;MACtB,cAAc,EAAE,CAAC;IACnB,CAAC;IACD,aAAa,EAAE;MACb,wCAAwC,EAAE,CAAC,CAAC;MAC5CC,KAAK,EAAE,OAAO;MACdC,MAAM,EAAE,QAAQ;MAEhB,wBAAwB,EAAE;QACxB,4DAA4D,EAAE,CAAC;MACjE;IACF,CAAC;IAED,kBAAkB,EAAE;MAClB,kGAAkG,EAAE,CAAC,CAAC;MACtGA,MAAM,EAAE,QAAQ;MAEhB,sBAAsB,EAAE;QACtB,mCAAmC,EAAE,CAAC,CAAC;QAEvC,kCAAkC,EAAE;UAClC,mBAAmB,EAAE,CAAC;QACxB;MACF,CAAC;MAED,aAAa,EAAE;QACb,kCAAkC,EAAE,CAAC;MACvC,CAAC;MAED,qBAAqB,EAAE;QACrB,yEAAyE,EAAE;UACzE,uBAAuB,EAAE,CAAC;QAC5B;MACF,CAAC;MAED,SAAS,EAAE;QACT,4CAA4C,EAAE,CAAC;MACjD,CAAC;MAED,QAAQ,EAAE;QACR,2CAA2C,EAAE,CAAC,CAAC;QAE/C,kBAAkB,EAAE;UAClBC,QAAQ,EAAE;QACZ;MACF;IACF,CAAC;IAED,YAAY,EAAE;MACZ,sCAAsC,EAAE,CAAC;IAC3C,CAAC;IACD,eAAe,EAAE;MACf,0BAA0B,EAAE,CAAC,CAAC;MAC9B,qBAAqB,EAAE;QACrB,oCAAoC,EAAE,CAAC,CAAC;QACxC,QAAQ,EAAE;UACR,2CAA2C,EAAE,CAAC,CAAC;UAC/C,YAAY,EAAE;YACZ,2BAA2B,EAAE,CAAC;UAChC,CAAC;UACD,aAAa,EAAE;YACb,2BAA2B,EAAE,CAAC;UAChC,CAAC;UACD,0BAA0B,EAAE;YAC1B,mCAAmC,EAAE,CAAC;UACxC;QACF;MACF,CAAC;MACD,sBAAsB,EAAE;QACtB,eAAe,EAAE,CAAC;MACpB;IACF;EACF;AACF,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "license": "MIT",
   "main": "src/index.js",
   "module": "dist/esm/index.js",
@@ -29,16 +29,16 @@
     "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.16",
     "clean-css": "^5.3.2",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.31",
     "postcss-import": "^15.1.0",
-    "tailwind-scrollbar": "^3.0.4",
-    "tailwindcss": "^3.2.7"
+    "tailwind-scrollbar": "^3.0.5",
+    "tailwindcss": "^3.3.3"
   },
   "dependencies": {
-    "@sk-web-gui/theme": "0.1.13",
+    "@sk-web-gui/theme": "0.1.14",
     "mini-svg-data-uri": "^1.4.4"
   },
-  "gitHead": "bd506549378bafde0466b548b18149a2014145ca"
+  "gitHead": "5b6d3cdfd0d6759a07a934b16faed307f7f7eb3b"
 }

package/src/components/button.js

@@ -74,8 +74,8 @@ function buttonSolid(colors) {
       },
 
       '&.btn': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+        '&-disabled, &[aria-disabled="true"]': {
+          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},
           '&.active': {
             '@apply border-gray-stroke': {},
           },
@@ -154,8 +154,8 @@ function buttonOutline(colors) {
       ),
 
       '&.btn': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+        '&-disabled, &[aria-disabled="true"]': {
+          '@apply disabled:border-gray-stroke border-gray-stroke hover:border-gray-stroke': {},
           '&.active': {
             '@apply border-gray-stroke': {},
           },
@@ -168,91 +168,16 @@ function buttonOutline(colors) {
 function buttonGhost(colors) {
   return {
     '&-ghost': {
-      '@apply text-body bg-transparent': {},
-      '@apply hover:bg-neutral-100': {},
       /* focus */
       '@apply focus-visible:z-base': {},
       '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
-      /* active */
-      '@apply active:bg-neutral-200': {},
-      /* dark mode */
-      '@apply dark:text-neutral-100 dark:bg-transparent': {},
-      /* dark hover */
-      '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
-      /* dark active */
-      '@apply dark:active:bg-neutral-600 dark:active:border-neutral-400': {},
 
       ...colors.reduce(
         (styles, color) => ({
           ...styles,
           [`&[data-color="${color}"]`]: {
-            [`@apply text-${color}-600`]: {},
-            [`@apply hover:bg-${color}-50`]: {},
             /* focus */
             [`@apply focus-visible:ring-${color}-500`]: {},
-            [`@apply active:bg-${color}-100`]: {},
-            // dark colors
-            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},
-            [`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},
-            [`@apply dark:hover:bg-opacity-15`]: {},
-            [`@apply dark:active:bg-${color}-200`]: {},
-            [`@apply dark:active:bg-opacity-25`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function buttonLight(colors) {
-  return {
-    '&-light': {
-      '@apply shadow-sm': {},
-      '@apply border border-transparent': {},
-      '@apply text-body bg-neutral-100': {},
-      /* hover */
-      '@apply hover:bg-neutral-200': {},
-      /* focus */
-      '@apply focus-visible:z-base': {},
-      '@apply focus-visible:border-primary-500': {},
-      '@apply focus-visible:ring-4 focus-visible:ring-primary-500': {},
-      /* active */
-      '@apply active:bg-neutral-300': {},
-      /* dark mode */
-      '@apply dark:border-transparent': {},
-      '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
-      /* dark hover */
-      '@apply dark:hover:bg-neutral-600': {},
-      /* dark focus */
-      '@apply dark:focus-visible:border-primary-500': {},
-      /* dark active */
-      '@apply dark:active:bg-neutral-600': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply text-${color}-600 bg-${color}-50`]: {},
-            /* hover */
-            [`@apply hover:bg-${color}-100`]: {},
-            /* focus */
-            [`@apply focus-visible:border-${color}-500`]: {},
-            [`@apply focus-visible:ring-${color}-500`]: {},
-            /* active */
-            [`@apply active:bg-${color}-200`]: {},
-            /* dark mode */
-            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
-            [`@apply dark:bg-opacity-15`]: {},
-            /* dark hover */
-            [`@apply dark:hover:bg-${color}-500`]: {},
-            [`@apply dark:hover:bg-opacity-25`]: {},
-            /* dark focus */
-            [`@apply dark:focus-visible:border-${color}-500`]: {},
-            [`@apply dark:focus-visible:ring-${color}-500`]: {},
-            /* dark active */
-            [`@apply dark:active:bg-${color}-500`]: {},
-            [`@apply dark:active:bg-opacity-30`]: {},
           },
         }),
         {}
@@ -332,9 +257,9 @@ module.exports = Button = (colors) => ({
 
     // State
 
-    '&-disabled': {
-      '@apply disabled:shadow-none disabled:cursor-not-allowed': {},
-      '@apply disabled:text-gray disabled:bg-gray-light !important': {},
+    '&-disabled, &[aria-disabled="true"]': {
+      '@apply shadow-none disabled:shadow-none disabled:cursor-not-allowed cursor-not-allowed': {},
+      '@apply disabled:text-gray text-gray disabled:bg-gray-light bg-gray-light !important': {},
     },
     '.MuiSvgIcon-root': {
       fontSize: '1.5em',
@@ -345,8 +270,7 @@ module.exports = Button = (colors) => ({
     // variants
     ...buttonSolid(colors),
     ...buttonOutline(colors),
-    //...buttonGhost(colors),
-    //...buttonLight(colors),
+    ...buttonGhost(colors),
     ...buttonLink(colors),
   },
   '.btn-has-icon': {

package/src/components/pagination.js

@@ -47,7 +47,7 @@ module.exports = Pagination = () => ({
       },
 
       "&[disabled='false']": {
-        '&-label, &-icon': {
+        '.sk-pagination-prevNextButton-label, .sk-pagination-prevNextButton-icon': {
           '@apply cursor-pointer': {},
         },
       },