@xjur-ui/react 3.0.0 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @xjur-ui/react
 
+## 3.0.1
+
+### Patch Changes
+
+- Fix background linear of carousel action
+
 ## 3.0.0
 
 ### Major Changes

package/dist/components/carousel/carousel-action.js

@@ -1 +1 @@
-import{twMerge as T}from"@xjur-ui/util";import{useState as c,useCallback as v,useEffect as E,useContext as V}from"react";import{cx as C}from"@xjur-ui/util";import{jsx as k}from"react/jsx-runtime";function u({className:r,filled:l=!1,name:s,...t}){return k("span",{...t,className:C("material-symbols-outlined","text-size-body-lg select-none",r),style:{fontVariationSettings:`'FILL' ${l?1:0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,...t.style},children:s})}import{Slot as z}from"@radix-ui/react-slot";import{cva as R,cx as P}from"@xjur-ui/util";import{jsx as S}from"react/jsx-runtime";var L=R(["outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"],{variants:{size:{md:"py-small_1x-alt px-medium text-size-body-md",sm:"py-small-1x px-small text-size-label-sm",icon_md:"p-small text-size-body-md h-large-4x w-large-4x",icon_sm:"p-small-1x text-size-label-sm h-large-2x w-large-2x"},variant:{primary:"",secondary:"",tertiary:"",destructive:"",outlined:"bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"},appearance:{solid:"",ghost:"bg-transparent"}},compoundVariants:[{variant:"primary",appearance:"solid",class:"bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"},{variant:"primary",appearance:"ghost",class:"text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"},{variant:"secondary",appearance:"solid",class:"bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"},{variant:"secondary",appearance:"ghost",class:"hover:bg-layer-1-hover active:bg-layer-1-pressed"},{variant:"tertiary",appearance:"solid",class:"bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"},{variant:"tertiary",appearance:"ghost",class:"hover:bg-layer-2-hover active:bg-layer-2-pressed"},{variant:"destructive",appearance:"solid",class:"bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"},{variant:"destructive",appearance:"ghost",class:"text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"}],defaultVariants:{size:"md",variant:"primary",appearance:"solid"}});function f({asChild:r,className:l,variant:s="primary",size:t="md",appearance:o="solid",...i}){return S(r?z:"button",{className:P(L({variant:s,appearance:o,size:t}),l),...i})}import{twMerge as F}from"@xjur-ui/util";import{createContext as I,useRef as J}from"react";import{jsx as Q}from"react/jsx-runtime";var _=I({scrollAmount:500,scrollRef:{current:null}});import{jsx as p}from"react/jsx-runtime";function te({direction:r,className:l,...s}){let{scrollAmount:t,scrollRef:o}=V(_),[i,d]=c(!1),[b,g]=c(!1),[y,m]=c(!1),a=v(()=>{let e=o.current;if(!e)return;let{scrollLeft:n,scrollWidth:x,clientWidth:w}=e;d(n>0),g(n<x-w)},[o]),h=v(()=>{let e=o.current;e&&(m(!0),e.scrollTo({left:r==="left"?e.scrollLeft-t:e.scrollLeft+t,behavior:"smooth"}),setTimeout(()=>m(!1),300))},[r,t,o]);return E(()=>{let e=o.current;if(!e)return;a(),e.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a);let n=null;return typeof ResizeObserver<"u"&&(n=new ResizeObserver(a),n.observe(e)),()=>{e.removeEventListener("scroll",a),window.removeEventListener("resize",a),n&&n.disconnect()}},[a,o]),r==="right"&&!b||r==="left"&&!i?null:p("div",{className:T("absolute top-1/2 z-1000 flex h-full -translate-y-1/2 items-center justify-end","animate-in fade-in transition-all duration-300",r==="right"&&"right-0",r==="left"&&"left-0",l),...s,children:p(f,{appearance:"ghost","aria-label":"Scroll right",disabled:y,size:"icon_md",variant:"secondary",onClick:h,children:p(u,{name:`chevron_${r}`})})})}export{te as CarouselAction};
+import{twMerge as T}from"@xjur-ui/util";import{useState as c,useCallback as v,useEffect as E,useContext as V}from"react";import{cx as C}from"@xjur-ui/util";import{jsx as k}from"react/jsx-runtime";function u({className:e,filled:l=!1,name:s,...t}){return k("span",{...t,className:C("material-symbols-outlined","text-size-body-lg select-none",e),style:{fontVariationSettings:`'FILL' ${l?1:0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,...t.style},children:s})}import{Slot as z}from"@radix-ui/react-slot";import{cva as R,cx as P}from"@xjur-ui/util";import{jsx as S}from"react/jsx-runtime";var L=R(["outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"],{variants:{size:{md:"py-small_1x-alt px-medium text-size-body-md",sm:"py-small-1x px-small text-size-label-sm",icon_md:"p-small text-size-body-md h-large-4x w-large-4x",icon_sm:"p-small-1x text-size-label-sm h-large-2x w-large-2x"},variant:{primary:"",secondary:"",tertiary:"",destructive:"",outlined:"bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"},appearance:{solid:"",ghost:"bg-transparent"}},compoundVariants:[{variant:"primary",appearance:"solid",class:"bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"},{variant:"primary",appearance:"ghost",class:"text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"},{variant:"secondary",appearance:"solid",class:"bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"},{variant:"secondary",appearance:"ghost",class:"hover:bg-layer-1-hover active:bg-layer-1-pressed"},{variant:"tertiary",appearance:"solid",class:"bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"},{variant:"tertiary",appearance:"ghost",class:"hover:bg-layer-2-hover active:bg-layer-2-pressed"},{variant:"destructive",appearance:"solid",class:"bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"},{variant:"destructive",appearance:"ghost",class:"text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"}],defaultVariants:{size:"md",variant:"primary",appearance:"solid"}});function f({asChild:e,className:l,variant:s="primary",size:t="md",appearance:o="solid",...i}){return S(e?z:"button",{className:P(L({variant:s,appearance:o,size:t}),l),...i})}import{twMerge as F}from"@xjur-ui/util";import{createContext as I,useRef as J}from"react";import{jsx as Q}from"react/jsx-runtime";var _=I({scrollAmount:500,scrollRef:{current:null}});import{jsx as p}from"react/jsx-runtime";function te({direction:e,className:l,...s}){let{scrollAmount:t,scrollRef:o}=V(_),[i,d]=c(!1),[b,g]=c(!1),[y,m]=c(!1),a=v(()=>{let r=o.current;if(!r)return;let{scrollLeft:n,scrollWidth:x,clientWidth:w}=r;d(n>0),g(n<x-w)},[o]),h=v(()=>{let r=o.current;r&&(m(!0),r.scrollTo({left:e==="left"?r.scrollLeft-t:r.scrollLeft+t,behavior:"smooth"}),setTimeout(()=>m(!1),300))},[e,t,o]);return E(()=>{let r=o.current;if(!r)return;a(),r.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a);let n=null;return typeof ResizeObserver<"u"&&(n=new ResizeObserver(a),n.observe(r)),()=>{r.removeEventListener("scroll",a),window.removeEventListener("resize",a),n&&n.disconnect()}},[a,o]),e==="right"&&!b||e==="left"&&!i?null:p("div",{className:T("absolute top-1/2 z-1000 flex h-full -translate-y-1/2 items-center justify-end","animate-in fade-in transition-all duration-300",e==="right"&&"right-0",e==="left"&&"left-0",l),...s,style:{background:`linear-gradient(to ${e}, transparent, rgba(0, 0, 0, 0.08) 100%)`},children:p(f,{appearance:"ghost","aria-label":"Scroll right",disabled:y,size:"icon_md",variant:"secondary",onClick:h,children:p(u,{name:`chevron_${e}`})})})}export{te as CarouselAction};

