@uniai-fe/uds-primitives 0.3.4 → 0.3.6

package/dist/styles.css

@@ -160,6 +160,19 @@
   --color-surface-strong,
   var(--color-cool-gray-20)
   );
+  --carousel-gap: var(--spacing-gap-5);
+  --carousel-inside-button-offset: var(--spacing-padding-2);
+  --carousel-control-button-size: var(--theme-size-medium-2);
+  --carousel-control-button-active: var(--color-cool-gray-20);
+  --carousel-control-button-disabled: var(--color-cool-gray-85);
+  --carousel-control-button-z-index: 50;
+  --carousel-control-button-padding-inline: var(--spacing-padding-5);
+  --carousel-control-button-gap: var(--spacing-gap-2);
+  --carousel-control-button-label-padding-prev: var(--spacing-padding-7);
+  --carousel-control-button-label-padding-next: var(--spacing-padding-7);
+  --carousel-button-label-color: var(--color-common-100);
+  --carousel-button-label-disabled-color: var(--color-label-neutral);
+  --carousel-button-label-font-size: var(--font-label-medium-size);
   --theme-checkbox-frame-size-medium: 20px;
   --theme-checkbox-frame-size-large: 24px;
   --theme-checkbox-indicator-size-medium: 16px;
@@ -509,6 +522,7 @@
   );
   --table-grid-row-highlight-background-color: rgba(229, 238, 255, 0.52);
   --table-cell-background-color: var(--color-surface-static-white);
+  --table-cell-content-gap: var(--spacing-gap-2);
   --table-line-cell-height-head: 44px;
   --table-line-cell-height-body: 56px;
   --table-grid-cell-height: 48px;
@@ -1410,6 +1424,104 @@
 
 
 
+.carousel-container {
+  width: 100%;
+}
+
+.carousel-control {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--carousel-gap);
+}
+.carousel-control[data-button-placement=inside] {
+  position: relative;
+  gap: 0;
+}
+.carousel-control[data-button-placement=inside] .carousel-move-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.carousel-control[data-button-placement=inside] .carousel-prev-button {
+  left: var(--carousel-inside-button-offset);
+}
+.carousel-control[data-button-placement=inside] .carousel-next-button {
+  right: var(--carousel-inside-button-offset);
+}
+
+.carousel-viewport {
+  width: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x proximity;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.carousel-viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.carousel-track {
+  display: flex;
+  gap: var(--carousel-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  scroll-behavior: smooth;
+}
+.carousel-track > * {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.carousel-item[data-carousel-focus=true] {
+  z-index: 1;
+}
+
+.carousel-move-button {
+  min-width: var(--carousel-control-button-size);
+  height: var(--carousel-control-button-size);
+  border-radius: calc(var(--carousel-control-button-size) / 2);
+  padding: 0 var(--carousel-control-button-padding-inline);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--carousel-control-button-gap);
+  cursor: pointer;
+  background: var(--carousel-control-button-active);
+  z-index: var(--carousel-control-button-z-index);
+}
+.carousel-move-button:disabled {
+  cursor: default;
+  background: var(--carousel-control-button-disabled);
+}
+.carousel-move-button:disabled .carousel-button-label {
+  color: var(--carousel-button-label-disabled-color);
+}
+.carousel-move-button.label-padding-prev {
+  padding-right: var(--carousel-control-button-label-padding-prev);
+}
+.carousel-move-button.label-padding-next {
+  padding-left: var(--carousel-control-button-label-padding-next);
+}
+
+.carousel-move-button-icon {
+  display: flex;
+  margin: 0;
+}
+
+.carousel-button-label {
+  font-size: var(--carousel-button-label-font-size);
+  font-weight: 400;
+  line-height: 1em;
+  color: var(--carousel-button-label-color);
+}
+
+
+
 .checkbox {
   display: inline-flex;
   align-items: center;
@@ -3983,6 +4095,7 @@ figure.chip {
   height: 100%;
   justify-content: flex-start;
   box-sizing: border-box;
+  gap: var(--table-cell-content-gap);
   padding-inline: var(--table-cell-padding-inline);
   padding-block: var(--table-cell-padding-block);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -53,7 +53,8 @@
     "module:typecheck": "pnpm typecheck",
     "module:build": "pnpm build",
     "design-primitives:build": "pnpm run build",
-    "design-primitives:dev": "pnpm run dev"
+    "design-primitives:dev": "pnpm run dev",
+    "publish:public": "bash ../../../scripts/npm-publish.sh"
   },
   "peerDependencies": {
     "@mantine/core": "^8",

package/src/components/carousel/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCarousel } from "../markup/Provider";
+export { useCarouselProviderController } from "./useContext";