@kushagradhawan/kookie-ui 0.1.7 → 0.1.9

package/src/components/text.css

@@ -1,4 +1,5 @@
 .rt-Text {
+  font-family: var(--default-font-family);
   line-height: var(--line-height, var(--default-line-height));
   letter-spacing: var(--letter-spacing, inherit);
 

package/src/props/index.ts

@@ -12,6 +12,7 @@ export * from './leading-trim.prop.js';
 export * from './margin.props.js';
 export * from './padding.props.js';
 export * from './radius.prop.js';
+export * from './shadow.props.js';
 export * from './text-align.prop.js';
 export * from './text-wrap.prop.js';
 export * from './truncate.prop.js';
@@ -42,6 +43,7 @@ export * from '../components/grid.props.js';
 export * from '../components/heading.props.js';
 export * from '../components/hover-card.props.js';
 export * from '../components/icon-button.props.js';
+export * from '../components/image.props.js';
 export * from '../components/inset.props.js';
 export * from '../components/kbd.props.js';
 export * from '../components/link.props.js';

package/src/props/shadow.props.ts

@@ -0,0 +1,30 @@
+import type { PropDef, GetPropDefTypes } from './prop-def.js';
+
+const shadowValues = ['1', '2', '3', '4', '5', '6'] as const;
+
+const shadowPropDefs = {
+  /**
+   * Sets the CSS **box-shadow** property using design system shadow tokens.
+   * Supports shadow scale values and responsive objects.
+   *
+   * @example
+   * shadow="3"
+   * shadow={{ sm: '2', lg: '4' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+   */
+  shadow: {
+    type: 'enum',
+    className: 'rt-r-shadow',
+    values: shadowValues,
+    responsive: true,
+  },
+} satisfies {
+  shadow: PropDef<(typeof shadowValues)[number]>;
+};
+
+type ShadowProps = GetPropDefTypes<typeof shadowPropDefs>;
+
+export { shadowPropDefs };
+export type { ShadowProps };

package/styles.css

@@ -5375,6 +5375,7 @@
   }
 }
 .rt-Text {
+  font-family: var(--default-font-family);
   line-height: var(--line-height, var(--default-line-height));
   letter-spacing: var(--letter-spacing, inherit);
 }
@@ -10697,6 +10698,104 @@
     --icon-button-ghost-padding: var(--space-3);
   }
 }
+.rt-Image {
+  display: block;
+  object-fit: var(--object-fit);
+  box-shadow: var(--box-shadow);
+  border-radius: max(var(--radius-4), var(--radius-full));
+  transition: var(--transition-button);
+}
+.rt-Image:where(:any-link, button, label) {
+  cursor: pointer;
+}
+@media (hover: hover) {
+  .rt-Image:where(:any-link, button, label):where(:hover) {
+    transform: scale(1.02);
+    box-shadow: var(--box-shadow, var(--shadow-2)), 0 0 0 1px var(--gray-a4);
+  }
+}
+.rt-Image:where(:any-link, button, label):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.rt-Image:where(:any-link, button, label):where(:active) {
+  transform: scale(0.98);
+}
+.rt-variant-blur {
+  position: relative;
+  display: inline-block;
+  --blur-filter: blur(16px) saturate(1.5);
+  --blur-opacity: 0.5;
+  --blur-offset-y: 8px;
+  --blur-offset-x: 0;
+}
+.rt-variant-blur:where(:any-link, button, label) {
+  cursor: pointer;
+  transition: var(--transition-button);
+}
+@media (hover: hover) {
+  .rt-variant-blur:where(:any-link, button, label):where(:hover) {
+    transform: scale(1.02);
+  }
+}
+.rt-variant-blur:where(:any-link, button, label):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.rt-variant-blur:where(:any-link, button, label):where(:active) {
+  transform: scale(0.98);
+}
+.rt-variant-blur:where(:any-link, button, label) .rt-Image {
+  cursor: inherit;
+  transform: none !important;
+  outline: none !important;
+  box-shadow: var(--box-shadow) !important;
+}
+.rt-Image--blur-bg {
+  position: absolute;
+  top: var(--blur-offset-y, 8px);
+  left: var(--blur-offset-x, 0);
+  filter: var(--blur-filter);
+  opacity: var(--blur-opacity);
+  z-index: -1;
+}
+.rt-Image--blur {
+  position: relative;
+  z-index: 1;
+}
+.rt-r-fit-cover {
+  --object-fit: cover;
+}
+.rt-r-fit-contain {
+  --object-fit: contain;
+}
+.rt-r-fit-fill {
+  --object-fit: fill;
+}
+.rt-r-fit-scale-down {
+  --object-fit: scale-down;
+}
+.rt-r-fit-none {
+  --object-fit: none;
+}
+.rt-r-shadow-1 {
+  --box-shadow: var(--shadow-1);
+}
+.rt-r-shadow-2 {
+  --box-shadow: var(--shadow-2);
+}
+.rt-r-shadow-3 {
+  --box-shadow: var(--shadow-3);
+}
+.rt-r-shadow-4 {
+  --box-shadow: var(--shadow-4);
+}
+.rt-r-shadow-5 {
+  --box-shadow: var(--shadow-5);
+}
+.rt-r-shadow-6 {
+  --box-shadow: var(--shadow-6);
+}
 .rt-Inset {
   box-sizing: border-box;
   --margin-top: 0px;