package/dist/components/carousel/carousel-content.js

@@ -1 +1 @@
-import{twMerge as n}from"@xjur-ui/util";import{useContext as s}from"react";import{twMerge as i}from"@xjur-ui/util";import{createContext as l,useRef as a}from"react";import{jsx as f}from"react/jsx-runtime";var o=l({scrollAmount:500,scrollRef:{current:null}});import{jsx as m}from"react/jsx-runtime";function x({className:e,...r}){let{scrollRef:t}=s(o);return m("div",{className:n("gap-small bg-layer-2-idle relative z-[5] flex items-center","scrollbar-hide overflow-x-auto overflow-y-visible","p-small min-w-0",e),ref:t,...r})}export{x as CarouselContent};
+import{twMerge as n}from"@xjur-ui/util";import{useContext as s}from"react";import{twMerge as p}from"@xjur-ui/util";import{createContext as l,useRef as c}from"react";import{jsx as f}from"react/jsx-runtime";var o=l({scrollAmount:500,scrollRef:{current:null}});import{jsx as m}from"react/jsx-runtime";function d({className:e,...t}){let{scrollRef:r}=s(o);return m("div",{className:n("gap-small relative z-[5] flex items-center","scrollbar-hide overflow-x-auto overflow-y-visible","py-small min-w-0",e),ref:r,...t})}export{d as CarouselContent};

package/dist/components/carousel/index.js

