@jixic/react-ui 0.1.0 → 0.1.1

package/dist/styles.css

@@ -96,6 +96,12 @@
 
 .ui-button:focus-visible,
 .ui-input:focus-visible,
+.ui-textarea:focus-visible,
+.ui-select:focus-visible,
+.ui-checkbox:focus-visible,
+.ui-radio:focus-visible,
+.ui-switch-input:focus-visible + .ui-switch-track,
+.ui-tab:focus-visible,
 .ui-modal-close:focus-visible {
   box-shadow: var(--ui-focus-ring);
   outline: none;
@@ -103,7 +109,11 @@
 
 .ui-button:disabled,
 .ui-button[data-loading="true"],
-.ui-input:disabled {
+.ui-input:disabled,
+.ui-checkbox:disabled,
+.ui-radio:disabled,
+.ui-switch-input:disabled + .ui-switch-track,
+.ui-tab:disabled {
   cursor: not-allowed;
   opacity: 0.62;
 }
@@ -201,6 +211,125 @@
   color: var(--ui-color-danger);
 }
 
+.ui-textarea {
+  min-height: 6rem;
+  resize: vertical;
+}
+
+.ui-select {
+  appearance: none;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--ui-color-muted-foreground) 50%),
+    linear-gradient(135deg, var(--ui-color-muted-foreground) 50%, transparent 50%);
+  background-position:
+    calc(100% - 1rem) 50%,
+    calc(100% - 0.7rem) 50%;
+  background-repeat: no-repeat;
+  background-size:
+    0.32rem 0.32rem,
+    0.32rem 0.32rem;
+  padding-right: 2.25rem;
+}
+
+.ui-choice-field,
+.ui-radio-group {
+  border: 0;
+  display: grid;
+  gap: var(--ui-space-2);
+  margin: 0;
+  padding: 0;
+}
+
+.ui-choice,
+.ui-switch {
+  align-items: flex-start;
+  color: var(--ui-color-foreground);
+  display: flex;
+  font-family: var(--ui-font-family);
+  gap: var(--ui-space-3);
+}
+
+.ui-choice {
+  cursor: pointer;
+}
+
+.ui-choice-copy {
+  display: grid;
+  gap: var(--ui-space-1);
+}
+
+.ui-choice-label {
+  font-size: var(--ui-font-size-md);
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.ui-choice-description {
+  color: var(--ui-color-muted-foreground);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+
+.ui-checkbox,
+.ui-radio {
+  accent-color: var(--ui-color-primary);
+  height: 1rem;
+  margin: 0.175rem 0 0;
+  width: 1rem;
+}
+
+.ui-radio-options {
+  display: grid;
+  gap: var(--ui-space-2);
+  margin-top: var(--ui-space-2);
+}
+
+.ui-switch {
+  align-items: center;
+  cursor: pointer;
+  justify-content: space-between;
+}
+
+.ui-switch-input {
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.ui-switch-track {
+  align-items: center;
+  background: var(--ui-color-border);
+  border-radius: 999px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 1.5rem;
+  padding: 0.125rem;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+  width: 2.75rem;
+}
+
+.ui-switch-thumb {
+  background: var(--ui-color-surface);
+  border-radius: 999px;
+  box-shadow: 0 1px 2px rgb(15 23 42 / 22%);
+  display: block;
+  height: 1.25rem;
+  transition: transform 120ms ease;
+  width: 1.25rem;
+}
+
+.ui-switch-input:checked + .ui-switch-track {
+  background: var(--ui-color-primary);
+}
+
+.ui-switch-input:checked + .ui-switch-track .ui-switch-thumb {
+  transform: translateX(1.25rem);
+}
+
 .ui-card {
   background: var(--ui-color-surface);
   border: 1px solid var(--ui-color-border);
@@ -422,3 +551,115 @@
   margin: 0;
   max-width: 42rem;
 }
+
+.ui-tabs {
+  color: var(--ui-color-foreground);
+  display: grid;
+  font-family: var(--ui-font-family);
+  gap: var(--ui-space-4);
+  width: 100%;
+}
+
+.ui-tab-list {
+  align-items: center;
+  border-bottom: 1px solid var(--ui-color-border);
+  display: flex;
+  gap: var(--ui-space-2);
+  overflow-x: auto;
+}
+
+.ui-tab {
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  color: var(--ui-color-muted-foreground);
+  cursor: pointer;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-md);
+  font-weight: 700;
+  padding: var(--ui-space-3) var(--ui-space-2);
+}
+
+.ui-tab[aria-selected="true"] {
+  border-bottom-color: var(--ui-color-primary);
+  color: var(--ui-color-foreground);
+}
+
+.ui-tab-panel {
+  line-height: var(--ui-line-height);
+}
+
+.ui-avatar {
+  align-items: center;
+  background: var(--ui-color-muted);
+  border: 1px solid var(--ui-color-border);
+  border-radius: 999px;
+  color: var(--ui-color-foreground);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--ui-font-family);
+  font-weight: 800;
+  justify-content: center;
+  overflow: hidden;
+  text-transform: uppercase;
+}
+
+.ui-avatar-sm {
+  font-size: 0.75rem;
+  height: 2rem;
+  width: 2rem;
+}
+
+.ui-avatar-md {
+  font-size: var(--ui-font-size-sm);
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.ui-avatar-lg {
+  font-size: var(--ui-font-size-md);
+  height: 3.25rem;
+  width: 3.25rem;
+}
+
+.ui-avatar-image {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.ui-tooltip {
+  display: inline-flex;
+  position: relative;
+}
+
+.ui-tooltip-content {
+  background: var(--ui-color-foreground);
+  border-radius: var(--ui-radius-md);
+  bottom: calc(100% + var(--ui-space-2));
+  color: var(--ui-color-background);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  font-weight: 600;
+  left: 50%;
+  line-height: 1.35;
+  max-width: 16rem;
+  opacity: 0;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  pointer-events: none;
+  position: absolute;
+  transform: translateX(-50%) translateY(0.25rem);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+  visibility: hidden;
+  width: max-content;
+  z-index: 20;
+}
+
+.ui-tooltip:hover .ui-tooltip-content,
+.ui-tooltip:focus-within .ui-tooltip-content {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+  visibility: visible;
+}

package/package.json

@@ -1,8 +1,36 @@
 {
   "name": "@jixic/react-ui",
-  "version": "0.1.0",
-  "description": "A production-ready React UI component library for web and Next.js applications.",
+  "version": "0.1.1",
+  "description": "Accessible React UI components, TypeScript primitives, design tokens, and CSS themes for React and Next.js web applications.",
   "license": "MIT",
+  "homepage": "https://github.com/virendrapsamrat/-jixic-react-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/virendrapsamrat/-jixic-react-ui.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/virendrapsamrat/-jixic-react-ui/issues"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "ui-library",
+    "react-ui",
+    "react-components",
+    "components",
+    "component-library",
+    "accessible-components",
+    "a11y",
+    "design-system",
+    "headless-ui",
+    "css-variables",
+    "theme",
+    "typescript",
+    "nextjs",
+    "next-js",
+    "frontend"
+  ],
   "type": "module",
   "sideEffects": [
     "**/*.css",