Release 0.1.2 - Fix opacity issue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/components/Button/Button.tsx

@@ -41,7 +41,7 @@ export const Button: React.FC<ButtonProps> = ({
   return (
     <Component
       className={classNames(
-        "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:duration-100 ink:box-border",
+        "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border",
         "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:select-none ink:no-underline",
         variantClassNames(size, {
           sm: "ink:px-2 ink:py-1.5 ink:text-body-2-bold ink:h-5",

src/components/Checkbox/Checkbox.tsx

@@ -19,7 +19,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       indeterminate={!checked && indeterminate}
       className={classNames(
         "ink:group ink:relative ink:flex ink:items-center ink:justify-center ink:size-3 ink:shrink-0 ink:cursor-pointer ink:rounded-xs ink:box-border",
-        "ink:transition-colors ink:duration-200 ink:ease-in-out",
+        "ink:transition-colors ink:transition-default-animation",
         "ink:border-2 ink:border-transparent ink:bg-background-container ink:shadow-xs",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-button-primary ink:data-checked:hover:bg-button-primary-hover",
@@ -30,7 +30,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       <div className="ink:absolute ink:inset-0 ink:flex ink:items-center ink:justify-center">
         {/** See if those SVGs should be icons in our standard icon library. */}
         <svg
-          className="ink:size-1.5 ink:text-text-on-primary ink:group-data-indeterminate:opacity-0 ink:transition-opacity ink:duration-200 ink:ease-in-out opacity-0 starting:opacity-100"
+          className="ink:size-1.5 ink:text-text-on-primary ink:group-data-indeterminate:opacity-0 ink:transition-opacity ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
           width="12"
           height="12"
           viewBox="0 0 12 12"
@@ -47,7 +47,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       </div>
 
       <svg
-        className="ink:size-1.5 ink:text-text-on-primary ink:group-not-data-indeterminate:opacity-0 ink:transition-opacity ink:duration-200 ink:ease-in-out opacity-0 starting:opacity-100"
+        className="ink:size-1.5 ink:text-text-on-primary ink:group-not-data-indeterminate:opacity-0 ink:transition-opacity ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
         width="12"
         height="2"
         viewBox="0 0 12 2"

src/components/Modal/Modal.tsx

@@ -60,7 +60,7 @@ export const Modal = <TOnCloseProps,>({
         {hasBackdrop && (
           <DialogBackdrop
             transition
-            className="ink:fixed ink:inset-0 ink:transition-opacity ink:duration-200 ink:backdrop-blur-lg ink:data-closed:opacity-0"
+            className="ink:fixed ink:inset-0 ink:transition-opacity ink:transition-default-animation ink:backdrop-blur-lg ink:data-closed:opacity-0"
           />
         )}
         <div
@@ -74,7 +74,7 @@ export const Modal = <TOnCloseProps,>({
             className={classNames(
               "ink:flex ink:flex-col ink:justify-between ink:gap-3 ink:p-3",
               "ink:bg-background-light ink:shadow-modal ink:rounded-lg",
-              "ink:duration-200 ink:ease-out ink:data-closed:scale-95 ink:data-closed:opacity-0",
+              "ink:transition-default-animation ink:data-closed:scale-95 ink:data-closed:opacity-0",
               variantClassNames(size, {
                 lg: "ink:min-w-[320px] ink:sm:min-w-[640px] ink:min-h-[480px] ink:max-w-4xl",
                 md: "ink:min-w-[200px] ink:sm:min-w-[300px] ink:min-h-[300px]",

src/components/Popover/PopoverPanel.tsx

@@ -15,7 +15,8 @@ export const PopoverPanel: React.FC<PopoverPanelProps> = ({
       className={classNames(
         "ink:absolute ink:z-10 ink:min-w-[240px]",
         "ink:rounded-lg ink:bg-background-light ink:p-1.5 ink:shadow-menu",
-        "ink:flex ink:flex-col ink:gap-1.5"
+        "ink:flex ink:flex-col ink:gap-1.5",
+        "ink:transition-opacity ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
       )}
       anchor={{ to: "bottom end", gap: 8 }}
     >

src/components/Radio/Radio.tsx

@@ -14,14 +14,14 @@ export const Radio: React.FC<RadioProps> = ({ value, asChild }) => {
       value={value}
       className={classNames(
         "ink:group ink:relative ink:flex ink:items-center ink:justify-center ink:size-3 ink:shrink-0 ink:cursor-pointer ink:rounded-full ink:box-border",
-        "ink:transition-colors ink:duration-200 ink:ease-in-out",
+        "ink:transition-colors ink:transition-default-animation",
         "ink:border-2 ink:border-transparent ink:bg-background-container ink:shadow-xs",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-button-primary ink:data-checked:hover:bg-button-primary-hover"
       )}
     >
       <div className="ink:absolute ink:inset-0 ink:flex ink:items-center ink:justify-center">
-        <div className="ink:size-[10px] ink:rounded-full ink:bg-background-light ink:transition-opacity ink:duration-200 ink:ease-in-out ink:opacity-0 ink:group-data-checked:opacity-100" />
+        <div className="ink:size-[10px] ink:rounded-full ink:bg-background-light ink:transition-opacity ink:transition-default-animation ink:opacity-0 ink:group-data-checked:opacity-100" />
       </div>
     </Component>
   );

src/components/SegmentedControl/SegmentedControl.tsx

@@ -59,7 +59,7 @@ export const SegmentedControl = <TOptionValue extends string>({
     <div className="ink:relative ink:font-default">
       {isMounted && selectedOption && (
         <div
-          className="ink:absolute ink:transition-all ink:duration-200 ink:p-0.5 ink:box-border opacity-0 starting:opacity-100"
+          className="ink:absolute ink:p-0.5 ink:box-border ink:transition-all ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
           style={{
             top: 0,
             bottom: 0,
@@ -96,7 +96,7 @@ export const SegmentedControl = <TOptionValue extends string>({
           return (
             <ButtonComponent
               className={classNames(
-                "ink:h-full ink:box-border ink:rounded-full ink:relative ink:z-10 ink:transition-colors ink:duration-200 ink:hover:cursor-pointer ink:select-none ink:no-underline ink:flex ink:items-center ink:justify-center",
+                "ink:h-full ink:box-border ink:rounded-full ink:relative ink:z-10 ink:transition-colors ink:transition-default-animation ink:hover:cursor-pointer ink:select-none ink:no-underline ink:flex ink:items-center ink:justify-center",
                 selectedOption === option.value
                   ? "ink:text-text-default"
                   : "ink:text-text-on-secondary",

src/components/Toggle/Toggle.tsx

@@ -13,7 +13,7 @@ export const Toggle: React.FC<ToggleProps> = ({ checked, onChange }) => {
       onChange={onChange}
       className={classNames(
         "ink:group ink:relative ink:inline-flex ink:h-4 ink:w-6 ink:shrink-0 ink:cursor-pointer ink:rounded-full ink:box-border",
-        "ink:transition-colors ink:duration-200 ink:ease-in-out",
+        "ink:transition-colors ink:transition-default-animation",
         "ink:border-2 ink:border-transparent ink:bg-background-container",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-status-success",
@@ -32,7 +32,7 @@ export const Toggle: React.FC<ToggleProps> = ({ checked, onChange }) => {
         }
         className={classNames(
           "ink:box-border ink:pointer-events-none ink:inline-block ink:size-3 ink:transform ink:rounded-full ink:bg-text-on-primary ink:shadow ink:ring-0",
-          "ink:transition ink:duration-200 ink:ease-in-out",
+          "ink:transition ink:transition-default-animation",
           "ink:group-data-checked:translate-x-(--ink-translate-x)"
         )}
       />

src/layout/InkLayout/InkNavLink.tsx

@@ -26,7 +26,7 @@ export const InkNavLink: React.FC<InkNavLinkProps> = ({
     <Component
       href={href}
       className={classNames(
-        "ink:flex ink:items-center ink:gap-1.5 ink:px-1.5 ink:py-1.5 ink:text-inherit ink:no-underline ink:rounded-md ink:transition-colors ink:duration-200 ink:hover:bg-background-container",
+        "ink:flex ink:items-center ink:gap-1.5 ink:px-1.5 ink:py-1.5 ink:text-inherit ink:no-underline ink:rounded-md ink:transition-colors ink:transition-default-animation ink:hover:bg-background-container",
         className
       )}
       draggable={false}

src/tailwind.css

@@ -173,3 +173,7 @@
   --shadow-modal: 0px 16px 64px -32px #160f1f1a;
   --shadow-layout: 0px 16px 64px -32px #160f1f0d;
 }
+
+@utility transition-default-animation {
+  @apply ink:duration-200 ink:ease-in-out;
+}