@@ -1 +1 @@
-import{twMerge as k}from"@xjur-ui/util";import{createContext as P,useRef as R}from"react";import{jsx as f}from"react/jsx-runtime";var i=P({scrollAmount:500,scrollRef:{current:null}});function z({className:e,scrollAmount:o=500,...a}){let t=R(null);return f(i.Provider,{value:{scrollAmount:o,scrollRef:t},children:f("div",{className:k("group/carousel-root relative isolate",e),...a})})}import{twMerge as L}from"@xjur-ui/util";import{useContext as I}from"react";import{jsx as T}from"react/jsx-runtime";function S({className:e,...o}){let{scrollRef:a}=I(i);return T("div",{className:L("gap-small bg-layer-2-idle relative z-[5] flex items-center","scrollbar-hide overflow-x-auto overflow-y-visible","p-small min-w-0",e),ref:a,...o})}import{twMerge as D}from"@xjur-ui/util";import{useState as p,useCallback as b,useEffect as q,useContext as H}from"react";import{cx as A}from"@xjur-ui/util";import{jsx as E}from"react/jsx-runtime";function v({className:e,filled:o=!1,name:a,...t}){return E("span",{...t,className:A("material-symbols-outlined","text-size-body-lg select-none",e),style:{fontVariationSettings:`'FILL' ${o?1:0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,...t.style},children:a})}import{Slot as V}from"@radix-ui/react-slot";import{cva as M,cx as N}from"@xjur-ui/util";import{jsx as B}from"react/jsx-runtime";var O=M(["outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"],{variants:{size:{md:"py-small_1x-alt px-medium text-size-body-md",sm:"py-small-1x px-small text-size-label-sm",icon_md:"p-small text-size-body-md h-large-4x w-large-4x",icon_sm:"p-small-1x text-size-label-sm h-large-2x w-large-2x"},variant:{primary:"",secondary:"",tertiary:"",destructive:"",outlined:"bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"},appearance:{solid:"",ghost:"bg-transparent"}},compoundVariants:[{variant:"primary",appearance:"solid",class:"bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"},{variant:"primary",appearance:"ghost",class:"text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"},{variant:"secondary",appearance:"solid",class:"bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"},{variant:"secondary",appearance:"ghost",class:"hover:bg-layer-1-hover active:bg-layer-1-pressed"},{variant:"tertiary",appearance:"solid",class:"bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"},{variant:"tertiary",appearance:"ghost",class:"hover:bg-layer-2-hover active:bg-layer-2-pressed"},{variant:"destructive",appearance:"solid",class:"bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"},{variant:"destructive",appearance:"ghost",class:"text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"}],defaultVariants:{size:"md",variant:"primary",appearance:"solid"}});function _({asChild:e,className:o,variant:a="primary",size:t="md",appearance:n="solid",...c}){return B(e?V:"button",{className:N(O({variant:a,appearance:n,size:t}),o),...c})}import{jsx as d}from"react/jsx-runtime";function W({direction:e,className:o,...a}){let{scrollAmount:t,scrollRef:n}=H(i),[c,m]=p(!1),[g,y]=p(!1),[h,u]=p(!1),l=b(()=>{let r=n.current;if(!r)return;let{scrollLeft:s,scrollWidth:w,clientWidth:C}=r;m(s>0),y(s<w-C)},[n]),x=b(()=>{let r=n.current;r&&(u(!0),r.scrollTo({left:e==="left"?r.scrollLeft-t:r.scrollLeft+t,behavior:"smooth"}),setTimeout(()=>u(!1),300))},[e,t,n]);return q(()=>{let r=n.current;if(!r)return;l(),r.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l);let s=null;return typeof ResizeObserver<"u"&&(s=new ResizeObserver(l),s.observe(r)),()=>{r.removeEventListener("scroll",l),window.removeEventListener("resize",l),s&&s.disconnect()}},[l,n]),e==="right"&&!g||e==="left"&&!c?null:d("div",{className:D("absolute top-1/2 z-1000 flex h-full -translate-y-1/2 items-center justify-end","animate-in fade-in transition-all duration-300",e==="right"&&"right-0",e==="left"&&"left-0",o),...a,children:d(_,{appearance:"ghost","aria-label":"Scroll right",disabled:h,size:"icon_md",variant:"secondary",onClick:x,children:d(v,{name:`chevron_${e}`})})})}import{twMerge as $}from"@xjur-ui/util";import"react";import{jsx as G}from"react/jsx-runtime";function F({className:e,...o}){return G("div",{className:$("relative flex-none whitespace-nowrap",e),...o})}export{W as CarouselAction,S as CarouselContent,F as CarouselItem,z as CarouselRoot};
+import{twMerge as k}from"@xjur-ui/util";import{createContext as P,useRef as R}from"react";import{jsx as f}from"react/jsx-runtime";var i=P({scrollAmount:500,scrollRef:{current:null}});function z({className:e,scrollAmount:t=500,...a}){let o=R(null);return f(i.Provider,{value:{scrollAmount:t,scrollRef:o},children:f("div",{className:k("group/carousel-root relative isolate",e),...a})})}import{twMerge as L}from"@xjur-ui/util";import{useContext as I}from"react";import{jsx as T}from"react/jsx-runtime";function S({className:e,...t}){let{scrollRef:a}=I(i);return T("div",{className:L("gap-small relative z-[5] flex items-center","scrollbar-hide overflow-x-auto overflow-y-visible","py-small min-w-0",e),ref:a,...t})}import{twMerge as D}from"@xjur-ui/util";import{useState as p,useCallback as b,useEffect as $,useContext as q}from"react";import{cx as A}from"@xjur-ui/util";import{jsx as E}from"react/jsx-runtime";function v({className:e,filled:t=!1,name:a,...o}){return E("span",{...o,className:A("material-symbols-outlined","text-size-body-lg select-none",e),style:{fontVariationSettings:`'FILL' ${t?1:0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,...o.style},children:a})}import{Slot as V}from"@radix-ui/react-slot";import{cva as M,cx as N}from"@xjur-ui/util";import{jsx as B}from"react/jsx-runtime";var O=M(["outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors"],{variants:{size:{md:"py-small_1x-alt px-medium text-size-body-md",sm:"py-small-1x px-small text-size-label-sm",icon_md:"p-small text-size-body-md h-large-4x w-large-4x",icon_sm:"p-small-1x text-size-label-sm h-large-2x w-large-2x"},variant:{primary:"",secondary:"",tertiary:"",destructive:"",outlined:"bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed"},appearance:{solid:"",ghost:"bg-transparent"}},compoundVariants:[{variant:"primary",appearance:"solid",class:"bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed"},{variant:"primary",appearance:"ghost",class:"text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed"},{variant:"secondary",appearance:"solid",class:"bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active"},{variant:"secondary",appearance:"ghost",class:"hover:bg-layer-1-hover active:bg-layer-1-pressed"},{variant:"tertiary",appearance:"solid",class:"bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active"},{variant:"tertiary",appearance:"ghost",class:"hover:bg-layer-2-hover active:bg-layer-2-pressed"},{variant:"destructive",appearance:"solid",class:"bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed"},{variant:"destructive",appearance:"ghost",class:"text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed"}],defaultVariants:{size:"md",variant:"primary",appearance:"solid"}});function _({asChild:e,className:t,variant:a="primary",size:o="md",appearance:n="solid",...c}){return B(e?V:"button",{className:N(O({variant:a,appearance:n,size:o}),t),...c})}import{jsx as d}from"react/jsx-runtime";function H({direction:e,className:t,...a}){let{scrollAmount:o,scrollRef:n}=q(i),[c,m]=p(!1),[g,y]=p(!1),[h,u]=p(!1),l=b(()=>{let r=n.current;if(!r)return;let{scrollLeft:s,scrollWidth:w,clientWidth:C}=r;m(s>0),y(s<w-C)},[n]),x=b(()=>{let r=n.current;r&&(u(!0),r.scrollTo({left:e==="left"?r.scrollLeft-o:r.scrollLeft+o,behavior:"smooth"}),setTimeout(()=>u(!1),300))},[e,o,n]);return $(()=>{let r=n.current;if(!r)return;l(),r.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l);let s=null;return typeof ResizeObserver<"u"&&(s=new ResizeObserver(l),s.observe(r)),()=>{r.removeEventListener("scroll",l),window.removeEventListener("resize",l),s&&s.disconnect()}},[l,n]),e==="right"&&!g||e==="left"&&!c?null:d("div",{className:D("absolute top-1/2 z-1000 flex h-full -translate-y-1/2 items-center justify-end","animate-in fade-in transition-all duration-300",e==="right"&&"right-0",e==="left"&&"left-0",t),...a,style:{background:`linear-gradient(to ${e}, transparent, rgba(0, 0, 0, 0.08) 100%)`},children:d(_,{appearance:"ghost","aria-label":"Scroll right",disabled:h,size:"icon_md",variant:"secondary",onClick:x,children:d(v,{name:`chevron_${e}`})})})}import{twMerge as W}from"@xjur-ui/util";import"react";import{jsx as G}from"react/jsx-runtime";function F({className:e,...t}){return G("div",{className:W("relative flex-none whitespace-nowrap",e),...t})}export{H as CarouselAction,S as CarouselContent,F as CarouselItem,z as CarouselRoot};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xjur-ui/react",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "type": "module",
   "description": "React components for XJur Design System",
   "types": "dist/index.d.ts",