@robosophy/ui-react 1.0.0

package/dist/components/RsSidebar/index.css

@@ -0,0 +1,360 @@
+/* src/components/RsSidebar/RsSidebar.css */
+.rs-sidebar {
+  --rs-sidebar-background: var(--rs-color-surface-primary, #ffffff);
+  --rs-sidebar-border: var(--rs-color-stroke-default, #d1d1d1);
+  --rs-sidebar-color: var(--rs-color-text-primary, #000000);
+  --rs-sidebar-muted: var(--rs-color-text-secondary, #909090);
+  --rs-sidebar-active: var(--rs-color-text-button-tertiary, #48a0d4);
+  --rs-sidebar-hover: var(--rs-color-button-blue-surface, #e6f6fb);
+  --rs-sidebar-width-collapsed: 75px;
+  --rs-sidebar-width-expanded: 286px;
+  background: var(--rs-sidebar-background);
+  border-right: 1px solid var(--rs-sidebar-border);
+  box-sizing: border-box;
+  color: var(--rs-sidebar-color);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  font-family: var(--rs-font-family, "Inter", sans-serif);
+  font-size: 16px;
+  font-weight: 400;
+  gap: 52px;
+  height: 100%;
+  overflow: hidden;
+  transition: width 0.3s ease-in-out;
+  will-change: width;
+  width: var(--rs-sidebar-width-collapsed);
+}
+.rs-sidebar--pc {
+  --rs-sidebar-active: var(--rs-color-icon-project-pc, #014a9f);
+  --rs-sidebar-hover: var(--rs-color-darkblue-100, #e5ecf5);
+}
+.rs-sidebar--alta {
+  --rs-sidebar-active: var(--rs-color-icon-project-alta, #65ac1e);
+  --rs-sidebar-hover: var(--rs-color-green-100, #edf7e6);
+}
+.rs-sidebar--cc {
+  --rs-sidebar-active: var(--rs-color-icon-project-cc, #49a0d4);
+  --rs-sidebar-hover: var(--rs-color-blue-100, #e6f6fb);
+}
+.rs-sidebar--pog {
+  --rs-sidebar-active: var(--rs-color-icon-project-pog, #007c2f);
+  --rs-sidebar-hover: var(--rs-color-navygreen-100, #e5f1ea);
+}
+.rs-sidebar--cyo {
+  --rs-sidebar-active: var(--rs-color-icon-project-cyo, #49a0d4);
+  --rs-sidebar-hover: var(--rs-color-blue-100, #e6f6fb);
+}
+.rs-sidebar--expanded,
+.rs-sidebar--mobile-open {
+  overflow: visible;
+  width: var(--rs-sidebar-width-expanded);
+}
+.rs-sidebar__header {
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  gap: 10px;
+  justify-content: flex-start;
+  padding: 0;
+}
+.rs-sidebar__brand {
+  align-items: center;
+  display: flex;
+  color: var(--rs-sidebar-active);
+  flex: 1;
+  gap: 10px;
+  min-width: 0;
+  padding: 32px 24px;
+}
+.rs-sidebar__module-trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: flex-start;
+  font: inherit;
+  gap: 10px;
+  min-width: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 0;
+  text-align: left;
+  width: 100%;
+}
+.rs-sidebar__module-trigger:hover:not(:disabled),
+.rs-sidebar__module-trigger:active:not(:disabled) {
+  background: transparent;
+  color: inherit;
+}
+.rs-sidebar__module-trigger:focus-visible {
+  outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
+  outline-offset: 2px;
+}
+.rs-sidebar--expanded .rs-sidebar__module-chevron,
+.rs-sidebar--mobile-open .rs-sidebar__module-chevron {
+  margin-left: auto;
+}
+.rs-sidebar__module-trigger > .rs-icon:first-child {
+  margin-left: 0;
+}
+.rs-sidebar__brand > .rs-icon:first-child {
+  margin-left: 0;
+}
+.rs-sidebar__title,
+.rs-sidebar__item-label,
+.rs-sidebar__item-chevron,
+.rs-sidebar__module-chevron {
+  max-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: max-width 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  white-space: nowrap;
+}
+.rs-sidebar--expanded .rs-sidebar__title,
+.rs-sidebar--expanded .rs-sidebar__item-label,
+.rs-sidebar--expanded .rs-sidebar__item-chevron,
+.rs-sidebar--expanded .rs-sidebar__module-chevron,
+.rs-sidebar--mobile-open .rs-sidebar__title,
+.rs-sidebar--mobile-open .rs-sidebar__item-label,
+.rs-sidebar--mobile-open .rs-sidebar__item-chevron,
+.rs-sidebar--mobile-open .rs-sidebar__module-chevron {
+  max-width: 220px;
+  opacity: 1;
+}
+.rs-sidebar__title {
+  color: var(--rs-sidebar-color);
+  font-family: var(--rs-font-family, "Inter", sans-serif);
+  font-weight: 400;
+  line-height: 1;
+  text-overflow: ellipsis;
+}
+.rs-sidebar__module-menu.p-menu {
+  background: var(--rs-sidebar-background);
+  border: 1px solid var(--rs-sidebar-border);
+  border-radius: 4px;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
+  left: 16px;
+  min-width: calc(var(--rs-sidebar-width-expanded) - 32px);
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  top: 88px;
+  z-index: 20;
+}
+.rs-sidebar__module-menu .p-menu-list {
+  gap: 0;
+  padding: 0;
+}
+.rs-sidebar__module-option .p-menu-item-content {
+  color: var(--rs-sidebar-color);
+  border-radius: 0;
+}
+.rs-sidebar__module-option .p-menu-item-link {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  min-height: 38px;
+  padding: 10px 14px;
+}
+.rs-sidebar__module-option:not(.p-disabled) .p-menu-item-content:hover,
+.rs-sidebar__module-option--active .p-menu-item-content {
+  background: var(--rs-sidebar-hover);
+  color: var(--rs-sidebar-color);
+}
+.rs-sidebar__module-option--disabled .p-menu-item-content {
+  color: var(--rs-sidebar-muted);
+  cursor: not-allowed;
+}
+.rs-sidebar__module-option--disabled .p-menu-item-content:hover {
+  background: transparent;
+}
+.rs-sidebar__module-option.p-focus .p-menu-item-content {
+  background: var(--rs-sidebar-hover);
+  color: var(--rs-sidebar-color);
+}
+.rs-sidebar__module-option.p-focus .p-menu-item-link {
+  outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
+  outline-offset: -2px;
+}
+.rs-sidebar__header-button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--rs-color-icon-secondary, #000000);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  appearance: none;
+  -webkit-appearance: none;
+  min-height: 24px;
+  min-width: 24px;
+  padding: 2px;
+}
+.rs-sidebar .rs-sidebar__header-button:hover:not(:disabled),
+.rs-sidebar .rs-sidebar__header-button:active:not(:disabled) {
+  background: var(--rs-sidebar-hover);
+  color: var(--rs-color-icon-secondary, #000000);
+}
+.rs-sidebar__header-button:focus-visible,
+.rs-sidebar__item:focus-visible {
+  outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
+  outline-offset: -2px;
+}
+.rs-sidebar__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.rs-sidebar__nav {
+  flex: 1;
+  min-height: 0;
+}
+.rs-sidebar__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.rs-sidebar__item {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-right: 4px solid transparent;
+  box-sizing: border-box;
+  color: var(--rs-sidebar-active);
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  font: inherit;
+  font-weight: 300;
+  gap: 10px;
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 10px 24px;
+  text-align: left;
+  width: 100%;
+}
+.rs-sidebar .rs-sidebar__item:not(.rs-sidebar__item--footer):hover:not(:disabled),
+.rs-sidebar .rs-sidebar__item:not(.rs-sidebar__item--footer):active:not(:disabled) {
+  background: var(--rs-sidebar-hover);
+}
+.rs-sidebar__item:disabled {
+  color: var(--rs-sidebar-muted);
+  cursor: not-allowed;
+  opacity: 1;
+}
+.rs-sidebar .rs-sidebar__item--active {
+  background: var(--rs-sidebar-hover);
+  border-right-color: var(--rs-sidebar-active);
+}
+.rs-sidebar__footer {
+  align-items: center;
+  display: flex;
+  margin-top: 52px;
+}
+.rs-sidebar__item--footer {
+  color: var(--rs-sidebar-color);
+  padding: 32px 24px;
+}
+.rs-sidebar__item--footer .rs-icon {
+  color: inherit;
+}
+.rs-sidebar__item-icon {
+  flex: 0 0 auto;
+  color: var(--rs-sidebar-active);
+  margin-left: 0;
+  width: 24px;
+  height: 24px;
+}
+.rs-sidebar__brand .rs-icon {
+  width: 24px;
+  height: 24px;
+}
+.rs-sidebar__item-label {
+  color: var(--rs-sidebar-color);
+  font-family: var(--rs-font-family, "Inter", sans-serif);
+  min-width: 0;
+  text-overflow: ellipsis;
+}
+.rs-sidebar__item-chevron {
+  margin-left: auto;
+}
+.rs-sidebar--mobile-open {
+  border-right: 0;
+  bottom: 0;
+  gap: clamp(8px, 4vh, 52px);
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: 10000;
+}
+.rs-sidebar--mobile-open .rs-sidebar__module-menu {
+  left: 16px;
+  min-width: min(320px, calc(100% - 32px));
+  top: 88px;
+}
+.rs-sidebar--mobile-open .rs-sidebar__item {
+  font-size: 16px;
+  padding: 20px 24px;
+}
+.rs-sidebar--mobile-open .rs-sidebar__item--footer {
+  padding: 32px 24px;
+}
+
+/* src/components/RsIcon/RsIcon.css */
+.rs-icon {
+  align-items: center;
+  color: var(--rs-icon-color, currentColor);
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  height: var(--rs-icon-size, 24px);
+  justify-content: center;
+  user-select: none;
+  width: var(--rs-icon-size, 24px);
+}
+.rs-icon--interactive {
+  cursor: pointer;
+}
+.rs-icon--primary {
+  color: var(--rs-color-icon-primary, #48a0d4);
+}
+.rs-icon--secondary {
+  color: var(--rs-color-icon-secondary, #000000);
+}
+.rs-icon--success {
+  color: var(--rs-color-icon-success, #4EAE01);
+}
+.rs-icon--warning {
+  color: var(--rs-color-icon-warning, #FF9001);
+}
+.rs-icon--danger {
+  color: var(--rs-color-icon-danger, #d80115);
+}
+.rs-icon--inherit {
+  color: currentColor;
+}
+.rs-icon-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+.rs-icon__notification {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--rs-color-yellow-500, #ff9001);
+}

package/dist/components/RsSidebar/index.d.ts

@@ -0,0 +1,60 @@
+// AUTO-GENERATED FILE. DO NOT EDIT MANUALLY.
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type RsSidebarVariant = "pc" | "alta" | "cc" | "pog" | "cyo";
+type RsSidebarModule = {
+    text: string;
+    link: string;
+    active?: boolean;
+    disabled?: boolean;
+};
+type RsSidebarItem = {
+    id: string;
+    label: string;
+    icon?: string;
+    active?: boolean;
+    disabled?: boolean;
+    visible?: boolean;
+    children?: RsSidebarItem[];
+};
+type RsSidebarProps = {
+    items: RsSidebarItem[];
+    footerItems?: RsSidebarItem[];
+    modules?: RsSidebarModule[];
+    navigateOnModuleSelect?: boolean;
+    title?: string;
+    icon?: string;
+    expanded?: boolean;
+    expandOnHover?: boolean;
+    mobileOpen?: boolean;
+    ariaLabel?: string;
+    variant?: RsSidebarVariant;
+    onItemClick?: (item: RsSidebarItem) => void;
+    onCloseMobile?: () => void;
+    onExpandedChange?: (expanded: boolean) => void;
+    onModuleSelect?: (module: RsSidebarModule) => void;
+    header?: ReactNode | ((props: RsSidebarHeaderSlotProps) => ReactNode);
+    headerAction?: ReactNode | ((props: RsSidebarHeaderActionSlotProps) => ReactNode);
+    renderItem?: (item: RsSidebarItem, expanded: boolean) => ReactNode;
+    footer?: ReactNode | ((props: RsSidebarFooterSlotProps) => ReactNode);
+};
+type RsSidebarHeaderSlotProps = {
+    expanded: boolean;
+    activeParent: RsSidebarItem | null;
+    closeMobile: () => void;
+    goBack: () => void;
+};
+type RsSidebarHeaderActionSlotProps = {
+    activeParent: RsSidebarItem | null;
+    closeMobile: () => void;
+    goBack: () => void;
+};
+type RsSidebarFooterSlotProps = {
+    items: RsSidebarItem[];
+    expanded: boolean;
+};
+
+declare const RsSidebar: react.ForwardRefExoticComponent<RsSidebarProps & react.RefAttributes<HTMLElement>>;
+
+export { type RsSidebarFooterSlotProps, type RsSidebarHeaderActionSlotProps, type RsSidebarHeaderSlotProps, type RsSidebarItem, type RsSidebarModule, type RsSidebarProps, type RsSidebarVariant, RsSidebar as default };

package/dist/components/RsSidebar/index.js

@@ -0,0 +1,9 @@
+// AUTO-GENERATED FILE. DO NOT EDIT MANUALLY.
+import {
+  RsSidebar_default
+} from "../../chunk-AEWPQXHG.js";
+import "../../chunk-PEJOAJYL.js";
+import "../../chunk-D4ZW5VUU.js";
+export {
+  RsSidebar_default as default
+};