{
  "name": "shadcn-utilities",
  "type": "registry:file",
  "description": "Слой утилит shadcn, на который опираются наборы пластики.",
  "files": [
    {
      "path": "styles/shadcn-utilities.css",
      "type": "registry:file",
      "target": "styles/shadcn-utilities.css",
      "content": "/* Слой утилит shadcn-vue: no-scrollbar, scroll-fade-*, shimmer-* и прочее, на что\n * опираются файлы стилей. На сайте документации он приходит строкой\n * `@import \"shadcn-vue/tailwind.css\"`, но в опубликованном пакете shadcn-vue 2.8.2 этого\n * файла нет — он существует только в монорепе. Поэтому лежит здесь копией и обновляется\n * скриптом `pnpm sync` вместе с остальным.\n */\n\n@theme inline {\n  @keyframes accordion-down {\n    from {\n      height: 0;\n    }\n    to {\n      height: var(\n        --reka-accordion-content-height,\n        var(--accordion-panel-height, auto)\n      );\n    }\n  }\n\n  @keyframes accordion-up {\n    from {\n      height: var(\n        --reka-accordion-content-height,\n        var(--accordion-panel-height, auto)\n      );\n    }\n    to {\n      height: 0;\n    }\n  }\n}\n\n/* Custom variants */\n@custom-variant data-open {\n  &:where([data-state=\"open\"]),\n  &:where([data-open]:not([data-open=\"false\"])) {\n    @slot;\n  }\n}\n\n@custom-variant data-closed {\n  &:where([data-state=\"closed\"]),\n  &:where([data-closed]:not([data-closed=\"false\"])) {\n    @slot;\n  }\n}\n\n@custom-variant data-checked {\n  &:where([data-state=\"checked\"]),\n  &:where([data-checked]:not([data-checked=\"false\"])) {\n    @slot;\n  }\n}\n\n@custom-variant data-unchecked {\n  &:where([data-state=\"unchecked\"]),\n  &:where([data-unchecked]:not([data-unchecked=\"false\"])) {\n    @slot;\n  }\n}\n\n@custom-variant data-selected {\n  &:where([data-selected=\"true\"]) {\n    @slot;\n  }\n}\n\n@custom-variant data-disabled {\n  &:where([data-disabled=\"true\"]),\n  &:where([data-disabled]:not([data-disabled=\"false\"])) {\n    @slot;\n  }\n}\n\n@custom-variant data-active {\n  &:where([data-state=\"active\"]),\n  &:where([data-active]:not([data-active=\"false\"])) {\n    @slot;\n  }\n}\n\n@custom-variant data-horizontal {\n  &:where([data-orientation=\"horizontal\"]) {\n    @slot;\n  }\n}\n\n@custom-variant data-vertical {\n  &:where([data-orientation=\"vertical\"]) {\n    @slot;\n  }\n}\n\n@utility no-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n@utility scrollbar-thumb-transparent {\n  --tw-scrollbar-thumb: transparent;\n  scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track, transparent);\n\n  &::-webkit-scrollbar-thumb {\n    background-color: transparent;\n  }\n}\n\n@utility scrollbar-track-transparent {\n  --tw-scrollbar-track: transparent;\n  scrollbar-color: var(--tw-scrollbar-thumb, transparent) var(--tw-scrollbar-track);\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n}\n\n/* scroll-fade */\n@property --scroll-fade-t {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --scroll-fade-b {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --scroll-fade-s {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --scroll-fade-e {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --scroll-fade-mask {\n  syntax: \"*\";\n  inherits: false;\n}\n\n@theme inline {\n  @keyframes scroll-fade-reveal-t {\n    from {\n      --scroll-fade-t: 0px;\n    }\n    to {\n      --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n    }\n  }\n  @keyframes scroll-fade-reveal-b {\n    from {\n      --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n    }\n    to {\n      --scroll-fade-b: 0px;\n    }\n  }\n  @keyframes scroll-fade-reveal-s {\n    from {\n      --scroll-fade-s: 0px;\n    }\n    to {\n      --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n    }\n  }\n  @keyframes scroll-fade-reveal-e {\n    from {\n      --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));\n    }\n    to {\n      --scroll-fade-e: 0px;\n    }\n  }\n}\n\n@utility scroll-fade {\n  --_scroll-fade-size-t: var(\n    --scroll-fade-t-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --_scroll-fade-size-b: var(\n    --scroll-fade-b-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-block: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-t, 0px),\n    #000 calc(100% - var(--scroll-fade-b, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));\n  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation:\n      scroll-fade-reveal-t 1ms ease-in-out,\n      scroll-fade-reveal-b 1ms ease-in-out;\n    animation-timeline: scroll(self y), scroll(self y);\n    animation-range:\n      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),\n      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-t: var(--_scroll-fade-size-t);\n    --scroll-fade-b: var(--_scroll-fade-size-b);\n  }\n}\n\n@utility scroll-fade-y {\n  --_scroll-fade-size-t: var(\n    --scroll-fade-t-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --_scroll-fade-size-b: var(\n    --scroll-fade-b-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-block: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-t, 0px),\n    #000 calc(100% - var(--scroll-fade-b, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));\n  mask-image: var(--scroll-fade-mask, var(--scroll-fade-block));\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation:\n      scroll-fade-reveal-t 1ms ease-in-out,\n      scroll-fade-reveal-b 1ms ease-in-out;\n    animation-timeline: scroll(self y), scroll(self y);\n    animation-range:\n      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),\n      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-t: var(--_scroll-fade-size-t);\n    --scroll-fade-b: var(--_scroll-fade-size-b);\n  }\n}\n\n@utility scroll-fade-x {\n  --_scroll-fade-size-s: var(\n    --scroll-fade-s-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --_scroll-fade-size-e: var(\n    --scroll-fade-e-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-inline: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--scroll-fade-s, 0px),\n    #000 calc(100% - var(--scroll-fade-e, 0px)),\n    transparent 100%\n  );\n  &:where([dir=\"rtl\"], [dir=\"rtl\"] *) {\n    --scroll-fade-inline: linear-gradient(\n      to left,\n      transparent 0,\n      #000 var(--scroll-fade-s, 0px),\n      #000 calc(100% - var(--scroll-fade-e, 0px)),\n      transparent 100%\n    );\n  }\n  -webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));\n  mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation:\n      scroll-fade-reveal-s 1ms ease-in-out,\n      scroll-fade-reveal-e 1ms ease-in-out;\n    animation-timeline: scroll(self inline), scroll(self inline);\n    animation-range:\n      0 var(--scroll-fade-reveal, calc(var(--spacing) * 24)),\n      calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-s: var(--_scroll-fade-size-s);\n    --scroll-fade-e: var(--_scroll-fade-size-e);\n  }\n}\n\n@utility scroll-fade-t {\n  --_scroll-fade-size-t: var(\n    --scroll-fade-t-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-mask: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--scroll-fade-t, 0px),\n    #000 100%\n  );\n  -webkit-mask-image: var(--scroll-fade-mask);\n  mask-image: var(--scroll-fade-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-t 1ms ease-in-out;\n    animation-timeline: scroll(self y);\n    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-t: var(--_scroll-fade-size-t);\n  }\n}\n\n@utility scroll-fade-b {\n  --_scroll-fade-size-b: var(\n    --scroll-fade-b-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-mask: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 calc(100% - var(--scroll-fade-b, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-image: var(--scroll-fade-mask);\n  mask-image: var(--scroll-fade-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-b 1ms ease-in-out;\n    animation-timeline: scroll(self y);\n    animation-range: calc(\n        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))\n      )\n      100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-b: var(--_scroll-fade-size-b);\n  }\n}\n\n@utility scroll-fade-l {\n  --_scroll-fade-size-s: var(\n    --scroll-fade-s-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--scroll-fade-s, 0px),\n    #000 100%\n  );\n  -webkit-mask-image: var(--scroll-fade-mask);\n  mask-image: var(--scroll-fade-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-s 1ms ease-in-out;\n    animation-timeline: scroll(self x);\n    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-s: var(--_scroll-fade-size-s);\n  }\n}\n\n@utility scroll-fade-r {\n  --_scroll-fade-size-e: var(\n    --scroll-fade-e-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-mask: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--scroll-fade-e, 0px)),\n    transparent 100%\n  );\n  -webkit-mask-image: var(--scroll-fade-mask);\n  mask-image: var(--scroll-fade-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-e 1ms ease-in-out;\n    animation-timeline: scroll(self x);\n    animation-range: calc(\n        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))\n      )\n      100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-e: var(--_scroll-fade-size-e);\n  }\n}\n\n@utility scroll-fade-s {\n  --_scroll-fade-size-s: var(\n    --scroll-fade-s-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--scroll-fade-s, 0px),\n    #000 100%\n  );\n  &:where([dir=\"rtl\"], [dir=\"rtl\"] *) {\n    --scroll-fade-mask: linear-gradient(\n      to left,\n      transparent 0,\n      #000 var(--scroll-fade-s, 0px),\n      #000 100%\n    );\n  }\n  -webkit-mask-image: var(--scroll-fade-mask);\n  mask-image: var(--scroll-fade-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-s 1ms ease-in-out;\n    animation-timeline: scroll(self inline);\n    animation-range: 0 var(--scroll-fade-reveal, calc(var(--spacing) * 24));\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-s: var(--_scroll-fade-size-s);\n  }\n}\n\n@utility scroll-fade-e {\n  --_scroll-fade-size-e: var(\n    --scroll-fade-e-size,\n    var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))\n  );\n  --scroll-fade-mask: linear-gradient(\n    to right,\n    #000 0,\n    #000 calc(100% - var(--scroll-fade-e, 0px)),\n    transparent 100%\n  );\n  &:where([dir=\"rtl\"], [dir=\"rtl\"] *) {\n    --scroll-fade-mask: linear-gradient(\n      to left,\n      #000 0,\n      #000 calc(100% - var(--scroll-fade-e, 0px)),\n      transparent 100%\n    );\n  }\n  -webkit-mask-image: var(--scroll-fade-mask);\n  mask-image: var(--scroll-fade-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n\n  @supports (animation-timeline: scroll()) {\n    animation: scroll-fade-reveal-e 1ms ease-in-out;\n    animation-timeline: scroll(self inline);\n    animation-range: calc(\n        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))\n      )\n      100%;\n    animation-fill-mode: both;\n  }\n\n  @supports not (animation-timeline: scroll()) {\n    --scroll-fade-e: var(--_scroll-fade-size-e);\n  }\n}\n\n@utility scroll-fade-* {\n  --scroll-fade-size: calc(var(--spacing) * --value(integer));\n  --scroll-fade-size: --value([length], [percentage]);\n}\n\n@utility scroll-fade-t-* {\n  --scroll-fade-t-size: calc(var(--spacing) * --value(integer));\n  --scroll-fade-t-size: --value([length], [percentage]);\n}\n\n@utility scroll-fade-b-* {\n  --scroll-fade-b-size: calc(var(--spacing) * --value(integer));\n  --scroll-fade-b-size: --value([length], [percentage]);\n}\n\n@utility scroll-fade-s-* {\n  --scroll-fade-s-size: calc(var(--spacing) * --value(integer));\n  --scroll-fade-s-size: --value([length], [percentage]);\n}\n\n@utility scroll-fade-e-* {\n  --scroll-fade-e-size: calc(var(--spacing) * --value(integer));\n  --scroll-fade-e-size: --value([length], [percentage]);\n}\n\n@utility scroll-fade-none {\n  --scroll-fade-mask: none;\n}\n\n/* shimmer */\n@property --shimmer-angle {\n  syntax: \"<angle>\";\n  inherits: true;\n  initial-value: 20deg;\n}\n@property --shimmer-image {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --shimmer-text-fill {\n  syntax: \"*\";\n  inherits: false;\n}\n\n@theme inline {\n  @keyframes tw-shimmer {\n    from {\n      background-position: 100% 0;\n    }\n    to {\n      background-position: 0 0;\n    }\n  }\n}\n\n@utility shimmer {\n  --_spread: var(--shimmer-spread, calc(3ch + 40px));\n  --_base: currentColor;\n  --_highlight: var(\n    --shimmer-color,\n    oklch(from currentColor l c h / calc(alpha* 0.2))\n  );\n\n  background-image: var(\n    --shimmer-image,\n    linear-gradient(\n      calc(90deg + var(--shimmer-angle)),\n      var(--_base) calc(50% - var(--_spread)),\n      color-mix(in oklch, var(--_highlight), var(--_base) 50%)\n        calc(50% - var(--_spread) * 0.5),\n      var(--_highlight) 50%,\n      color-mix(in oklch, var(--_highlight), var(--_base) 50%)\n        calc(50% + var(--_spread) * 0.5),\n      var(--_base) calc(50% + var(--_spread))\n    )\n  );\n  background-repeat: no-repeat;\n  background-size: calc(200% + var(--_spread) * 2) 100%;\n  background-position: 0 0;\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);\n  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;\n\n  @variant dark {\n    --_highlight: var(\n      --shimmer-color,\n      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))\n    );\n  }\n\n  &:where([dir=\"rtl\"], [dir=\"rtl\"] *) {\n    animation-direction: reverse;\n  }\n}\n\n@utility shimmer-once {\n  animation-iteration-count: 1;\n}\n\n@utility shimmer-reverse {\n  animation-direction: reverse;\n}\n\n@utility shimmer-none {\n  --shimmer-image: none;\n  --shimmer-text-fill: currentColor;\n}\n\n@utility shimmer-color-* {\n  --shimmer-color: --value(--color, [color]);\n  --shimmer-color: color-mix(\n    in oklch,\n    --value(--color, [color]) calc(--modifier(integer) * 1%),\n    transparent\n  );\n}\n\n@utility shimmer-duration-* {\n  --shimmer-duration: calc(--value(integer) * 1ms);\n}\n\n@utility shimmer-spread-* {\n  --shimmer-spread: calc(var(--spacing) * --value(integer));\n  --shimmer-spread: --value([length], [percentage]);\n}\n\n@utility shimmer-angle-* {\n  --shimmer-angle: calc(--value(integer) * 1deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .shimmer {\n    animation: none;\n    background-image: none;\n    -webkit-text-fill-color: currentColor;\n  }\n}\n"
    }
  ],
  "css": {
    "@import \"../styles/shadcn-utilities.css\"": {}
  }
}